Design system
Foundations
Logo
Symbol · Dark on light
Symbol · Light on dark
Wordmark · Dark on light
Wordmark · Light on dark
Placeholders until the Arché marks exist. Keep the symbol and wordmark as separate assets rather than one lockup, with dark ink on light paper and light ink on dark paper.
Colour
Metanoia palette
--crimson
--salmon
--rose
--gold
--sage
Gold
--arche-gold-1
--arche-gold-2
--arche-gold-3
--gold
--arche-gold-4
Surfaces
--paper
--raised
--shade
--rule
--rule-strong
Surface hierarchy
Raised surface
Content sits on a quiet, distinct panel.
Ink
--ink
--ink-2
--ink-3
Text hierarchy
Primary text carries the main message.
Secondary text provides supporting detail.
Tertiary text is reserved for quiet metadata.
Links & focus
--link
--focus
Link
Explore the design system.
Keyboard focus
Accent · Crimson
--accent
--accent-dark
--accent-wash
--accent-fill
Branded notice
A considered update
Use the accent wash to give branded messages a soft background.
Accent fillPrimary button
--button-primary-fill
--button-primary-text
--button-primary-fill-hover
Primary action
Hover the button to preview the Sea Sage 7 state.
Status
--success
--warning
--error
--info
Success
Changes saved
Warning
Review these details
Error
We could not save your changes
Info
A new update is available
Accent 2 · Gold
--accent-2
--accent-2-dark
--accent-2-wash
--accent-2-fill
Secondary action
A quieter alternative to the primary action.
Pastels
--parchment
--blush
--mint-pale
--fog
--blue-gray
--pink-mist
Semantic
--arche-white
--arche-rose-1
--arche-rose-2
--arche-rose-3
--rose
--arche-rose-4
--arche-crimson-1
--arche-crimson-2
--arche-crimson-3
--crimson
--arche-crimson-4
--red-vivid
--red-rose
--coral
--coral-soft
--light-coral
--salmon-pink
--rose-soft
--pink-coral
--tickle-pink
--persian-pink
--flame
--melon
--coral-pink
--peach
--sunflower
--jasmine
--sage-gold
--straw
--pistachio
--mindaro
--lime-soft
--light-green
--aquamarine
--mint-bright
--teal
--electric-blue
--navy
--indigo-deep
--tropical-indigo
--violet
--lilac
--heliotrope-soft
--violet-light
--orchid
--arche-plum-4
--wine
--plum-dark
--midnight
--arche-black-1
--arche-black-2
--arche-black-3
--arche-black-4
--arche-black
Seashell
--seashell-1
--seashell-2
--seashell-3
--seashell-4
--seashell-5
Tiffany blue
--tiffany-blue-1
--tiffany-blue-2
--tiffany-blue-3
--tiffany-mint
Rainbow
--rainbow-1
--rainbow-2
--rainbow-3
--rainbow-4
--rainbow-5
--rainbow-6
--rainbow-7
--rainbow-8
--rainbow-9
Isabelline
--arche-white
--isabelline-7
--isabelline-6
--isabelline-5
--isabelline-4
--isabelline-3
--isabelline-2
--isabelline-1
Sea Sage
--arche-white
--sea-sage-7
--arche-sage-1
--sea-sage-6
--arche-mist
--arche-sage-2
--sea-sage-5
--sea-sage-4
--arche-sage-3
--arche-mist-1
--sea-sage-3
--sea-sage-2
--sage
--arche-mist-2
--arche-sage-4
--arche-mist-3
--arche-mist-4
Typography
Font pairing
Main · Gruppo
Clear ideas, carefully made.
Supporting text · Main font
Good typography gives every detail room to breathe. Compare a distinctive heading with a readable supporting voice.
Main font · Content
Arché
Quiet, precise, tactile. Content leads, with comfortable reading space, fine separators and restrained shadow.
Space Mono · Labels and metadata
05 OCT 2026 · v0.1.0
Main font scale
Display
48 / 1 · Regular
Less, with intention.
Heading 1
30 / 36 · Regular
Clear thinking. Considered work.
Heading 2
20 / 28 · Regular
A shared language for every app.
Heading 3
16 / 24 · Regular
Section heading
Body
14 / 28 · Regular
Give content room to breathe. Use a readable body size, a comfortable line length, and deliberate space between ideas.
Small
12 / 16 · Regular
Supporting text provides context without competing with the main message.
Space Mono scale
Mono
12 / 16
INV-2026-00042 · R 12,400.00
Metadata
10 · Tracked
DOCUMENT 001 · READY FOR REVIEW · EDITION 01
Label
9 · Uppercase · 0.7px
Field label
Spacing
Tailwind's 4px scale. Prefer these steps over arbitrary values.
0.52px
14px
28px
312px
416px
624px
832px
1040px
1248px
1664px
2080px
2496px
Gaps
Space between items grows with how loosely they relate.
gap-1
4px · Icon and label
gap-2
8px · Tight groups, badges
gap-3
12px · Buttons in a row, grid cards
gap-6
24px · Form fields, related blocks
gap-12
48px · Page sections
Radius
Small control radii. Surfaces stay nearly square.
rounded-selector
--radius-selector
Checkboxes, compact controls
rounded-field
--radius-field
Inputs, menu rows
rounded-button
--radius-button
Buttons
rounded-box
--radius-box
Cards, menus, modals
rounded-full
9999px
Badges, avatars, status dots
Borders
Fine 1px rules separate content. Avoid heavy card framing.
border-rule
--rule · Separators, field boundaries
border-rule-strong
--rule-strong · Buttons, stronger control edges
outline-accent
--accent · 2px · Focus
Elevation
Shadow is restrained. Most surfaces sit flat on paper.
None
Default. Let rules do the work
shadow-surface
Cards, raised panels
Motion
Brief colour transitions clarify state changes. No decorative spinning or scaling. Hover a row to compare.
140ms · Hover, colour changes
200ms · Toggles, small reveals
300ms · Panels, drawers
Breakpoints
Mobile first. Layouts must work at phone width with no horizontal scroll.
base0
Phones, 16px side gutter
sm640px
Large phones
md768px
Tablets, sidebar appears
lg1024px
Laptops
xl1280px
Desktops
Additional tokens
Supporting label colours, font-family aliases and easing used across the system.
Accent label
--accent-text
Secondary accent label
--accent-2-text
--font-main · --sans
Arché · Main font
--mono
ARCHÉ · 05 OCT 2026 · 0123456789
--ease
Hover the track to see the easing curve in motion.