Unite your wealth | Invest, KiwiSaver, Crypto, Spend, Save, Insure—Sharesies New Zealand

Palette

Colors

primary

#DE006F

4.84 on white · 4.34 on black · 330° 100% 44%

secondary

#000000

21 on white · 1 on black · 0° 0% 0%

accent

#E50072

4.59 on white · 4.57 on black · 330° 100% 45%

Token Roles 7 tokens

background

#FFFFFF · 21:1 vs black

surface

#FFFFFF · 21:1 vs black

text-primary

#000000 · 21:1 vs white

text-secondary

#A6A6A6 · 2.43:1 vs white

on-primary

#FFFFFF · 21:1 vs black

on-secondary

#FFFFFF · 21:1 vs black

on-accent

#FFFFFF · 21:1 vs black

Detected Palette 11 colors by frequency in source CSS

#FFFFFF

used 180× · 0° 0% 100%

#000000

used 72× · 0° 0% 0%

#DE006F

used 45× · 330° 100% 44%

#A6A6A6

used 36× · 0° 0% 65%

#E50072

used 27× · 330° 100% 45%

#EA4335

used 18× · 5° 81% 56%

#FBBC04

used 18× · 45° 97% 50%

#4285F4

used 18× · 217° 89% 61%

#34A853

used 18× · 136° 53% 43%

#2B5797

used 9× · 216° 56% 38%

#2B0A3D

used 9× · 279° 72% 14%

Tokens in Context

Components

card

background{colors.surface}

radius12px

button-primary

background{colors.primary}

radius12px

Proof

Live Preview

Complete Reference

Full design.md Specification

Design Specification — Unite your wealth | Invest, KiwiSaver, Crypto, Spend, Save, Insure—Sharesies New Zealand

Field	Value
Site / Project	https://sharesies.co.nz
Analyzed on	2026-08-22
Analysis mode	Automated code extraction (no AI)

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#E50072). All type is set in "system-ui", system-ui, sans-serif.

Logo asset(s): https://sharesies.co.nz/_next/image?url=%2Fimages%2Ffooter%2Fshielded-logo.png&w=128&q=75

Color System

Detected palette (by frequency)

Hex	RGB	HSL	Count
`#FFFFFF`	255, 255, 255	0° 0% 100%	180
`#000000`	0, 0, 0	0° 0% 0%	72
`#DE006F`	222, 0, 111	330° 100% 44%	45
`#A6A6A6`	166, 166, 166	0° 0% 65%	36
`#E50072`	229, 0, 114	330° 100% 45%	27
`#EA4335`	234, 67, 53	5° 81% 56%	18
`#FBBC04`	251, 188, 4	45° 97% 50%	18
`#4285F4`	66, 133, 244	217° 89% 61%	18
`#34A853`	52, 168, 83	136° 53% 43%	18
`#2B5797`	43, 87, 151	216° 56% 38%	9
`#2B0A3D`	43, 10, 61	279° 72% 14%	9

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Token	Hex	RGB	HSL
`--color-primary`	`#DE006F`	222, 0, 111	330° 100% 44%
`--color-accent`	`#E50072`	229, 0, 114	330° 100% 45%
`--color-background`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-surface`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-text-primary`	`#000000`	0, 0, 0	0° 0% 0%
`--color-secondary`	`#000000`	0, 0, 0	0° 0% 0%
`--color-text-secondary`	`#A6A6A6`	166, 166, 166	0° 0% 65%
`--color-on-primary`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-on-secondary`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-on-accent`	`#FFFFFF`	255, 255, 255	0° 0% 100%

Typography

Primary typeface: system-ui — stack: "system-ui", system-ui, sans-serif

Font stacks (most used first)

Font sizes (by frequency)

Size	Count

Spacing

Value	Count

Borders & Radius

Radius	Count

CTA labels found on page

What we offer
Overview
Transfer your portfolio
Ways to invest
Learn
Invest

Source Design Tokens (CSS custom properties)

:root {
  --background-colour: #ffffff;
  --foreground-colour: #000000"><p class="StatsComponentV2_text__n7ugm"><span class="StatsComponentV2_value__G26S3"><strong>$12 billion+</strong><span> Wealth trusted on Sharesies</span></span></p></li><li class="StatsComponentV2_item__Poudj" style="--background-colour:#ffffff;
}

Do's and Don'ts

Do

Do reserve the accent #E50072 for interactive highlights and key moments — it is used sparingly on the source page.
Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.

Don't

Don't introduce colors outside the detected palette — every hue above was found in the source.
Don't add gradients — the source page uses flat fills exclusively.
Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-primary: #DE006F;
  --color-accent: #E50072;
  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #A6A6A6;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --font-sans: "system-ui", system-ui, sans-serif;
  --container-max: 1024px;
}