aiblueprint-cli 1.4.74 → 1.4.76

package/agents-config/skills/use-style/styles/gumroad.md

@@ -0,0 +1,273 @@
+# Gumroad Style
+
+Loud neo-brutalist commerce. Yellow + pink primaries, thick black borders, hard offset shadows, flat fills, playful illustration. Confident and a little chaotic - built to sell.
+
+**Reference vibe:** gumroad.com (marketplace) and the Gumroad creator dashboard.
+
+---
+
+## Core vibe
+
+- **Loud and flat.** Saturated primaries, no gradients on UI, no soft shadows. Everything is bold and unapologetic.
+- **Thick black outlines.** `2-4px` solid black borders define cards, buttons, inputs - the structural language.
+- **Hard offset shadow.** The neo-brutalist tell: `4px 4px 0 #000` (or `6px 6px`), no blur. Things look stamped, not floating.
+- **Yellow + pink.** Brand yellow `#FFC900` for big surfaces/marketing, pink `#FF90E8` for accents, prices, CTAs, active state.
+- **Bold geometric sans.** Heavy grotesque for everything; lowercase wordmark. No serif.
+- **Square-ish, but pills for actions.** Cards near-`0` radius with thick borders; nav items and buttons are full pills.
+- **Playful illustration.** Flat primary-color cartoons, hand-drawn energy, emoji-adjacent. Personality over polish.
+- **Two surfaces.** Loud light/yellow marketplace, and a near-black creator dashboard with pink accents.
+
+---
+
+## Color
+
+Portable palette. Map to project tokens when available.
+
+| Role | Hex | CSS var (suggested) | Usage |
+|------|-----|---------------------|-------|
+| Brand yellow | `#FFC900` | `--gr-yellow` | Hero bands, marketing background, highlights |
+| Pink | `#FF90E8` | `--gr-pink` | Accent, price tags, CTAs, active nav, links |
+| Ink | `#000000` | `--gr-fg` | Text, borders, shadows |
+| Paper | `#FFFFFF` | `--gr-bg` | Light surface, cards on yellow/dark |
+| Off-white | `#F4F4F0` | `--gr-paper` | Subtle light cards |
+| Teal | `#23A094` | `--gr-teal` | Secondary accent / illustration / chart |
+| Mint | `#90E8D0` | `--gr-mint` | Light teal tint |
+| Purple | `#90A8ED` | `--gr-purple` | Illustration / chart series |
+| Orange | `#FF7051` | `--gr-orange` | Warning / illustration / chart |
+
+### Dark / dashboard surface
+
+| Role | Hex | Usage |
+|------|-----|-------|
+| App canvas | `#161616` | Dashboard background |
+| App rail | `#0F0F0F` / `#000` | Sidebar |
+| Panel | `#1C1C1C` | Cards, product tiles |
+| Panel raised | `#242424` | Hover, inputs |
+| Ink on dark | `#FFFFFF` | Primary text |
+| Muted on dark | `#A0A0A0` | Secondary text, inactive nav |
+| Border on dark | `#2A2A2A` | Dividers, tile borders |
+| Pink | `#FF90E8` | Active nav, accents, pill |
+
+### Tailwind mapping (when no project tokens)
+
+```css
+:root {
+  --gr-yellow: #ffc900;
+  --gr-pink: #ff90e8;
+  --gr-fg: #000;
+  --gr-bg: #fff;
+  --gr-teal: #23a094;
+  --gr-dark: #161616;
+}
+```
+
+**Rule:** On light, color is bold and large (yellow bands, pink tags). On dark, the canvas is near-black and pink is the one bright accent. Borders and shadows are always pure black.
+
+---
+
+## Typography
+
+### Font stacks
+
+| Role | Stack | Open substitute |
+|------|-------|-----------------|
+| Display / UI (sans) | `"Mabry Pro", "ABC Favorit", "Mona Sans", Inter, system-ui, sans-serif` | `"Mona Sans"` or Inter (tight) |
+| Mono (rare: code/IDs) | `"Berkeley Mono", ui-monospace, monospace` | ui-monospace |
+
+Geometric grotesque, bold. The `gumroad` wordmark is lowercase, heavy, slightly rounded.
+
+### Scale
+
+| Level | Pattern |
+|-------|---------|
+| Hero | `text-5xl md:text-7xl font-bold tracking-tight text-black` |
+| Section / H2 | `text-2xl md:text-3xl font-bold` |
+| Card title | `text-lg font-semibold` |
+| Body | `text-base leading-relaxed` |
+| Nav / button / label | `text-sm font-medium` |
+| Price | `text-sm font-bold` (in the pink ribbon) |
+| Wordmark | `text-2xl font-bold lowercase tracking-tight` |
+
+Weight does the work - prefer `font-bold` over light weights. Tracking tight on big sizes.
+
+---
+
+## Layout tokens
+
+| Token | Value |
+|-------|-------|
+| `GR_SHELL` | `mx-auto w-full max-w-[1200px] px-4 sm:px-6` |
+| `GR_SECTION` | `py-10 md:py-14` |
+| `GR_BORDER` | `border-2 border-black` (or `border-4` for emphasis) |
+| `GR_SHADOW` | `shadow-[4px_4px_0_#000]` (hard, no blur) |
+| `GR_CARD_PAD` | `p-5 sm:p-6` |
+
+### Marketplace shell
+
+Yellow top band (search + nav pills), then dark or white product grid below.
+
+```tsx
+<div className="min-h-screen bg-[#161616] text-white">
+  <header className="bg-[#ffc900] text-black">
+    <div className={cn(GR_SHELL, "flex items-center gap-4 py-4")}>
+      <span className="text-2xl font-bold lowercase">gumroad</span>
+      <input className="flex-1 rounded-full bg-black px-5 py-2.5 text-white" placeholder="Search products" />
+      <button className="rounded-full border-2 border-black px-5 py-2 font-medium">Log in</button>
+    </div>
+    <nav className={cn(GR_SHELL, "flex gap-2 pb-3")}>{pills}</nav>
+  </header>
+  <main className={cn(GR_SHELL, "py-10")}>{grid}</main>
+</div>
+```
+
+### Dashboard shell (creator)
+
+Black sidebar + dark canvas. Active item = pink text + pink icon.
+
+```tsx
+<div className="flex min-h-screen bg-[#161616] text-white">
+  <aside className="w-60 border-r border-[#2a2a2a] bg-black p-3">{nav}</aside>
+  <main className="flex-1 p-6 md:p-8">{content}</main>
+</div>
+```
+
+---
+
+## Borders, radius & shadow
+
+| Context | Radius | Border | Shadow |
+|---------|--------|--------|--------|
+| Card / tile (light) | `rounded-none` or `rounded-sm` | `border-2 border-black` | `shadow-[4px_4px_0_#000]` |
+| Card / tile (dark) | `rounded-md` | `border border-[#2a2a2a]` | none (flat) |
+| Button / nav pill | `rounded-full` | `border-2 border-black` (light) | optional hard shadow |
+| Input | `rounded-full` (search) or `rounded-md` | `border-2 border-black` | none |
+| Price tag | ribbon/flag shape | none | none |
+
+On light surfaces the hard offset shadow is the whole personality - use it on cards, buttons, callouts. On dark, drop the shadow and use thin borders instead.
+
+---
+
+## Component patterns
+
+### Primary button (pink pill)
+
+```tsx
+<button className="rounded-full border-2 border-black bg-[#ff90e8] px-6 py-3 font-medium text-black shadow-[4px_4px_0_#000] transition-transform hover:-translate-y-0.5 hover:shadow-[6px_6px_0_#000]">
+  Start selling
+</button>
+```
+
+### Secondary / nav pill
+
+```tsx
+// active
+<button className="rounded-full bg-black px-4 py-1.5 text-sm font-medium text-white">Design</button>
+// inactive
+<button className="rounded-full px-4 py-1.5 text-sm font-medium text-black hover:bg-black/10">3D</button>
+```
+
+### Product tile (dark)
+
+```tsx
+<div className="overflow-hidden rounded-md border border-[#2a2a2a] bg-[#1c1c1c]">
+  <div className="aspect-[4/3] bg-[#242424]">{cover}</div>
+  <div className="border-t border-[#2a2a2a] p-4">
+    <h3 className="font-semibold text-white">Dracula PRO</h3>
+    <p className="mt-1 text-sm text-[#a0a0a0]">by Dracula</p>
+  </div>
+</div>
+```
+
+### Price ribbon (the pink flag)
+
+A pink tag with a notched/flag end, black text, bold.
+
+```tsx
+<span className="relative inline-block bg-[#ff90e8] px-3 py-1 text-sm font-bold text-black
+  [clip-path:polygon(0_0,100%_0,88%_50%,100%_100%,0_100%)]">
+  €130.15
+</span>
+```
+
+### Sidebar nav item (dashboard)
+
+```tsx
+<a className={cn(
+  "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium",
+  active ? "text-[#ff90e8]" : "text-white hover:bg-[#242424]"
+)}>
+  <Icon className="size-5" /> Home
+</a>
+```
+
+### Onboarding / getting-started card
+
+Bordered dark tile with a flat line-illustration icon and a check when done.
+
+```tsx
+<div className="rounded-md border border-[#2a2a2a] bg-[#1c1c1c] p-6 text-center">
+  <div className="mx-auto mb-3 text-[#ff90e8]">{illustration}</div>
+  <p className="font-semibold text-white">Showtime</p>
+  <p className="mt-1 text-sm text-[#a0a0a0]">Create your first product.</p>
+</div>
+```
+
+### Illustration band
+
+Flat primary-color cartoon, full-bleed inside a bordered black panel. Teal/yellow/pink, hand-drawn energy.
+
+```tsx
+<div className="rounded-md border border-[#2a2a2a] overflow-hidden">
+  <img className="w-full" src="/illustration.png" alt="" />
+</div>
+```
+
+---
+
+## Charts (bold flat data viz)
+
+Match the loud, flat personality:
+
+- Series in the brand primaries: pink `#ff90e8`, teal `#23a094`, yellow `#ffc900`, purple `#90a8ed`, orange `#ff7051`. Highlighted series = pink.
+- **Flat fills, thick or no bar radius** (`borderRadius: 0-4`). On light, add `borderColor:'#000', borderWidth:2` for the outlined look.
+- Light surface: gridlines `#000` at low opacity or `#e5e5e0`; dark surface: gridlines `#2a2a2a`.
+- Axis text bold sans; tooltip black background, white text, square corners (or a 2px black-bordered box).
+- Doughnut: segments separated by the surface color; bold legend.
+
+```js
+const PINK="#ff90e8", TEAL="#23a094", YELLOW="#ffc900", PURPLE="#90a8ed", GRID="#2a2a2a";
+Chart.defaults.font.family = "Mona Sans, Inter, system-ui, sans-serif";
+// dark: bars backgroundColor:[TEAL, PINK], borderRadius:4
+// light: add borderColor:"#000", borderWidth:2
+// tooltip: { backgroundColor:"#000", cornerRadius:0 }
+```
+
+---
+
+## Motion & effects
+
+- Hover = lift into the shadow: `hover:-translate-y-0.5` with the offset shadow growing (`4px → 6px`). Tactile, stamped.
+- Fast, snappy transitions (`transition-transform duration-100`). No slow fades.
+- No soft/blurred shadows, no gradients on UI chrome, no glass blur.
+- Gradients only inside product cover artwork, never on the UI itself.
+
+---
+
+## Anti-patterns
+
+| Avoid | Why |
+|-------|-----|
+| Soft blurred shadows (`shadow-lg`, `shadow-xl`) | The look is hard offset `Npx Npx 0 #000` |
+| Thin `1px` gray borders on light cards | Light cards use thick `2-4px` black borders |
+| Muted / pastel-only palette | Gumroad is saturated and loud (yellow + pink) |
+| Serif type | All bold geometric sans |
+| Gradients on buttons / backgrounds | Keep UI flat; gradients live in cover art only |
+| Light weights for headings | Prefer `font-bold` everywhere |
+| Pink as a huge background fill | Pink is accents/tags/CTAs; yellow is the big surface |
+| Over-rounded `rounded-2xl` cards | Cards are square-ish; only buttons/nav are full pills |
+
+---
+
+## Project overrides
+
+If the repo defines `.agents/styles/gumroad.md` or `.agents/styles/gumroad-theme.md`, prefer those tokens and components over this portable spec.

