Twelve design systems. Copy the file, paste the vibe.

---
version: alpha
name: Evreghen Command Center
description: "Warm off-white security workspace with a dark frosted application shell and orange telemetry accents."
colors:
  background: "#fcfaf7"
  on-background: "#423d38"
  surface: "#f3f4f6"
  surface-soft: "#edebe9"
  surface-elevated: "#ffffff"
  on-surface: "#423d38"
  on-surface-muted: "#797067"
  outline: "#e3e0dd"
  outline-strong: "#d1d5dc"
  primary: "#fe6e00"
  primary-strong: "#ff6b00"
  primary-warm: "#ffb74d"
  primary-focus: "#f97015"
  on-primary: "#ffffff"
  shell-base: "#000000"
  on-shell: "#ffffff"
  shell-border: "#ffffff"
  success: "#00c758"
  warning: "#edb200"
  danger: "#fb2c36"
  info: "#3080ff"
  status-mock-bg: "#fef9c2"
  status-mock-fg: "#874b00"
  status-planned-bg: "#f3f4f6"
  status-planned-fg: "#364153"
  status-development-bg: "#dbeafe"
  status-development-fg: "#1447e6"
  status-integrated-bg: "#f3e8ff"
  status-integrated-fg: "#8200da"
  status-production-bg: "#dcfce7"
  status-production-fg: "#016630"
  dark-background: "#413830"
  dark-surface: "#4a423a"
  dark-on-surface: "#fafaf9"
  dark-on-surface-muted: "#b9b3ac"
typography:
  display-hero:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "6rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "-0.025em"
  headline-xl:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "2rem"
    fontWeight: 700
    lineHeight: "2.5rem"
    letterSpacing: "-0.025em"
  headline-lg:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: "2rem"
  title-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 700
    lineHeight: "1.75rem"
  body-lg:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: "1.5rem"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
  body-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.8125rem"
    fontWeight: 700
    lineHeight: "1rem"
  label-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.875rem"
    fontWeight: 500
    lineHeight: "1.25rem"
  label-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: "1rem"
    letterSpacing: "0.05em"
  code-sm:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
rounded:
  xs: "4px"
  sm: "6px"
  md: "8px"
  lg: "12px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  "2xl": "32px"
  "3xl": "40px"
  "4xl": "64px"
  container-padding: "32px"
layout:
  container-max: "1400px"
  shell-header-height: "64px"
  shell-sidebar-expanded: "256px"
  shell-sidebar-collapsed: "64px"
motion:
  fast: "150ms"
  normal: "200ms"
  slow: "300ms"
  panel: "500ms"
  easing-standard: "cubic-bezier(0.4, 0, 0.2, 1)"
elevation:
  shell-blur: "12px"
  shell-opacity: "0.70"
  shell-border-opacity: "0.10"
  chart-fill-opacity: "0.60"
shadows:
  subtle: "0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06)"
  raised: "0 4px 12px rgba(0, 0, 0, 0.12)"
  dialog: "0 20px 25px rgba(0, 0, 0, 0.10), 0 8px 10px rgba(0, 0, 0, 0.04)"
components:
  shell-sidebar:
    backgroundColor: "rgba(0, 0, 0, 0.70)"
    textColor: "{colors.on-shell}"
    rounded: "0px"
    width: "{layout.shell-sidebar-expanded}"
    padding: "{spacing.lg}"
  shell-header:
    backgroundColor: "rgba(0, 0, 0, 0.70)"
    textColor: "{colors.on-shell}"
    rounded: "0px"
    height: "{layout.shell-header-height}"
    padding: "0 16px"
  nav-item:
    backgroundColor: "transparent"
    textColor: "rgba(255, 255, 255, 0.70)"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "6px 12px"
  nav-item-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "6px 12px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    height: "40px"
    padding: "0 16px"
  button-primary-hover:
    backgroundColor: "{colors.primary-strong}"
    textColor: "{colors.on-primary}"
  button-ghost-shell:
    backgroundColor: "transparent"
    textColor: "rgba(255, 255, 255, 0.70)"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    height: "40px"
    width: "40px"
  input-shell:
    backgroundColor: "rgba(255, 255, 255, 0.10)"
    textColor: "{colors.on-shell}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    height: "36px"
    padding: "0 12px"
  card-panel:
    backgroundColor: "transparent"
    textColor: "{colors.on-background}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "{spacing.xl}"
  chart-bar:
    backgroundColor: "rgba(254, 110, 0, 0.60)"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.xs}"
  table-header:
    backgroundColor: "rgba(254, 110, 0, 0.05)"
    textColor: "{colors.primary-strong}"
    typography: "{typography.label-sm}"
    height: "48px"
    padding: "0 16px"
  table-cell:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface-muted}"
    typography: "{typography.body-md}"
    padding: "8px 8px"
  status-badge-mock:
    backgroundColor: "{colors.status-mock-bg}"
    textColor: "{colors.status-mock-fg}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.pill}"
    padding: "4px 10px"
  status-badge-planned:
    backgroundColor: "{colors.status-planned-bg}"
    textColor: "{colors.status-planned-fg}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.pill}"
    padding: "4px 10px"
  status-badge-development:
    backgroundColor: "{colors.status-development-bg}"
    textColor: "{colors.status-development-fg}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.pill}"
    padding: "4px 10px"
  status-badge-integrated:
    backgroundColor: "{colors.status-integrated-bg}"
    textColor: "{colors.status-integrated-fg}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.pill}"
    padding: "4px 10px"
  status-badge-production:
    backgroundColor: "{colors.status-production-bg}"
    textColor: "{colors.status-production-fg}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.pill}"
    padding: "4px 10px"
  login-panel:
    backgroundColor: "{colors.primary-strong}"
    textColor: "{colors.on-primary}"
    rounded: "0px"
    padding: "{spacing.2xl}"
  login-card:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: "{spacing.2xl}"
---

## Overview
Evreghen Command Center is a security operations interface that deliberately splits its personality into two layers. The workspace itself is light, warm, and document-like: an off-white canvas, neutral cards, restrained borders, and dense operational content. Around that workspace sits a darker application shell with a frosted-glass feel: black panels at 70% opacity, soft blur, thin white borders, and white navigation text. The product should feel like a modern SOC dashboard that borrows a little from premium automotive or command-console UI without becoming futuristic chrome.

