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

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