Live preview
Use this system
Three ways to drop Frost into your workflow.
Save the file for your tool — your agent then generates UI in Frost, automatically.
CLAUDE.mdRepo root — Claude Code reads it automatically.
.cursor/rules/frost.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
Frost is built on layered glass: translucent panels, generous blur, and a cool violet light behind everything. The feeling is airy and dimensional, like floating cards over a gradient sky.
Layout & Grid
Frosted surfaces stack with depth and parallax. Backgrounds carry a soft brand
gradient; panels read through it with shadow.md lifting them forward.
Components
Buttons
Rounded radius.md buttons with a translucent fill and a colored glow on hover.
Primary uses color.brand.primary; ghost variants blur the backdrop.
Glass Cards
Semi-transparent cards with a color.border.default hairline and a shadow.md
halo. Content sits on a faintly raised surface for legibility.
Accessibility
Translucency never costs contrast: text always renders on a sufficiently opaque layer, so primary and muted text pass WCAG AA. Blur is decorative only.
Tokens
Color (14)
Tokens
Export
One source of truth, five formats — copy or download any of them.
---$schema: https://designmd.in/schema/v1.jsonid: frostname: Frosttitle: Frost — Light Glassmorphismversion: 1.0.0category: glassmorphismtags: [glassmorphism, blur, translucent, violet, depth]author: designmdlicense: CC-BY-4.0updatedAt: 2026-06-22colorMode: [light]tokens: color: brand: primary: { value: "oklch(0.58 0.17 275)", type: color } secondary: { value: "oklch(0.68 0.13 220)", type: color } onBrand: { value: "oklch(0.99 0 0)", type: color } text: primary: { value: "oklch(0.26 0.02 275)", type: color } muted: { value: "oklch(0.47 0.025 275)", type: color } link: { value: "{color.brand.primary}", type: color } surface: base: { value: "oklch(0.97 0.008 270)", type: color } raised: { value: "oklch(0.995 0.004 270)", type: color } sunken: { value: "oklch(0.945 0.012 270)", type: color } border: default: { value: "oklch(0.9 0.012 270)", 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.15 250)", type: color } typography: family: sans: { value: "SF Pro Display, 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.625rem", type: dimension } md: { value: "1rem", type: dimension } lg: { value: "1.5rem", type: dimension } full: { value: "9999px", type: dimension } shadow: sm: { value: "0 2px 8px oklch(0.4 0.05 275 / 0.12)", type: shadow } md: { value: "0 12px 40px oklch(0.4 0.05 275 / 0.2)", type: shadow } motion: duration: base: { value: "240ms", 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 }---# Frost Design System## Brand & VoiceFrost is built on layered glass: translucent panels, generous blur, and a coolviolet light behind everything. The feeling is airy and dimensional, likefloating cards over a gradient sky.## Layout & GridFrosted surfaces stack with depth and parallax. Backgrounds carry a soft brandgradient; panels read through it with `shadow.md` lifting them forward.## Components### ButtonsRounded `radius.md` buttons with a translucent fill and a colored glow on hover.Primary uses `color.brand.primary`; ghost variants blur the backdrop.### Glass CardsSemi-transparent cards with a `color.border.default` hairline and a `shadow.md`halo. Content sits on a faintly raised surface for legibility.## AccessibilityTranslucency never costs contrast: text always renders on a sufficiently opaquelayer, so primary and muted text pass WCAG AA. Blur is decorative only.