Live preview
Use this system
Three ways to drop Aurora into your workflow.
Save the file for your tool — your agent then generates UI in Aurora, automatically.
CLAUDE.mdRepo root — Claude Code reads it automatically.
.cursor/rules/aurora.mdcProject rule — applied to every generation.
.windsurfrulesRepo root — Cascade reads it automatically.
.github/copilot-instructions.mdRepo-wide custom instructions for Copilot.
The system
Brand & Voice
Aurora is glass after dark — deep indigo surfaces lit by teal and violet glows bleeding through translucent panels. Moody, premium, and a little cosmic, it makes interfaces feel like they're lit from within.
Layout & Grid
Layered dark panels over a slow-shifting gradient. Depth comes from blur and
colored shadow.md halos rather than hard edges.
Components
Buttons
Rounded translucent buttons with a teal color.brand.primary glow on hover and
dark onBrand text for legibility.
Glass Cards
Frosted dark cards on color.surface.raised with a faint border and a colored
shadow that reads as ambient light.
Accessibility
Even with glow and blur, light and muted text pass WCAG AA on the dark glass. Accents are bright enough to read as interactive, and motion respects reduced preferences.
Tokens
Color (14)
Tokens
Export
One source of truth, five formats — copy or download any of them.
---$schema: https://designmd.in/schema/v1.jsonid: auroraname: Auroratitle: Aurora — Dark Glassmorphismversion: 1.0.0category: glassmorphismtags: [glassmorphism, dark, teal, purple, glow]author: designmdlicense: CC-BY-4.0updatedAt: 2026-06-22colorMode: [dark]tokens: color: brand: primary: { value: "oklch(0.72 0.14 190)", type: color } secondary: { value: "oklch(0.68 0.16 305)", type: color } onBrand: { value: "oklch(0.16 0.02 250)", type: color } text: primary: { value: "oklch(0.95 0.006 250)", type: color } muted: { value: "oklch(0.73 0.014 250)", type: color } link: { value: "{color.brand.primary}", type: color } surface: base: { value: "oklch(0.2 0.022 270)", type: color } raised: { value: "oklch(0.25 0.026 270)", type: color } sunken: { value: "oklch(0.16 0.018 270)", type: color } border: default: { value: "oklch(0.35 0.026 270)", type: color } state: success: { value: "oklch(0.74 0.15 155)", type: color } danger: { value: "oklch(0.68 0.2 25)", type: color } warning: { value: "oklch(0.8 0.15 80)", type: color } info: { value: "oklch(0.74 0.13 230)", type: color } typography: family: sans: { value: "Inter, system-ui, sans-serif", type: fontFamily } mono: { value: "JetBrains Mono, ui-monospace, monospace", type: fontFamily } scale: sm: { value: "0.875rem", type: dimension } base: { value: "1rem", type: dimension } lg: { value: "1.25rem", type: dimension } xl: { value: "1.6rem", type: dimension } "2xl": { value: "2.15rem", type: dimension } "3xl": { value: "2.9rem", type: dimension } weight: regular: { value: 400, type: fontWeight } bold: { value: 600, type: fontWeight } leading: tight: { value: 1.15, type: number } normal: { value: 1.55, type: number } spacing: base: { value: "0.25rem", type: dimension } radius: sm: { value: "0.625rem", type: dimension } md: { value: "1rem", type: dimension } lg: { value: "1.5rem", type: dimension } full: { value: "9999px", type: dimension } shadow: sm: { value: "0 2px 10px oklch(0 0 0 / 0.45)", type: shadow } md: { value: "0 16px 48px oklch(0.72 0.14 190 / 0.18)", type: shadow } motion: duration: base: { value: "260ms", type: duration } easing: standard: { value: "cubic-bezier(0.22, 1, 0.36, 1)", type: cubicBezier } breakpoint: md: { value: "768px", type: dimension } iconography: style: { value: "1.5px stroke, luminous edges", type: descriptor } zIndex: dropdown: { value: 1000, type: number } modal: { value: 1300, type: number }---# Aurora Design System## Brand & VoiceAurora is glass after dark — deep indigo surfaces lit by teal and violet glowsbleeding through translucent panels. Moody, premium, and a little cosmic, itmakes interfaces feel like they're lit from within.## Layout & GridLayered dark panels over a slow-shifting gradient. Depth comes from blur andcolored `shadow.md` halos rather than hard edges.## Components### ButtonsRounded translucent buttons with a teal `color.brand.primary` glow on hover anddark `onBrand` text for legibility.### Glass CardsFrosted dark cards on `color.surface.raised` with a faint border and a coloredshadow that reads as ambient light.## AccessibilityEven with glow and blur, light and muted text pass WCAG AA on the dark glass.Accents are bright enough to read as interactive, and motion respects reducedpreferences.