Hairline-thin product workspace. Cool off-white surfaces, Inter Display with tight tracking, a single indigo accent, every divider 1px at 6% ink. Engineered calm.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
1---2name: "Linear Orbit"3description: "Hairline-thin product workspace. Cool off-white surfaces, Inter Display with tight tracking, a single indigo accent, every divider 1px at 6% ink. Engineered calm."4tags: [developer, minimal, premium, saas, modern]5colors:6 primary: "#0e1116"7 secondary: "#5a6273"8 tertiary: "#0e1116"9 neutral: "#f5f6f8"10 surface: "#ffffff"11typography:12 display: "Inter Display"13 body: Inter14 mono: "JetBrains Mono"15 scale:16 hero: "3.25rem / 1.04 / 600 / -0.045em"17 h1: "2.25rem / 1.12 / 600 / -0.035em"18 h2: "1.5rem / 1.25 / 600 / -0.025em"19 body: "0.9375rem / 1.55 / 400 / -0.005em"20radius:21 sm: 5px22 md: 8px23 lg: 10px24 pill: 9999px25shadows:26 card: "rgba(14,17,22,0.06) 0 0 0 1px, rgba(14,17,22,0.03) 0 1px 2px"27 button: "rgba(94,106,210,0.18) 0 1px 0 inset"28borders:29 card: "1px solid rgba(14,17,22,0.06)"30 divider: rgba(14,17,22,0.06)31buttons:32 primary:33 background: #5e6ad234 color: #ffffff35 border: none36 shape: rounded37 padding: 7px 14px38 font: 500 / 0.8125rem39 shadow: rgba(94,106,210,0.18) 0 1px 0 inset, rgba(0,0,0,0.04) 0 1px 1px40 secondary:41 background: #ffffff42 color: #0e111643 border: 1px solid rgba(14,17,22,0.08)44 shape: rounded45 padding: 7px 14px46 font: 500 / 0.8125rem47 outline:48 background: transparent49 color: #0e111650 border: 1px solid rgba(14,17,22,0.10)51 shape: rounded52 padding: 7px 14px53 font: 500 / 0.8125rem54 ghost:55 background: transparent56 color: #5a627357 border: none58 shape: rounded59 padding: 7px 12px60 font: 500 / 0.8125rem61charts:62 variant: "thin-bars"63 stroke_width: 1.2564 fill_opacity: 0.0565 gridlines: true66 bar_gap: 10px67 highlight: single68 dot_marker: true69fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"70dependencies: ["lucide-react"]71---72 73# Linear Orbit74 75## AI Build Instructions76 77> **Read this section before writing any code.** The rules below78> are non-negotiable. Every value used in the UI must come from this79> file's frontmatter — never substitute, approximate, or invent new80> colors, fonts, radii, or shadows. If a value is missing, ask the81> user before adding one.82 83### 1 · Your role84 85You are building UI for a project that has adopted **Linear Orbit** as its86design system. Treat `DESIGN.md` as the single source of truth.87Your job is to translate the user's product requirements into88components and pages that look like they were designed by the same89person who authored this file.90 91### 2 · Token compliance92 93- Pull every color, font family, radius, shadow, and spacing value94 from the frontmatter at the top of this file.95- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never96 hard-code hex values that bypass the system.97- When a token can be expressed as a CSS variable, declare it once98 in your global stylesheet and reference it everywhere downstream.99- The Google Fonts `<link>` is provided in the Typography section.100 Add it to `<head>` before any component renders.101 102### 3 · Component recipes103 104Use these recipes verbatim when building the corresponding component.105 106#### Buttons107 108Four variants are defined. Pick one — never blend variants or invent a fifth.109 110- **Primary** — rounded shape, bg `#5e6ad2`, text `#ffffff`, padding `7px 14px`, weight `500`, shadow `rgba(94,106,210,0.18) 0 1px 0 inset, rgba(0,0,0,0.04) 0 1px 1px`.111- **Secondary** — rounded shape, bg `#ffffff`, text `#0e1116`, border `1px solid rgba(14,17,22,0.08)`, padding `7px 14px`, weight `500`.112- **Outline** — rounded shape, text `#0e1116`, border `1px solid rgba(14,17,22,0.10)`, padding `7px 14px`, weight `500`.113- **Ghost** — rounded shape, text `#5a6273`, padding `7px 12px`, weight `500`.114 115Reach for **primary** as the single dominant CTA per screen.116**Secondary** for the supporting action. **Outline** for tertiary117actions in toolbars. **Ghost** for inline links and table actions.118 119#### Cards120 121- Background: `#ffffff`122- Border: `1px solid rgba(14,17,22,0.06)`123- Shadow: `rgba(14,17,22,0.06) 0 0 0 1px, rgba(14,17,22,0.03) 0 1px 2px`124- Radius: `radius.lg` (`10px`)125- Internal padding: `20px` for compact cards, `24–28px` for content cards.126 127#### Tabs128 129Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.130 131#### Charts132 133- Bar/line variant: `thin-bars`134- Highlight strategy: `single` — emphasize a single bar/point per chart.135 136#### Typography pairings137 138- **Display (`Inter Display`)** — h1, h2, hero headlines, brand wordmarks.139- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.140- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.141 142### 4 · Hard constraints143 144Never do any of the following without explicit instruction from the user:145 146- Introduce a new color, font, radius, or shadow that isn't declared above.147- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).148- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.149- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.150- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.151 152### 5 · Before you finish — verify153 154Run through this checklist for every screen you produce:155 156- [ ] Every color used appears in the Colors table above.157- [ ] Headlines use the display font; body copy uses the body font.158- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).159- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.160- [ ] Cards and dividers use the declared border + shadow tokens.161- [ ] No values were invented; if you needed something missing, you stopped and asked.162 163---164 165## 1. Atmosphere166 167Linear Orbit is the workspace UI distilled. The page is a cool off-white that reads as paper under daylight, never warm, never blue-tinted. Type runs at Inter with -0.045em tracking at hero scale — compressed, engineered, technical without being cold. The single accent is an indigo `#5e6ad2` reserved for the primary CTA, the active tab underline, and the focused chart series. Every other interactive surface lives in pure greyscale.168 169The signature move is restraint at the divider level: 1px hairlines at `rgba(14,17,22,0.06)` carry the entire structure. No card shadows, no fills, no chrome — the grid is the chrome.170 171**Signature moves**172- Inter Display at hero with -0.045em tracking — text feels engineered, not decorative173- 6% ink hairlines as the only divider — never a solid grey, never a fill174- Indigo `#5e6ad2` as the *only* color in the entire system175- Buttons sit on a 1px inset highlight, never a drop shadow176- Underline tabs with the indigo accent, never pills, never boxed177- Mono used exclusively for status labels and inline metrics178 179## 2. Palette180 181### Core182- **Ink** `#0e1116` — text, headings, dark surface183- **Surface** `#ffffff` — cards, modals184- **Page** `#f5f6f8` — cool off-white background185- **Hairline** `rgba(14,17,22,0.06)` — every divider, every card edge186 187### Accent188- **Indigo** `#5e6ad2` — primary CTA, active tab, highlighted chart189- **Indigo Soft** `rgba(94,106,210,0.10)` — focus ring, hovered tab background190 191### Neutrals192- 700 `#3a4150` · 500 `#5a6273` · 400 `#7a818f` · 200 `#e6e8ec`193 194## 3. Typography195 196| Role | Font | Size | Weight | Leading | Tracking |197|------|------|------|--------|---------|----------|198| Hero | Inter Display | 52px | 600 | 1.04 | -0.045em |199| H1 | Inter Display | 36px | 600 | 1.12 | -0.035em |200| H2 | Inter | 24px | 600 | 1.25 | -0.025em |201| Body | Inter | 15px | 400 | 1.55 | -0.005em |202| UI | Inter | 13px | 500 | 1.4 | 0 |203| Mono / Status | JetBrains Mono | 12px | 500 | 1.0 | 0.04em uppercase |204 205Three weights only: 400 / 500 / 600. Negative tracking is mandatory above 20px.206 207## 4. Buttons208 209### Primary (Indigo)210```css211background: #5e6ad2;212color: #ffffff;213padding: 7px 14px;214border-radius: 6px;215box-shadow: rgba(94,106,210,0.18) 0 1px 0 inset, rgba(0,0,0,0.04) 0 1px 1px;216```217 218### Secondary (Hairline)219- White surface, 1px hairline at 8% ink, ink-700 text220- Same padding as primary — the bar height never breaks221 222### Ghost223- Transparent, 500-weight, no border. Hover: 4% ink wash.224 225## 5. Cards226 227- Background `#ffffff`228- 1px hairline at 6% ink, NO drop shadow229- Radius 8px (10px for featured)230- Internal padding 20px / 28px231- Hover: hairline darkens to 10% ink — that is the only state change232 233## 6. Charts234 235Thin precise bars at 6px width with 10px gap. Single bar highlighted in indigo, others in 8% ink. Line charts at 1.25px stroke, 5% fill, dot marker at the live value. Dashed gridlines at 4% ink. Reads like an engineering dashboard, not marketing.236 237## 7. Tabs238 239Underline only. Active tab carries a 1.5px indigo bar at the bottom edge; inactive tabs are 500-weight ink-500. No pill tabs, no boxed tabs, ever.240 241## 8. Spacing242 243- Base 4px244- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64`245- Section padding: 64px desktop, 32px mobile246 247## 9. Do's & don'ts248 249✅ **Do**250- Use the indigo accent exactly once per screen — primary CTA OR active tab, not both251- Hold every divider to 6% ink — the discipline IS the design252- Use JetBrains Mono only for metrics, status, and inline code253- Keep type tracking negative at every size above 20px254 255❌ **Don't**256- Add a second accent color — indigo is alone, by design257- Use drop shadows on cards — hairlines only258- Use pill buttons — every button is 6px radius259- Mix Inter weights beyond 400/500/600260 261---262 263## Tokens264 265> Generated from the same source the live preview renders from.266> Treat the values below as the contract — never substitute approximations.267 268### Colors269 270| Role | Value |271|-----------|-------|272| primary | `#0e1116` |273| secondary | `#5a6273` |274| tertiary | `#0e1116` |275| neutral | `#f5f6f8` |276| surface | `#ffffff` |277 278### Typography279 280- **Display:** Inter Display281- **Body:** Inter282- **Mono:** JetBrains Mono283 284| Role | size / leading / weight / tracking |285|------|------------------------------------|286| Hero | 3.25rem / 1.04 / 600 / -0.045em |287| H1 | 2.25rem / 1.12 / 600 / -0.035em |288| H2 | 1.5rem / 1.25 / 600 / -0.025em |289| Body | 0.9375rem / 1.55 / 400 / -0.005em |290 291### Radius292 293- sm: `5px`294- md: `8px`295- lg: `10px`296- pill: `9999px`297 298### Shadows299 300- **card:** `rgba(14,17,22,0.06) 0 0 0 1px, rgba(14,17,22,0.03) 0 1px 2px`301- **button:** `rgba(94,106,210,0.18) 0 1px 0 inset`302 303### Borders304 305- **card:** `1px solid rgba(14,17,22,0.06)`306- **divider:** `rgba(14,17,22,0.06)`307 308### Buttons309 310Four variants, each fully tokenized. The preview renders from these exact values.311 312#### Primary313 314| Property | Value |315|----------|-------|316| shape | `rounded` |317| background | `#5e6ad2` |318| color | `#ffffff` |319| border | `none` |320| padding | `7px 14px` |321| fontWeight | `500` |322| fontSize | `0.8125rem` |323| shadow | `rgba(94,106,210,0.18) 0 1px 0 inset, rgba(0,0,0,0.04) 0 1px 1px` |324 325#### Secondary326 327| Property | Value |328|----------|-------|329| shape | `rounded` |330| background | `#ffffff` |331| color | `#0e1116` |332| border | `1px solid rgba(14,17,22,0.08)` |333| padding | `7px 14px` |334| fontWeight | `500` |335| fontSize | `0.8125rem` |336 337#### Outline338 339| Property | Value |340|----------|-------|341| shape | `rounded` |342| background | `transparent` |343| color | `#0e1116` |344| border | `1px solid rgba(14,17,22,0.10)` |345| padding | `7px 14px` |346| fontWeight | `500` |347| fontSize | `0.8125rem` |348 349#### Ghost350 351| Property | Value |352|----------|-------|353| shape | `rounded` |354| background | `transparent` |355| color | `#5a6273` |356| border | `none` |357| padding | `7px 12px` |358| fontWeight | `500` |359| fontSize | `0.8125rem` |360 361### Charts362 363| Property | Value |364|----------|-------|365| variant | `thin-bars` |366| strokeWidth | `1.25` |367| fillOpacity | `0.05` |368| gridlines | `true` |369| barGap | `10px` |370| highlight | `single` |371| dotMarker | `true` |372 # CLAUDE.md Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Inter Display"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#0e1116', secondary: '#5a6273', accent: '#0e1116', neutral: '#f5f6f8', surface: '#ffffff', }, borderRadius: { sm: '5px', md: '8px', lg: '10px', }, }, },};Dark-mode-native developer platform. Emerald (#3ecf8e) as identity marker, 1.00 line-height hero, depth from layered borders not shadows, mono uppercase labels.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
A slow conic gradient sweeps behind the page through desaturated lavender, sage, peach at ~22% chroma — soft prismatic light, never rainbow. Pure white cards on top, ink text, hairlines.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.