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

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