The emotional target is focused, technical, and slightly premium rather than playful. The UI is not flat-white enterprise software, but it also is not neon cyberpunk. It lives in the middle: calm neutrals for reading and scanning, with orange used as the dominant signal for action, telemetry, hover states, focus states, and brand presence.

Default presentation is light mode. Dark mode exists, but the product identity is still anchored in the light workspace with dark shell framing.

## Colors
The visual identity revolves around warm neutrals plus a concentrated orange band.

- **Background (`#FCFAF7`):** The primary page canvas. It should read as warm paper or light stone rather than stark white.
- **Surface (`#F3F4F6`) and Surface Soft (`#EDEBE9`):** Secondary neutrals for app backgrounds, muted panels, table fills, and low-emphasis containers.
- **Foreground (`#423D38`):** Main copy color. It is dark brown-gray rather than charcoal black, which keeps the UI warmer and softer.
- **Muted Foreground (`#797067`):** Metadata, descriptions, secondary labels, and quiet table text.
- **Primary Orange (`#FE6E00` / `#FF6B00`):** The live UI uses a narrow family of close oranges rather than one perfectly normalized accent. Use this family for active navigation, CTA fills, chart bars, icon hover states, prominent labels, and onboarding.
- **Warm Orange (`#FFB74D`):** Gradient or brand warmth. This should be paired with the core orange, not used alone as the main action color.
- **Focus Orange (`#F97015`):** Use for rings, active outlines, and theme-driven highlights.
- **Shell Black (`#000000` rendered at 70% opacity):** Sidebar and top bar are never fully opaque. The shell should feel dark and glassy, not matte black.
- **Status colors:** Yellow for mock/demo, gray for planned, blue for in-development, purple for integrated, and green for production-ready.

Orange should be visually dominant, but not everywhere. The product works because most surfaces stay neutral and let orange carry state, motion, and emphasis.

## Typography
The system uses the browser’s default sans stack rather than a branded webfont. That matters: the voice is practical, fast-loading, and operational, not editorial or highly stylized.

- **Primary typeface:** `ui-sans-serif, system-ui, sans-serif`.
- **Monospace:** `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`.
- **Page headlines:** Use bold weights and compact hierarchy. The main module title sits at `1.5rem` with strong weight rather than oversized hero typography.
- **Operational labels:** Small uppercase labels, especially in cards and tables, rely on wider tracking to feel structured and machine-like.
- **Body copy:** Standard UI sizing with moderate line height. Text should stay compact enough for dashboards.
- **Hero exception:** The onboarding map can use a much larger wordmark treatment, but this is a special-case brand moment, not the default page rhythm.

Typography should feel crisp and legible first. Avoid decorative fonts, wide-display faces, or soft rounded consumer-product typography.

## Layout & Spacing
The system is built on a familiar 4px Tailwind rhythm, but the page composition behaves more like a dashboard shell around a centered content document.

- **Container max width:** `1400px` centered with `32px` horizontal padding.
- **Shell proportions:** The top bar is `64px` tall. The sidebar is `256px` expanded and `64px` collapsed.
- **Content rhythm:** Most page sections use `24px` vertical spacing. Metric cards and multi-column blocks use `16px` gaps.
- **Card padding:** Standard content cards use `24px` internal padding.
- **Table density:** Tables are relatively compact. Headers are `48px` tall, and cells rely on small body text and narrow padding.
- **Login/onboarding layout:** The entry screen is split into two equal halves, with a white visualization panel on one side and a saturated orange panel on the other.

This is not a sparse marketing layout. Density is moderate, but spacing is consistent and never cramped.

## Elevation & Depth
Depth comes from two different strategies depending on the layer.

- **Application shell:** The sidebar and header use blur plus transparency. They should feel like dark glass laid over the workspace.
- **Workspace cards:** Cards use subtle borders and standard UI shadows, but remain visually quiet. They should not look glossy or heavy.
- **Dialogs, dropdowns, and sheets:** These can use stronger shadows than normal cards, but should stay within the same neutral/orange system.
- **Charts and telemetry bars:** Orange fills use opacity rather than full saturation so they integrate with the quiet surrounding panels.

The product should never feel flat, but the depth model is restrained. Use blur for chrome, soft shadows for surfaces, and border definition everywhere else.

## Shapes
Corner treatment is consistent and slightly softened, but never bubbly.

- **Base control radius:** `8px`.
- **Tight controls / inputs:** `6px`.
- **Cards:** `12px`.
- **Pills and badges:** fully rounded.
- **Chrome panels:** square-edged at the macro level, with rounding reserved for internal interactive elements.

This should feel sturdy and contemporary. Avoid sharp corners on controls, but do not push the product into overly rounded consumer-app territory.

## Components
### Shell
The sidebar and top bar are the strongest visual signature. They are black at 70% opacity with a 12px blur and a faint white border. Text inside them is white or white at reduced opacity. Active and hovered navigation items flip to solid orange fills with white text.

### Buttons
Primary buttons are saturated orange with white text. The shape is compact and practical, not oversized. Ghost buttons inside the shell remain transparent until hover, then take on orange or translucent white states depending on context.

### Inputs
There are two input personalities:

- **Shell inputs:** translucent white-on-dark, used in the header search.
- **Surface inputs:** neutral border inputs on white cards, used heavily in login and form contexts.

Both should preserve clean rectangular geometry and avoid deep inset styling.

### Cards
Most analytical content sits in neutral cards with soft shadows and thin borders. Cards are readable first and decorative second. Metric cards, chart cards, and table cards should all feel like members of the same quiet surface family.

### Tables
There are two table idioms in the codebase:

- The newer app-router pages use neutral shadcn-style tables.
- Legacy table styling uses orange borders, orange-tinted headers, and faint orange zebra striping.

When generating new work, prefer the neutral table base for general product consistency, but keep the orange-accented table language available for threat-analysis or legacy-heavy contexts where the product already leans more branded and high-signal.

### Status badges
Status badges are important semantic cues. They should stay soft and readable:

- Mock: pale yellow
- Planned: soft gray
- In Development: pale blue
- Integrated: pale lavender
- Production Ready: pale green

### Onboarding
The login experience is bolder than the platform interior. It pairs a white global-map visualization with a vivid orange panel and a white login card. This is one place where the system can feel more branded and dramatic.

## Do's and Don'ts
- Do keep the primary experience light, warm, and operational.
- Do use the dark frosted shell as a framing device around the workspace.
- Do let orange drive action, hover, focus, telemetry, and brand emphasis.
- Do preserve compact system-sans typography and restrained spacing.
- Do use white or translucent white inside the shell rather than warm gray text.
- Do keep analytical cards quiet so charts, labels, and findings can stand out.

