Live preview
Use this system
Three ways to drop Cobalt into your workflow.
Save the file for your tool — your agent then generates UI in Cobalt, automatically.
CLAUDE.mdRepo root — Claude Code reads it automatically.
.cursor/rules/cobalt.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
Cobalt is the voice of a product that respects your time: calm, precise, and quietly confident. A single saturated blue carries every primary action while the interface stays out of the way — neutral surfaces, generous whitespace, no decoration that doesn't earn its place.
Layout & Grid
A 12-column grid on a 4px spacing base. Dense data tables, comfortable forms, and cards that group related controls. Content max-width keeps reading lines short; the sidebar is fixed and quiet.
Components
Buttons
Primary actions fill color.brand.primary with white text and a soft
shadow.sm. Secondary buttons are bordered and ghost-on-hover.
Inputs
Bordered fields with a color.brand.primary focus ring at radius.md. Inline
validation uses color.state.danger and color.state.success.
Accessibility
Body and muted text both clear WCAG AA on every surface. Focus rings are always visible, hit targets meet 44px, and state is never communicated by color alone.
Tokens
Color (14)
Tokens
Export
One source of truth, five formats — copy or download any of them.
---$schema: https://designmd.in/schema/v1.jsonid: cobaltname: Cobalttitle: Cobalt — Clean & Confident SaaSversion: 1.0.0category: saastags: [saas, blue, productive, dashboard, clean]author: designmdlicense: CC-BY-4.0updatedAt: 2026-06-22colorMode: [light]tokens: color: brand: primary: { value: "oklch(0.55 0.18 250)", type: color } secondary: { value: "oklch(0.66 0.12 200)", type: color } onBrand: { value: "oklch(0.99 0 0)", type: color } text: primary: { value: "oklch(0.24 0.02 255)", type: color } muted: { value: "oklch(0.47 0.025 255)", type: color } link: { value: "{color.brand.primary}", type: color } surface: base: { value: "oklch(0.99 0.002 255)", type: color } raised: { value: "oklch(1 0 0)", type: color } sunken: { value: "oklch(0.965 0.004 255)", type: color } border: default: { value: "oklch(0.91 0.006 255)", type: color } state: success: { value: "oklch(0.58 0.15 150)", type: color } danger: { value: "oklch(0.56 0.2 25)", type: color } warning: { value: "oklch(0.7 0.15 75)", type: color } info: { value: "oklch(0.6 0.14 250)", 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.625rem", type: dimension } "2xl": { value: "2.25rem", type: dimension } "3xl": { value: "3rem", type: dimension } weight: regular: { value: 400, type: fontWeight } medium: { value: 500, type: fontWeight } bold: { value: 700, 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.375rem", type: dimension } md: { value: "0.625rem", type: dimension } lg: { value: "1rem", type: dimension } full: { value: "9999px", type: dimension } shadow: sm: { value: "0 1px 2px oklch(0.24 0.02 255 / 0.06)", type: shadow } md: { value: "0 4px 14px oklch(0.24 0.02 255 / 0.1)", type: shadow } motion: duration: base: { value: "180ms", type: duration } easing: standard: { value: "cubic-bezier(0.2, 0, 0, 1)", type: cubicBezier } breakpoint: md: { value: "768px", type: dimension } lg: { value: "1024px", type: dimension } iconography: style: { value: "1.5px stroke, rounded joins, 24px grid", type: descriptor } zIndex: dropdown: { value: 1000, type: number } modal: { value: 1300, type: number }---# Cobalt Design System## Brand & VoiceCobalt is the voice of a product that respects your time: calm, precise, andquietly confident. A single saturated blue carries every primary action whilethe interface stays out of the way — neutral surfaces, generous whitespace, nodecoration that doesn't earn its place.## Layout & GridA 12-column grid on a 4px spacing base. Dense data tables, comfortable forms,and cards that group related controls. Content max-width keeps reading linesshort; the sidebar is fixed and quiet.## Components### ButtonsPrimary actions fill `color.brand.primary` with white text and a soft`shadow.sm`. Secondary buttons are bordered and ghost-on-hover.### InputsBordered fields with a `color.brand.primary` focus ring at `radius.md`. Inlinevalidation uses `color.state.danger` and `color.state.success`.## AccessibilityBody and muted text both clear WCAG AA on every surface. Focus rings are alwaysvisible, hit targets meet 44px, and state is never communicated by color alone.