Design System

The visual language behind Day.

One warm, editorial system across the app, the site, and the store. Calm, honest, unhurried — because the product is time itself.

Brand & voice

How Day sounds, and the rules that keep it consistent.

Day speaks like a calm friend who remembers what matters to you — warm, editorial, and unhurried, never hyped or shouty. It favors plain words over clever ones and lowercase warmth over exclamation. Because Day is pre-launch, it is scrupulously honest: no invented stats, no fake social proof, no pricing claims in static. It earns trust by showing the product work — the live share card, the real countdown — rather than declaring it. Time is the product, so the only urgency it uses is true: the day really is coming.

  • · Plain over clever
  • · Honest — no fake stats pre-launch
  • · Calm, not hype
  • · Lowercase warmth, never shouty
  • · Show the product work, don't claim it

We say

The day is coming. Start counting.

We don't

Join 10,000+ users counting down now!!!

Color

A warm, earthy palette. One terracotta accent per view — never more.

Warm Charcoal
#2E2A22 · --charcoal
Primary text & dark sections (share, footer).
Terracotta
#C2522C · --terracotta
Accent, CTAs, links, eyebrows. Use sparingly.
Cream
#F2EBDD · --cream
Page background.
Ink-Soft
#6B5D4A · --ink-soft
Secondary text, captions, body.
Cream 2
#EAE0CD · --cream-2
Surface tint, browser bar, icon wells.
Terracotta Light
#E8A07E · --terra-light
Accent on charcoal only (share numerals).
White
#FFFFFF
Cards, feature wells, raised surfaces.
Line
rgba(46,42,34,.12)
Hairline borders, gutters, dividers.
Terracotta on Cream
Cream on Charcoal
Ink-Soft on Cream

Type

Spectral — serif, for headlines and quotes. Archivo — sans, for body and the ticking numbers.

Count the days
Display / H1
Spectral · 68px · 600
line 1.04 · -.02em
Simple to set
H2 section
Spectral · 44px · 600
line 1.1 · -.015em
Beautiful backgrounds
H3 card title
Spectral · 23px · 600
The wedding. The trip. The day you quit — kept close.
Body
Archivo · 18-19px · 400
ink-soft
Countdown & Count-up
Eyebrow / caption
Archivo · 12px · 600
uppercase · .22em · terracotta
327 days
Number specimen
Archivo · 88-110px · 700
tabular figures — the signature digit

Spacing & tokens

A simple ramp drives gutters, padding, and section rhythm. Corner radius and hairline borders keep surfaces soft.

16px — card gutter / tight gap
24px — inline gap
40px — page padding / column gap
90px — section vertical rhythm
radius: 12px cards · 16-18px panels · 100px pills border: 1px var(--line)

Components

Every piece rendered live from the real site markup.

Buttons — one primary per view

Download Download · hover See features

App Store badge — the canonical download CTA

Download on the App Store

Pills & tags

Made with DayLook forwardStreaks

Feature card

Live widgets

Keep your countdown on the home screen and lock screen. Always one glance away.

Form field — default & focus

Share card — the signature live-ticking surface

Until · Days
200
Our Wedding

Iconography — only what the site uses

▦widget ◷count-up ↗share ◐background ◯unit ▽memory

Do & Don't

Where the system earns its keep.

Do

One terracotta accent per view — let it lead the eye to the action.

Don't

Paint everything terracotta until nothing stands out.

Do

Spectral for headlines, Archivo for body and numbers.

Don't

Swap them — serif body and sans headlines break the voice.

Do

Earn trust by showing the product work.

Don't

Claim "10k downloads" before launch. Ever.

Do

Give sections room to breathe.

Don't

Cram cards edge to edge to fit more in.