- Don’t replace the warm neutrals with pure white and cool grays.
- Don’t introduce additional saturated brand colors beyond the established orange and semantic status palette.
- Don’t turn the entire product into a dark dashboard; only the chrome should feel like dark glass by default.
- Don’t make every card solid orange, heavily tinted, or dramatically shadowed.
- Don’t swap in trendy geometric or editorial fonts; the system should remain practical and native-feeling.

---
version: alpha
name: Graphite Console
description: "Dark technical dashboard with a cyan signal colour and mono-heavy labelling."
colors:
  background: "#0b0d0f"
  surface: "#14181c"
  surface-elevated: "#1b2126"
  on-background: "#e6edf3"
  on-surface-muted: "#8b98a5"
  outline: "#232b32"
  primary: "#22d3ee"
  primary-strong: "#06b6d4"
  on-primary: "#04212a"
  success: "#34d399"
  warning: "#fbbf24"
  danger: "#f87171"
typography:
  display-hero:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "3rem"
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: "-0.025em"
  headline-lg:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: "2rem"
  title-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: "1.75rem"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.9375rem"
    fontWeight: 400
    lineHeight: "1.5rem"
  label-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: "1rem"
    letterSpacing: "0.06em"
  code-sm:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
rounded:
  control: "6px"
  card: "6px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  "2xl": "32px"
  "3xl": "48px"
  container-padding: "24px"
layout:
  container-max: "1440px"
  header-height: "64px"
  sidebar-expanded: "256px"
motion:
  fast: "150ms"
  normal: "220ms"
  slow: "320ms"
  easing-standard: "cubic-bezier(0.4, 0, 0.2, 1)"
components:
  button-primary:
    backgroundColor: "#22d3ee"
    textColor: "#04212a"
    rounded: "6px"
    height: "40px"
    padding: "0 16px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#e6edf3"
    border: "1px solid #232b32"
    rounded: "6px"
    height: "40px"
  input:
    backgroundColor: "#1b2126"
    textColor: "#e6edf3"
    border: "1px solid #232b32"
    rounded: "6px"
    height: "40px"
  card:
    backgroundColor: "#1b2126"
    textColor: "#e6edf3"
    border: "1px solid #232b32"
    rounded: "6px"
    padding: "24px"
  badge:
    backgroundColor: "#14181c"
    textColor: "#8b98a5"
    rounded: "9999px"
    padding: "4px 10px"
---

## Overview
Graphite Console is a dark operations surface for people who stare at it all day. Almost everything is near-black graphite with thin cool borders; a single cyan signal colour carries state, selection and live data. It should read like instrumentation, not like a marketing page.

## Colors
Graphite backgrounds keep contrast low between panels so charts and status colours pop. Cyan is the only brand colour — never introduce a second saturated hue. Semantic green, amber and red are reserved strictly for state.

## Typography
System sans for interface text, monospace for anything numeric, identifier-like or tabular. Small uppercase mono labels with wide tracking mark every section and column header.

## Layout & Spacing
Dense by design: 1440px container, 16px gutters, 12px card padding, 40px table rows. Whitespace is a budget, not a decoration.

## Elevation & Depth
No shadows on dark surfaces — depth comes from a one-step background lift plus a 1px border. Overlays use a 60% black scrim.

## Shapes
6px on controls, 8px on panels, pills only for status badges. Nothing rounder.

## Components
Buttons are compact cyan fills or bordered ghosts. Inputs are surface-filled with a cyan focus ring. Tables are zebra-free with hover row highlight. Charts use cyan at 70% opacity with a 1px stroke.

## Do's and Don'ts
- Do keep the whole product dark and low-glare
- Do use mono for numbers, IDs and timestamps
- Do let cyan mean live, selected or actionable
- Do keep panels flat with border definition

- Don't add a second brand colour
- Don't use drop shadows on dark panels
- Don't use large display typography
- Don't inflate spacing into a marketing layout

---
version: alpha
name: Paper Editorial
description: "Off-white paper, serif headlines, ink black text and a generous reading measure."
colors:
  background: "#f5f3ee"
  surface: "#ffffff"
  surface-elevated: "#ffffff"
  on-background: "#0d0d0d"
  on-surface-muted: "#5f5b54"
  outline: "#e0dcd3"
  primary: "#0d0d0d"
  primary-strong: "#000000"
  on-primary: "#f5f3ee"
  success: "#2f7a4f"
  warning: "#a06b00"
  danger: "#a02121"
typography:
  display-hero:
    fontFamily: ""Iowan Old Style", Georgia, "Times New Roman", serif"
    fontSize: "4.5rem"
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: "-0.025em"
  headline-lg:
    fontFamily: ""Iowan Old Style", Georgia, "Times New Roman", serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: "2rem"
  title-md:
    fontFamily: ""Iowan Old Style", Georgia, "Times New Roman", serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: "1.75rem"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.9375rem"
    fontWeight: 400
    lineHeight: "1.5rem"
  label-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: "1rem"
    letterSpacing: "0.06em"
  code-sm:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
rounded:
  control: "2px"
  card: "2px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  "2xl": "32px"
  "3xl": "48px"
  container-padding: "24px"
layout:
  container-max: "1120px"
  header-height: "64px"
  sidebar-expanded: "256px"
motion:
  fast: "150ms"
  normal: "220ms"
  slow: "320ms"
  easing-standard: "cubic-bezier(0.4, 0, 0.2, 1)"
components:
  button-primary:
    backgroundColor: "#0d0d0d"
    textColor: "#f5f3ee"
    rounded: "2px"
    height: "40px"
    padding: "0 16px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#0d0d0d"
    border: "1px solid #e0dcd3"
    rounded: "2px"
    height: "40px"
  input:
    backgroundColor: "#ffffff"
    textColor: "#0d0d0d"
    border: "1px solid #e0dcd3"
    rounded: "2px"
    height: "40px"
  card:
    backgroundColor: "#ffffff"
    textColor: "#0d0d0d"
    border: "1px solid #e0dcd3"
    rounded: "2px"
    padding: "24px"
  badge:
    backgroundColor: "#ffffff"
    textColor: "#5f5b54"
    rounded: "9999px"
    padding: "4px 10px"
---

## Overview
Paper Editorial is a reading-first system. The page behaves like a well-set magazine: warm paper background, ink-black serif headlines, a narrow measure for body copy and almost no chrome. Colour is used for meaning only, never for decoration.

