Aura

Aura is a calm lab bench on bone paper. Type is a soft near-black Outfit at weight 450, every action is an ink pill lettered in SUSE Mono capitals, and every label reads like a lab note. One aura of iris, petal and apricot marks what matters: the last line of the hero headline, fine wave lines and 8px dots. Nothing on the page casts a shadow, and dark mode is the same lab at 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	Light first: a bone canvas (#fff9f3) with white paper cards. Dark is warm plum charcoal (#1a1718) with bone text.
Type	Outfit 450 for headings, Outfit 400 for text, SUSE Mono 400 capitals for buttons, tabs, nav links and labels.
Colour	Near-black ink (#222222) for text and actions, deep iris (#7d4dad) for links and focus, an aura of iris, petal and apricot for decoration, six pastel tiles for categories.
Shape	Pills for every action, tag, tab and avatar. Fields 8px, cards 16px, stages and panels 24px.
Depth	Flat. Surfaces part by tone and one warm hairline. Only menus, popovers, dialogs, sheets and toasts get a soft plum shadow.
Signature	A hero headline whose last line fills with the aura, a banner of fine aura wave lines behind the product window, and mono lab labels led by an aura dot.

Principles

1. Bone is the page. White paper sits on it with one hairline.
2. Every action is a pill. The main one is ink with mono capitals.
3. Labels speak in mono capitals. Reading text stays in Outfit.
4. The aura stays rare: one headline, fine lines and small dots.
5. Nothing on the page casts a shadow. Tone and hairlines do the work.

Colour

Palette

Token	Light	Dark	Role
canvas (--background)	#fff9f3	#1a1718	The page floor
surface-soft	#fcf4eb	#1e1b1c	Section bands, sidebars, table heads
surface-card (--muted)	#f5ede4	#2a2628	Tinted fills: inactive tabs, hover rows, code
surface-strong	#ece3d9	#363133	Pressed fills, progress tracks
surface-solid (--popover)	#ffffff	#272325	Menus, selects, toasts: always opaque
card	#ffffff	#221e20	The card fill
surface-dark	#222222	#0f0d0e	The inverted panel
hairline (--border)	#e8dfd5	rgb(247 240 233 / 0.1)	Every border and divider
ink (--foreground)	#222222	#f7f0e9	Headings and primary text
body-strong	#35322f	#e8e0d8	Emphasised body text
body	#4b4845	#d2c9c1	Running text
muted (--muted-foreground)	#686562	#aaa19a	Secondary text, captions
muted-soft	#8a8682	#857c77	Placeholders, disabled text, icons at rest
primary	#222222	#f7f0e9	The action colour
accent (--accent-fill)	#7d4dad	#c094e4	The saturated accent: links, the accent badge
accent-soft	#f3eafb	#2f2438	The tint an accent label sits on
danger (--destructive)	#b83b33	#f08a80	Destructive actions and errors

success, warning and error each come with a -soft tint for the back of a badge or an alert: #2c7352, #95590f and #b83b33 in light, #7fd6ae, #f5b766 and #f08a80 in dark.

Aura's own variables, read by the landing hooks and the kit: --aura-1 (#c094e4 light, #c094e4 dark), --aura-2 (#f7bbe6 light, #f7bbe6 dark), --aura-3 (#ffb760 light, #ffb760 dark), --aura-ink-1 (#9d71cc light, #c094e4 dark), --aura-ink-2 (#c3639c light, #f7bbe6 dark), --aura-ink-3 (#c2732c light, #ffb760 dark), --tile-1 (#ecdff7 light, #2a2233 dark), --tile-2 (#fce0ee light, #331f2b dark), --tile-3 (#ffe9cf light, #33281b dark), --tile-4 (#daf7ee light, #1a2f29 dark), --tile-5 (#d9eafa light, #1b2735 dark), --tile-6 (#cef1e1 light, #1c2e25 dark).

How colour is used

• Ink #222222 carries text and the main action. Text on ink is bone #fff9f3, never pure white.
• Deep iris #7d4dad is the one accent: links, focus rings, checks, progress and data bars. At night it is the true iris #c094e4.
• The aura only decorates. By day the headline and the fine lines use its deeper ink stops (iris, rose, copper) so they read on bone; dots, washes and the night lines use the true pastels.
• Six pastel tiles (lavender, blush, meringue, mint, sky, seafoam) mark categories, always behind an ink icon or numeral, never as text.
• Status colours sit on their own soft tints: green on mint, amber on cream, red on rose.

Charts

accent-1 to accent-6 (also chart-1 to chart-6) are six series colours ordered so neighbours stay distinguishable. Six series in a fixed order: iris, coral, sky, mint, amber, rose. A single series is always the one violet, and amber bars carry a value label because amber is light on white. 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 Aura is drawn in light first. The theme menu in the header offers light, dark and system and remembers the choice.

Type

Faces

• Outfit (font-display, font-body): headings and display type; running text and interface copy.
• SUSE Mono (font-mono): code, ids and tabular labels.

Outfit is a round geometric sans with a single-storey a: at weight 450 it stays calm at 64px and open at 14px, so one family carries headings and text. SUSE Mono has narrow, squarish capitals and a light stroke, so buttons, tabs and labels read like notes on a lab bench.

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	64px	1.04	-0.025em	450	The hero headline, desktop
text-display-lg	52px	1.06	-0.025em	450	The hero headline, tablet
text-display-md	40px	1.1	-0.022em	450	Section headlines, the hero on phones
text-display-sm	32px	1.15	-0.02em	450	Section headlines on phones, big numbers
text-title-lg	24px	1.25	-0.015em	450	Page titles in the app
text-title-md	18px	1.35	-0.01em	450	Card titles
text-title-sm	16px	1.4	-0.005em	500	Small headings, table titles
text-body-lg	18px	1.55	0	400	Lead paragraphs
text-body-md	16px	1.6	0	400	Running text
text-body-sm	14px	1.5	0	400	Interface copy, table cells
text-caption	13px	1.4	0	400	Metadata, helper text
text-caption-uppercase	12px	1.4	0.025em	400	Eyebrows above headings
text-button	13px	1	0.02em	400	Buttons
text-nav-link	13px	1.4	0.02em	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 are Outfit 450 with tight tracking: -0.025em at 64px, easing to -0.005em at 16px. Text is Outfit 400 at 0 tracking. Labels, buttons, tabs, table heads and nav links are SUSE Mono 400 capitals at 12 to 13px with 0.02 to 0.025em tracking and ligatures off, and any element set in capitals switches to mono.

Space and layout

• Spacing tokens: xxs 4px, xs 8px, sm 12px, md 16px, lg 24px, xl 32px, xxl 48px, section 96px (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).
• A 4px grid with an airy rhythm: 12 to 16px inside components, 24 to 32px of card padding.
• Sections sit 48px apart on phones and 96px on desktop, centred in the content width.
• Bone and paper bands take turns between sections, with no rule between them.

Shape and depth

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

Pills for buttons, badges, tabs, tooltips, pagination, switches, avatars and progress bars. Corners are 6px for checkboxes and kbd, 8px for fields, 12px for menus, toasts and alerts, 16px for cards and dialogs, and 24px for stages, panels and the inner edge of sheets. There is no shadow except the soft plum overlay on floating layers and the 3px iris halo on a focused field.

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 Aura
Button	A pill in SUSE Mono capitals at 13px. Primary is an ink pill with bone letters (a bone pill with ink letters at night), secondary a paper pill with a hairline, outline a 1px field line, ghost plain text with a soft ink hover, danger red. Link is the one exception: Outfit 500 in sentence case, deep iris. Heights are 32, 40 and 48px; icon buttons are 40px circles.
Badge	A 22px pill in Outfit 500 at 13px with no hairline: hue does the separating. Neutral is oat with smoke text; accent, success, warning and danger sit on their soft tints with the hue as text. The uppercase variant switches to SUSE Mono capitals at 12px.
Card	White paper on bone with 16px corners, one hairline and no shadow. Soft is linen with no border, strong is clay, outline is a hairline only, dark is ink with bone text. Titles are Outfit 450 at 18px, descriptions smoke grey at 14px.
Input, Textarea, Select	White paper fields with 8px corners, a 1px field line, 40px tall, 14px ink text and smoke placeholders. Focus turns the line iris with a 3px iris halo; invalid turns it red with a red halo. Select content is a 12px paper menu with the overlay shadow and an iris check.
Checkbox, RadioGroup, Switch	The checkbox is 18px with 6px corners and turns ink with a bone check. The radio is an 18px circle with an 8px ink dot. The switch is a pill: an outlined track with a grey knob when off, an ink track with a bone knob when on, and no shadow.
Tabs	Default tabs sit in an oat pill track with mono capital triggers; the active tab is a filled ink pill with bone letters. Line tabs drop the track and mark the active tab with a 2px ink bar.
Accordion	Rows split by hairlines, with Outfit 500 triggers at 16px that turn iris on hover. The chevron sits in a 28px paper circle with a hairline and fills ink when the row opens.
Dialog, AlertDialog, Sheet	An ink scrim at 40% with no blur. Panels are paper with 16px corners, a hairline and the soft plum overlay shadow, with Outfit 450 titles at 24px. Sheets round only their inner edge, at 24px. Cancel is an outline pill; confirm is an ink pill, or red when it destroys something.
DropdownMenu, Popover, Select content, Tooltip	Paper menus with 12px corners, a hairline and the overlay shadow. Items have 8px corners and an oat highlight; group labels are mono capitals in smoke; checks are iris. Tooltips are small ink pills with bone letters, and bone pills at night.
Table	A paper card with 16px corners and a hairline. Head cells are mono capitals in smoke on linen; rows split by hairlines with a linen hover and a lavender selected row. Body cells have 12px padding and tabular figures; set numbers right and ids in SUSE Mono.
Alert	12px corners and no border. Info sits on lavender mist with an iris icon; success, warning and danger sit on their soft tints with the icon in the status colour. Titles are Outfit 500.
Avatar, Progress, Skeleton, Spinner, Separator, Kbd, Breadcrumb, Pagination, Field, Label, Toaster	Avatars are circles with deep iris initials on lavender mist. Progress is a 6px clay pill with an iris fill. Skeletons pulse in clay; spinners take the text colour; separators are the warm hairline. Kbd is SUSE Mono 12px on paper with a 2px bottom edge. Breadcrumbs are smoke grey with an ink current page; pagination uses 40px pills with mono numbers and an ink pill for the current page. Labels are Outfit 500 in sentence case, helper text smoke 13px, errors red. Toasts are paper with 12px corners, a hairline and the overlay shadow.

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

• hero-backdrop: switched off, so the hero is plain bone with no wash and no grid.
• hero-title: the first line stays ink and every later line fills with an iris to rose to copper gradient (the true pastels at night); a one-line title stays all ink.
• hero-eyebrow: a white paper chip with a hairline and mono capitals, led by an 8px aura dot.
• hero-visual: a 24px banner with a hairline and a lavender, meringue and blush field, crossed by two ribbons of fine aura wave lines; the product window rises out of its lower half.
• product-preview: flat, with 16px corners and only its hairline; the three window dots are iris, petal and apricot.
• section: features, how it works and pricing sit on white paper bands, the rest on bone, with no rule between them.
• section-heading: the eyebrow is mono capitals in smoke grey led by the aura dot, the title balances its lines, the lead stays within 38rem.
• logo: wordmarks in Outfit 450 smoke grey; logo images in greyscale at 70%.
• feature-card: no card chrome, just a 48px pastel tile with an ink icon, an ink title and a smoke line; tiles cycle lavender, blush, meringue, mint, sky, seafoam.
• showcase-visual: each picture sits on a watercolour wash of two or three pastel tiles with 24px corners, and the cards inside stay flat.
• step-marker: 40px pastel dots with mono numerals in ink, joined by a 1px aura thread.
• stat-grid: no grid lines; 48px Outfit numbers in tabular figures over mono capital labels.
• testimonial: paper quote cards with 32px padding; initials sit on lavender, blush and meringue in turn.
• card[data-highlighted]: the recommended plan trades its hairline for a 1.5px aura border.
• faq: the chevron sits in a 28px paper circle with a hairline and turns into an ink circle when the answer opens.
• cta-panel: the lab at night in both themes, with 24px corners and a band of glowing aura wave lines along the bottom edge, below the buttons.
• site-header, site-nav: no line under the header; nav links in mono capitals with a pill hover chip.
• brand-mark: a round aura dot with a dark letter.
• site-footer: a 1px aura thread along its top edge.

Everything else is type, space and the kit.

Signed-in screens

The dashboard is bone with a linen sidebar, an oat chip for the active item, paper stat cards with 32px Outfit numbers, charts in the one violet and one ink pill per view. Sign-in is one flat paper card on bone with paper fields, the iris focus halo and a full-width ink pill in mono capitals; the waves stay on the landing page.

Do and don't

Do

• Put every page on bone and lift content onto white paper cards with one hairline.
• Make every action a pill: the ink pill with mono capitals for the main action, a hairline or paper pill for the second.
• Set labels, eyebrows, tabs, table heads, nav links and buttons in SUSE Mono capitals at 12 to 13px with ligatures off.
• Set headings in Outfit 450 with tight tracking: -0.025em at 64px, easing to -0.005em at 16px.
• Keep the aura to its three jobs: the hero headline's last lines, fine lines and 8px dots.
• Mark categories with the six tiles in their fixed order, as fills behind an ink icon or numeral.
• Draw data bars and progress in the one violet, and add the series colours only for real series.
• Separate sections by tone: bone and paper bands take turns, with no rule between them.

Don't

• Don't put a shadow on a card, a button, a badge or the product window.
• Don't use a pastel as text, a button fill or an icon stroke. Pastels are washes, lines and dots.
• Don't fill a large surface or a button with the aura gradient, and don't blur it into a glow behind text.
• Don't set headings at 600 or 700. Outfit 450 is the voice; 500 is the most a small title gets.
• Don't set paragraphs or anything over 16px in mono.
• Don't use pure black or pure white text. Ink is #222222; text on ink is bone #fff9f3.
• Don't round cards or fields like pills. Fields are 8px, cards 16px, stages and panels 24px.
• Don't put smoke grey on a pastel tile, and don't add a dashed line or a divider between sections.

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.