Live preview
Use this system
Three ways to drop Velvet into your workflow.
Save the file for your tool — your agent then generates UI in Velvet, automatically.
CLAUDE.mdRepo root — Claude Code reads it automatically.
.cursor/rules/velvet.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
Velvet wraps the interface in deep plum and champagne. It's sumptuous and warm — luxury that feels tactile rather than cold. A soft serif and slow, plush motion make every screen feel considered.
Layout & Grid
Rich aubergine surfaces with layered depth and generous padding. Champagne
color.brand.primary lights headlines and key actions; plum carries accents.
Components
Buttons
Rounded radius.md buttons in champagne with dark onBrand text, or a plum
color.brand.secondary outline. Transitions are slow and smooth.
Cards
Plush cards on color.surface.raised with a soft tinted shadow.md and a fine
border that catches the light.
Accessibility
Indulgent but accessible: light and muted text pass WCAG AA on the plum surfaces. Accents are reserved for emphasis and focus rings remain clearly 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: velvetname: Velvettitle: Velvet — Deep Plum Premiumversion: 1.0.0category: luxurytags: [luxury, dark, plum, champagne, refined]author: designmdlicense: CC-BY-4.0updatedAt: 2026-06-22colorMode: [dark]tokens: color: brand: primary: { value: "oklch(0.8 0.08 85)", type: color } secondary: { value: "oklch(0.58 0.16 330)", type: color } onBrand: { value: "oklch(0.16 0.02 325)", type: color } text: primary: { value: "oklch(0.95 0.008 330)", type: color } muted: { value: "oklch(0.73 0.016 330)", type: color } link: { value: "{color.brand.primary}", type: color } surface: base: { value: "oklch(0.19 0.03 325)", type: color } raised: { value: "oklch(0.235 0.035 325)", type: color } sunken: { value: "oklch(0.145 0.025 325)", type: color } border: default: { value: "oklch(0.34 0.035 325)", type: color } state: success: { value: "oklch(0.74 0.14 150)", type: color } danger: { value: "oklch(0.66 0.2 25)", type: color } warning: { value: "oklch(0.8 0.14 85)", type: color } info: { value: "oklch(0.72 0.12 250)", type: color } typography: family: serif: { value: "Fraunces, Georgia, serif", type: fontFamily } sans: { value: "Inter, 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.3rem", type: dimension } xl: { value: "1.8rem", type: dimension } "2xl": { value: "2.5rem", type: dimension } "3xl": { value: "3.5rem", type: dimension } weight: regular: { value: 400, type: fontWeight } bold: { value: 600, type: fontWeight } leading: tight: { value: 1.12, type: number } normal: { value: 1.6, type: number } spacing: base: { value: "0.25rem", type: dimension } radius: sm: { value: "0.375rem", type: dimension } md: { value: "0.75rem", type: dimension } lg: { value: "1.25rem", type: dimension } full: { value: "9999px", type: dimension } shadow: sm: { value: "0 1px 3px oklch(0 0 0 / 0.5)", type: shadow } md: { value: "0 18px 48px oklch(0.1 0.04 325 / 0.6)", 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.25px stroke, soft and refined", type: descriptor } zIndex: dropdown: { value: 1000, type: number } modal: { value: 1300, type: number }---# Velvet Design System## Brand & VoiceVelvet wraps the interface in deep plum and champagne. It's sumptuous and warm —luxury that feels tactile rather than cold. A soft serif and slow, plush motionmake every screen feel considered.## Layout & GridRich aubergine surfaces with layered depth and generous padding. Champagne`color.brand.primary` lights headlines and key actions; plum carries accents.## Components### ButtonsRounded `radius.md` buttons in champagne with dark `onBrand` text, or a plum`color.brand.secondary` outline. Transitions are slow and smooth.### CardsPlush cards on `color.surface.raised` with a soft tinted `shadow.md` and a fineborder that catches the light.## AccessibilityIndulgent but accessible: light and muted text pass WCAG AA on the plumsurfaces. Accents are reserved for emphasis and focus rings remain clearlyvisible.