## Colors
One warm paper tone, one ink tone, one muted grey. The accent is the ink itself — emphasis comes from weight, size and rules rather than hue.

## Typography
Serif for headlines at large sizes with tight tracking; sans for body at 1.0625rem and 1.7 line height. Body measure caps at 68 characters. Small caps and hairline rules replace coloured labels.

## Layout & Spacing
1120px container, single centred column for prose, 80px vertical rhythm between sections. Images run full-bleed inside the column or break to the margin.

## Elevation & Depth
Effectively flat. Separation is done with 1px hairline rules and whitespace. No shadows anywhere except modals.

## Shapes
Near-square: 2px radius, straight image corners, no pills. Buttons are rectangles with a 1px ink border.

## Components
Buttons are ink outlines that invert on hover. Inputs are underlined rather than boxed. Cards are borderless blocks separated by rules. Pull quotes use an oversized serif with a left rule.

## Do's and Don'ts
- Do protect the reading measure
- Do use hairline rules instead of borders and boxes
- Do let typography carry all hierarchy
- Do keep the palette to paper, ink and one grey

- Don't add coloured buttons or badges
- Don't round corners
- Don't compress line height below 1.6 for body
- Don't add gradients or shadows

---
version: alpha
name: Midnight Indigo SaaS
description: "Deep navy product UI with electric indigo accents and glassy nav."
colors:
  background: "#0a0a1a"
  surface: "#141432"
  surface-elevated: "#1b1b42"
  on-background: "#e8e8f5"
  on-surface-muted: "#9a9ac0"
  outline: "#26264f"
  primary: "#4f46e5"
  primary-strong: "#6366f1"
  on-primary: "#ffffff"
  success: "#22c55e"
  warning: "#eab308"
  danger: "#ef4444"
typography:
  display-hero:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "3.5rem"
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: "-0.025em"
  headline-lg:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: "2rem"
  title-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: "1.75rem"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.9375rem"
    fontWeight: 400
    lineHeight: "1.5rem"
  label-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: "1rem"
    letterSpacing: "0.06em"
  code-sm:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
rounded:
  control: "10px"
  card: "10px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  "2xl": "32px"
  "3xl": "48px"
  container-padding: "24px"
layout:
  container-max: "1280px"
  header-height: "64px"
  sidebar-expanded: "256px"
motion:
  fast: "150ms"
  normal: "220ms"
  slow: "320ms"
  easing-standard: "cubic-bezier(0.4, 0, 0.2, 1)"
components:
  button-primary:
    backgroundColor: "#4f46e5"
    textColor: "#ffffff"
    rounded: "10px"
    height: "40px"
    padding: "0 16px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#e8e8f5"
    border: "1px solid #26264f"
    rounded: "10px"
    height: "40px"
  input:
    backgroundColor: "#1b1b42"
    textColor: "#e8e8f5"
    border: "1px solid #26264f"
    rounded: "10px"
    height: "40px"
  card:
    backgroundColor: "#1b1b42"
    textColor: "#e8e8f5"
    border: "1px solid #26264f"
    rounded: "10px"
    padding: "24px"
  badge:
    backgroundColor: "#141432"
    textColor: "#9a9ac0"
    rounded: "9999px"
    padding: "4px 10px"
---

## Overview
Midnight Indigo is a modern SaaS product skin: deep navy canvas, layered indigo surfaces and a saturated indigo action colour. It should feel premium and confident — the sort of dashboard people screenshot for a launch post.

## Colors
Three navy steps build the layer model: canvas, surface, elevated. Indigo is the single action colour, used for primary buttons, active nav, focus rings and chart series.

## Typography
System sans throughout with strong weight contrast: 600 for headings, 400 for body, 500 for labels. Numbers in cards use tabular figures.

## Layout & Spacing
1280px container, 24px section rhythm, 20px card padding, 12-column grid on desktop collapsing to one column below 768px.

## Elevation & Depth
Elevated surfaces lift with a lighter navy plus a soft indigo-tinted shadow. The top nav is 60% navy with 16px blur.

## Shapes
10px cards, 8px controls, pills for tags. Consistently soft but not bubbly.

## Components
Primary buttons are solid indigo with white text and a subtle glow on hover. Secondary buttons are surface-filled with a border. Inputs are surface-filled with an indigo focus ring. Charts use indigo-to-violet gradients at 60% opacity.

## Do's and Don'ts
- Do keep three clear navy layers
- Do use indigo only for action and active state
- Do add a soft glow on primary hover
- Do use tabular figures for metrics

- Don't use pure black or pure white
- Don't scatter multiple accent hues
- Don't let cards drift to grey — keep them navy
- Don't over-shadow: one soft layer is enough

---
version: alpha
name: Warm Sand Studio
description: "Soft warm neutrals and sandy tones for a calm agency or studio site."
colors:
  background: "#faf8f5"
  surface: "#f0ebe3"
  surface-elevated: "#ffffff"
  on-background: "#3a352e"
  on-surface-muted: "#8b7f6e"
  outline: "#e3dbcd"
  primary: "#8b7355"
  primary-strong: "#6f5b42"
  on-primary: "#ffffff"
  success: "#5f8a5f"
  warning: "#b58a2b"
  danger: "#b4574a"
typography:
  display-hero:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "4rem"
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: "-0.025em"
  headline-lg:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: "2rem"
  title-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: "1.75rem"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.9375rem"
    fontWeight: 400
    lineHeight: "1.5rem"
  label-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: "1rem"
    letterSpacing: "0.06em"
  code-sm:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
rounded:
  control: "14px"
  card: "14px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  "2xl": "32px"
  "3xl": "48px"
  container-padding: "24px"
layout:
  container-max: "1200px"
  header-height: "64px"
  sidebar-expanded: "256px"
motion:
  fast: "150ms"
  normal: "220ms"
  slow: "320ms"
  easing-standard: "cubic-bezier(0.4, 0, 0.2, 1)"
components:
  button-primary:
    backgroundColor: "#8b7355"
    textColor: "#ffffff"
    rounded: "14px"
    height: "40px"
    padding: "0 16px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#3a352e"
    border: "1px solid #e3dbcd"
    rounded: "14px"
    height: "40px"
  input:
    backgroundColor: "#ffffff"
    textColor: "#3a352e"
    border: "1px solid #e3dbcd"
    rounded: "14px"
    height: "40px"
  card:
    backgroundColor: "#ffffff"
    textColor: "#3a352e"
    border: "1px solid #e3dbcd"
    rounded: "14px"
    padding: "24px"
  badge:
    backgroundColor: "#f0ebe3"
    textColor: "#8b7f6e"
    rounded: "9999px"
    padding: "4px 10px"
