Earl Kiu dashboard

Design system

Every token and component, taken from the live earlkiu.com and portrait.earlkiu.com. Client page, gallery, emails and PDFs first. The written record is earlkiu dashboard/design-system.md; this page shows it.

Checking font…

Color

roles below

n100Paper White

n200Highlight

n300Light Mid

n400Mid Grey

n500Dark Mid

n600Deep Shadow

n700Film Black

Ground: n100 for the client page and gallery.
Primary text: n700. Body text may use n600.
Labels: n400, as on the live sites. 3.96:1 fails AA at 10px; accepted.
Small text: n500 — notes, helper text, fine print.
n400: Labels, or text at 18px+ regular / 14px+ bold.
n300: Never text on n100. Link underline at rest only.
Rules: n200, 1px.
Headings: n700.
Primary button: n700 fill, n100 text.

Contrast

WCAG AA · 4.5 text · 3.0 at 18px+

n700 on n100

Choose your six

16.8 · pass

n600 on n100

Choose your six

14.9 · pass

n500 on n100

Choose your six

9.5 · pass · small text

n400 on n100

Choose your six

3.96 · labels · fails at 10px, accepted

n300 on n100

Choose your six

1.98 · fail · never

n100 on n700

Choose your six

16.8 · pass

n300 on n700

Choose your six

8.5 · pass

n400 on n700

Choose your six

4.25 · fail small

n500 on n700

Choose your six

1.77 · fail

Type

scale A · one family

display · clamp 30–56 · 700 · 1.05 · −0.02em · one per surface

Earl Kiu

heading · clamp 24–36 · 700 · 1.1 · −0.02em · page heading

Choose your six

title · 22 (18 mobile) · 700 · 1.1 · −0.01em · item titles

With makeup artist

lead · 18 · 600 · 1.5 · one line under a heading

Your gallery is ready.

body · 16 · 400 · 1.6 · running text

Six images are included. Any other image you mark can be added at RM200.

small · 13 · 400 · 1.6 · n500 · notes, fine print

Downloads open once everything marked is paid.

action · 11 · 600 · 0.16em · upper · buttons, action links

Confirm my six

label · 10 · 400 · 0.18em · upper · n400 · labels, metadata

Session date

In use

Your gallery

Choose your six

Twelve images are in your gallery.

Six are included. Any other image you mark can be added at RM200, and the total shows once, when you confirm.

Open for 14 days from today.

Start choosing

Copy is placeholder.

Spacing and layout

three tiers

Core · default

Situational · recorded uses only

Section label to first field

Field to field

Nav top, desktop

Layout · by name, page level only

Breakpoint: 768px. Below is mobile. The only one.
gutter: 52px desktop · 24px mobile
measure: 620px · max width of a text column
side-nav: 220px · admin nav width
Two-column page: 960px max (About)
section: 120px desktop · 88px mobile
page-top: 160px desktop · 100px mobile
two-col-gap: 80px
Image grid: 3 columns · 2 on mobile · 3px gap · 3:4 crops
Radius: 0, everywhere
Borders: 1px only. No shadows.
Motion: Color and borders 0.3s ease · page fade 0.8–1.2s · image hover 1.03 over 0.6s
Links: 1px bottom border, 2px gap, n300 → n700 on hover
Footer: None

Layout · client page

column 620, left · gallery wide · brand-only header as live nav · 64 / rule / 64 between blocks (48 mobile)

Earl KiuKuala Lumpur, Malaysia

Your session

Choose your six

Text, steps, terms, amounts and actions sit in one column, max 620px, aligned left to the gutter.

Session details

Next block, after a 64 · rule · 64 break.

Your gallery

Header → page-top (160 / 100) → first block. Every block, gallery included, is split by 64 · rule · 64 (48 mobile). Gallery breaks out to full width inside the 52 / 24 gutter. Dashed line marks the 620 column.

Admin screens

side nav 220 · content full width

Earl Kiu

Sessions

Leads

Calendar

Settings

Sessions

Table, full width. Nav item styles and active state are §6.

Mobile: top bar, "Earl Kiu" left, a Menu action link right that opens the nav full screen.

Buttons and links

one button · lesser actions as action links

Rest column is live: hover it, tab to it. Other columns are forced.

RestHoverFocusDisabled Button Action linkChange date Change date

In useChange date

Text linkhello@earlkiu.com

Disabled and loading: nothing happens on hover, tap or click. Loading dots are the one motion exception; still with reduced motion. Focus ring is keyboard only.

Components that exist

as built on the sites

Label

n400, as live

Session date

Balance due

3.96:1 on n100 — below AA at 10px. Accepted. Comparison

Text link

hello@earlkiu.com Back to gallery

On n700 · live@earlkiu

Button

primary · n700 fill

Dashboard primary

Live · portrait, on n700

Decided set: see Buttons and links.

Field

text field

Dashboard · n100

Name

Focus

Instagram

Your handle, so Earl can see how you like to be photographed.

Check: this email is missing an @.

Start time · select

Name · disabled

Rule n400 at rest → n700 on focus. No placeholders; hints as helper text in small, 8px under the rule. Error: rule n700, message in the helper's place at n700 (wording placeholder).

Live · portrait form · rule 1.77:1 and label 4.25:1 fail

Name

Instagram

Checkbox

n700 fill, n100 tick

I've read the terms I've read the terms Disabled

Live: click, hover, tab. Hover and focus carried over from field and button.

Status label

text only · n400 settled · n700 needs action

PaidSigned Balance dueUnsigned

Table

rules between rows

Date	Item	Amount	Status
12 Nov	Retainer	RM900	Paid
26 Nov	Balance	RM900	Balance due

Values are placeholders.

Alert

left rule · words carry the meaning

Payment

The payment didn't go through. Nothing was charged and your marks are kept.

Try again

Gallery

Your gallery is ready.

Wording is placeholder.

Loading

dots for text · n200 tiles for images

Your session

...

Third tile shows an image that has arrived (fades in over 0.8s).

Empty state

one plain sentence

Your gallery

Your gallery opens here once the images are ready. You'll get an email.

Wording is placeholder.

Modal

n100 panel · n700 60% overlay

Add two images?

Your six are included. The two extras come to RM400.

Not now

Wording is placeholder.

Nav

live nav is the standard header

Earl KiuKuala Lumpur, Malaysia

Earl KiuKuala Lumpur, Malaysia · n500

Image grid

choose-six states not designed yet

People · 2026/08Collection title

People · 2025/08Collection title

People · 2025/05Collection title

Not built yet: the gallery's choose-six states (§7).

Where visual.md and the live sites disagree

live sites win

#	visual.md says	Live sites do	Dashboard
D1	Fixed H1–H6 scale; caption 11px · 0.05em	No fixed scale; labels 9–11px at 0.08–0.22em	Scale A
D2	Borders n300; cards on n200	Rules n200; no cards	Rules n200; no filled cards
D3	Heading accent n600	Headings n700	Headings n700
D4	Street both dark and light	Street is dark	Site only
D5	Content pages light	portrait.earlkiu.com is dark	Light ground
D6	No footer anywhere	Portrait has a footer	No footer
D7	Button n700 fill	n100 fill on n700	Inverse of the page: n700 on n100
D8	Body leading 1.6	1.6–1.75	1.6
D9	No spacing, radius, layout or motion	Values above	Live values
D10	Webflow / Lumos table	Hand-written HTML	Not used

visual.md itself is unchanged until the sites decision.