Glow

Glow is a violet night lit from below. The canvas itself is violet black, and depth comes from light: an ultraviolet bloom on the product picture's top edge, faint dome lines and stars in the hero, and thin lilac beams on the top edges of panels. Surfaces are glass, a few percent of white over the night, and every control is a pill. Light mode is a lavender dawn where the main action becomes a pill of night.

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	Dark first, on a violet black night (#0a0118). Light is a lavender dawn (#f8f6fe) with the same violet.
Type	Wix Madefor Display at 700 for headings, with a white to silver fade on the landing. Inter for everything else. Spline Sans Mono for code, keys and ids.
Colour	White ink and lavender greys on the night. Violet glass for the main action, lilac (#b7a4fb) for links, focus, eyebrows and checked controls.
Shape	Everything you press is a pill. Cards, menus and popovers are 16px; dialogs and big frames are 20px.
Depth	No black drop shadows. Glass film, hairlines, a violet underglow under big panels and a soft glow on primary controls.
Signature	An ultraviolet horizon behind the product picture, stars and dome lines in the hero, silver headings and lilac beams on lit edges.

Principles

1. Depth is light, never a black shadow.
2. The canvas is the night; surfaces are white film over it.
3. Everything you press is a pill.
4. One violet glass pill per view for the main action.
5. The glow frames pictures and edges, never running text.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#f8f6fe	#0a0118	The page floor
surface-soft	#f3f0fc	rgb(255 255 255 / 0.02)	Section bands, sidebars, table heads
surface-card (--muted)	#f0ecfb	rgb(255 255 255 / 0.04)	Tinted fills: inactive tabs, hover rows, code
surface-strong	#e6e0f6	rgb(255 255 255 / 0.1)	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#150b27	Menus, selects, toasts: always opaque
card	#ffffff	rgb(255 255 255 / 0.03)	The card fill
surface-dark	#0a0118	#050010	The inverted panel
hairline (--border)	rgb(27 12 56 / 0.1)	rgb(255 255 255 / 0.1)	Every border and divider
ink (--foreground)	#0c0616	#ffffff	Headings and primary text
body-strong	#241d38	#d2d0dd	Emphasised body text
body	#403a56	#b5b1c7	Running text
muted (--muted-foreground)	#5e5875	#9b96b0	Secondary text, captions
muted-soft	#8a84a2	#85808c	Placeholders, disabled text, icons at rest
primary	#1b0c38	rgb(133 98 255 / 0.3)	The action colour
accent (--accent-fill)	#713dff	#b7a4fb	The saturated accent: links, the accent badge
accent-soft	#f0eaff	rgb(113 61 255 / 0.2)	The tint an accent label sits on
danger (--destructive)	#c42a43	#f87171	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #137a48, #a34a06 and #c42a43 in light, #4ade80, #fb923c and #f87171 in dark.

Glow's own variables, read by the landing hooks and the kit: --glow-core (rgb(244 226 255 / 0.95) light, rgb(214 168 245 / 0.95) dark), --glow-mid (rgb(201 140 245 / 0.6) light, rgb(162 78 210 / 0.85) dark), --glow-outer (rgb(133 98 255 / 0.28) light, rgb(107 45 196 / 0.55) dark), --grid-line (rgb(62 30 140 / 0.09) light, rgb(255 255 255 / 0.07) dark), --star (rgb(113 61 255 / 0.3) light, rgb(255 255 255 / 0.55) dark), --title-fade (#3b2873 light, #d2d0dd dark).

How colour is used

• The night (#0a0118) is the canvas. Cards, wells and tracks are white at 2% to 10% over it, never a solid grey. Menus, dialogs and tooltips are the only opaque panels.
• Text runs a ladder: white ink for titles and values, silver for strong body, lavender grey for body and support text.
• The primary is violet glass with a white label in dark and a night pill with a white label in light.
• Lilac is the accent: links, focus rings, active items, eyebrows and checked controls.
• Green, orange and red appear only on tinted glass in badges, alerts and charts.

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: violet, sky, orchid, amber, mint and rose. Each clears 3:1 on the canvas and on cards in both themes, and neighbours stay far apart. 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: dark here, because Glow is drawn in dark first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

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

Wix Madefor Display is broad and heavy at 700, with flat tops and open curves, so the silver headlines read wide and calm. Inter carries every control and line of text, and Spline Sans Mono has soft, open forms that sit level with Inter in keycaps and ids.

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	72px	1.1	-0.02em	700	The hero headline, desktop
text-display-lg	56px	1.14	-0.02em	700	The hero headline, tablet
text-display-md	44px	1.12	-0.02em	700	Section headlines, the hero on phones
text-display-sm	32px	1.2	-0.02em	700	Section headlines on phones, big numbers
text-title-lg	24px	1.33	-0.02em	700	Page titles in the app
text-title-md	20px	1.4	-0.015em	600	Card titles
text-title-sm	16px	1.45	-0.01em	600	Small headings, table titles
text-body-lg	20px	1.45	-0.01em	400	Lead paragraphs
text-body-md	16px	1.5	-0.01em	400	Running text
text-body-sm	14px	1.57	-0.005em	400	Interface copy, table cells
text-caption	13px	1.4	0.01em	500	Metadata, helper text
text-caption-uppercase	12px	1.35	0.12em	500	Eyebrows above headings
text-button	14px	1	-0.01em	500	Buttons
text-nav-link	14px	1.4	-0.01em	400	Header and footer links

Rules: one h1 per page. Display sizes are for marketing pages; the app tops out at text-title-lg. Headings in Wix Madefor Display at 700 with -0.02em tracking; on the landing they fade from ink to silver on every line. Buttons, labels, badges and body are Inter, in sentence case. Tracked capitals only for eyebrows, table heads, menu labels and footer column titles.

Space and layout

• Spacing tokens: xxs 4px, xs 8px, sm 12px, md 16px, lg 24px, xl 32px, xxl 56px, section 112px (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).
• Comfortable density: 40px controls, 24px card padding, 7rem between landing sections.
• Tables stay dense: 40px heads, 12px cell padding, tabular figures right-aligned.
• The hero is centred, with the product picture 8rem below the note so its glow never reaches the text.

Shape and depth

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

Pills for buttons, badges, inputs, selects, tabs, switches and pagination. 16px cards, menus, popovers and tables; 20px dialogs, the product picture, showcase stages and the CTA panel. Glass surfaces carry a 1px white top highlight. Big panels float on a violet underglow, and overlays drop a deep night shadow with a violet haze.

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 Glow
Button	Pills in Inter at 14px 500. Primary is violet glass with a lilac rim and a soft glow that tightens when pressed (a night pill in light). Secondary is white film, outline and ghost stay quiet, danger is red glass and never solid. Focus is a 2px lilac outline that follows the pill.
Badge	Small pills in 13px Inter. Neutral is film, accent is lilac on a violet tint, status badges are tinted glass with a matching rim. The uppercase variant uses tracked 12px capitals.
Card	16px glass: 3% white over the night with a hairline and a top highlight (white in light). Soft, strong, outline and a dark slice of night are the variants. Titles use the display face.
Input, Textarea, Select	Glass wells shaped as pills with a faint edge; the textarea is a 16px rounded well. Focus turns the edge lilac with a 3px lilac halo, and an invalid field keeps a red edge and halo. The select chevron turns lilac when open, and its list is the menu panel.
Checkbox, RadioGroup, Switch	18px wells with a muted edge. A checked box fills with lilac and a plum check (ultraviolet with a white check in light) and a soft glow; a checked radio gets a lilac rim and a glowing lilac dot. The switch is a pill that turns violet glass when on, with a white thumb.
Tabs	A glass pill track where the active tab is a small violet glass pill. The line variant marks the active tab with a glowing lilac bar.
Accordion	Rows split by hairlines. Triggers in 16px 600 turn lilac on hover; the chevron turns lilac when open and the open row's line goes lilac.
Dialog, AlertDialog, Sheet	Opaque violet night panels over a blurred night scrim. Dialogs are 20px with a lilac top edge and a round close button; sheets light their inner edge in lilac and round their two inner corners. Destructive actions are red glass pills.
DropdownMenu, Popover, Select content, Tooltip	Opaque night panels at 16px with a lilac beam on the top edge and a deep overlay shadow. Items are 10px rounded rows that wash with film when highlighted; labels are tracked capitals, shortcuts are mono and checks are lilac. Tooltips are small chips of night in both themes.
Table	Framed in glass at 16px. Tracked capital heads on a faint band, hairline rows that wash on hover and tint lilac when selected, tabular figures. Right-align numbers and set ids in mono.
Alert	Tinted glass at 16px with a matching rim and an icon in the status colour. Info uses the lilac tint.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are circles with a hairline ring. Progress is a violet to lilac beam that glows. Skeletons are film blocks and the spinner is lilac. Separators are plain hairlines. Kbd is a small glass keycap in mono. Breadcrumbs are muted with the current page in ink. Pagination uses ghost circles, and the current page gets a lilac rim and tint. Labels are 14px 500 silver and legends 16px 600 ink. Toasts use the menu panel with its top beam, a small violet glass action and a ghost cancel.

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. Glow styles these:

• site-header: night glass at 70% with a blur; its bottom hairline brightens to a lilac beam at the centre.
• site-nav: links hover as pills.
• brand and brand-mark: the name in the display face at 700; the mark is a violet glass tile with a lilac rim and a soft glow.
• hero-backdrop: a still field of stars over the whole hero, fading out towards the edges.
• hero-visual: a tall top pad, an orchid and violet bloom centred on the picture's top edge, and a dome of faint ribs and rings converging on it.
• product-preview: glass lit from behind, with a lilac top edge, a night veil that deepens downwards and the violet underglow; product-preview-bar is a thin film.
• hero-title, section-title, showcase titles, the CTA title and stat-value: every line fades from ink to silver (plum black to violet ink in light).
• hero-eyebrow: a blurred glass pill with silver text, a soft glow and a glowing lilac dot. section-eyebrow: tracked lilac capitals in the same pill.
• section: every band but the logo strip opens on a lilac beam with a faint violet wash under it.
• feature-card and testimonial: a lit top edge inside the card; a hovered feature card gets a lilac rim and the underglow. feature-icon is a glass orb with a violet halo.
• stat-grid: a lit top edge on the violet underglow. The highlighted plan card gets a lilac rim, a lit top edge and the underglow.
• step-marker: violet glass circles with a lilac rim and a soft glow. step: the rule to the next number becomes a beam that fades out.
• showcase-visual: a small horizon with a bloom on its bottom edge, a fan of ribs and a lit top edge; the drawn cards on it go opaque.
• cta-panel: the second horizon, dark in both themes, with a bloom on its lit bottom edge, ribs and stars.
• hero-actions and the CTA: the primary pill carries a lilac beam on its bottom edge.
• site-footer: a lilac beam over its top hairline and a low violet glow rising from the bottom edge.
• logo: wordmarks at 600, quieter than the headings.
• faq: an open row's bottom line becomes a beam and its chevron turns lilac.

Everything else is type, space and the kit.

Signed-in screens

The dashboard and settings carry the look through the kit and the base sky: the night with a faint violet lift at the top, a film sidebar, pill nav, glass cards and tables, one violet glass pill per view. Sign-in is one glass card on the night with pill inputs, a lilac focus halo and a full-width violet glass pill to continue.

Do and don't

Do

• Keep the canvas the violet night and lift surfaces with white film, never a lighter grey.
• Make every control a pill. Cards stay at 16px, big frames at 20px.
• Give each view one primary action, the violet glass pill. Everything else is outline, secondary or ghost.
• Light big things from below: the underglow under the product picture, the stat grid and the highlighted plan, with a lilac beam on their top edge.
• Set headings in the display face at 700 with -0.02em, and let the silver fade carry the hero, section titles and stats.
• Put running text in body, support text in muted, and keep ink for titles, values and the active item.
• Use lilac for links, focus, active items, eyebrows and checked controls. Show status colours only in tinted pills, alerts and charts.
• Check every screen in light: the night pill stays the only dark action, and the dawn glow never sits under text.

Don't

• Don't lift a card with a black drop shadow. Depth is film, hairline and violet light.
• Don't put a solid white or grey card on the dark canvas.
• Don't give a button, input or badge corners. Nothing you press is square.
• Don't use teal, green or orange for an action. They are status and chart colours only.
• Don't put text on the bloom or on a chart colour.
• Don't set buttons, labels or body copy in the display face, or anything but code, keys and ids in mono.
• Don't use muted-soft for text people must read. It is for placeholders, disabled text and resting icons.
• Don't add a second glow colour or a rainbow gradient. The light is orchid, violet and lilac.

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.