Arché

Design system

Foundations

Logo

Symbol

Symbol · Dark on light

Symbol

Symbol · Light on dark

Wordmark

Wordmark · Dark on light

Wordmark

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.

Subtle shaded area

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 fill

Primary 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 font

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.5

2px

1

4px

2

8px

3

12px

4

16px

6

24px

8

32px

10

40px

12

48px

16

64px

20

80px

24

96px

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

shadow-menu

Dropdowns, popovers, modals

Motion

Brief colour transitions clarify state changes. No decorative spinning or scaling. Hover a row to compare.

--duration-fast

140ms · Hover, colour changes

--duration-base

200ms · Toggles, small reveals

--duration-slow

300ms · Panels, drawers

Breakpoints

Mobile first. Layouts must work at phone width with no horizontal scroll.

base

0

Phones, 16px side gutter

sm

640px

Large phones

md

768px

Tablets, sidebar appears

lg

1024px

Laptops

xl

1280px

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.