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: 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: 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: 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: 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