---

## Overview
Warm Sand Studio is a calm, unhurried marketing system for studios, consultancies and small brands. Everything is warm neutral; the accent is a muted clay brown rather than a bright colour. The result should feel handmade and considered.

## Colors
Sand, cream and clay. Contrast is deliberately gentler than a typical SaaS site, so text sizes run slightly larger to compensate.

## Typography
System sans with light headline weights (500-600) at generous sizes, body at 1.0625rem and 1.65 line height. Uppercase mono eyebrows in muted brown.

## Layout & Spacing
1200px container, 96px section rhythm, 32px card padding. Layouts alternate between wide image bands and two-column text blocks.

## Elevation & Depth
Very soft: 0 8px 24px rgba(120, 100, 70, 0.08). Cards mostly rely on a cream fill against the sand canvas.

## Shapes
14px cards, 10px controls, fully rounded avatars and pills. Images use the same 14px radius.

## Components
Buttons are clay fills or bordered ghosts with generous horizontal padding. Inputs are cream with a 1px sand border. Cards are white on sand with wide padding.

## Do's and Don'ts
- Do keep every neutral warm
- Do use large, calm spacing
- Do let photography carry the colour
- Do use the clay accent sparingly

- Don't introduce cool greys or pure white backgrounds
- Don't use hard black text
- Don't crowd sections
- Don't add saturated accent colours

---
version: alpha
name: Noir & Gold
description: "Black and gold luxury with high-contrast editorial typography."
colors:
  background: "#0d0d0d"
  surface: "#161616"
  surface-elevated: "#1e1e1e"
  on-background: "#f0ece2"
  on-surface-muted: "#9c9689"
  outline: "#2a2a2a"
  primary: "#c9a84c"
  primary-strong: "#f0d78c"
  on-primary: "#0d0d0d"
  success: "#6ba368"
  warning: "#d8a33a"
  danger: "#b4544a"
typography:
  display-hero:
    fontFamily: ""Didot", "Bodoni MT", Georgia, serif"
    fontSize: "5rem"
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: "-0.025em"
  headline-lg:
    fontFamily: ""Didot", "Bodoni MT", Georgia, serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: "2rem"
  title-md:
    fontFamily: ""Didot", "Bodoni MT", Georgia, serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: "1.75rem"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.9375rem"
    fontWeight: 400
    lineHeight: "1.5rem"
  label-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: "1rem"
    letterSpacing: "0.06em"
  code-sm:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
rounded:
  control: "0px"
  card: "0px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  "2xl": "32px"
  "3xl": "48px"
  container-padding: "24px"
layout:
  container-max: "1320px"
  header-height: "64px"
  sidebar-expanded: "256px"
motion:
  fast: "150ms"
  normal: "220ms"
  slow: "320ms"
  easing-standard: "cubic-bezier(0.4, 0, 0.2, 1)"
components:
  button-primary:
    backgroundColor: "#c9a84c"
    textColor: "#0d0d0d"
    rounded: "0px"
    height: "40px"
    padding: "0 16px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#f0ece2"
    border: "1px solid #2a2a2a"
    rounded: "0px"
    height: "40px"
  input:
    backgroundColor: "#1e1e1e"
    textColor: "#f0ece2"
    border: "1px solid #2a2a2a"
    rounded: "0px"
    height: "40px"
  card:
    backgroundColor: "#1e1e1e"
    textColor: "#f0ece2"
    border: "1px solid #2a2a2a"
    rounded: "0px"
    padding: "24px"
  badge:
    backgroundColor: "#161616"
    textColor: "#9c9689"
    rounded: "9999px"
    padding: "4px 10px"
---

## Overview
Noir & Gold is a luxury identity for jewellery, hospitality, private services and premium editorial. Black dominates, gold is rationed, and high-contrast serif display type does the heavy lifting.

## Colors
Near-black canvas with two barely-separated dark surfaces. Gold appears in hairlines, small caps, underlines and one button per screen — never as a large fill.

## Typography
High-contrast serif display at 3.5-5rem with tight tracking, paired with a quiet sans for body. Uppercase small labels use 0.2em tracking in gold.

## Layout & Spacing
1320px container, asymmetric two-column compositions, 120px section rhythm. Wide margins are part of the luxury signal.

## Elevation & Depth
No shadows. Depth comes from black-on-black layering and thin gold rules.

## Shapes
Square. Zero radius on every element including images and buttons.

## Components
Buttons are 1px gold outlines that fill gold on hover with black text. Inputs are underlined in gold. Cards are bordered black rectangles with a gold rule above the title.

## Do's and Don'ts
- Do keep gold rare and thin
- Do use square corners everywhere
- Do let whitespace signal expense
- Do pair serif display with quiet sans body

- Don't fill large areas with gold
- Don't round corners
- Don't add a third colour
- Don't crowd the layout

---
version: alpha
name: Neon Mint Startup
description: "Near-black canvas with bright mint for energetic product marketing."
colors:
  background: "#0d1b2a"
  surface: "#122436"
  surface-elevated: "#173047"
  on-background: "#eafff6"
  on-surface-muted: "#8fb3ab"
  outline: "#1e3a4d"
  primary: "#2dd4a8"
  primary-strong: "#73ffb8"
  on-primary: "#04231a"
  success: "#2dd4a8"
  warning: "#facc15"
  danger: "#fb7185"
typography:
  display-hero:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "4.25rem"
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: "-0.025em"
  headline-lg:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: "2rem"
  title-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: "1.75rem"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.9375rem"
    fontWeight: 400
    lineHeight: "1.5rem"
  label-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: "1rem"
    letterSpacing: "0.06em"
  code-sm:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
rounded:
  control: "12px"
  card: "12px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  "2xl": "32px"
  "3xl": "48px"
  container-padding: "24px"
layout:
  container-max: "1200px"
  header-height: "64px"
  sidebar-expanded: "256px"
motion:
  fast: "150ms"
  normal: "220ms"
  slow: "320ms"
  easing-standard: "cubic-bezier(0.4, 0, 0.2, 1)"
