Live preview
Use this system
Three ways to drop Halo into your workflow.
Save the file for your tool — your agent then generates UI in Halo, automatically.
CLAUDE.mdRepo root — Claude Code reads it automatically.
.cursor/rules/halo.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
Halo is soft-focus and dreamy: pearly rose surfaces, gentle blur, and a glow that wraps every element. Where Aurora is nocturnal, Halo is daybreak — calm, light, and a little angelic.
Layout & Grid
Translucent panels float over a pale gradient with very large radii and soft colored shadows. Generous spacing keeps the airiness intact.
Components
Buttons
Big rounded radius.lg translucent buttons in rose color.brand.primary with a
soft halo on hover.
Glass Cards
Frosted, heavily-rounded cards with a faint border and a soft shadow.md; text
sits on a more opaque inner layer for clarity.
Accessibility
Soft visuals, solid contrast: primary and muted text pass WCAG AA on the opaque content layer. Blur is decorative only and focus rings remain visible.
Tokens
Color (14)
Tokens
Export
One source of truth, five formats — copy or download any of them.
---$schema: https://designmd.in/schema/v1.jsonid: haloname: Halotitle: Halo — Pearlescent Light Glassversion: 1.0.0category: glassmorphismtags: [glassmorphism, pearlescent, soft, rose, blur]author: designmdlicense: CC-BY-4.0updatedAt: 2026-06-22colorMode: [light]tokens: color: brand: primary: { value: "oklch(0.58 0.15 340)", type: color } secondary: { value: "oklch(0.62 0.13 255)", type: color } onBrand: { value: "oklch(0.99 0 0)", type: color } text: primary: { value: "oklch(0.26 0.02 330)", type: color } muted: { value: "oklch(0.47 0.024 330)", type: color } link: { value: "{color.brand.primary}", type: color } surface: base: { value: "oklch(0.975 0.008 330)", type: color } raised: { value: "oklch(0.995 0.004 330)", type: color } sunken: { value: "oklch(0.95 0.012 330)", type: color } border: default: { value: "oklch(0.91 0.012 330)", type: color } state: success: { value: "oklch(0.58 0.14 150)", type: color } danger: { value: "oklch(0.56 0.2 25)", type: color } warning: { value: "oklch(0.72 0.14 75)", type: color } info: { value: "oklch(0.6 0.14 250)", type: color } typography: family: sans: { value: "Albert Sans, system-ui, sans-serif", type: fontFamily } mono: { value: "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.75rem", type: dimension } md: { value: "1.25rem", type: dimension } lg: { value: "2rem", type: dimension } full: { value: "9999px", type: dimension } shadow: sm: { value: "0 2px 10px oklch(0.5 0.06 330 / 0.12)", type: shadow } md: { value: "0 16px 44px oklch(0.5 0.06 330 / 0.2)", type: shadow } motion: duration: base: { value: "280ms", 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, rounded, soft glow", type: descriptor } zIndex: dropdown: { value: 1000, type: number } modal: { value: 1300, type: number }---# Halo Design System## Brand & VoiceHalo is soft-focus and dreamy: pearly rose surfaces, gentle blur, and a glow thatwraps every element. Where Aurora is nocturnal, Halo is daybreak — calm, light,and a little angelic.## Layout & GridTranslucent panels float over a pale gradient with very large radii and softcolored shadows. Generous spacing keeps the airiness intact.## Components### ButtonsBig rounded `radius.lg` translucent buttons in rose `color.brand.primary` with asoft halo on hover.### Glass CardsFrosted, heavily-rounded cards with a faint border and a soft `shadow.md`; textsits on a more opaque inner layer for clarity.## AccessibilitySoft visuals, solid contrast: primary and muted text pass WCAG AA on the opaquecontent layer. Blur is decorative only and focus rings remain visible.