Design Guide

Terminal Refined

The OperatorStack visual identity. Light mode, terminal DNA, functional readability. Built with Tailwind CSS + shadcn/ui.

Guide Principles Reference To-Dos

Identity

OperatorStack is a validation toolkit for technical founders — people who live in terminals and code editors. The design feels native to that environment without being hostile to non-technical users. It rejects the vibe-coded SaaS aesthetic (purple gradients, floating orbs, sparkle emojis) in favor of restraint, precision, and clarity.

Tailwind Color Mapping

All design tokens map directly to Tailwind's built-in palette — no custom theme extension required.

Primary — green-500#22c55e

Primary hover — green-600

Secondary — slate-500#64748b

Negative — red-500

Text primary — gray-900

Text secondary — gray-500

Border — gray-200

Surface — gray-50

Active bg — green-50

Badge bg — slate-100

shadcn/ui Components

UI primitives from shadcn-vue. Components live in web/app/components/ui/.

ButtonPrimary (green-500), secondary (outline), destructive (red-500), ghost, small variant

BadgeStatus: Active (green), Pending (outline), New (green outline). Source: slate-100 bg

CardStat cards, widget preview, settings panels. rounded border border-gray-200 bg-white

TableContacts, referral leaderboard, API keys. Monospace emails and dates

InputText inputs, search. font-mono for data values. Green focus ring

SelectTimezone, role dropdowns. Standard shadcn select with green focus

SwitchRequired toggles in form builder. Green-500 when checked

Sonner (toast)Success (green left bar), error (red), info (slate). Prominent sizing, top-right

CommandSearch / command palette. $ search... prompt. Keyboard-first. (not yet installed)

SeparatorSection dividers between dashboard areas. border-gray-200

DialogConfirmation for destructive actions (delete project, revoke API key)

TooltipIcon button labels, truncated text reveals. (not yet installed)

ChartTime series and multi-line charts via Chart.js. Green/slate palette.

Dropdown MenuUser menu, project selector, action menus. Reka UI headless primitive.

LabelForm field labels. Pairs with Input and Select.

CopyButtonStandardized copy-to-clipboard. font-mono text-xs bordered button with auto-reset "Copied" state

WidgetPreviewConsistent bg-gray-50 inner container for widget previews across pages

EmptyStateIcon slot (w-12 h-12 bordered), title, description, optional action

SparklineSVG polyline mini-chart for stat cards. Accepts data, color, width, height props

Core Conventions

Terminal prefixes — > on nav items, $ in search. Signals developer-native without cosplay.

Monospace for data — font-mono for values, codes, emails, dates. font-sans for labels and UI text.

Green = interactive or positive — Buttons, links, active nav, success toast, growth numbers. Nothing decorative.

Slate = informational — Source badges, chart bars, breadcrumbs. The workhorse neutral that frees green for interactive elements.

Sparklines in stat cards — SVG polyline sparklines are canonical. green-500 for uptrend, slate-400 for downtrend.

Charts use Chart.js — Time series and multi-line charts use Chart.js (via shadcn Chart) for interactivity and real data. Colors follow the green/slate palette.

CopyButton component — Standardized CommonCopyButton for all copy-to-clipboard actions. Monospace label, bordered, self-manages copied state and toast.

Table padding density — Standard tables use px-[18px] py-2.5. Compact/analytics tables use px-3 py-1.5. Both are intentional density levels.

Status bar — Ambient system info at page bottom. font-mono text-xs text-gray-400 bg-white border-t.

Light mode only — No dark mode toggle. No dark: variants needed.

Everything on one screen — Dashboard overview fits a single viewport. Detail views exist but the overview is primary.

Keyboard shortcuts (optional) — Arrow keys for table navigation, Escape to close drawers. Command palette (Cmd+K) is aspirational — not yet implemented.

Typography

font-sansInter — all UI labels, body text, headings

font-monoJetBrains Mono — data values, emails, dates, codes, nav prefixes, status bar

text-base (16px)Body text baseline. Nothing below text-xs (12px)

text-2xl font-monoStat card values (1,247 / 89 / 14.2k / 312)

text-xs uppercase tracking-widerSection labels, stat card labels, table headers

Anti-Patterns

No purple gradients

No floating gradient orbs

No sparkle emojis in UI

No dark mode toggle

No glow box-shadows

No gradient text fills

No decorative animations

No template section ordering

Responsive Layout

The dashboard uses a fixed 200px sidebar with centered content. Grids collapse at Tailwind's lg: (1024px) and md: (768px) breakpoints.

Content centering — max-w-[1200px] mx-auto w-full. Content stays centered on wide screens.

Stat cards — grid-cols-2 lg:grid-cols-4. 2-column on small screens, 4-column at 1024px+.

Sidebar layouts — Chart+Widget, Widget Config, Settings use grid-cols-1 lg:grid-cols-[1fr_Npx]. Stack vertically by default.

Equal-width pairs — Form builder, settings, empty states use grid-cols-1 lg:grid-cols-2.

Tables — Always wrapped in overflow-x-auto for horizontal scroll on narrow viewports.

Horizontal padding — px-6 lg:px-10. Tighter on small screens, more breathing room on large.

Principles →