components:
  button-primary:
    backgroundColor: "#2dd4a8"
    textColor: "#04231a"
    rounded: "12px"
    height: "40px"
    padding: "0 16px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#eafff6"
    border: "1px solid #1e3a4d"
    rounded: "12px"
    height: "40px"
  input:
    backgroundColor: "#173047"
    textColor: "#eafff6"
    border: "1px solid #1e3a4d"
    rounded: "12px"
    height: "40px"
  card:
    backgroundColor: "#173047"
    textColor: "#eafff6"
    border: "1px solid #1e3a4d"
    rounded: "12px"
    padding: "24px"
  badge:
    backgroundColor: "#122436"
    textColor: "#8fb3ab"
    rounded: "9999px"
    padding: "4px 10px"
---

## Overview
Neon Mint is a launch-day system: dark teal-navy canvas, oversized bold headlines and an electric mint accent that glows. Built for landing pages, changelogs and product marketing rather than dense admin work.

## Colors
Cool dark base with mint as the single high-energy accent. Mint glows are allowed — a soft mint blur behind hero elements and buttons is part of the identity.

## Typography
Very bold headlines (700-800) at large sizes with -0.03em tracking, body at 1.0625rem. Mono uppercase eyebrows in mint.

## Layout & Spacing
1200px container, 112px section rhythm, generous 32px card padding, centred hero with a wide gradient glow behind it.

## Elevation & Depth
Glow-based: 0 0 60px rgba(45, 212, 168, 0.25) behind key elements, plus soft dark shadows on cards.

## Shapes
12px cards, 10px buttons, pills for badges. Friendly but not childish.

## Components
Primary buttons are mint fills with dark text and a glow on hover. Cards are surface-filled with a 1px border that turns mint on hover. Stat blocks use large mint numerals.

## Do's and Don'ts
- Do use mint for energy and emphasis
- Do allow soft glows around key elements
- Do go big on headline size
- Do keep body copy short and punchy

- Don't use mint for body text
- Don't add a competing bright hue
- Don't use this for dense data tables
- Don't make the canvas pure black

---
version: alpha
name: Clinical White
description: "Crisp, high-clarity light UI with a blue accent for medical, finance and dense forms."
colors:
  background: "#ffffff"
  surface: "#f6f8fa"
  surface-elevated: "#ffffff"
  on-background: "#101828"
  on-surface-muted: "#667085"
  outline: "#e4e7ec"
  primary: "#2563eb"
  primary-strong: "#1d4ed8"
  on-primary: "#ffffff"
  success: "#16a34a"
  warning: "#d97706"
  danger: "#dc2626"
typography:
  display-hero:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "2.5rem"
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: "-0.025em"
  headline-lg:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: "2rem"
  title-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: "1.75rem"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.9375rem"
    fontWeight: 400
    lineHeight: "1.5rem"
  label-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: "1rem"
    letterSpacing: "0.06em"
  code-sm:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
rounded:
  control: "8px"
  card: "8px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  "2xl": "32px"
  "3xl": "48px"
  container-padding: "24px"
layout:
  container-max: "1360px"
  header-height: "64px"
  sidebar-expanded: "256px"
motion:
  fast: "150ms"
  normal: "220ms"
  slow: "320ms"
  easing-standard: "cubic-bezier(0.4, 0, 0.2, 1)"
components:
  button-primary:
    backgroundColor: "#2563eb"
    textColor: "#ffffff"
    rounded: "8px"
    height: "40px"
    padding: "0 16px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#101828"
    border: "1px solid #e4e7ec"
    rounded: "8px"
    height: "40px"
  input:
    backgroundColor: "#ffffff"
    textColor: "#101828"
    border: "1px solid #e4e7ec"
    rounded: "8px"
    height: "40px"
  card:
    backgroundColor: "#ffffff"
    textColor: "#101828"
    border: "1px solid #e4e7ec"
    rounded: "8px"
    padding: "24px"
  badge:
    backgroundColor: "#f6f8fa"
    textColor: "#667085"
    rounded: "9999px"
    padding: "4px 10px"
---

## Overview
Clinical White is a precision system for regulated, form-heavy products: patient records, banking back-offices, insurance and compliance tools. It prioritises legibility, scannability and unambiguous state over personality.

## Colors
Pure white canvas with a cool grey surface for grouping. Blue is the only interactive colour. Semantic green, amber and red carry state and must never be used decoratively.

## Typography
System sans at 14px base with 20px line height. Headings top out at 1.5rem. Labels are 12px semibold. Numeric columns use tabular mono.

## Layout & Spacing
1360px container, 16px grid gutters, 20px card padding, 44px form rows with labels above inputs. Dense but never cramped.

## Elevation & Depth
Minimal: 0 1px 2px rgba(16, 24, 40, 0.06) on cards, a stronger shadow on dropdowns and dialogs only.

## Shapes
8px cards and controls, 6px inputs, pills for status only.

## Components
Buttons are blue fills, grey outlines or plain text links. Inputs are white with grey borders and a 2px blue focus ring. Tables have sticky headers, 44px rows and a hover tint. Alerts use a tinted background with a matching left border.

## Do's and Don'ts
- Do keep contrast high and colour meaning literal
- Do label every input above the field
- Do use sticky table headers on long lists
- Do make focus states obvious for keyboard users

- Don't decorate with the semantic colours
- Don't use placeholder text as a label
- Don't add gradients or glassmorphism
- Don't reduce body text below 14px

---
version: alpha
name: Terracotta Craft
description: "Earthy terracotta and sage for human, handmade brands."
colors:
  background: "#fdf8f3"
  surface: "#f6ece1"
  surface-elevated: "#ffffff"
  on-background: "#3d2b23"
  on-surface-muted: "#8a6f60"
  outline: "#e8d7c7"
  primary: "#c4654a"
  primary-strong: "#a8503a"
  on-primary: "#ffffff"
  success: "#4a6741"
  warning: "#c98a2b"
  danger: "#a33a2c"
typography:
  display-hero:
    fontFamily: ""Iowan Old Style", Georgia, serif"
    fontSize: "3.75rem"
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: "-0.025em"
  headline-lg:
    fontFamily: ""Iowan Old Style", Georgia, serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: "2rem"
  title-md:
    fontFamily: ""Iowan Old Style", Georgia, serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: "1.75rem"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.9375rem"
    fontWeight: 400
    lineHeight: "1.5rem"
  label-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: "1rem"
    letterSpacing: "0.06em"
  code-sm:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
rounded:
  control: "16px"
  card: "16px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  "2xl": "32px"
  "3xl": "48px"
  container-padding: "24px"
