Design system · Version 1 · October 2026

The parts that build aparté.

The exact colours, type, spacing and parts behind the website, the store and the emails. Copy a value, build with it, and every page comes out the same.

Two typefacesLora for headings, Inter for the rest

One accentDeep teal, with Pause gold on Pause only

Light and darkBoth defined. Use the switch above

Checked for contrastEvery text pair at 4.5 to 1 or better

Concept brand for a case study. For the story and the rules in words, read the brand book.

01 · Logo

A lowercase wordmark with two small pause bars.

Use the light version on white and light tints, and the dark version on deep teal. Pause always shows “from aparté” beneath it.

Light

On white and light tints

Dark

On deep teal #0b2f31

Pause

Always with “from aparté”

Clear space and size

aaaa

Clear space on every side is the height of the letter “a”.
Minimum width is 96px. Below 48px, use the favicon.
Do not capitalise, recolour, tilt, add effects, or place it on a busy background.

02 · Colour

Deep teal, ink, and a lot of white.

Click any value to copy it. Components use the token name, never the hex, so light and dark both work.

Core

Buttons

Deep tealAccent

Text

InkText, dark panels

Decoration

AquaNever as text on white

Surface

MistQuiet panels

Soft

Teal softHover, tags

Hover

Teal hoverButton hover

Quiet text

MutedCaptions, notes

Borders

LineDividers, outlines

Three moments of the day

Morning

Morning tint

Midday

Midday tint

Night

Night tint

Pause only: the midday gold

Accent

Sun goldPause accents

Tint

Soft sunPause tints

Text

Deep goldGold as text

Gold lives on Pause only. Aparté pages stay teal.

Contrast, measured (WCAG)

Pair	Sample	Ratio	Use
Ink on white	Aa	14.3 : 1	Body text
Muted on white	Aa	7.5 : 1	Captions
Muted on mist	Aa	6.8 : 1	Captions on panels
White on deep teal	Aa	6.9 : 1	Buttons
Deep teal on white	Aa	6.9 : 1	Links, labels
Aqua on deep ink	Aa	7.0 : 1	Text on dark only
Aqua on white	Aa	2.1 : 1	Fails. Decoration only
Deep gold on soft sun	Aa	6.3 : 1	Pause text
Ink on sun gold	Aa	8.6 : 1	Text on gold

03 · Type

Lora for headings. Inter for everything else.

Both ship with the system as local font files. In email, fall back to Georgia and Arial.

AaAa

Lora: headings, weights 400 to 700, with italic. Inter: body and labels, weights 400, 500 and 600.

Scale

3xl · 3.5rem
--ap-fs-3xlOne minute.

2xl · 2.5rem
--ap-fs-2xlIn the middle of the day.

xl · 1.75rem
--ap-fs-xlA calm pause for your skin.

lg · 1.25rem
--ap-fs-lgPlain words. No big promises.

md · 1rem
--ap-fs-mdCalm, simple and honest, in three short moments a day.

sm · .875rem
--ap-fs-smConcept product for a case study. Not for sale.

xs · .75rem
--ap-fs-xsLabel, uppercase, spaced

Line height 1.15 for headings (--ap-lh-tight) and 1.55 for body (--ap-lh-body). Keep running text near 65 characters wide.

04 · Space, corners, shadow

Generous and soft.

An 8-point rhythm, rounded corners, and one quiet shadow.

--ap-s-14px

--ap-s-28px

--ap-s-312px

--ap-s-416px

--ap-s-524px

--ap-s-632px

--ap-s-748px

--ap-s-872px

8px
--ap-r-sm

14px
--ap-r-md

Pill
--ap-r-pill

Shadow · --ap-shadow

Minimum tap size is 44px (--ap-tap). Motion is 200ms (--ap-motion) and switches off when the viewer prefers reduced motion. Pause hero panels use a 20px corner (--pz-radius-hero).

05 · Parts

The pieces the site and store already use.

Each one is live and uses tokens only. Copy the code beside it.

Shop Pause The four small steps Shop

Buttons and linksPill shape, 44px or taller. One primary button per view.

.btn{min-height:var(--ap-tap);padding:0 28px;
 border-radius:var(--ap-r-pill);
 background:var(--ap-accent);color:var(--ap-on-accent);
 font:600 .98rem/1 var(--ap-font-body)}
.btn:hover{background:var(--ap-accent-hover)}

Pause

Midday serum · 1 fl oz (30 mL)

$28Concept

Product cardLabelled photo, name, descriptor and size. Price is an invented concept price.

.pcard{border:1px solid var(--ap-line);
 border-radius:var(--ap-r-md);overflow:hidden;
 box-shadow:var(--ap-shadow)}
.pcard img{aspect-ratio:4/5;object-fit:cover}
.pcard .b{padding:var(--ap-s-4)}

Morning

A calm start

Daybreak · coming soon

Midday

The Midday Reset

Pause from aparté

Night

Wind down

Dusk · coming soon

Moment tilesOne tint per moment of the day. Midday carries the Pause gold outline.

.m-am{background:var(--ap-morning)}
.m-md{background:var(--ap-midday);
 box-shadow:inset 0 0 0 1.5px var(--pz-sun)}
.m-pm{background:var(--ap-night)}

Toner

A cool, quiet reset between meetings.

Essence

A light layer for a long afternoon.

Small steps listNumber, name, one plain line. Ink rule above each step.

.step{display:grid;grid-template-columns:40px 1fr;
 gap:var(--ap-s-4);padding:var(--ap-s-4) 0;
 border-top:2px solid var(--ap-ink)}
.step .n{font-size:var(--ap-fs-xs);letter-spacing:.1em;
 color:var(--ap-accent);font-weight:600}

Cosmetic language onlyWe describe how a product feels and what it is for. Never treat, cure or promise results.

Does every number carry a source?

Claim card and checklistUsed for honesty notes and the publish check.

.claim{border:1px solid var(--ap-line);
 border-radius:var(--ap-r-md);
 padding:var(--ap-s-4) var(--ap-s-5)}
.chk i{width:22px;height:22px;
 border:1.5px solid var(--ap-accent);border-radius:6px}

ConceptPauseLabel, uppercase

Tags and labelsSmall uppercase text with spacing. Everything unbuilt is tagged Concept.

.tag{font-size:.68rem;letter-spacing:.12em;
 text-transform:uppercase;font-weight:600;
 color:var(--ap-accent)}

06 · Rules

Do and don’t.

Use tokens, never raw hex, in components.
Teal for buttons and key accents. Ink for text.
Lots of white space. One primary button per view.
Check both light and dark before you ship.
Say “concept” on anything unbuilt.

Don’t

Put aqua text on white. It fails contrast.
Use gold or the sun tints on Aparté pages. That is Pause.
Use more than one accent in a layout.
Use miracle, flawless, detox, treat, cure or repair.
Add fake urgency, countdowns or before-and-after.

07 · Files

Where everything lives.

All paths are inside 01-brand/design-system/.

File	What it is	Used by
aparte/tokens.css	Colours, type, spacing, light and dark	Website
aparte/tokens.json	The same values as data	Klaviyo, social
pause/tokens.css	Pause gold and hero corner. Load after the Aparté file	Website, store
aparte/fonts/	Lora and Inter, bundled locally	Everything
aparte/logo/	Light, dark and favicon SVGs	Everything
pause/*.svg	Pause logo, label and favicon	Pause pages, packaging