Styleguide.
The tokens, type, components and rules behind Daylit.
Principles
Tokens and presets only.
Every colour is a token and every text uses a preset. No raw values, no inline type.
Space instead of lines.
No dividers, no borders on cards, no card shadows. Groups are separated by space.
Short, plain words.
Headings are short sentences ending in a full stop. No em dashes, no eyebrow labels, no decorative numbering.
Calm motion.
Content fades up once as it enters the view. Hover changes colour in 0.15 s and never scales a card.
One h1 per page.
Display is the page title. Everything else steps down from Heading.
Colour
Page
#FFFFFF
Page Glass
#FFFFFF at 86%
Surface Soft
#F2F0ED
Surface Strong
#E8E6E1
Surface Inverse
#343433
Accent
#121212
Accent Soft
#F6F4EF
Border Subtle
#E8E8E8
Text Primary
#343433
Text Secondary
#74716E
Text Inverse
#FFFFFF
Text Inverse Muted
#FFFFFF at 64%
Typography
Make the good days repeat.
Display · Inter Display 600 · 88 / 64 / 48 px · line height 1.0 · h1, page title only
Small tools that add up.
Heading · Inter Display 600 · 56 / 44 / 34 px · line height 1.05 · h2
Tick it off in one tap.
Title · Inter Display 600 · 24 / 22 / 20 px · line height 1.2 · h3
A calm habit and focus tracker that fits in one glance.
Lead · Inter 400 · 20 / 19 / 18 px · line height 1.4 · p, Text Secondary
Your day as a short list. Swipe through the week, see what is left and close the ring before bed.
Body · Inter 400 · 16 / 16 / 15 px · line height 1.5 · p, Text Secondary
Morning walk
Label · Inter 500 · 15 px · line height 1.2 · p, Text Primary
Last updated 1 June 2026
Small · Inter 400 · 13 px · line height 1.4 · p, Text Secondary
Links
Body copy with an inline link that stays underlined.
Inline · links inside body copy
Nav · header and footer links, secondary to primary on hover
On Accent · links on dark bands
Buttons
Button · Primary
Button · Secondary
Button · Secondary with Apple logo
PremiumShaderButton · App Store CTA, hex colours only
Icons
Check
Bell
Timer
Fire
Moon
Sun
Notebook
Target
Lock
Leaf
Phosphor Icons (MIT), outline style at a 1.5 px stroke, coloured with Text Primary. Use exact names from the installed set.
Layout
One 12-column grid. Each section fills the width with 40 px side padding (tablet 32, phone 20) and holds an inner frame capped at 1360 px.
120 px between sections (tablet 96, phone 72). Content rows put the label in the first columns and the content from column 6.
Grids turn into single-column stacks on phone.
Radius
12 px · tiles
24 px · cards
32 px · panels
Pill · buttons
Cards use Surface Soft with radius 24 to 32 and 32 px padding (phone 24). Buttons are fully rounded.
Motion
Headings and cards fade up 24 px once as they enter the view: 0.9 s tween, ease 0.16, 1, 0.3, 1.
Hover changes colour in 0.15 s. Nothing scales on hover except blog covers, which grow to 1.04 inside a clipped frame.
Content
Changelog: Title, Slug, Version, Date, Summary, Body and an optional Highlight image. Sorted by date, newest first.
Articles: Title, Slug, Date, Category (Habits, Focus, Product), Excerpt, Cover, Body and Read time. Every cover is unique and its alt text describes the image.
Remix project