Live preview
Use this system
Three ways to drop Sterling into your workflow.
Save the file for your tool — your agent then generates UI in Sterling, automatically.
CLAUDE.mdRepo root — Claude Code reads it automatically.
.cursor/rules/sterling.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
Sterling reads as a bank you'd actually trust with your money: composed, exact,
and unflashy. Deep navy signals security; a measured green confirms success.
Numbers are first-class citizens, set in mono and aligned to the cent.
Layout & Grid
Generous, well-labeled forms with clear step structure. Balances and amounts get
the largest type; supporting detail recedes in color.text.muted.
Components
Buttons
Solid navy primaries with tight radius.md corners. Confirmations of money
movement use color.state.success.
Cards
Account and transaction cards sit on color.surface.raised with a hairline
border and subtle shadow.sm.
Accessibility
Every text-on-surface pair clears WCAG AA. Status is paired with icons and labels — never green/red alone — and amounts never rely on color for sign.
Tokens
Color (14)
Tokens
Export
One source of truth, five formats — copy or download any of them.
---$schema: https://designmd.in/schema/v1.jsonid: sterlingname: Sterlingtitle: Sterling — Trustworthy Fintechversion: 1.0.0category: fintechtags: [fintech, navy, green, trust, banking]author: designmdlicense: CC-BY-4.0updatedAt: 2026-06-22colorMode: [light]tokens: color: brand: primary: { value: "oklch(0.4 0.09 255)", type: color } secondary: { value: "oklch(0.55 0.13 155)", type: color } onBrand: { value: "oklch(0.99 0 0)", type: color } text: primary: { value: "oklch(0.24 0.025 255)", type: color } muted: { value: "oklch(0.46 0.028 255)", type: color } link: { value: "{color.brand.primary}", type: color } surface: base: { value: "oklch(0.99 0.003 250)", type: color } raised: { value: "oklch(1 0 0)", type: color } sunken: { value: "oklch(0.965 0.006 250)", type: color } border: default: { value: "oklch(0.9 0.008 250)", type: color } state: success: { value: "{color.brand.secondary}", type: color } danger: { value: "oklch(0.54 0.2 25)", type: color } warning: { value: "oklch(0.68 0.15 70)", type: color } info: { value: "oklch(0.55 0.13 250)", type: color } typography: family: sans: { value: "Inter, system-ui, sans-serif", type: fontFamily } mono: { value: "Roboto 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.6rem", type: dimension } "2xl": { value: "2.1rem", type: dimension } "3xl": { value: "2.8rem", type: dimension } weight: regular: { value: 400, type: fontWeight } bold: { value: 700, 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.5rem", type: dimension } full: { value: "9999px", type: dimension } shadow: sm: { value: "0 1px 2px oklch(0.24 0.03 255 / 0.08)", type: shadow } md: { value: "0 5px 16px oklch(0.24 0.03 255 / 0.1)", type: shadow } motion: duration: base: { value: "160ms", type: duration } easing: standard: { value: "cubic-bezier(0.25, 0, 0.1, 1)", type: cubicBezier } breakpoint: md: { value: "768px", type: dimension } iconography: style: { value: "2px stroke, rounded, solid for status", type: descriptor } zIndex: dropdown: { value: 1000, type: number } modal: { value: 1300, type: number }---# Sterling Design System## Brand & VoiceSterling reads as a bank you'd actually trust with your money: composed, exact,and unflashy. Deep navy signals security; a measured green confirms success.Numbers are first-class citizens, set in `mono` and aligned to the cent.## Layout & GridGenerous, well-labeled forms with clear step structure. Balances and amounts getthe largest type; supporting detail recedes in `color.text.muted`.## Components### ButtonsSolid navy primaries with tight `radius.md` corners. Confirmations of moneymovement use `color.state.success`.### CardsAccount and transaction cards sit on `color.surface.raised` with a hairlineborder and subtle `shadow.sm`.## AccessibilityEvery text-on-surface pair clears WCAG AA. Status is paired with icons andlabels — never green/red alone — and amounts never rely on color for sign.