Live preview
Use this system
Three ways to drop Index into your workflow.
Save the file for your tool — your agent then generates UI in Index, automatically.
CLAUDE.mdRepo root — Claude Code reads it automatically.
.cursor/rules/index.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
Index treats a portfolio like a beautifully set table of contents. Type does everything; a single warm orange marks the live link under your cursor. Spare, precise, and a little bookish.
Layout & Grid
A long indexed list of work — number, title, year — with hover revealing a thumbnail. Square corners, hairline rules, exact baseline alignment.
Components
Buttons
Text buttons with an orange underline on hover; the rare solid uses
color.brand.primary. No rounding, no shadow.
Index Rows
Each row aligns title and metadata on a strict grid, divided by
color.border.default; the orange highlights the active entry.
Accessibility
Type-first and high-contrast: primary and muted text pass WCAG AA on every surface. Links are underlined on hover and focus, and rows stay keyboard-navigable.
Tokens
Color (14)
Tokens
Export
One source of truth, five formats — copy or download any of them.
---$schema: https://designmd.in/schema/v1.jsonid: indexname: Indextitle: Index — Typographic Portfolioversion: 1.0.0category: portfoliotags: [portfolio, typographic, orange, list, minimal]author: designmdlicense: CC-BY-4.0updatedAt: 2026-06-22colorMode: [light]tokens: color: brand: primary: { value: "oklch(0.6 0.18 45)", type: color } secondary: { value: "oklch(0.25 0.01 60)", type: color } onBrand: { value: "oklch(0.99 0 0)", type: color } text: primary: { value: "oklch(0.2 0.008 60)", type: color } muted: { value: "oklch(0.45 0.012 60)", type: color } link: { value: "{color.brand.primary}", type: color } surface: base: { value: "oklch(0.99 0.003 70)", type: color } raised: { value: "oklch(1 0 0)", type: color } sunken: { value: "oklch(0.96 0.006 70)", type: color } border: default: { value: "oklch(0.87 0.006 70)", 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.13 70)", type: color } info: { value: "oklch(0.55 0.13 245)", type: color } typography: family: sans: { value: "Söhne, Inter, system-ui, sans-serif", type: fontFamily } mono: { value: "Söhne Mono, ui-monospace, monospace", type: fontFamily } scale: sm: { value: "0.8125rem", type: dimension } base: { value: "1rem", type: dimension } lg: { value: "1.25rem", type: dimension } xl: { value: "1.6rem", type: dimension } "2xl": { value: "2.2rem", type: dimension } "3xl": { value: "3rem", type: dimension } weight: regular: { value: 400, type: fontWeight } bold: { value: 600, type: fontWeight } leading: tight: { value: 1.1, type: number } normal: { value: 1.5, type: number } spacing: base: { value: "0.25rem", type: dimension } radius: sm: { value: "0rem", type: dimension } md: { value: "0rem", type: dimension } full: { value: "9999px", type: dimension } shadow: sm: { value: "0 1px 2px oklch(0.2 0 0 / 0.05)", type: shadow } md: { value: "0 6px 18px oklch(0.2 0 0 / 0.08)", 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: "1px hairline, list arrows only", type: descriptor } zIndex: dropdown: { value: 1000, type: number } modal: { value: 1300, type: number }---# Index Design System## Brand & VoiceIndex treats a portfolio like a beautifully set table of contents. Type doeseverything; a single warm orange marks the live link under your cursor. Spare,precise, and a little bookish.## Layout & GridA long indexed list of work — number, title, year — with hover revealing athumbnail. Square corners, hairline rules, exact baseline alignment.## Components### ButtonsText buttons with an orange underline on hover; the rare solid uses`color.brand.primary`. No rounding, no shadow.### Index RowsEach row aligns title and metadata on a strict grid, divided by`color.border.default`; the orange highlights the active entry.## AccessibilityType-first and high-contrast: primary and muted text pass WCAG AA on everysurface. Links are underlined on hover and focus, and rows stay keyboard-navigable.