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