Daylight

Daylight draws the product as a clean dashboard on white paper. One 1px grey line holds every card, field and table, black is the only action, and electric blue marks what is live. Each tag gets one small square of colour. The hero is a pale grey stage, and a white tab hangs from the header to hold its label.

Read this before you add a screen, a component or a colour. The tokens live in src/app/globals.css, the faces in src/app/fonts.ts, the kit in src/components/ui/.

At a glance

Theme	Light native. Dark is the same dashboard at night: #0a0a0a canvas, lines at 10% white, white buttons and a lifted blue.
Type	Reddit Sans at 480 for 30px and up, Inter for everything 24px and below, Geist Mono for code, ids and keys.
Colour	Ink #171717 on white, a black primary, electric blue #155dfc for links and the live item, four tag hues in small squares.
Shape	1px hairlines on every region. 6px fields, 8px buttons and tags, 12px cards, 16px dialogs and frames, pill badges.
Depth	Nearly flat. Cards carry no shadow. shadow-xs sits under controls, a 4px ring is the halo, and only floating layers get the overlay shadow.
Signature	A white tab hangs from the header into a pale grey hero stage, hairline rails frame the column, and every eyebrow is a white tag with one glossy square.

Principles

1. The line is the card. One 1px hairline holds every region, and white on white is right.
2. Black is the only action. One primary per view; everything else is outline or ghost.
3. Blue marks what is live: links, the current item, selected rows, progress, one key figure.
4. One hue per tag. A small square or a 12% tint, never two colours on one thing.
5. Medium, not bold. Headlines sit at 480, and space does the work more lines would do.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#ffffff	#0a0a0a	The page floor
surface-soft	#fafafa	#0f0f0f	Section bands, sidebars, table heads
surface-card (--muted)	#f5f5f5	#191919	Tinted fills: inactive tabs, hover rows, code
surface-strong	#ededed	#262626	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#161616	Menus, selects, toasts: always opaque
card	#ffffff	#111111	The card fill
surface-dark	#171717	#000000	The inverted panel
hairline (--border)	#e5e5e5	rgb(255 255 255 / 0.1)	Every border and divider
ink (--foreground)	#171717	#fafafa	Headings and primary text
body-strong	#262626	#e5e5e5	Emphasised body text
body	#525252	#bdbdbd	Running text
muted (--muted-foreground)	#6b6b6b	#a1a1a1	Secondary text, captions
muted-soft	#8a8a8a	#737373	Placeholders, disabled text, icons at rest
primary	#000000	#fafafa	The action colour
accent (--accent-fill)	#155dfc	#5b9bff	The saturated accent: links, the accent badge
accent-soft	#eaf1ff	#0e1a33	The tint an accent label sits on
danger (--destructive)	#c81e1e	#f26b6b	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #15803d, #c2410c and #c81e1e in light, #4ade80, #fb923c and #f87171 in dark.

Daylight's own variables, read by the landing hooks and the kit: --ground (#f5f5f5 light, #111111 dark), --blush-rose (rgb(236 72 153 / 0.07) light, rgb(236 72 153 / 0.07) dark), --blush-violet (rgb(139 92 246 / 0.07) light, rgb(139 92 246 / 0.08) dark), --blush-mint (rgb(34 197 94 / 0.06) light, rgb(34 197 94 / 0.06) dark), --ripple (rgb(0 0 0 / 0.03) light, rgb(255 255 255 / 0.035) dark), --frame (rgb(255 255 255 / 0.55) light, rgb(255 255 255 / 0.04) dark), --dot (rgb(0 0 0 / 0.09) light, rgb(255 255 255 / 0.09) dark).

How colour is used

