Live preview
Use this system
Three ways to drop Folio into your workflow.
Save the file for your tool — your agent then generates UI in Folio, automatically.
CLAUDE.mdRepo root — Claude Code reads it automatically.
.cursor/rules/folio.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
Folio is a glossy magazine in code: an expressive serif for headlines, a deep plum for emphasis, and warm paper surfaces. The voice is cultured and curated — features, essays, and long reads that deserve big type.
Layout & Grid
Dramatic headline scales, drop caps, and generous columns. Pull quotes break the grid; captions and bylines recede in muted text.
Components
Buttons
Understated near-square buttons in plum color.brand.primary or a hairline
outline. Subscriptions get the solid fill.
Article Cards
Headline-led cards with serif titles, a kicker, and a faint shadow.md on
hover that lifts the cover image.
Accessibility
Despite the editorial flourish, primary and muted text pass WCAG AA on every surface. Reading measure is capped, links are underlined, and focus is 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: folioname: Foliotitle: Folio — Magazine Editorialversion: 1.0.0category: editorialtags: [editorial, magazine, serif, plum, refined]author: designmdlicense: CC-BY-4.0updatedAt: 2026-06-22colorMode: [light]tokens: color: brand: primary: { value: "oklch(0.45 0.14 350)", type: color } secondary: { value: "oklch(0.5 0.08 60)", type: color } onBrand: { value: "oklch(0.99 0 0)", type: color } text: primary: { value: "oklch(0.2 0.012 350)", type: color } muted: { value: "oklch(0.44 0.018 350)", type: color } link: { value: "{color.brand.primary}", type: color } surface: base: { value: "oklch(0.985 0.005 70)", type: color } raised: { value: "oklch(1 0 0)", type: color } sunken: { value: "oklch(0.96 0.008 60)", type: color } border: default: { value: "oklch(0.88 0.008 60)", type: color } state: success: { value: "oklch(0.52 0.13 150)", type: color } danger: { value: "oklch(0.54 0.2 25)", type: color } warning: { value: "oklch(0.66 0.13 70)", type: color } info: { value: "oklch(0.52 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: "1.0625rem", type: dimension } lg: { value: "1.4rem", type: dimension } xl: { value: "1.9rem", type: dimension } "2xl": { value: "2.75rem", type: dimension } "3xl": { value: "3.9rem", type: dimension } weight: regular: { value: 400, type: fontWeight } bold: { value: 600, type: fontWeight } leading: tight: { value: 1.08, type: number } normal: { value: 1.65, type: number } spacing: base: { value: "0.25rem", type: dimension } radius: sm: { value: "0.125rem", type: dimension } md: { value: "0.375rem", type: dimension } full: { value: "9999px", type: dimension } shadow: sm: { value: "0 1px 2px oklch(0.2 0.01 350 / 0.06)", type: shadow } md: { value: "0 10px 30px oklch(0.2 0.01 350 / 0.1)", 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: "thin 1.25px editorial line icons", type: descriptor } zIndex: dropdown: { value: 1000, type: number } modal: { value: 1300, type: number }---# Folio Design System## Brand & VoiceFolio is a glossy magazine in code: an expressive serif for headlines, a deepplum for emphasis, and warm paper surfaces. The voice is cultured and curated —features, essays, and long reads that deserve big type.## Layout & GridDramatic headline scales, drop caps, and generous columns. Pull quotes break thegrid; captions and bylines recede in muted text.## Components### ButtonsUnderstated near-square buttons in plum `color.brand.primary` or a hairlineoutline. Subscriptions get the solid fill.### Article CardsHeadline-led cards with `serif` titles, a kicker, and a faint `shadow.md` onhover that lifts the cover image.## AccessibilityDespite the editorial flourish, primary and muted text pass WCAG AA on everysurface. Reading measure is capped, links are underlined, and focus is visible.