layout:
  container-max: "1140px"
  header-height: "64px"
  sidebar-expanded: "256px"
motion:
  fast: "150ms"
  normal: "220ms"
  slow: "320ms"
  easing-standard: "cubic-bezier(0.4, 0, 0.2, 1)"
components:
  button-primary:
    backgroundColor: "#c4654a"
    textColor: "#ffffff"
    rounded: "16px"
    height: "40px"
    padding: "0 16px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#3d2b23"
    border: "1px solid #e8d7c7"
    rounded: "16px"
    height: "40px"
  input:
    backgroundColor: "#ffffff"
    textColor: "#3d2b23"
    border: "1px solid #e8d7c7"
    rounded: "16px"
    height: "40px"
  card:
    backgroundColor: "#ffffff"
    textColor: "#3d2b23"
    border: "1px solid #e8d7c7"
    rounded: "16px"
    padding: "24px"
  badge:
    backgroundColor: "#f6ece1"
    textColor: "#8a6f60"
    rounded: "9999px"
    padding: "4px 10px"
---

## Overview
Terracotta Craft suits food, ceramics, wellness, small-batch retail and anything that wants to feel made by hands. Warm clay and sage on a cream canvas, with a serif headline voice and soft organic shapes.

## Colors
Terracotta leads, sage supports, cream and warm brown fill the rest. Sage is the only secondary hue permitted and belongs to success states and quiet accents.

## Typography
Serif headlines with relaxed tracking, sans body at 1.0625rem and 1.7 line height. Eyebrows are small caps in terracotta.

## Layout & Spacing
1140px container, 88px section rhythm, 28px card padding, editorial two-column blocks with offset images.

## Elevation & Depth
Soft warm shadows: 0 6px 20px rgba(120, 70, 50, 0.10). Cards may also sit flat on the cream canvas.

## Shapes
16px cards, 12px controls, pills for tags, and fully rounded or arch-topped images where appropriate.

## Components
Buttons are terracotta fills or bordered ghosts. Inputs are cream with a warm border. Cards are white with a terracotta rule or icon at the top.

## Do's and Don'ts
- Do keep every neutral warm and slightly pink
- Do use sage as the only secondary hue
- Do favour rounded, organic shapes
- Do let photography stay warm-toned

- Don't use cool grey or blue
- Don't use pure black text
- Don't over-saturate the terracotta
- Don't make it feel corporate or dense

---
version: alpha
name: Brutalist Pop
description: "Hard edges, thick black borders and one loud accent."
colors:
  background: "#ffffff"
  surface: "#ffeb3b"
  surface-elevated: "#ffffff"
  on-background: "#0a0a0a"
  on-surface-muted: "#3d3d3d"
  outline: "#0a0a0a"
  primary: "#ff5722"
  primary-strong: "#e64a19"
  on-primary: "#ffffff"
  success: "#00c853"
  warning: "#ffeb3b"
  danger: "#ff1744"
typography:
  display-hero:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "5.5rem"
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: "-0.025em"
  headline-lg:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: "2rem"
  title-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: "1.75rem"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.9375rem"
    fontWeight: 400
    lineHeight: "1.5rem"
  label-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: "1rem"
    letterSpacing: "0.06em"
  code-sm:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
rounded:
  control: "0px"
  card: "0px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  "2xl": "32px"
  "3xl": "48px"
  container-padding: "24px"
layout:
  container-max: "1280px"
  header-height: "64px"
  sidebar-expanded: "256px"
motion:
  fast: "150ms"
  normal: "220ms"
  slow: "320ms"
  easing-standard: "cubic-bezier(0.4, 0, 0.2, 1)"
components:
  button-primary:
    backgroundColor: "#ff5722"
    textColor: "#ffffff"
    rounded: "0px"
    height: "40px"
    padding: "0 16px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#0a0a0a"
    border: "1px solid #0a0a0a"
    rounded: "0px"
    height: "40px"
  input:
    backgroundColor: "#ffffff"
    textColor: "#0a0a0a"
    border: "1px solid #0a0a0a"
    rounded: "0px"
    height: "40px"
  card:
    backgroundColor: "#ffffff"
    textColor: "#0a0a0a"
    border: "1px solid #0a0a0a"
    rounded: "0px"
    padding: "24px"
  badge:
    backgroundColor: "#ffeb3b"
    textColor: "#3d3d3d"
    rounded: "9999px"
    padding: "4px 10px"
---

## Overview
Brutalist Pop is loud on purpose: white canvas, 2-3px black borders on everything, hard offset shadows and one saturated orange doing the shouting. Good for indie products, event sites and portfolios that want to be remembered.

## Colors
Black, white, orange and a yellow surface. That is the whole palette. Colour blocks are flat and full-strength with no gradients or tints.

## Typography
Enormous bold headlines (800-900) with -0.04em tracking, uppercase mono for labels and buttons, plain sans body. Headline sizes should feel one step too large.

## Layout & Spacing
1280px container, deliberately asymmetric grids, 64px section rhythm, elements allowed to overlap and misalign by a few pixels.

## Elevation & Depth
Hard offset shadows only: 6px 6px 0 #0a0a0a. No blur, ever. Hover moves the element 2px and shrinks the shadow.

## Shapes
Zero radius everywhere. Borders are 2px minimum, 3px on primary actions.

## Components
Buttons are flat colour blocks with a black border and offset shadow. Inputs are white with a 2px black border and no focus glow — just a colour swap. Cards are bordered blocks, sometimes rotated one degree.

## Do's and Don'ts
- Do use thick black borders on every element
- Do use hard offset shadows with no blur
- Do go oversized on headlines
- Do keep colour flat and full-strength

- Don't round anything
- Don't use soft or blurred shadows
- Don't add gradients or transparency
- Don't use this for dense data-entry products

---
version: alpha
name: Glass Aurora
description: "Translucent gradient panels and aurora light on a deep canvas."
colors:
  background: "#1a1a2e"
  surface: "rgba(255, 255, 255, 0.06)"
  surface-elevated: "rgba(255, 255, 255, 0.10)"
  on-background: "#f2f2fa"
  on-surface-muted: "#a8a8c8"
  outline: "rgba(255, 255, 255, 0.14)"
  primary: "#a78bfa"
  primary-strong: "#4ade80"
  on-primary: "#16162b"
  success: "#4ade80"
  warning: "#fbbf24"
  danger: "#fb7185"