package/agents-config/skills/use-style/styles/linear.md

@@ -0,0 +1,355 @@
+# Linear Style
+
+Linear's app UI. Near-black canvas, dense aligned navigation, indigo accent, Inter Display headings. Quiet chrome, line-defined structure, content-first hierarchy.
+
+**Reference vibe:** Linear desktop app (inbox, issue view, sidebar). See `linear.app/now/how-we-redesigned-the-linear-ui`.
+
+---
+
+## Core vibe
+
+- **Product UI, not marketing.** This is an app shell aesthetic: sidebar, panes, lists, properties. Use it for dashboards and tools, not hero landing pages.
+- **Quiet chrome.** Reduce visual noise. Navigation recedes; content leads. Neutral, timeless, minimal blue tint in the grays.
+- **Line over depth.** 1px low-contrast borders separate panes. No shadows on structure (one soft shadow only on floating menus/popovers).
+- **Dense and aligned.** Compact rows, tight vertical rhythm. Labels, icons, and buttons align both vertically and horizontally.
+- **Indigo accent, used sparingly.** Linear's signature `#5e6ad2` for active state, links, focus. 90% of the UI stays neutral gray.
+- **Inter Display for headings, Inter for body.** Display adds expressiveness on titles; regular Inter keeps prose readable.
+- **Soft small radius.** `rounded-md` (6px) on rows, buttons, inputs. Never sharp `0`, never `rounded-xl+`.
+- **Status by glyph.** Colored circle/icon glyphs carry meaning (todo, in-progress, done, urgent), not colored text or fills.
+
+---
+
+## Color
+
+Portable palette. LCH-derived neutrals with a faint cool tint. Map to project tokens when available.
+
+| Role | Hex | CSS var (suggested) | Usage |
+|------|-----|---------------------|-------|
+| Canvas | `#08090a` | `--ln-bg` | App background, main pane |
+| Surface | `#0f1011` | `--ln-surface` | Sidebar, secondary panes |
+| Surface raised | `#1a1b1e` | `--ln-surface-raised` | Hover rows, selected items, inputs |
+| Popover | `#1c1d1f` | `--ln-popover` | Floating menus, dropdowns, tooltips |
+| Ink | `#f7f8f8` | `--ln-fg` | Headings, primary text, active labels |
+| Muted ink | `#8a8f98` | `--ln-muted-fg` | Secondary text, inactive nav, metadata |
+| Subtle ink | `#62666d` | `--ln-subtle-fg` | Timestamps, placeholders, faint labels |
+| Border | `#1f2023` | `--ln-border` | Pane dividers, row separators |
+| Border strong | `#2c2e33` | `--ln-border-strong` | Hover/active borders, input focus ring base |
+| Accent | `#5e6ad2` | `--ln-accent` | Active state, links, selection, focus |
+| Accent hover | `#6e79de` | `--ln-accent-hover` | Accent hover |
+| Todo | `#e2a336` | `--ln-todo` | Yellow status glyph |
+| In progress | `#f2994a` | `--ln-progress` | Orange status glyph (partial ring) |
+| Done | `#5e6ad2` | `--ln-done` | Filled indigo check |
+| Urgent | `#eb5757` | `--ln-urgent` | Red SLA / urgent glyph |
+| Success | `#4cb782` | `--ln-success` | Positive state |
+
+### Tailwind mapping (when no project tokens)
+
+```css
+:root {
+  --ln-bg: #08090a;
+  --ln-surface: #0f1011;
+  --ln-surface-raised: #1a1b1e;
+  --ln-fg: #f7f8f8;
+  --ln-muted-fg: #8a8f98;
+  --ln-border: #1f2023;
+  --ln-accent: #5e6ad2;
+}
+```
+
+| Tailwind | Value |
+|----------|-------|
+| `bg-[#08090a]` | Canvas |
+| `bg-[#0f1011]` | Surface (sidebar) |
+| `bg-[#1a1b1e]` | Hover / selected row |
+| `text-[#f7f8f8]` | Primary |
+| `text-[#8a8f98]` | Muted |
+| `border-[#1f2023]` | Structure |
+| `text-[#5e6ad2]` | Accent |
+
+**Rule:** Keep the surface within a 2-3 step gray range. Accent and status colors are glyph-sized only - never large fills.
+
+---
+
+## Typography
+
+### Font stacks
+
+| Role | Stack |
+|------|-------|
+| Display (headings) | `Inter Display, Inter, ui-sans-serif, system-ui, sans-serif` |
+| Body / UI | `Inter, ui-sans-serif, system-ui, sans-serif` |
+| Mono (IDs, code) | `Berkeley Mono, ui-monospace, SFMono-Regular, Menlo, monospace` |
+
+Load Inter via `@fontsource/inter` or `next/font`. Inter Display is the optical "display" cut for large sizes; fall back to Inter if unavailable.
+
+### Scale
+
+| Level | Font | Pattern |
+|-------|------|---------|
+| Issue / page title | Display | `text-2xl md:text-3xl font-semibold tracking-[-0.01em] text-[#f7f8f8]` |
+| Pane heading (Inbox) | Display | `text-base font-semibold text-[#f7f8f8]` |
+| Section label | Body | `text-xs font-medium text-[#8a8f98]` (e.g. Workspace, Favorites) |
+| Row title | Body | `text-sm font-medium text-[#f7f8f8]` |
+| Row subtitle / meta | Body | `text-[13px] text-[#8a8f98]` |
+| Body prose | Body | `text-sm md:text-[15px] leading-relaxed text-[#d0d2d6]` |
+| Timestamp / ID | Body or Mono | `text-xs text-[#62666d]` |
+
+### Section labels
+
+Small, medium weight, muted. NOT uppercase, NOT letter-spaced (unlike Vercel style). Examples: `Workspace`, `Favorites`, `Your teams`, `Properties`, `Labels`.
+
+```tsx
+<p className="px-2 text-xs font-medium text-[#8a8f98]">Workspace</p>
+```
+
+---
+
+## Layout tokens
+
+| Token | Value |
+|-------|-------|
+| `LN_SIDEBAR` | `w-56 shrink-0 bg-[#0f1011] border-r border-[#1f2023]` |
+| `LN_LIST` | `w-[360px] shrink-0 border-r border-[#1f2023]` |
+| `LN_MAIN` | `flex-1 min-w-0` |
+| `LN_PROPS` | `w-64 shrink-0 border-l border-[#1f2023] p-4` |
+| `LN_ROW` | `flex items-center gap-2.5 rounded-md px-2 py-1.5` |
+| `LN_CONTENT` | `mx-auto w-full max-w-3xl px-6 md:px-10 py-8` |
+
+### App shell (Linear's core layout)
+
+Two or three panes: sidebar + (list) + main, optional right properties rail.
+
+```
++--------+------------------+---------------------------+--------+
+| side   |  list / inbox    |  main (issue / content)   | props  |
+| bar    |  rows w/ glyphs  |  title + body + activity  | rail   |
+| w-56   |  w-[360px]       |  flex-1                   | w-64   |
++--------+------------------+---------------------------+--------+
+```
+
+```tsx
+<div className="flex h-screen bg-[#08090a] text-[#f7f8f8]">
+  <aside className="w-56 shrink-0 border-r border-[#1f2023] bg-[#0f1011] p-2">...</aside>
+  <section className="w-[360px] shrink-0 border-r border-[#1f2023]">...</section>
+  <main className="flex-1 min-w-0">...</main>
+  <aside className="w-64 shrink-0 border-l border-[#1f2023] p-4">...</aside>
+</div>
+```
+
+### Breadcrumb header
+
+Top of the main pane. Icon + segment, `/` or `chevron` between, muted until the leaf.
+
+```tsx
+<header className="flex items-center gap-1.5 border-b border-[#1f2023] px-4 py-2.5 text-sm">
+  <span className="text-[#8a8f98]">Product</span>
+  <span className="text-[#62666d]">/</span>
+  <span className="text-[#8a8f98]">Insights</span>
+  <span className="text-[#62666d]">/</span>
+  <span className="text-[#f7f8f8]">LIN-1305</span>
+</header>
+```
+
+---
+
+## Borders & radius
+
+| Context | Radius | Border |
+|---------|--------|--------|
+| Panes (sidebar, list, rail) | n/a | `border-[#1f2023]` dividers only |
+| Sidebar / list rows | `rounded-md` (6px) | none; selection = `bg-[#1a1b1e]` |
+| Buttons, badges, inputs | `rounded-md` (6px) | `border-[#1f2023]` or borderless |
+| Avatars, status icons | `rounded-full` | none |
+| Popovers / menus | `rounded-lg` (8px) | `border-[#2c2e33]` + soft shadow |
+
+Dividers: `border-b border-[#1f2023]`, full width inside the pane. Rows are separated by selection bg, not by per-row borders.
+
+---
+
+## Component patterns
+
+### Sidebar nav item
+
+Icon + label. Inactive muted, active = raised bg + white text. No left accent bar.
+
+```tsx
+<a className={cn(
+  "flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm",
+  active ? "bg-[#1a1b1e] text-[#f7f8f8]" : "text-[#8a8f98] hover:bg-[#1a1b1e] hover:text-[#f7f8f8]"
+)}>
+  <Icon className="size-4 shrink-0" />
+  <span className="truncate">Inbox</span>
+</a>
+```
+
+### Status glyph
+
+Colored ring/circle, no fill text. The glyph is the only color in the row.
+
+```tsx
+// Todo: hollow yellow circle · In progress: partial orange ring · Done: filled indigo check · Urgent: red square
+<span className="grid size-4 place-items-center rounded-full border-2 border-[#e2a336]" />
+<CheckCircle className="size-4 text-[#5e6ad2]" />
+```
+
+### Inbox / list row
+
+Avatar or glyph left, two-line title + subtitle, status + timestamp right. Selected row gets raised bg.
+
+```tsx
+<a className={cn(
+  "flex items-center gap-3 rounded-md px-3 py-2.5",
+  selected ? "bg-[#1a1b1e]" : "hover:bg-[#1a1b1e]/60"
+)}>
+  <img className="size-7 shrink-0 rounded-full" src={avatar} />
+  <div className="min-w-0 flex-1">
+    <p className="truncate text-sm font-medium text-[#f7f8f8]">LIN-13055 Add source to insights</p>
+    <p className="truncate text-[13px] text-[#8a8f98]">nan mentioned you</p>
+  </div>
+  <div className="flex items-center gap-2 text-xs text-[#62666d]">
+    <StatusGlyph />
+    <span>2d</span>
+  </div>
+</a>
+```
+
+### Issue title block
+
+Display heading + sub-issue context line.
+
+```tsx
+<div className="mb-6">
+  <h1 className="text-2xl font-semibold tracking-[-0.01em] text-[#f7f8f8] md:text-3xl">Update copy</h1>
+  <p className="mt-2 flex items-center gap-1.5 text-sm text-[#8a8f98]">
+    Sub-issue of <CheckCircle className="size-3.5 text-[#5e6ad2]" />
+    <span className="text-[#f7f8f8]">LIN-19734 Update welcome and log in screens</span>
+  </p>
+</div>
+```
+
+### Properties rail row
+
+Label-less stacked rows or icon + value. Muted label, white value, click to edit.
+
+```tsx
+<div className="space-y-1">
+  <p className="text-xs font-medium text-[#8a8f98]">Properties</p>
+  <button className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-[#f7f8f8] hover:bg-[#1a1b1e]">
+    <CheckCircle className="size-4 text-[#5e6ad2]" /> Done
+  </button>
+  <button className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-[#8a8f98] hover:bg-[#1a1b1e]">
+    <CircleDashed className="size-4" /> Set priority
+  </button>
+</div>
+```
+
+### Label / badge chip
+
+Small, muted, dot or icon + text. `rounded-md`, faint border or transparent.
+
+```tsx
+<span className="inline-flex items-center gap-1.5 rounded-md border border-[#1f2023] px-2 py-0.5 text-xs text-[#8a8f98]">
+  <span className="size-2 rounded-full bg-[#5e6ad2]" /> UI Refresh
+</span>
+```
+
+### Buttons
+
+| Variant | Classes |
+|---------|---------|
+| Primary | `rounded-md bg-[#5e6ad2] px-3 py-1.5 text-sm font-medium text-white hover:bg-[#6e79de]` |
+| Secondary | `rounded-md border border-[#2c2e33] bg-transparent px-3 py-1.5 text-sm text-[#f7f8f8] hover:bg-[#1a1b1e]` |
+| Ghost / toolbar | `rounded-md px-2 py-1.5 text-sm text-[#8a8f98] hover:bg-[#1a1b1e] hover:text-[#f7f8f8]` |
+| Link | `text-[#5e6ad2] hover:underline` |
+
+### Input
+
+```tsx
+<input
+  className="w-full rounded-md border border-[#1f2023] bg-[#1a1b1e] px-3 py-1.5 text-sm text-[#f7f8f8] placeholder:text-[#62666d] focus:border-[#5e6ad2] focus:outline-none"
+  placeholder="Add description..."
+/>
+```
+
+### Popover / command menu
+
+Floating surface gets the one allowed shadow.
+
+```tsx
+<div className="rounded-lg border border-[#2c2e33] bg-[#1c1d1f] p-1 shadow-[0_8px_24px_rgba(0,0,0,0.5)]">
+  {items.map(...)}
+</div>
+```
+
+### Avatar
+
+```tsx
+<img className="size-6 rounded-full ring-1 ring-[#1f2023]" src={src} />
+// stacked: -ml-1.5 ring-2 ring-[#08090a]
+```
+
+---
+
+## Charts (app data viz)
+
+Dashboards and insights panes use charts that stay as quiet as the rest of the chrome:
+
+- Series in the neutral grays: `#8a8f98`, `#62666d`, `#2c2e33`, with **one** indigo accent `#5e6ad2` for the highlighted/primary series. Status colors (`#e2a336`, `#f2994a`, `#eb5757`, `#4cb782`) only when the chart literally encodes those states.
+- **Small-radius bars** (`borderRadius: 4`), flat fills. No gradients, no glow.
+- Background = pane surface (`#08090a` / `#0f1011`); gridlines `#1f2023`; axis text `Inter`, muted `#8a8f98`.
+- Tooltip: popover surface `#1c1d1f`, border `#2c2e33`, ink `#f7f8f8`, `8px` corners, the one allowed soft shadow.
+- Keep legends and labels in `Inter` sentence-case (not uppercase), matching section labels.
+
+```js
+const ACCENT="#5e6ad2", S2="#8a8f98", S3="#62666d", S4="#2c2e33", GRID="#1f2023";
+Chart.defaults.font.family = "Inter, system-ui, sans-serif";
+Chart.defaults.color = "#8a8f98";
+// bars: backgroundColor:[S3, ACCENT], borderRadius:4
+// grid: { color: GRID }
+// tooltip: { backgroundColor:"#1c1d1f", borderColor:"#2c2e33", borderWidth:1, cornerRadius:8 }
+```
+
+---
+
+## Motion & effects
+
+- **Quiet.** Transitions are fast and subtle: `transition-colors duration-100`.
+- Hover = bg shift to `#1a1b1e` and/or text muted to white. No scale, no lift on rows.
+- One soft shadow allowed: floating menus/popovers only (`0 8px 24px rgba(0,0,0,.5)`).
+- Focus ring uses accent: `focus:border-[#5e6ad2]` or `focus-visible:ring-1 ring-[#5e6ad2]`.
+- No gradients, no glow, no glass blur on structure.
+
+---
+
+## When to use
+
+| Surface | Fit |
+|---------|-----|
+| Issue tracker, inbox, dashboard, settings, admin panel | Strong fit |
+| Tool with sidebar + list + detail panes | Strong fit |
+| Marketing landing / hero page | Poor fit - use `grid` or `vercel-simple` |
+| Data calculator / index of tools | Use `vercel-simple` (mono + sharp) |
+
+Linear style is for **product app shells**. If the request is a marketing page, redirect to another style.
+
+---
+
+## Anti-patterns
+
+| Avoid | Why |
+|-------|-----|
+| Sharp `rounded-none` rows/buttons | Linear is soft 6px, not Vercel-sharp |
+| `rounded-xl`, `rounded-2xl`, pills on rows | Too soft; breaks the dense app feel |
+| Uppercase letter-spaced section labels | Linear labels are sentence-case, medium weight |
+| Large accent or status color fills | Color lives in glyphs and active state only |
+| Shadows on cards, panes, rows | Structure is line-defined; shadow is popover-only |
+| Per-row 1px borders in lists | Use selection bg + spacing, not borders |
+| High-contrast pure `#000` / `#fff` | Use `#08090a` canvas and `#f7f8f8` ink |
+| Monospace as the primary UI font | Inter is primary; mono only for IDs/code |
+| Gradient or photographic backgrounds | Keep flat neutral surfaces |
+
+---
+
+## Project overrides
+
+If the repo defines `.agents/styles/linear.md` or `.agents/styles/linear-theme.md`, prefer those tokens and components over this portable spec.