# Cronus UI — DESIGN.md > Product UI system. Aurora is generated product. Neutral is docs chrome. Looks are material. Cronus is not a component-count race. A generated page is installed blocks stacked in `
`. Taste lives in tokens, looks, and these rules — never in hex on a component. - **Themes:** Aurora (flag), Neutral (chrome), Midnight, Sunset, Emerald. - **Looks:** Default, Brutalist, Glass — orthogonal, via `data-cronus-look`. - **Mode:** dark default. Light is first-class. - **CTA:** `npx create-cronus-app my-app --template saas`. ## Active context - **Theme:** aurora — Luminous sky on deep zinc — the flagship of generated product. - **Look:** default — Soft radius, hairline borders, quiet shadow. The baseline material. - Light mode is first-class; tables below are the dark side (the usual generated default). Other palettes: neutral, midnight, sunset, emerald. Switch with `npx cronus-ui theme set ` or MCP `set_theme`. Apply a look with `data-cronus-look` on `` or a subtree. ## Color (aurora dark) | Name | Value | Token | Role | | --- | --- | --- | --- | | Primary | `oklch(0.685 0.169 237.3)` | `--cronus-primary` | The one chromatic fill. Primary buttons, ring. | | Primary fg | `oklch(0.145 0.005 285.8)` | `--cronus-primary-foreground` | Text/icon on primary. Never invent white. | | Accent | `oklch(0.715 0.143 215.2)` | `--cronus-accent` | Supporting chroma. Not a second CTA. | | Canvas | `oklch(0.145 0.005 285.8)` | `--cronus-surface-base` | Page background. | | Raised | `oklch(0.195 0.005 285.8)` | `--cronus-surface-raised` | Cards, bars. | | Overlay | `oklch(0.235 0.006 285.9)` | `--cronus-surface-overlay` | Hover, chips, inset controls. | | Floating | `oklch(0.2 0.006 286)` | `--cronus-surface-floating` | Popovers, menus. | | Foreground | `oklch(0.985 0.001 106.4)` | `--cronus-fg` | Headings, primary copy. | | Secondary | `oklch(0.705 0.015 286)` | `--cronus-fg-secondary` | Body, supporting copy. | | Tertiary | `oklch(0.62 0.014 286)` | `--cronus-fg-tertiary` | Hints the user must read. AA on surfaces. Not fg-muted. | | Muted | `oklch(0.442 0.013 286)` | `--cronus-fg-muted` | Decorative only. Never information. | | Border | `oklch(1 0 0 / 0.1)` | `--cronus-border` | Hairline structure. Prefer this over drop shadows. | | Success | `oklch(0.715 0.155 162.5)` | `--cronus-success-text` | Status text: text-success-strong. | | Warning | `oklch(0.769 0.166 70.08)` | `--cronus-warning-text` | Status text: text-warning-strong. | | Error | `oklch(0.69 0.222 16.44)` | `--cronus-error-text` | Status text: text-error-strong. | ## Looks - **Default** (`data-cronus-look="default"`) **(active)** — Soft radius, hairline borders, quiet shadow. The baseline material. - **Brutalist** (`data-cronus-look="brutalist"`) — Radius 0, stamp shadows, 2px borders, uppercase labels. Geometry does the work. - **Glass** (`data-cronus-look="glass"`) — Larger radius, frosted panes, blur behind outline chrome. Reduced-transparency drops the blur. Radius roles match the primitives (derived from `--cronus-radius`, Looks still win): | Role | Utility | Default | Brutalist | Glass | | --- | --- | --- | --- | --- | | Button | `rounded-lg` / `rounded-button` | radius | 0 | 18px | | Badge | `rounded-md` / `rounded-badge` | radius − 4px | 0 | 14px | | Card | `rounded-xl` / `rounded-card` | radius + 4px | 0 | 22px | | Input | `rounded-lg` | radius | 0 | 18px | | Pill | `rounded-full` / `rounded-pill` | 9999px | 0 | 9999px | ## Type - **Sans / UI:** SF Pro Text, Geist, system-ui. - **Display:** SF Pro Display, Geist. Weight 400 on headings. - **Mono:** SF Mono, JetBrains Mono — IDs, commands, code. Never marketing headlines. | Role | Size | Weight | Tracking | Line | | --- | --- | --- | --- | --- | | Display | 3rem–3.75rem | 400 | −0.03em | ~1.08 | | Heading | 1.5rem–2.25rem | 400 | −0.025em | 1.2 | | Body | 1rem | 400 | 0 | 1.5–1.75 | | Small | 0.875rem | 400 | 0 | 1.5 | | Label / button | 0.75–0.875rem | 500–600 | 0 | 1.25 | ## Layout & elevation - Page max-width ~80rem (7xl). Section padding 4–8. Section gaps large; element gaps 8–12px. - Elevation is hairline borders and surface steps (base → raised → overlay → floating), not stacked drop shadows. - `shadow-glow` is Aurora brand atmosphere, not card chrome. - Density: product apps compact; marketing landings airy. Do not mix both on one screen. ## Component recipes Use Cronus primitives. These are the visual contracts, not new components. 1. **Primary button.** `bg-primary text-primary-foreground rounded-lg`. One per view. Padding ~10×16 at sm. 2. **Outline button.** Transparent fill, `border-border`, `text-fg`. Hover `border-border-strong`. 3. **Card.** `bg-surface-raised border-border rounded-xl`. No inner nested card for hierarchy — use a top border. 4. **Input.** `bg-surface-inset border-border rounded-lg text-fg`. Focus ring `ring-ring`. 5. **Badge.** Small, `font-medium`. Status uses `text-success-strong` / `text-error-strong`, not the fill token as type. 6. **Nav.** Neutral chrome on docs. Product apps may inherit the baked theme. Links `text-fg-secondary`, hover `text-fg`. 7. **Hero (generated).** Display heading + one primary CTA + one outline. Product screenshot or composed blocks as the picture — no stock photo. Primary on aurora: `oklch(0.685 0.169 237.3)` on `oklch(0.145 0.005 285.8)`. ## Rules ### Do - One chromatic filled action per view (`bg-primary text-primary-foreground`). Outline/ghost stay hairline on transparent. - Headings: weight 400, tracking `-0.03em` at 5xl+, `-0.025em` at 3xl/4xl, `-0.02em` at xl/2xl. No `font-bold`, no `tracking-tight`. - `font-semibold` only on small labels, badges, and button text. - Hierarchy with `border-t border-border`, not nested cards. - One motion curve: `cubic-bezier(.22,1,.36,1)`. Gate animation on `prefers-reduced-motion`. - Semantic tokens only: `bg-surface-*`, `text-fg*`, `border-border`, `rounded-lg`. Status text uses `*-strong`. - Readable de-emphasis is `text-fg-tertiary`. `text-fg-muted` is ornament. - Glass: frost outline/default chrome, not solid primary. Honour `prefers-reduced-transparency`. - Docs/landing chrome stays Neutral + Default look. Generated product may use Aurora and any look. ### Don't - No palette scales (`bg-zinc-900`, `text-gray-500`). No raw hex in components. - No second accent as a competing CTA. Accent is supporting chroma. - No `font-bold` on display type. No extra radius vocabulary beyond the scale. - No decorative gradients on buttons or cards. Aurora glow is a surface, not a fill. - Do not restyle docs chrome with the product theme. Dual identity is the point. - Do not fork components per look. `data-cronus-look` restyles `data-slot`. ## Agent prompts Paste this file (compact) before the task. Then: 1. **SaaS dashboard.** Theme `aurora`, look `default`. App shell, metric row, chart, table. One primary button ("New"). Hairline cards. No gradients on chrome. 2. **Marketing hero.** Neutral chrome if this is docs; Aurora if generated product. Heading weight 400, tracking −0.03em. Two pill CTAs: primary + outline. 3. **Settings form.** Field + Label + Input + FormMessage. Invalid state `text-error-strong` and `role="alert"`. No custom red. 4. **Pricing row.** Two cards, one featured `border-border-strong`. Prices with a fixed `Intl.NumberFormat("en-US")`. 5. **Empty state.** Heading + tertiary hint + one primary action. No illustration unless it is a Cronus primitive. Acceptance: semantic tokens only, one primary fill, AA copy, reduced-motion path, no nested cards. ## Quick CSS (dark aurora) ```css :root, [data-cronus-theme="aurora"] { --cronus-primary: oklch(0.685 0.169 237.3); --cronus-primary-foreground: oklch(0.145 0.005 285.8); --cronus-surface-base: oklch(0.145 0.005 285.8); --cronus-surface-raised: oklch(0.195 0.005 285.8); --cronus-fg: oklch(0.985 0.001 106.4); --cronus-fg-secondary: oklch(0.705 0.015 286); --cronus-fg-tertiary: oklch(0.62 0.014 286); --cronus-border: oklch(1 0 0 / 0.1); --cronus-radius: 14px; } ``` Prefer `@import "@cronus-ui/tokens/styles.css"` plus `data-cronus-theme` / `data-cronus-look` over copying this block. ## Files - Repo taste: this file (`DESIGN.md`). Compact prompt: `DESIGN.compact.md`. - Engineering doctrine: `AGENTS.md`. Component contract: Cronus `CONTRACT.md` (tokens, CVA, ref, data-slot, focus ring). - Live: `/themes`, `/llms/docs/design.md`. MCP: `get_design_context`. - Snapshot: `theme set` does not rewrite this file (writes never clobber). Delete it and re-run `cronus-ui ai`, or fetch MCP `get_design_context`.