• Text is ink #171717 and body grey #525252. Pure black only fills the primary button.
• Electric blue (#155dfc light, #5b9bff dark) marks links, the current nav item, selected rows, progress and one key figure.
• Violet, green, orange and blue (accent-4, accent-3, accent-2, accent-1) tag sections and feature tiles as a small square or a 12% tint.
• Pale grey #f5f5f5 grounds the hero and the paper bands. White carries the canvas and every card.
• Status colours are soft washes with a slightly darker edge: mint, orange and red, with the full hue on the text.

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. Six series in order: blue, orange, green, violet, cyan and rose, each lifted to read on black in dark. Past four series, label lines directly instead of leaning on the legend. Assign them in order; never let colour be the only way to tell two series apart.

Dark mode

The palette is declared twice in src/app/globals.css: light on :root, dark under @media (prefers-color-scheme: dark) and again on .dark, where the class wins in both directions. @theme inline points every utility at those variables, so bg-canvas is one class that follows the mode. src/lib/design.ts sets the theme a first visit opens in: light here, because Daylight is drawn in light first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• Reddit Sans (font-display): headings and display type.
• Inter (font-body): running text and interface copy.
• Geist Mono (font-mono): code, ids and tabular labels.

Reddit Sans at 480 gives headlines a calm geometric voice, medium and never bold, with a single-storey g. Inter sets every control and line of text, and Geist Mono sets code, ids and the step numerals.

Every face loads through next/font/google in src/app/fonts.ts: downloaded at build time and served from this app. Change a face there and here, together.

Scale

Token	Size	Line	Tracking	Weight	Use
text-display-xl	56px	1.05	-0.02em	480	The hero headline, desktop
text-display-lg	48px	1.06	-0.02em	480	The hero headline, tablet
text-display-md	36px	1.11	-0.015em	480	Section headlines, the hero on phones
text-display-sm	30px	1.2	-0.01em	480	Section headlines on phones, big numbers
text-title-lg	24px	1.33	-0.015em	600	Page titles in the app
text-title-md	18px	1.45	-0.01em	600	Card titles
text-title-sm	16px	1.5	-0.005em	600	Small headings, table titles
text-body-lg	18px	1.56	-0.005em	400	Lead paragraphs
text-body-md	16px	1.5	0	400	Running text
text-body-sm	14px	1.43	0	400	Interface copy, table cells
text-caption	12px	1.33	0	500	Metadata, helper text
text-caption-uppercase	11px	1.45	0.06em	600	Eyebrows above headings
text-button	14px	1	0	500	Buttons
text-nav-link	14px	1.43	0	500	Header and footer links

Rules: one h1 per page. Display sizes are for marketing pages; the app tops out at text-title-lg. Display steps (30px and up) are Reddit Sans at 480, never semibold or bold. Everything at 24px and below is Inter: 400 text, 500 buttons, nav, labels and tags, 600 titles. Capitals only on 11px structural labels; section eyebrows stay sentence case.

Space and layout

• Spacing tokens: xxs 4px, xs 8px, sm 12px, md 16px, lg 24px, xl 32px, xxl 48px, section 64px (the gap between landing sections).
• Content sits in max-w-content (1280px) with px-md on phones and px-lg from sm up. Reading text stops at max-w-measure (672px).
• Compact: 8px inside controls and between tags, 16px card padding in the app, 24px on marketing cards.
• Sections run 64px top and bottom and open on one full-width hairline, never closing on one, so lines never double.
• The content column is 80rem wide, framed by two hairline rails from the hero to the footer on wide screens.
• Showcase, customers and soft sections sit on the pale grey paper band, alternating with the white canvas.

Shape and depth

Token	Value	Where
rounded-xs	4px	Breadcrumb, Checkbox, Kbd
rounded-sm	6px	Accordion, Input, Tabs, Tooltip, the landing page
rounded-md	8px	Button, Dialog, DropdownMenu, Select, Sheet, Skeleton, Tabs, Toaster, the landing page
rounded-lg	12px	Alert, Card, DropdownMenu, Popover, Select, Toaster, the landing page
rounded-xl	16px	AlertDialog, Card, Dialog, Sheet, the landing page
rounded-pill	9999px	Badge, Progress, Switch, the landing page
rounded-full	9999px	Avatar, RadioGroup

Radii stay on the scale: 4px checkboxes and kbd, 6px fields, 8px buttons and tags, 12px cards and menus, 16px dialogs, sheets and big frames, pill badges, avatars and switches. Borders are 1px solid: #e5e5e5 on regions, a firmer #d4d4d4 on fields. Shadows are quiet: xs under controls, the 4px ring as the halo on what matters, lift for floating pictures, overlay for menus and dialogs. Cards and sections carry none.

Components

Every component lives in src/components/ui/ and is written against the tokens above. Import from there; never restyle a kit component inline to make a one-off.

Component	In Daylight
Button	Inter 14px 500, sentence case, 8px corners and a 1px border on every variant so sizes match. Primary is black with shadow-xs and turns #262626 with a 4px grey halo on hover. Outline is the workhorse: white, hairline, shadow-xs. Ghost is grey text with a grey wash on hover. Sizes 32, 40 and 44px, icon 36px, no press movement. Focus is a 2px ink outline, 2px off the edge.
Badge	A 20px pill with a 1px border and 12px 500 text, no shadow. Neutral is white with a hairline, accent is blue on pale blue, and success, warning and danger are soft washes with a slightly darker edge. Never two hues.
Card	White on white, held by a 1px hairline at 12px corners, no shadow. Soft is pale grey with no line at 16px, strong is a firmer grey, and dark is the #262626 charcoal callout. Titles are 18px Inter 600.
Input, Textarea, Select	40px fields with 6px corners, a firmer #d4d4d4 line and shadow-xs. Focus turns the line ink and adds the 4px halo; invalid turns it red. Select content is a 12px hairline panel with 32px items and an ink check on the chosen one.
Checkbox, RadioGroup, Switch	16px controls on the firm field line with shadow-xs. Checked fills black with a white mark (white with a black mark in dark). The switch is a pill: grey and inset when off, black when on (white in dark), with a thumb in the page colour. Blue is never a toggle colour.
Tabs	Default tabs are loose pills with no tray: grey pills, the active one white with a hairline and a soft shadow. Line tabs sit on a hairline with a 2px ink underline under the active one.
Accordion	Items on hairline rules. Triggers are 16px Inter 600 ink with a grey chevron that turns when open.
Dialog, AlertDialog, Sheet	A frosted scrim instead of black: pale in light, dark in dark. Panels are 16px hairline cards with the overlay shadow and a grey footer bar under a hairline. Sheets float 8px in from their edge as cards.
DropdownMenu, Popover, Select content, Tooltip	12px hairline panels with the overlay shadow. Items are 32px with 8px corners and a grey wash when highlighted, shortcuts in Geist Mono. Tooltips are small black chips with no arrow.
Table	Dense and ruled across. No header fill: 12px 500 heads over a hairline, rows on hairlines with a pale grey hover and a pale blue selected state. Tabular figures on every cell; set ids and keys in font-mono.
Alert	A soft wash with a matching edge at 12px corners and a 16px icon in the status colour: blue for info, then green, orange and red. No side bar, no shadow.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are grey circles with a hairline ring. Progress is a 6px blue pill. Skeletons pulse in pale grey, and spinners take the colour of the text around them. Separators are 1px hairlines, never dashed. Kbd is a 20px mono key with 4px corners. Breadcrumbs are grey with a small chevron between steps and the current page in ink. Pagination is loose 36px ghost cells with the current page as the white outline button. Labels are 14px 500 ink and field errors red. Toasts are 12px hairline cards with the overlay shadow and a status icon.

The landing page

The landing page is the same in every design; the design decides how it looks. Its sections carry data-slot hooks (listed at the top of src/components/marketing/section-heading.tsx) that globals.css may style. Daylight styles these:

• site-header: an opaque white bar with no bottom line and no blur, so the hero tab hangs from it without a seam.
• site-nav: dark grey links with pill corners; hover and the current page turn ink.
• brand-mark: a black circle (white in dark) inside a 2px ring of the six chart hues, the only multi-colour gradient.
• hero: closes on one full-width hairline right under the product.
• hero-backdrop: fills the whole hero with the pale grey ground, rose, violet and mint blushes, hairline rails on the column edges and 1px ripples every 44px behind the product.
• hero-eyebrow: moves up under the header as a white 36px tag with a glossy violet square; white spreads of its shadow and two concave shoulders draw a tab hanging from the header.
• hero-visual: a 10px frosted mat with a hairline and 24px corners that fades into the ground over its lower third.
• product-preview: 16px corners and shadow-xs. product-preview-bar is hidden, so the app itself is the picture.
• section: opens on one full-width hairline and carries the rails; showcase, customers and soft sections sit on the grey paper band.
• section-eyebrow: a 28px sentence-case white tag with a hairline and one glossy 14px square in the section's hue.
• logo: wordmarks in body grey and logo images in greyscale; the logo strip gets 40px of padding.
• feature-icon: a 12% tint of the next hue (violet, green, orange, blue) with a faint inner line and the icon in the full hue.
• showcase-visual: a white stage with a 16px dot grid, 16px corners, a 6px frosted mat and a hairline; the card inside floats on shadow-lift.
• step-marker: 8px-cornered tiles with a Geist Mono numeral and the 4px ring.
• stat-grid: 12px corners. stat-value: tabular figures.
• faq: a hovered question turns ink, not blue.
• cta-panel: a flat #262626 slab with 16px corners, no shadow, the hero's ripples from the top centre and a see-through outline button.
• cta-band and site-footer: the rails run through them, and the footer is white canvas.

Everything else is type, space and the kit.

Signed-in screens

The dashboard draws the same product as the landing: a near-white sidebar split by a hairline, 8px nav items with the active one on pale blue with blue text, flat hairline cards, tables ruled across and one black button per screen. Settings and sign-in sit on the near-white ground in white 12px hairline cards, with 40px fields that turn ink with the halo on focus and a full-width black button.

Do and don't

Do

• Hold every region with one 1px border-hairline. White cards on a white page are right: the line is the card.
• Keep one black primary button per view. Every other action is outline or ghost.
• Keep blue for links, the current nav item, selected rows, progress and one key figure (text-accent, bg-accent-soft).
• Give each tag or icon tile exactly one hue from accent-1 to accent-4, as a small square or a 12% tint.
• Use rounded-pill for badges, avatars and switches, rounded-md for buttons and tags, rounded-lg for cards and menus, rounded-xl for dialogs and big frames.
• Set headlines of 30px and up in the display face at 480, and everything smaller in Inter.
• Use the 4px ring (shadow-ring) as the halo on what matters most: the hovered black button, a focused field, the featured plan.
• Set ids, keys and code in font-mono, and every number that lines up in tabular-nums.

Don't

• Don't lift a card with a shadow. shadow-lift is for pictures that float and dragged items; shadow-overlay is for menus, dialogs, sheets and toasts.
• Don't fill a large area with blue or a tag hue. Tints stay on tiles, badges and alerts.
• Don't set a display size in font-semibold or font-bold. The headline voice is medium.
• Don't put two hues on one tag, badge or tile. A violet square with a blue arrow is two.
• Don't use radii off the scale: 4, 6, 8, 12, 16 or pill. The 24px hero frame and the tab curves live in the hooks only.
• Don't use pure black for text or icons. Black is the primary button's fill; text is #171717 and softer.
• Don't put a colour gradient on a button, field or card. The spectrum ring on the brand mark is the only multi-colour one.
• Don't paste hover:bg-accent or bg-muted as is. Here accent is the electric blue and muted is a text colour, so use hover:bg-surface-card hover:text-ink.

Working in this design

Pasting from shadcn/ui. The token layer carries shadcn's variable names, so most snippets render unmodified. Two utility names mean something else here: bg-muted becomes bg-surface-card, and bg-accent / text-accent-foreground (a hover surface upstream) become bg-surface-card / text-ink. Here muted is a text colour and accent is the saturated accent.

Adding a token. Add it to all three palette blocks in globals.css (light, the dark media query, .dark), map it in @theme inline, and document it in the palette table above. Check contrast in both modes.

Adding a component. Check the kit first: most needs are a variant of Button, Card or Badge, or a composition on the page. A new component gets its own file in src/components/ui/, token classes only, a data-slot, and a row in the Components table here. The designer subagent owns this.