Agentdeck Design System

Agentdeck's surface is split into two moods. The marketing site is a bold, unapologetically monospace experience over a warm off-white palette. The native macOS product is a three-panel dark workspace that manages parallel AI coding agents. Green is the only bright color allowed in either surface — it signals ready-to-merge state on a pill and a solid Merge button.

Source: · Platform: Next.js website + SwiftUI macOS app · Theme: warm off-white / warm dark

Design Principles

Monospace as identity. Marketing and app both use system monospace (SF Mono / Menlo) for body, headings, buttons, everything. The only exception is the pixel-mono hero wordmark.

Warm, not neutral. Every grey leans brown. Backgrounds: #fafaf9, #f8f7f6, #f0edea. Text: #2c2826, #795f5d, #8e8885. Dark surfaces: #141110, #1a1614, #211e1c.

Green = ready. #00c758 is reserved for success, merge, and version-bump pills. Red #fb2c36 is only used for diff-removes and error pills. Everything else stays in the warm-grey family.

Key Tokens

Colors

The system is built around a warm off-white palette for the marketing site and a warm-charcoal palette for the app. Both share the same success green and error red.

Website — Core

Website — Text

App — Surfaces

App — Text

Semantic (shared)

App — Status Dots

Typography

System monospace, everywhere. No proportional sans. The hero wordmark is a custom pixel-grid graphic — not a font — that mimics chunky monospace blocks.

Font Families

Font Weights

Website Scale

App Scale (compact)

Spacing

4px base unit. Tailwind's default 0.25rem spacing grid. Most interior padding is in the 8-24px range; sections on the marketing site breathe at 96px vertical on desktop, 48px on mobile.

Layout Dimensions

Borders & Shadows

Hairline 1px borders throughout, in warm neutrals (light mode) or warm charcoals (app). Radii are small and restrained: 2-12px. Shadows are barely-there on the marketing site and heavy on the app window.

Radius

Shadows (website)

Shadows (app)

Website — Announcement Bar

Thin black bar above the primary header. Single line of centered mono text, usually a news or launch update.

Website — Header & Nav

65px high, 1px bottom border in #eae8e6. Left: pixel-mono logo icon. Right: mono links with a single solid primary button that carries an inline kbd chip.

Website — Buttons

The primary button is near-black on white with a 6px radius. A "strong" variant bumps the weight to 700 and swaps padding for a more vertical shape. Secondary is the same shape in a white fill with a hairline border. All buttons are monospace.

Variants

Specs

Website — Inputs

Text inputs use a 6px radius, 1px warm border, and a soft focus ring in the foreground color.

Website — Cards & Pills

