Quantbot Design System

Dark-first, blue-on-near-black system for an algorithmic-trading product family: a Tailwind v4 marketing site with an 8-bit pixel wordmark, and — the focus of this spec — a companion analytics dashboard portal built as a widget grid (stat tiles, equity/returns charts, progress trackers) on a shadcn-style component vocabulary. This page is the visual regression test for the JSON spec: every component and every meaningful state below is rendered as a live specimen on the actual design-system surfaces.

Signature moves

The six moves that make this system itself. Violating any one of these breaks the system's identity even if individual screens "look fine".

Tokens

Two cool near-blacks are deliberate: the dashboard page is slate-950 (#020617, faint blue cast) and cards are zinc-900 (#18181b, neutral). The marketing site uses warmer zinc-950 (#09090b) as page. surface-hover is always one zinc step up from the surface it lifts from. The rim is the elevation primitive — a 1px white-at-6% inset border — used instead of drop shadows. Every value below is a resolved Tailwind v4 canonical token; oklch is the framework's canonical form, hex/rgb are the resolved equivalents.

Type ramp

~26 type roles. Marketing uses Inter; the dashboard portal uses the ui-sans-serif system stack. Press Start 2P (alt VT323) is used for the 8-bit brand wordmark only — never for UI text. Specimens below are rendered at the exact size/weight/leading/tracking for each role.

Motion

standard easing (cubic-bezier(0.4,0,0.2,1), Tailwind's default ease) for ~everything; emphasized (cubic-bezier(0.2,0,0,1)) only for entrances like the lead-capture modal.

Elevation — rims, not shadows

This system uses rims, not drop shadows. A card is defined by a 1px white-at-6% inset border on a one-step-darker-than-its-neighbour surface — not by a shadow. Adding box-shadows to cards is the single fastest way to make this system look wrong. (Modals and dropdown panels are the only things that get a real shadow.)

Iconography

Set: Lucide (outline) — alt Heroicons (outline), equivalent. Stroke width 1.5. Sizes 16 & 20px (16 = inline-with-text, table cells, chips, small buttons, period-pill chevron; 20 = nav items, larger buttons, card-header actions, status dots). Color inherits currentColor — defaults to ink-muted; goes ink or brand when active/hover; semantic colors (ok/warn/danger) when the icon carries status. Glyphs below are inline-SVG stand-ins; the canonical Lucide name is in the table.

Layout & grid

The dashboard shell + the 12-col / 16px-gap widget grid math, and the marketing layout rhythm.

Components

Every component from the JSON, rendered as a live specimen with its parts, dimensions, a demo of every state in its matrix (each state shown as its own labeled instance — you can't hover a static screenshot), and its codeAnchor (React + Tailwind v4). The dashboard widgets come first (the focus of this spec), then the shared controls, then the website components.

widget-container app

The universal dashboard primitive. Every chart/metric/tracker/list widget is this shell + a body. Cohesion across the grid comes from this being identical everywhere.

Dimensions: border-radius 12px (10px source) · border 1px rgba(255,255,255,.06) · bg #18181b · minHeight content-driven; chart variants 220–260px body min-height. Default grid span 6. Carries control: period-selector-pill.

function Widget({ title, subtitle, control, span = 6, footer, children }) {
  return (
    <section style={{ gridColumn: `span ${span} / span ${span}` }}
      className="rounded-[12px] border border-white/[0.06] bg-[#18181b] p-5
                 transition-colors duration-[120ms] ease-[cubic-bezier(.4,0,.2,1)]
                 focus-within:border-[#2563eb] focus-within:ring-2 focus-within:ring-[#2563eb]/20">
      <header className="flex items-start justify-between gap-3">
        <div>
          <h3 className="text-[17px] font-semibold leading-tight text-[#f9fafb]">{title}</h3>
          {subtitle && <p className="mt-0.5 text-[12px] text-[#a1a1aa]">{subtitle}</p>}
        </div>
        {control}
      </header>
      <div className="mt-4">{children}</div>
      {footer && <div className="mt-4 text-right">{footer}</div>}
    </section>
  );
}

period-selector-pill app

The signature affordance — a small dark dropdown trigger pinned top-right of data widgets. Often the only thing that makes the grid feel unified.

Dimensions: height ≈28px · min-width fit-content.

<button type="button"
  className="inline-flex items-center gap-1.5 rounded-md border border-white/[0.06] bg-white/[0.03]
             px-3 py-1.5 text-[11px] font-medium text-[#a1a1aa] transition-colors duration-[120ms]
             hover:border-white/15 hover:text-[#e4e4e7] focus-visible:ring-2 focus-visible:ring-[#2563eb]/20">
  Last 6 months
  <ChevronDown className="size-3.5" />
</button>

stat-tile app

Compact KPI widget — a label, a big number, a signed delta chip. The atom of the metrics row. Uses widget-container chrome; usually no header title (the label IS the content); often carries no control or a tiny context label.

Dimensions: padding 16px 20px · grid span 4.

<Widget title="" span={4} control={<PeriodPill label="This month" />}>
  <div className="text-[12px] font-medium text-[#a1a1aa]">Total profit / loss</div>
  <div className="mt-1 text-[26px] font-bold tabular-nums text-[#f9fafb]">+$2,156.92</div>
  <div className={`mt-1 text-[11px] font-medium ${delta >= 0 ? 'text-[#22c55e]' : 'text-[#ef4444]'}`}>
    {delta >= 0 ? '+' : ''}{delta}% from last month
  </div>
</Widget>

area-chart-card app

Single-series trend widget (equity curve, balance over time). The signature data viz: blue gradient fill under a 2px blue line.

Dimensions: grid span 8 (alt 6) · body min-height 240px.

<Widget title="Equity curve" span={8} control={<PeriodPill label="Last 6 months" />}>
  <div className="h-[240px]">
    <ResponsiveContainer>
      <AreaChart data={data} margin={{ top: 8, right: 8, bottom: 0, left: 0 }}>
        <defs>
          <linearGradient id="brandGradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#2563eb" stopOpacity={0.18} />
            <stop offset="100%" stopColor="#2563eb" stopOpacity={0} />
          </linearGradient>
        </defs>
        <XAxis dataKey="month" tick={{ fill: '#a1a1aa', fontSize: 11 }} axisLine={false} tickLine={false} />
        <YAxis hide />
        <Tooltip cursor={{ stroke: 'rgba(255,255,255,0.1)' }} content={<DarkTooltip />} />
        <Area type="monotone" dataKey="equity" stroke="#3b82f6" strokeWidth={2} fill="url(#brandGradient)" dot={false}
              activeDot={{ r: 4, fill: '#3b82f6', stroke: '#18181b', strokeWidth: 2 }} />
      </AreaChart>
    </ResponsiveContainer>
  </div>
</Widget>

bar-chart-card app

Categorical/periodic widget — e.g. monthly returns. Multi-color bars rotating through the chart-series palette (blue → green → orange → purple → pink → yellow, then wrap). Bars radius:[4,4,0,0] (rounded top only), category gap ~24–32%.

Dimensions: grid span 6 · body min-height 240px.

<Widget title="Monthly returns" subtitle="Net return per month" span={6} control={<PeriodPill label="Last 6 months" />}>
  <div className="h-[240px]">
    <ResponsiveContainer>
      <BarChart data={data}>
        <CartesianGrid stroke="rgba(255,255,255,0.04)" vertical={false} />
        <XAxis dataKey="month" tick={{ fill: '#a1a1aa', fontSize: 11 }} axisLine={false} tickLine={false} />
        <YAxis tick={{ fill: '#a1a1aa', fontSize: 11 }} axisLine={false} tickLine={false} unit="%" />
        <Tooltip cursor={{ fill: 'rgba(255,255,255,0.04)' }} content={<DarkTooltip />} />
        <Bar dataKey="return" radius={[4, 4, 0, 0]}>
          {data.map((_, i) => <Cell key={i} fill={['#3b82f6','#22c55e','#f97316','#a855f7','#ec4899','#facc15'][i % 6]} />)}
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  </div>
</Widget>

progress-tracker-card app

Full-width list of labelled progress rows (e.g. "Certificate progress tracker": Phase 1 target 100%, Phase 2 target 75%). Each row: label, bar, %, status glyph. span-12 typically.

Dimensions: grid span 12 · row height ≈40px · bar height 6px.

<Widget title="Certificate progress tracker" subtitle="Payment status overview for the last 6 months" span={12} control={<PeriodPill label="Last 6 months" />}>
  <ul className="divide-y divide-white/5">
    {rows.map(r => (
      <li key={r.id} className="flex items-center gap-4 py-3">
        <span className="w-48 shrink-0 text-[14px] font-medium text-[#e4e4e7]">{r.label}</span>
        <div className="h-1.5 flex-1 rounded-full bg-[#27272a]">
          <div className="h-full rounded-full" style={{ width: `${r.pct}%`, background: r.pct >= 100 ? '#22c55e' : '#2563eb' }} />
        </div>
        <span className="w-12 shrink-0 text-right text-[12px] font-medium tabular-nums text-[#f9fafb]">{r.pct}%</span>
        {r.pct >= 100 ? <CheckCircle className="size-4 text-[#22c55e]" /> : <Circle className="size-4 text-[#71717a]" />}
      </li>
    ))}
  </ul>
</Widget>

list-table-card app

Tabular widget — recent trades, open positions, transactions. Header row + data rows with subtle dividers; hover lift on rows; status pills inline. Control slot often a filter dropdown instead of a period pill; optional footer link "View all →".

Dimensions: grid span 6 (alt 12) · row height ≈44px.

<Widget title="Recent trades" span={6} control={<FilterDropdown />} footer={<a className="text-[14px] font-medium text-[#2563eb] hover:text-[#3b82f6]">View all →</a>}>
  <table className="w-full text-left">
    <thead>
      <tr className="border-b border-[#1f2937]">
        {['Symbol','Type','Size','P/L','Status'].map(h =>
          <th key={h} className="py-2 text-[12px] font-semibold uppercase tracking-wider text-[#a1a1aa]">{h}</th>)}
      </tr>
    </thead>
    <tbody>
      {rows.map(r => (
        <tr key={r.id} className="border-b border-white/5 transition-colors duration-[120ms] hover:bg-[#27272a]">
          <td className="py-3 text-[14px] text-[#e4e4e7]">{r.symbol}</td>
          <td className="py-3 text-[14px] text-[#e4e4e7]">{r.side}</td>
          <td className="py-3 text-right text-[14px] tabular-nums text-[#e4e4e7]">{r.size}</td>
          <td className={`py-3 text-right text-[14px] tabular-nums ${r.pnl >= 0 ? 'text-[#22c55e]' : 'text-[#ef4444]'}`}>{r.pnl}</td>
          <td className="py-3"><Badge tone={r.status === 'open' ? 'info' : 'ok'}>{r.status}</Badge></td>
        </tr>
      ))}
    </tbody>
  </table>
</Widget>

status-card app

Single-fact widget — the state of one thing (bot running / paused / error; broker connected). A big colored dot + a label + a supporting line. span-4; usually no control, maybe a kebab.

Dimensions: grid span 4 · padding 16px 20px.

<Widget title="" span={4}>
  <div className="flex items-center gap-2">
    <span className="size-2.5 rounded-full bg-[#22c55e] shadow-[0_0_0_4px_rgba(34,197,94,0.12)]" />
    <span className="text-[17px] font-semibold text-[#f9fafb]">Running</span>
  </div>
  <p className="mt-1 text-[14px] text-[#a1a1aa]">3 bots active · last trade 4m ago</p>
</Widget>

sidebar app

Fixed left navigation column for the dashboard. Wordmark + grouped nav items under uppercase section labels.

States: default; collapsed (responsive < md) → translateX(-100%) off-canvas, opens as a drawer over a scrim, 320ms standard, hamburger toggle; scrolled → internal scroll only, logo block can stay pinned.

<aside className="fixed inset-y-0 left-0 w-60 overflow-y-auto border-r border-white/[0.06] bg-[#020617] py-7">
  <div className="border-b border-white/[0.06] px-[22px] pb-[22px]">
    <span className="font-[var(--font-display)] text-base uppercase tracking-[0.4em] text-[#f9fafb]">QUANTBOT</span>
  </div>
  <nav className="mt-4">
    <div className="px-[22px] pb-1.5 pt-4 text-[10px] font-semibold uppercase tracking-[0.08em] text-[#71717a]">Overview</div>
    <SidebarItem icon={LayoutDashboard} active>Dashboard</SidebarItem>
    <SidebarItem icon={Wallet}>Accounts</SidebarItem>
  </nav>
</aside>

sidebar-nav-item app

Block, padding 7px 22px, left 2px transparent border, text nav-label-app 14/500; icon Lucide 20px (or 16px), ink-muted (→ ink/brand when active/hover), 8px from label; optional trailing count pill in brand-soft/brand text; optional indented sub-item (padding-left 38px, 12px, ink-faint).

<a href="..." className={`flex items-center gap-2 border-l-2 px-[22px] py-[7px] text-[14px] font-medium transition-colors duration-[120ms]
  ${active ? 'border-[#2563eb] bg-[#2563eb]/[0.08] text-[#f9fafb]' : 'border-transparent text-white/70 hover:bg-white/[0.04] hover:text-[#f9fafb]'}`}>
  <Icon className={`size-5 ${active ? 'text-[#2563eb]' : 'text-[#a1a1aa]'}`} />
  {children}
</a>

top-bar app

sticky top-0 z-50, height 64px, bg page (optionally page/85 + backdrop-blur-md), bottom border 1px divider-soft, padding 0 32px, flex items-center justify-between. Left: hamburger (< md only) + page title / breadcrumb. Right: a ghost pill button ("Contact support"), an icon button (Bell), an avatar/account menu trigger.

Dimensions: height 64 · padding-x 32.

<header className="sticky top-0 z-50 flex h-16 items-center justify-between border-b border-white/5 bg-[#020617] px-8">
  <h1 className="text-[18px] font-semibold text-[#f9fafb]">Account overview</h1>
  <div className="flex items-center gap-3">
    <button className="rounded-md border border-white/10 px-3 py-1.5 text-[13px] font-medium text-[#e4e4e7] hover:bg-white/5">Contact support</button>
    <button className="rounded-md p-2 text-[#a1a1aa] hover:bg-white/5"><Bell className="size-5" /></button>
    <button className="size-8 rounded-full bg-[#27272a]" />
  </div>
</header>

tab-pill-switcher app

Segmented control — a track holding 2+ tabs; the active tab is a filled brand pill inside the track. Used for the login/register switcher and for in-page view toggles. Track: bg divider #1f2937 · radius md 8px · padding 4px. Tab: padding 8px 16px · radius sm 6px · 14px. Active: bg brand #2563eb · text white · weight 600. Inactive: transparent · text ink-muted (→ ink on hover) · weight 500.

<div className="grid grid-cols-2 rounded-md bg-[#1f2937] p-1">
  <button className="rounded-sm bg-[#2563eb] px-4 py-2 text-[14px] font-semibold text-white">Iniciar sesión</button>
  <button className="rounded-sm px-4 py-2 text-[14px] font-medium text-[#a1a1aa] hover:text-[#f9fafb]">Crear cuenta</button>
</div>

dropdown-panel app website

The floating menu surface used by the period-selector pill, filter dropdowns, account menu, kebab menus. Panel: bg surface #18181b · border 1px rim · radius md 8px · padding 4px · shadow 0 24px 64px rgba(0,0,0,.6) (the modal-grade shadow — popovers get it too) · min-width 160px. Item: flex items-center gap 8px · padding 8px 12px · radius sm 6px · 14px ink-2 · optional leading icon 16px ink-muted. Active-item: text → brand (or a brand/10 fill row); optional trailing Check brand. Separator: 1px divider-soft, margin 4px 0. Section-label: 10/600 uppercase ink-faint.

<div className="min-w-40 rounded-md border border-white/[0.06] bg-[#18181b] p-1 shadow-[0_24px_64px_rgba(0,0,0,0.6)]">
  {options.map(o => (
    <button key={o.id} className={`flex w-full items-center justify-between rounded-sm px-3 py-2 text-[14px] hover:bg-[#27272a]
      ${o.id === value ? 'text-[#2563eb]' : 'text-[#e4e4e7]'}`}>
      {o.label}{o.id === value && <Check className="size-4 text-[#2563eb]" />}
    </button>
  ))}
</div>

modal app website

Centered dialog over a scrim. Scrim: fixed inset-0, bg rgba(0,0,0,.7), z-40. Dialog: centered, bg surface-2/surface (#101012 / #18181b) · border 1px rim · radius lg 12px · padding 24px · shadow 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) · width ~320–480px. Close: top-right X, 16px, ink-faint, hover ink. Title: 16/500 (or section-h3 24/600 for larger). Actions: right-aligned row — a ghost (cancel) + a primary/primary-lg (confirm); destructive confirm uses destructive. Entering: scrim fades 0→0.7; dialog opacity 0→1 + translateY +10px→0, 320ms emphasized. Exiting: reverse, faster ~200ms standard. Focus trapped; Esc closes; body scroll locked.

<div className="fixed inset-0 z-40 grid place-items-center bg-black/70">
  <div className="relative w-80 rounded-[12px] border border-white/8 bg-[#101012] p-6 text-center shadow-[0_24px_64px_rgba(0,0,0,0.6)]">
    <button className="absolute right-4 top-4 text-[#71717a] hover:text-[#f9fafb]"><X className="size-4" /></button>
    <h2 className="text-[16px] font-medium text-[#f9fafb]">Solicítalos ya</h2>
    <button className="mt-4 w-full rounded-md bg-[#2563eb] py-3 text-[16px] font-semibold text-white hover:bg-[#1d4ed8]">Solicitar</button>
  </div>
</div>

toast app website

Transient notification — bottom-right (or top-right), auto-dismiss, dark with a status-colored accent. Container: fixed, z-60, stacking from bottom-right (gap 12px). Toast: bg surface #18181b · border 1px rim · radius md 8px · padding 12px 16px · shadow 0 24px 64px rgba(0,0,0,.6) · max-width ~360px · flex gap 12px. Icon: 16–20px status icon. Text: title body 14/600 ink + optional description 13/400 ink-muted. Accent: a 3px left border in the status color, OR an accent on the icon only. Entering: slide in from the right + fade, 200ms standard. Shown 4–6s; pauses on hover. Stacked: older toasts shift up; max ~3 visible.

<div className="flex max-w-sm items-start gap-3 rounded-md border border-white/[0.06] bg-[#18181b] p-3 pr-4 shadow-[0_24px_64px_rgba(0,0,0,0.6)]">
  <CheckCircle className="mt-0.5 size-5 text-[#22c55e]" />
  <div>
    <p className="text-[14px] font-semibold text-[#f9fafb]">Settings saved</p>
    <p className="text-[13px] text-[#a1a1aa]">Your bot configuration was updated.</p>
  </div>
</div>

button app website

One filled brand variant (two sizes), one ghost variant, one link-arrow, one icon button, one destructive. Radius 8px (md) on all. Min touch target 44px on mobile, 36–40px desktop. The full variant × state matrix below.

// primary
<button className="inline-flex h-10 items-center justify-center rounded-md bg-[#2563eb] px-5 text-[14px] font-medium text-white transition-colors duration-200 hover:bg-[#1d4ed8] active:bg-[#1e40af] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#2563eb] disabled:opacity-40">Iniciar sesión</button>
// ghost
<button className="inline-flex h-10 items-center justify-center rounded-md border border-white/15 px-5 text-[14px] font-medium text-[#f9fafb] transition-colors hover:border-white/30 hover:bg-white/5">Cancel</button>
// link-arrow
<a className="group inline-flex items-center gap-1 text-[14px] font-medium text-[#2563eb] hover:text-[#3b82f6]">Saber más <span className="transition-transform duration-[120ms] group-hover:translate-x-0.5">→</span></a>

input app website

Text field. Marketing variant: surface-2 bg, 15%-white border. Dashboard variant: surface-overlay (5% white) bg, 8%-white border. Both: 8px radius, 12/16 padding, 44px min-height, brand focus border + soft ring. Label 14/500 ink-2 + 8px margin-bottom; placeholder ink-disabled; optional leading icon (Lucide 16px ink-muted, search inputs); optional trailing affordance (password eye / clear X); hint/error 12px (hint ink-muted, error danger) + 6px margin-top.

// dashboard input
<label className="block text-[14px] font-medium text-[#e4e4e7]">Email</label>
<input type="email" placeholder="tucorreo@ejemplo.com"
  className="mt-2 h-11 w-full rounded-md border border-white/8 bg-white/5 px-4 text-[14px] text-[#f9fafb] placeholder:text-[#52525b]
             outline-none transition-colors focus:border-[#2563eb] focus:ring-[3px] focus:ring-[#2563eb]/20" />

badge-pill app website

Small status/category pill. Soft-tinted background + matching text color, pill radius. inline-flex items-center gap 4px · padding 4px 10px · radius pill 9999px · type badge 12/500. States: static (default — badges are usually non-interactive); removable (+ trailing X 12px; X hover → text darkens); as-filter selected (solid brand bg + white text when used as a toggle chip).

<span className="inline-flex items-center gap-1 rounded-full bg-[#ef4444]/15 px-2.5 py-1 text-[12px] font-medium text-[#ef4444]">Riesgo alto</span>

skeleton app website

Loading placeholder. A pulsing zinc-800 block shaped like the eventual content. NEVER a spinner (except the tiny inline one inside a loading button). Block: bg surface-hover #27272a · radius matching the real element (text → sm or full pill, chart → md) · animate-pulse (opacity 1↔0.5, ~1.5s) · explicit width/height matching the target. Resolved: skeleton unmounts, real content fades in over ≤120ms; layout must not shift. Reduced-motion → static 0.6 opacity, no pulse.

<div className="space-y-2" aria-hidden>
  <div className="h-3 w-24 animate-pulse rounded bg-[#27272a]" />
  <div className="h-7 w-32 animate-pulse rounded bg-[#27272a]" />
  <div className="h-3 w-36 animate-pulse rounded bg-[#27272a]" />
</div>

empty-state app website

What a widget/page shows when there's genuinely no data. Always designed, never blank, never raw "null". Wrap: centered column, padding ~32px, max-width ~280px, text-center. Icon: a relevant Lucide glyph at ~32px, ink-faint, often inside a surface-hover circle. Title: body 14–16/600 ink-2 — what's missing. Supporting: small 13–14/400 ink-muted — ONE line on what happens next. CTA (optional): a ghost small button or a link-arrow.

<div className="mx-auto flex max-w-[280px] flex-col items-center gap-2 py-8 text-center">
  <div className="grid size-12 place-items-center rounded-full bg-[#27272a]"><Inbox className="size-5 text-[#71717a]" /></div>
  <p className="text-[14px] font-semibold text-[#e4e4e7]">No trades yet</p>
  <p className="text-[13px] text-[#a1a1aa]">They'll appear here once your bots execute their first orders.</p>
  <a className="mt-2 text-[14px] font-medium text-[#2563eb] hover:text-[#3b82f6]">Connect a broker →</a>
</div>

top-nav-marketing website

sticky top-0 z-50, height 64px, bg page-marketing/85 + backdrop-blur-md saturate-140%, bottom border 1px divider-soft, padding 0 32px, flex items-center. Logo: the pixel wordmark — uppercase, display-pixel-wordmark (0.4em tracking), ~16px height, ink. Links: nav-link-marketing 14/500 ink-2 (→ ink hover), 28px gap. CTA: primary blue button "Área del cliente", far right, navCTA size (8px/16px padding, 13px). Mobile (< md): links collapse into a hamburger → a full-height drawer; the CTA may stay visible.

<nav className="sticky top-0 z-50 flex h-16 items-center gap-7 border-b border-white/5 bg-[#09090b]/85 px-8 backdrop-blur-md">
  <span className="font-[var(--font-display)] text-base uppercase tracking-[0.4em] text-[#fafafa]">QUANTBOT</span>
  <a className="text-[14px] font-medium text-[#e4e4e7] hover:text-white">Servicios</a>
  <a className="ml-auto rounded-md bg-[#2563eb] px-4 py-2 text-[13px] font-medium text-white hover:bg-[#1d4ed8]">Área del cliente</a>
</nav>

service-card website

bg surface-2 #101012 · border 1px rim · radius lg 12px · padding 32px. icon-tile: 48px square · bg brand-soft rgba(37,99,235,.18) · radius md 8px · centered Lucide icon brand/ink. title: section-h2/section-h3 24–30/600–700 ink, margin-top 20px. body: body 16/400 ink-2, margin-top 12px. link: link-arrow "Saber más →" in brand, margin-top 20px. States: default (rim 6%, no shadow); hover (border → rim-strong 20% white; translateY -2px — the rare allowed lift; 200ms — restrained, not bouncy); focus-within (ring-2 brand/20).

<article className="rounded-[12px] border border-white/[0.06] bg-[#101012] p-8 transition-colors hover:border-white/20">
  <div className="grid size-12 place-items-center rounded-md bg-[#2563eb]/[0.18]"><LineChart className="size-6 text-[#3b82f6]" /></div>
  <h3 className="mt-5 text-[24px] font-semibold text-[#fafafa]">Gestión de cuenta real</h3>
  <p className="mt-3 text-[16px] text-[#e4e4e7]">…</p>
  <a className="mt-5 inline-flex items-center gap-1 text-[14px] font-medium text-[#2563eb]">Saber más →</a>
</article>

comparison-table website

Two-product comparison (this product vs a generic provider). 3-col grid: feature label | highlighted column (brand-tinted, green checks) | neutral column (muted, red crosses). Root: bg surface-3 #131313 · radius lg 12px · overflow hidden. Row: grid grid-cols-3 · padding 16px 24px · bottom border 1px divider-soft. label-cell: left column, weight 600 ink. highlighted-cell: bg brand/8 rgba(37,99,235,.08) · a ok Check (or value text). neutral-cell: text ink-muted · a danger X (or "—"). header-row: the two product names as column headers; the highlighted product gets the brand tint + maybe a "Recomendado" badge. Optional row:hover → entire row bg lifts to white/2.

<div className="overflow-hidden rounded-[12px] bg-[#131313]">
  {rows.map(r => (
    <div key={r.id} className="grid grid-cols-3 border-b border-white/5 px-6 py-4 text-[14px]">
      <span className="font-semibold text-[#fafafa]">{r.label}</span>
      <span className="bg-[#2563eb]/[0.08] -mx-6 px-6 flex items-center text-[#22c55e]"><Check className="size-4" /></span>
      <span className="text-[#a1a1aa] flex items-center"><X className="size-4 text-[#ef4444]" /></span>
    </div>
  ))}
</div>

faq-accordion website

Row: full-width · padding 20px 24px · bottom border 1px rim. Question: flex justify-between · body 16/500 ink · trailing ChevronDown ink-muted. Answer: small 14/400 ink-muted line-height 1.6 · padding-top 12px · revealed on open. States: collapsed (answer hidden, max-height 0; chevron points down); hover (row bg → white/3); expanded (answer expands via max-height transition, 200ms standard; chevron rotates 180°); focus-visible (ring-2 brand/20 on the question button).

<div className="border-b border-white/[0.06]">
  <button className="flex w-full items-center justify-between px-6 py-5 text-left text-[16px] font-medium text-[#fafafa] hover:bg-white/[0.03]">
    ¿Qué necesito para empezar? <ChevronDown className="size-5 text-[#a1a1aa] transition-transform data-[open]:rotate-180" />
  </button>
  <div className="px-6 pb-5 text-[14px] leading-relaxed text-[#a1a1aa]">…</div>
</div>

testimonial-card website

bg surface-2 #101012 · border 1px rim · radius lg 12px · padding 32px. stars: 5× star, warn #facc15, ~16px. quote: section-h3-ish 20/500 ink, margin-top 16px. author: small 14/400 ink-muted, margin-top 16px. States: default (static; optional very subtle hover border brighten in a carousel).

<figure className="rounded-[12px] border border-white/[0.06] bg-[#101012] p-8">
  <div className="flex gap-0.5 text-[#facc15]">{Array.from({length:5}).map((_,i)=><Star key={i} className="size-4 fill-current"/>)}</div>
  <blockquote className="mt-4 text-[20px] font-medium text-[#fafafa]">…</blockquote>
  <figcaption className="mt-4 text-[14px] text-[#a1a1aa]">— Nombre Apellido</figcaption>
</figure>

sticky-cta-banner website

bg surface-2 #101012 · border 1px rim · radius xl 16px · padding 24px 32px · flex (column on mobile, row on desktop) justify-between items-center gap 16px. text: title section-h3 24/600 ink + description small ink-muted. actions: a ghost + a primary/primary-lg blue button. States: default (static block above the footer).

<div className="flex flex-col items-start justify-between gap-4 rounded-[16px] border border-white/[0.06] bg-[#101012] p-6 lg:flex-row lg:items-center lg:p-8">
  <div><h3 className="text-[24px] font-semibold text-[#fafafa]">¿Listo para empezar?</h3><p className="mt-1 text-[14px] text-[#a1a1aa]">…</p></div>
  <div className="flex gap-3">
    <button className="rounded-md border border-white/15 px-5 py-2.5 text-[14px] font-medium text-[#fafafa] hover:bg-white/5">Saber más</button>
    <button className="rounded-md bg-[#2563eb] px-7 py-3 text-[16px] font-semibold text-white hover:bg-[#1d4ed8]">Reservar llamada</button>
  </div>
</div>

lead-capture-modal website

Persistent (non-blocking) dark popup absolutely positioned over the hero on every marketing page — captures a results-data email lead. Not a true modal (no scrim, page is usable). Card: width 320px · bg surface-2 #101012 · border 1px rim (8% white) · radius lg 12px · padding 24px · shadow 0 24px 64px rgba(0,0,0,.6) · text-center. close: top-right X 16px ink-faint. title: 16/500 centered ink. preview: an inline mini dashboard-chart card (dark) as a teaser. field+cta: email input + full-width primary blue "Solicitar" / "Solicítalos ya" button (8px radius). States: shown (fades in + slides down ~10px, 320ms emphasized, ~1–2s after load); dismissed (fades out; remembers dismissal so it doesn't re-nag).

// see `modal` codeAnchor — same card, but rendered absolutely over the hero with no scrim and a dismissable state
<div className="absolute right-8 bottom-8 z-40 w-80 rounded-[12px] border border-white/8 bg-[#101012] p-6 text-center shadow-[0_24px_64px_rgba(0,0,0,0.6)]">…</div>

Composition recipes

Five full-page layouts as data. The "Account overview" recipe is also rendered as a miniature-but-real assembled dashboard — the centerpiece showing what the system looks like put together.

Data viz

Library: Recharts (SVG, themeable) — or visx for more control. Whatever it is, it must render flat (no default drop-shadows, no default gridline soup) and theme to the tokens. Charts live inside a widget-container — the card chrome (rim, header, period pill) is not the chart library's job. One series → brand blue; multiple → the chartSeries.order rotation (data colors, never reused as UI chrome). Minimal axes: no axis lines, no tick lines, ticks in axis-tick type (11px ink-muted). Hide an axis entirely on small charts. Gridlines: none, or horizontal-only at rgba(255,255,255,0.04). Never vertical gridlines. No data dots at rest; active dot on hover only.

Voice & copy

Plain, confident, low-jargon. The source is Spanish; copy is short, direct, slightly formal-friendly ("Inicia sesión", "Reservar llamada"). No exclamation marks, no hype words. Numbers and outcomes do the talking.

Anti-patterns

The do-not list. Violating any of these breaks the system's identity even if individual screens "look fine".

Re-skin contract

This system re-skins by swapping exactly two things: the brand accent and the display (wordmark) font. Everything structural — the cool-near-black surface ramp, radii, motion, rims, the chart-series rotation — stays put. After swapping, re-check the contrast pairs below.

Stack mapping

Translations for the three target stacks so you skip a translation pass.

@theme {
  --color-page: #020617;            /* slate-950 */
  --color-page-marketing: #09090b;  /* zinc-950 */
  --color-surface: #18181b;         /* zinc-900 */
  --color-surface-2: #101012;
  --color-surface-3: #131313;
  --color-surface-hover: #27272a;   /* zinc-800 */
  --color-surface-overlay: rgba(255,255,255,0.05);
  --color-rim: rgba(255,255,255,0.06);
  --color-rim-hover: rgba(255,255,255,0.10);
  --color-rim-strong: rgba(255,255,255,0.20);
  --color-divider: #1f2937;
  --color-divider-soft: rgba(255,255,255,0.05);
  --color-ink: #f9fafb;             /* gray-50 */
  --color-ink-2: #e4e4e7;
  --color-ink-muted: #a1a1aa;
  --color-ink-faint: #71717a;
  --color-ink-disabled: #52525b;
  --color-brand: #2563eb;           /* blue-600 */
  --color-brand-hover: #1d4ed8;
  --color-brand-pressed: #1e40af;
  --color-brand-soft: rgba(37,99,235,0.18);
  --color-link: #3b82f6;
  --color-ok: #22c55e;
  --color-warn: #facc15;
  --color-danger: #ef4444;
  --color-info: #3b82f6;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-widget: 12px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-sans-marketing: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Press Start 2P', 'VT323', ui-monospace, monospace;
  --ease-standard: cubic-bezier(0.4,0,0.2,1);
  --ease-emphasized: cubic-bezier(0.2,0,0,1);
  --duration-quick: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --shadow-modal: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-rim: inset 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-blue-glow: 0 0 32px rgba(37,99,235,0.35);
}

static let page = Color(red: 0.008, green: 0.024, blue: 0.090)        // #020617
static let pageMarketing = Color(red: 0.035, green: 0.035, blue: 0.043) // #09090b
static let surface = Color(red: 0.094, green: 0.094, blue: 0.106)     // #18181b
static let surfaceHover = Color(red: 0.153, green: 0.153, blue: 0.165) // #27272a
static let divider = Color(red: 0.122, green: 0.161, blue: 0.216)     // #1f2937
static let ink = Color(red: 0.976, green: 0.980, blue: 0.984)         // #f9fafb
static let ink2 = Color(red: 0.894, green: 0.894, blue: 0.906)        // #e4e4e7
static let inkMuted = Color(red: 0.631, green: 0.631, blue: 0.667)    // #a1a1aa
static let inkFaint = Color(red: 0.443, green: 0.443, blue: 0.478)    // #71717a
static let brand = Color(red: 0.145, green: 0.388, blue: 0.922)       // #2563eb
static let brandHover = Color(red: 0.114, green: 0.306, blue: 0.847)  // #1d4ed8
static let link = Color(red: 0.231, green: 0.510, blue: 0.965)        // #3b82f6
static let ok = Color(red: 0.133, green: 0.773, blue: 0.369)          // #22c55e
static let warn = Color(red: 0.980, green: 0.800, blue: 0.082)        // #facc15
static let danger = Color(red: 0.937, green: 0.267, blue: 0.267)      // #ef4444

// Body / UI: Font.system(.body). widget-title → .system(size: 17, weight: .semibold).
// metric-value → .system(size: 26, weight: .bold).monospacedDigit(). table-cell → .system(size: 14). axis-tick / caption → .system(size: 11).
// Wordmark: a bundled pixel font (Press Start 2P / VT323) at ~20pt with wide tracking — wordmark only.
extension View { func rim(_ r: CGFloat = 12) -> some View { self.overlay(RoundedRectangle(cornerRadius: r).strokeBorder(Color.white.opacity(0.06))) } }
// card helper: surface bg + .cornerRadius(12) + .rim(12) — no .shadow().

Tailwind reference

How to consume the exported tailwind block from the JSON. There are two scoped configs — app (dashboard portal, the top-level tailwind block) and website (marketing). Both share the brand + status + rim tokens; they differ on the page color (slate-950 vs zinc-950) and the body font (ui-sans-serif vs Inter). Drop the theme.extend values into your Tailwind config (or the @theme vars from Stack mapping above for v4), then build components from the componentRecipes map rather than reinventing class strings.