Live preview
Use this system
Three ways to drop Compile into your workflow.
Save the file for your tool — your agent then generates UI in Compile, automatically.
CLAUDE.mdRepo root — Claude Code reads it automatically.
.cursor/rules/compile.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
Compile is a developer tool in daylight: a clean white IDE, a focused blue, and monospace where it counts. Fast, precise, and comfortable for hours — syntax in view, chrome out of the way.
Layout & Grid
Dense panels, a tight 0.25rem rhythm, and monospace code regions on
color.surface.sunken. Sidebars and tabs stay quiet so the editor leads.
Components
Buttons
Small, sharp radius.sm buttons; primary in blue with white text, with inline
keyboard shortcuts. Secondary actions are bordered.
Code & Diffs
Monospace blocks with color.border.default gutters; additions and deletions use
state colors plus signs, never color alone.
Accessibility
Light but easy on the eyes: primary and muted text pass WCAG AA on every surface. Focus is a clear ring, every action has a shortcut, and motion is near-instant.
Tokens
Color (14)
Tokens
Export
One source of truth, five formats — copy or download any of them.
---$schema: https://designmd.in/schema/v1.jsonid: compilename: Compiletitle: Compile — Light Developer Toolsversion: 1.0.0category: developer-toolstags: [developer-tools, light, ide, blue, mono]author: designmdlicense: CC-BY-4.0updatedAt: 2026-06-22colorMode: [light]tokens: color: brand: primary: { value: "oklch(0.5 0.16 255)", type: color } secondary: { value: "oklch(0.55 0.16 295)", type: color } onBrand: { value: "oklch(0.99 0 0)", type: color } text: primary: { value: "oklch(0.22 0.012 255)", type: color } muted: { value: "oklch(0.46 0.016 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.96 0.004 255)", type: color } border: default: { value: "oklch(0.9 0.006 255)", type: color } state: success: { value: "oklch(0.55 0.14 150)", type: color } danger: { value: "oklch(0.55 0.2 25)", type: color } warning: { value: "oklch(0.66 0.14 70)", type: color } info: { value: "oklch(0.55 0.13 245)", type: color } typography: family: mono: { value: "JetBrains Mono, ui-monospace, monospace", type: fontFamily } sans: { value: "Inter, system-ui, sans-serif", type: fontFamily } scale: sm: { value: "0.8125rem", type: dimension } base: { value: "0.9375rem", type: dimension } lg: { value: "1.15rem", type: dimension } xl: { value: "1.45rem", type: dimension } "2xl": { value: "1.95rem", type: dimension } "3xl": { value: "2.6rem", type: dimension } weight: regular: { value: 400, type: fontWeight } bold: { value: 600, type: fontWeight } leading: tight: { value: 1.2, type: number } normal: { value: 1.55, type: number } spacing: base: { value: "0.25rem", type: dimension } radius: sm: { value: "0.25rem", type: dimension } md: { value: "0.375rem", type: dimension } full: { value: "9999px", type: dimension } shadow: sm: { value: "0 1px 2px oklch(0.22 0.01 255 / 0.07)", type: shadow } md: { value: "0 5px 16px oklch(0.22 0.01 255 / 0.1)", type: shadow } motion: duration: base: { value: "120ms", type: duration } easing: standard: { value: "cubic-bezier(0.4, 0, 0.2, 1)", type: cubicBezier } breakpoint: md: { value: "768px", type: dimension } iconography: style: { value: "1.25px stroke, crisp, grid-aligned", type: descriptor } zIndex: dropdown: { value: 1000, type: number } modal: { value: 1300, type: number }---# Compile Design System## Brand & VoiceCompile is a developer tool in daylight: a clean white IDE, a focused blue, andmonospace where it counts. Fast, precise, and comfortable for hours — syntax inview, chrome out of the way.## Layout & GridDense panels, a tight `0.25rem` rhythm, and monospace code regions on`color.surface.sunken`. Sidebars and tabs stay quiet so the editor leads.## Components### ButtonsSmall, sharp `radius.sm` buttons; primary in blue with white text, with inlinekeyboard shortcuts. Secondary actions are bordered.### Code & DiffsMonospace blocks with `color.border.default` gutters; additions and deletions usestate colors plus signs, never color alone.## AccessibilityLight but easy on the eyes: primary and muted text pass WCAG AA on every surface.Focus is a clear ring, every action has a shortcut, and motion is near-instant.