PopCandi · Design system

Style guide

Apple Human Interface Guidelines is primary. Material Design 3 is secondary. If they conflict, Apple wins. System SF Pro stack only. No Syne, no DM Sans, no other systems.

Apple Design Material 3 Back to site

Typography

Font stack: -apple-system, BlinkMacSystemFont, SF Pro Text / Display, Segoe UI, Roboto (fallback), Helvetica, Arial. Sizes follow Apple Dynamic Type (Large). Role names follow Material 3.

Display Large 34 · 700 · hero

PopCandi

Display 28 · 700 · page title

Bring ideas to life

Headline 22 · 600

Section title

Title 20 · 600

Card or panel title

Body 17 · 400

Default reading size for Melbourne studio copy and project notes.

Callout 16 · 400

Emphasized supporting line.

Subhead 15 · 400

Secondary supporting copy.

Footnote 13 · 400

Meta, captions, timestamps.

Caption 12 · 400

Fine print and labels.

Caption 2 11 · 400

Minimum legal or meta (11 pt).

Spacing

8 pt base grid. 4 pt half-step only for optical fixes. Hit targets ≥ 44×44 pt.

--space-1

4 px

--space-2

8 px

--space-3

12 px

--space-4

16 px

--space-5

20 px

--space-6

24 px

--space-8

32 px

--space-10

40 px

--space-12

48 px

--space-16

64 px

--space-20

80 px

--space-24

96 px

Minimum tap / click target (44 pt)

Colour roles

Material role names. Values follow Apple dark / light appearances. Body text contrast target ≥ 4.5:1. Australian spelling in copy; token names stay English CSS.

surface var(--surface)

surface-container var(--surface-container)

surface-container-high var(--surface-container-high)

on-surface var(--on-surface)

on-surface-variant var(--on-surface-variant)

primary var(--primary)

primary-container var(--primary-container)

secondary var(--secondary)

secondary-container var(--secondary-container)

outline var(--outline)

outline-variant var(--outline-variant)

error var(--error)

Shape

sm 8

md 12

lg 16

xl 20

Components

Primary Secondary Outline

Focus rings stay visible. Prefer system-like controls over custom chrome. Motion ≤ 350ms, ease-out, respect reduced motion.

Standing rules

Primary source: Apple Design / HIG. Secondary: Material 3. Conflict → Apple.
Any design doubt: search those two sites first.
Same fonts, structure, and approach as those systems. Nothing else.
Australian English. No em dashes.
One clear H1 per page. Do not skip heading levels for style.