Plain cards are white with a hairline border. The distinctive "tip" card carries a warm cream background (#f8f7f6) with a slightly warmer border (#f3ece7). Pills are always fully rounded.

Tip Card

Pills

Website — Hero Pattern

Pixel-mono wordmark floats centered above a 20px/700 H1. Below that, a muted body paragraph, then two buttons side by side: primary solid + secondary outline. A ghost "See what's new" link with an arrow sits above the wordmark.

Website — Footer

Simple column list of links in muted text. No accent colors. Column labels are primary text; link hover brings text back to primary.

App — Window Shell

Rounded 10px window. Standard macOS traffic-lights top-left. Single-line title bar in the muted text color. A heavy drop shadow lifts the window off the desktop.

App — Left Sidebar

232px wide. Grouped by top-level section (workspace / personal). Each section header is a muted-brown UPPER caption. The "+ New workspace" action is inline below the header, in the body text color.

App — Workspace Row

The signature component of the app. A single row communicates: live agent state (dot color), name (branch or task), sub-status phrase, and the delta size of its pending changes. The active row adds a 2px left border in the body text color and lifts its background to the row tone.

App — Tabs & Breadcrumb

Active review sessions live as tabs under a branch breadcrumb. Active tab gets a 2px bottom border in the primary text color. The breadcrumb uses slash separators between segments and pushes status pill + Merge button to the right.

App — Chat Surface

User messages are bubbles with a slightly warmer red-leaning charcoal background and a hairline border; assistant output is unboxed over the panel tone. Inline file mentions (@path/to/file.tsx) are rendered in warm-tan on a soft tint.

App — File Diff Rows

28px compact rows. Directory prefix in the muted-brown, filename in body color, add/remove counts right-aligned in green/red. Hovering lightens the row 4%.

App — Buttons, Pills & Toggles

The only saturated control in the app. Merge is the solid success button; the matching status pill uses the same green at 20% alpha.

Specs

App — Status Dots

A colored 8px dot communicates the live state of every workspace. The working dot pulses opacity 1.2s infinite; others are solid.

App — Code Block

Deep black-coffee background under the panel surface. Line numbers in border-muted, code in primary text. Added lines tint at 8% success green; removed lines at 8% error red.

App — PR Status Bar

Rail at the top of the right panel. Its background color shifts with workflow state — dusty-pink when there are uncommitted changes, saturated-green when the PR is ready to merge. The phrase text inside uses the sans family; the PR number pill and tab strip below it use monospace.

App — Checks & Git Status

Beneath the PR bar, two stacked sections. Git status surfaces the count of uncommitted / behind-main commits with inline actions. The checks list shows CI state per check with a circular indicator.

App — Model Picker

Dropdown anchored to the model chip under the chat input. Rows are sans-serif (human names), keyboard numbers on the right give a quick-pick. NEW badge uses warm-tan text on a warm-tan tint.

App — Terminal Preset Modal

Opened when creating a new terminal tab. Each row pairs a bold sans-serif agent name with the monospace command it auto-runs. The active preset takes the warm pink-brown tint + warm-tan border.

App — MCP Status Dialog

Each MCP server is a full-width pill with a colored status icon on the left, mono UPPERCASE name, and optional muted suffix. The footer row is two sans-serif links separated by flex space.

App — Submit-Prompt Dialog

The general modal pattern. Big sans title, muted sans subtitle, sans field label, sans textarea with a warm-pink focus border, primary button with an inline keyboard hint.

App — Chat Input & Chips

Multi-line textarea with a dashed warm-pink border on focus. Underneath: four chip controls for model, speed, reasoning effort, and mode. Each chip is monospace, pill-rounded with a hairline border, tinted warm pink-brown when active.

App — Persona Picker

Dropdown above the chat input. Each row is bold sans name + muted sans description. The current persona is highlighted with the warm pink-brown tint.

App — Onboarding / Survey Card

Used for first-run preferences and in-app polls. Sans question heading, ranked list of options with a rank number + checkbox, pagination dots, and an arrow submit button.

App — File Tree & Attachments

Collapsible folder tree inside the left sidebar. File rows show a type icon + monospace filename. Hover reveals a sans-serif "Attach to chat" floating button plus inline + and ▼ options.

Tailwind Mapping Reference

This design system ships a tailwind section inside the paired design-system.json. Extend your Tailwind config's theme.extend with the mapping below, then use the component recipes to build screens that match the reference.

Tokens (paste into tailwind.config.js)

theme: {
  extend: {
    colors: {
      deck: {
        bg:        '#ffffff',
        fg:        '#2c2826',
        primary:   '#413030',
        primaryFg: '#f3f2f1',
        muted:     '#fafaf9',
        mutedFg:   '#8e8885',
        border:    '#eae8e6',
        cream:     '#f0edea',
        tipBg:     '#f8f7f6',
        tipBorder: '#f3ece7',
        tipFg:     '#7d5e59',
      },
      app: {
        deep:        '#141110',
        panel:       '#1a1614',
        row:         '#211e1c',
        hover:       '#2a2624',
        active:      '#332e2b',
        chatUser:    '#241916',
        border:      '#2c2826',
        borderMuted: '#3a3533',
        fg:          '#f3f2f1',
        body:        '#a5a09c',
        muted:       '#795f5d',
        accent:      '#a4847f',
      },
      status: {
        success: '#00c758',
        error:   '#fb2c36',
        info:    '#3080ff',
        warning: '#e0a060',
      },
    },
    fontFamily: {
      sans: ['ui-monospace', 'SFMono-Regular', '"SF Mono"', 'Menlo', 'Consolas', 'monospace'],
      mono: ['ui-monospace', 'SFMono-Regular', '"SF Mono"', 'Menlo', 'Consolas', 'monospace'],
    },
    fontSize: {
      xs:   ['11px', { lineHeight: '14px' }],
      '2xs': ['12px', { lineHeight: '16px' }],
      sm:   ['13px', { lineHeight: '18px' }],
      body: ['14px', { lineHeight: '20px' }],
      lg:   ['16px', { lineHeight: '24px' }],
      h1:   ['20px', { lineHeight: '28px', letterSpacing: '-0.025em', fontWeight: '700' }],
    },
    spacing: {
      xxs: '2px', xs: '4px', sm: '8px', md: '12px',
      lg: '16px', xl: '20px', '2xl': '24px', '3xl': '32px',
      '4xl': '48px', '5xl': '64px', '6xl': '96px',
    },
    borderRadius: { xs: '2px', sm: '4px', md: '6px', lg: '8px', xl: '10px', pill: '9999px' },
    boxShadow: {
      card:    '0 1px 2px rgba(44,40,38,0.04)',
      popover: '0 8px 24px rgba(44,40,38,0.08)',
      window:  '0 24px 48px rgba(0,0,0,0.45)',
      focus:   '0 0 0 2px rgba(0,199,88,0.35)',
    },
  },
}

Component Recipes

Marketing site:

siteButtonPrimary:    "inline-flex items-center justify-center gap-2 rounded-md bg-deck-fg text-white font-mono font-medium text-body px-4 py-3 hover:bg-black transition-colors"
siteButtonSecondary:  "inline-flex items-center justify-center gap-2 rounded-md bg-white text-deck-fg border border-deck-border font-mono font-medium text-body px-4 py-3 hover:bg-deck-muted"
siteAnnouncementBar:  "h-9 flex items-center justify-center bg-black text-white font-mono text-body font-medium"
siteCard:             "rounded-lg bg-white border border-deck-border p-2xl"
siteTipCard:          "rounded-lg bg-deck-tipBg border border-deck-tipBorder p-lg text-deck-tipFg font-mono text-body"
siteInput:            "w-full rounded-md border border-deck-border bg-white px-md py-2.5 font-mono text-body text-deck-fg placeholder:text-deck-mutedFg focus:outline-none focus:ring-2 focus:ring-deck-fg/10"
sitePillSuccess:      "inline-flex items-center rounded-pill bg-status-success/10 text-status-success font-mono text-xs font-medium px-2 py-0.5"

App / portal:

appWindow:             "rounded-xl bg-app-deep border border-app-border shadow-window overflow-hidden"
appSidebar:            "w-[232px] bg-app-deep border-r border-app-border py-2 overflow-y-auto"
appWorkspaceRow:       "flex items-start gap-sm px-md py-2 min-h-[52px] border-l-2 border-transparent hover:bg-white/[0.04] data-[active=true]:bg-app-row data-[active=true]:border-l-app-body cursor-pointer"
appStatusDot:          "w-2 h-2 rounded-full mt-1.5 shrink-0"
appRowTitle:           "font-mono text-sm font-medium text-app-fg truncate"
appRowSubtitle:        "font-mono text-xs text-app-muted mt-0.5 truncate"
appDiffAdd:            "font-mono text-xs font-medium text-status-success"
appDiffRemove:         "font-mono text-xs font-medium text-status-error"
appTabBar:             "h-10 flex items-center border-b border-app-border bg-app-deep"
appTab:                "h-full px-3.5 flex items-center font-mono text-xs font-medium text-app-muted hover:text-app-fg border-b-2 border-transparent data-[active=true]:text-app-fg data-[active=true]:border-app-fg"
appChatUser:           "rounded-md bg-app-chatUser border border-app-borderMuted px-3 py-2.5 font-mono text-sm text-app-fg max-w-[640px]"
appChatAssistant:      "rounded-md bg-app-panel px-3 py-2.5 font-mono text-sm text-app-body"
appMergeButton:        "inline-flex items-center gap-1.5 rounded-sm bg-status-success text-white font-mono text-2xs font-semibold px-3 py-1 hover:brightness-110 transition"
appStatusPillSuccess:  "inline-flex items-center rounded-sm bg-status-success/20 text-status-success font-mono text-xs font-semibold px-2 py-0.5"
appFileDiffRow:        "flex items-center justify-between gap-md px-md h-7 hover:bg-white/[0.04] font-mono text-2xs text-app-body cursor-pointer"
appCodeBlock:          "rounded-md bg-[#0e0b0a] border border-app-border p-md font-mono text-2xs leading-[18px] text-app-fg"

The exported JSON also contains the full list of recipes under tailwind.componentRecipes. Treat them as the canonical starting point when implementing new screens.