typography:
  display-hero:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "4rem"
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: "-0.025em"
  headline-lg:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: "2rem"
  title-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: "1.75rem"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.9375rem"
    fontWeight: 400
    lineHeight: "1.5rem"
  label-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: "1rem"
    letterSpacing: "0.06em"
  code-sm:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
rounded:
  control: "20px"
  card: "20px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  "2xl": "32px"
  "3xl": "48px"
  container-padding: "24px"
layout:
  container-max: "1200px"
  header-height: "64px"
  sidebar-expanded: "256px"
motion:
  fast: "150ms"
  normal: "220ms"
  slow: "320ms"
  easing-standard: "cubic-bezier(0.4, 0, 0.2, 1)"
components:
  button-primary:
    backgroundColor: "#a78bfa"
    textColor: "#16162b"
    rounded: "20px"
    height: "40px"
    padding: "0 16px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#f2f2fa"
    border: "1px solid rgba(255, 255, 255, 0.14)"
    rounded: "20px"
    height: "40px"
  input:
    backgroundColor: "rgba(255, 255, 255, 0.10)"
    textColor: "#f2f2fa"
    border: "1px solid rgba(255, 255, 255, 0.14)"
    rounded: "20px"
    height: "40px"
  card:
    backgroundColor: "rgba(255, 255, 255, 0.10)"
    textColor: "#f2f2fa"
    border: "1px solid rgba(255, 255, 255, 0.14)"
    rounded: "20px"
    padding: "24px"
  badge:
    backgroundColor: "rgba(255, 255, 255, 0.06)"
    textColor: "#a8a8c8"
    rounded: "9999px"
    padding: "4px 10px"
---

## Overview
Glass Aurora layers frosted translucent panels over a deep indigo canvas lit by soft violet and green aurora blurs. It is a presentation-grade skin for AI products, music apps and anything that benefits from atmosphere.

## Colors
The canvas is deep indigo with two large radial blurs — violet and mint — sitting behind the content. Panels are white at 6-10% opacity. Text is near-white; muted text is lavender-grey.

## Typography
System sans, 600 headings, 400 body, slightly increased letter spacing on small labels to survive the translucent background.

## Layout & Spacing
1200px container, floating card compositions with 24px gaps, 96px section rhythm. Content is centred and never touches the viewport edges.

## Elevation & Depth
Backdrop blur of 16-24px on every panel plus a 1px white 14% border and a soft dark shadow underneath. The aurora blurs sit at 300-600px radius.

## Shapes
20px panels, 12px controls, pills for chips. Generous rounding is part of the softness.

## Components
Buttons are violet fills or glass ghosts with a white border. Inputs are glass with an inner highlight. Cards are glass panels; never place a glass panel directly on another glass panel.

## Do's and Don'ts
- Do keep a coloured light source behind the glass
- Do use a 1px white border on every panel
- Do keep text near-white for contrast
- Do limit yourself to two aurora hues

- Don't stack glass on glass
- Don't use dark text on glass
- Don't add heavy borders or hard shadows
- Don't use this where reading long text matters

---
version: alpha
name: Bubblegum Consumer
description: "Rounded, playful pink and sky palette for mobile-first consumer apps."
colors:
  background: "#fff7fa"
  surface: "#ffe9f1"
  surface-elevated: "#ffffff"
  on-background: "#2e1b26"
  on-surface-muted: "#8a6c7a"
  outline: "#ffd3e2"
  primary: "#f2568f"
  primary-strong: "#d93d78"
  on-primary: "#ffffff"
  success: "#34c98a"
  warning: "#f7b731"
  danger: "#ef4444"
typography:
  display-hero:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "2.25rem"
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: "-0.025em"
  headline-lg:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: "2rem"
  title-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: "1.75rem"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.9375rem"
    fontWeight: 400
    lineHeight: "1.5rem"
  label-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: "1rem"
    letterSpacing: "0.06em"
  code-sm:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
rounded:
  control: "22px"
  card: "22px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  "2xl": "32px"
  "3xl": "48px"
  container-padding: "24px"
layout:
  container-max: "480px"
  header-height: "64px"
  sidebar-expanded: "256px"
motion:
  fast: "150ms"
  normal: "220ms"
  slow: "320ms"
  easing-standard: "cubic-bezier(0.4, 0, 0.2, 1)"
components:
  button-primary:
    backgroundColor: "#f2568f"
    textColor: "#ffffff"
    rounded: "22px"
    height: "40px"
    padding: "0 16px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#2e1b26"
    border: "1px solid #ffd3e2"
    rounded: "22px"
    height: "40px"
  input:
    backgroundColor: "#ffffff"
    textColor: "#2e1b26"
    border: "1px solid #ffd3e2"
    rounded: "22px"
    height: "40px"
  card:
    backgroundColor: "#ffffff"
    textColor: "#2e1b26"
    border: "1px solid #ffd3e2"
    rounded: "22px"
    padding: "24px"
  badge:
    backgroundColor: "#ffe9f1"
    textColor: "#8a6c7a"
    rounded: "9999px"
    padding: "4px 10px"
---

## Overview
Bubblegum Consumer is a mobile-first system for habit trackers, social apps and anything aimed at a wide consumer audience. Big rounded shapes, pink and sky accents, chunky tappable controls and a friendly tone throughout.

## Colors
Pink leads, sky blue supports illustrations and secondary chips, and everything sits on a barely-pink white. Semantic colours stay soft rather than clinical.

## Typography
System sans with 700 headings at moderate sizes — the emphasis is on size of touch targets, not size of type. Body at 1rem, 1.5 line height. No uppercase labels.

## Layout & Spacing
480px content column that centres on desktop, 20px screen padding, 16px card gaps, 88px bottom tab bar with safe-area padding.

## Elevation & Depth
Soft pink-tinted shadows: 0 8px 20px rgba(242, 86, 143, 0.15). Sheets slide up with a rounded top and a grab handle.

## Shapes
22px cards, 16px controls, fully rounded buttons and avatars. Everything is soft.

## Components
Primary buttons are full-width pink pills at 52px height. Inputs are 52px filled fields with rounded corners and no visible border until focus. Cards are white with a pink illustration or emoji anchor. Bottom tab bar with pink active icons.

## Do's and Don'ts
- Do keep touch targets at 48px or larger
- Do use full-width primary buttons on mobile
- Do keep copy friendly and short
- Do round everything generously

- Don't use uppercase mono labels
- Don't build dense tables in this system
- Don't use hard shadows or square corners
- Don't let pink drop below AA contrast on white