Retool DESIGN.md

Design System Inspiration of Retool

Overview

Visual Theme & Atmosphere

Retool is the platform for building internal tools fast — the admin panels, dashboards, and operational apps that companies used to hand-code for months. Its visual identity is unapologetically built for developers, and that audience defines everything: the brand site reads like a well-organized IDE, not a consumer landing page. The dominant atmosphere is dark, structural, and instrumented — near-black canvases (#0E0E0E–#1A1A1A), crisp 1px hairline grids, and a single warm accent that punches through the monochrome like a syntax-highlight keyword.

The brand's emotional register is competence, not delight. Where a consumer fintech app leans on rounded optimism, Retool leans on the aesthetic of tooling: tight grids, drag-handle affordances, table-dense layouts, monospaced data, and the visual language of a configuration surface. The marketing site itself frequently renders mock app-builder canvases — component trays on the left, a grid in the center, an inspector panel on the right — because the product is the brand. You are looking at software that builds software.

The palette is a study in restraint: a deep neutral foundation (the "Cod Gray" near-black and a soft "Green White" #E9EBDF off-white for light surfaces) punctuated by a small set of editorial accents — a warm Burnt Sienna orange, a muted Smalt Blue teal, and a periwinkle Cornflower. These are not loud SaaS gradients; they read like a carefully chosen terminal theme. Typography is a clean grotesque sans for UI and prose, paired with a true monospace for code, table data, and anything that smells like a value rather than a label.

Key Characteristics:

• Dark-first developer aesthetic — near-black canvas (#1A1A1A), hairline #2E2E2E grids
• Warm Burnt Sienna accent (#E0613A) as the primary highlight against deep neutrals
• "Green White" off-white (#E9EBDF) as the signature light surface — warmer than pure white
• Grotesque sans for UI/prose + monospace for code and tabular data
• Component-tray / inspector-panel layout language borrowed directly from the product
• Tight 1px borders and low-radius geometry — structural, not soft
• Restrained editorial accent set (orange, teal, periwinkle) — terminal-theme energy, not SaaS gradients

Primary tasks

• Build an internal admin panel instead of hand-coding it
• Wire a database and an API into a table-and-form screen
• Run a query and read the rows it returns
• Check governance, access control, and audit logs before adopting it

Brand Narrative

Retool was founded in 2017 by David Hsu (with co-founder Snir Kodesh) on a sharp observation: every company builds the same internal tools — admin panels, customer-support dashboards, inventory managers, ops consoles — and every company wastes enormous engineering time hand-coding them from scratch. These tools are essential but rarely differentiating; they don't deserve months of bespoke React and CRUD plumbing. Retool's thesis was to make that work assembly instead of construction: a library of pre-built components (tables, forms, charts, buttons) that snap onto a grid and wire directly to any database or API.

The company went through Y Combinator (2017) and grew into one of the defining developer-productivity platforms, reaching a multi-billion-dollar valuation with customers spanning startups to large enterprises. The product expanded from internal-app building into workflows, a database, and AI-assisted app generation — but the core remains: drag components onto a canvas, connect a data source, ship.

The design system flows directly from this identity. Retool looks like the tool it is. The dark, gridded, panel-bounded aesthetic isn't a style choice layered on top — it's the literal interface of the app builder, promoted to brand language. The component-tray-and-inspector layout you see on the marketing site is the product. The monospace-for-values convention is how the product displays data. The restraint — one accent, low radii, drawn edges — communicates engineering seriousness: this is infrastructure you'll trust with production operations.

What Retool refuses: the bubbly gradient-heavy aesthetic of consumer-facing SaaS, the illustration-led "fun" of no-code toys (Retool is low-code for developers, a crucial distinction), and any visual that implies the tool is a black box. The grid is visible because builders want to see the structure. The brand sells competence and control to people who could build it themselves — and choose Retool because it's faster.

Principles

1. The product is the brand. Marketing surfaces render real builder UI — component trays, grids, inspectors. The aesthetic is downstream of the tool, never decoration bolted on.
2. Show the grid. Structure is visible — hairline borders, aligned columns, snap guides. Builders trust what they can see the bones of. Order over ornament.
3. One accent, spent carefully. Burnt Sienna marks the single most important action or highlight. Everywhere else is neutral. Spread the accent and it stops meaning "here."
4. Labels in sans, values in mono. The typographic split between describing and being-data is load-bearing. A number in monospace reads as a real value; in sans it reads as decoration.
5. Edges are drawn, not blurred. On dark, elevation comes from 1px borders and background-value steps, not shadow. The IDE logic: panels are bounded by lines.
6. Density is a feature, not a flaw. Tool surfaces pack information. A developer wants more on screen, aligned and scannable — not generous padding that hides the data.
7. Plainspoken over hype. Copy names the capability. No magic, no exclamation points. The audience can smell marketing fluff and discounts you for it.
8. Low radius, structural geometry. 6px controls, 8px cards. Rounded-but-not-soft. The shape language says "engineered," not "friendly."

Personas

Personas below are fictional archetypes informed by Retool's publicly described developer-platform audience, not individual people.

Marcus, 31, San Francisco. Full-stack engineer at a 200-person fintech. Tasked with building an internal ops dashboard for the support team — refund approvals, account lookups, transaction reversals. Could build it in React, but it would eat two sprints he doesn't have. Reaches for Retool to wire Postgres + Stripe API to a table-and-form UI in an afternoon. Values: speed, real data binding, the ability to drop into raw JS when a component's defaults don't cut it. Lives in the query editor.

Priya, 38, Austin. Engineering manager / platform lead. Owns the decision of whether the org adopts Retool. Cares about governance — SSO, role-based access, audit logs, self-hosting for compliance. Wants her team to stop one-off-coding internal tools and standardize on a platform. Reads the security page before the features page. Will champion Retool internally only if it survives a SOC 2 conversation.

Dev, 26, remote. Operations engineer at a logistics startup, more scripts-and-SQL than frontend. Not a React person, but very comfortable with data and APIs. Retool lets him build the warehouse-ops tool himself instead of waiting in the eng backlog. Values: not having to learn a frontend framework, the visual grid that makes layout obvious, monospace tables that feel like the SQL console he already lives in.

Colors

Primary

• Cod Gray (#1A1A1A): The signature dark surface — page canvas, app builder background, nav bars. Near-black with a neutral undertone.
• Ink Black (#0E0E0E): Deepest surface — code blocks, the editor void, footer.
• Green White (#E9EBDF): Retool's signature off-white — light-mode surfaces, marketing sections, cards. Warmer and softer than #ffffff, with a faint green undertone.
• Pure White (#FFFFFF): Maximum-contrast text on dark, true-white inputs inside light surfaces.

Brand Accent

• Burnt Sienna (#E0613A): The primary warm accent — CTA emphasis, key highlights, hover glows, syntax-keyword energy. Retool's most recognizable color note.
• Burnt Sienna Hover (#C94F2C): Pressed/hover state for the orange accent.
• Cornflower (#6E8BE0): Periwinkle secondary accent — links, informational highlights, illustration detail.
• Smalt Blue (#4E7C82): Muted teal — tertiary accent, data categories, secondary illustration tone.

Action / Interactive

• Action Primary (#3C3C3C): Default dark UI button fill on light surfaces — neutral, developer-grade. The product favors neutral primaries with accent reserved for emphasis.
• Action on Dark (#FFFFFF): White-fill buttons against the dark canvas.
• Accent CTA (#E0613A): When a button needs to pull — sign-up, "Start for free."

Semantic

• Success Green (#2FA86A): Successful query, deploy, passing state.
• Error Red (#E5484D): Failed query, validation error, destructive action.
• Warning Amber (#E0A23A): Unsaved changes, deprecation notices, attention states.
• Info Blue (#6E8BE0): Informational banners (reuses Cornflower).

Neutral Scale (Dark theme)

• Neutral 950 (#0E0E0E): Deepest void — editor, code.
• Neutral 900 (#1A1A1A): Primary dark canvas.
• Neutral 800 (#232323): Raised panel — inspector, side trays.
• Neutral 700 (#2E2E2E): Default border / hairline grid on dark.
• Neutral 600 (#3C3C3C): Strong border, neutral button fill.
• Neutral 500 (#6B6B6B): Disabled text, muted icons on dark.
• Neutral 400 (#8A8A8A): Secondary/caption text on dark.
• Neutral 300 (#B4B4B4): Body text on dark surfaces.
• Neutral 200 (#D6D6D6): Strong body text on dark.

Neutral Scale (Light theme)

• Green White (#E9EBDF): Light page surface.
• Light 100 (#F4F5EF): Lightest tint — subtle section banding.
• Light 200 (#DCDED2): Card fill on light, disabled surface.
• Light Border (#CACBBF): Default border / divider on light.
• Text Strong (#1A1A1A): Headings on light surfaces.
• Text Body (#3C3C3C): Body copy on light.
• Text Muted (#6B6B6B): Captions, metadata on light.

Surface & Borders

• Border on Dark: #2E2E2E (Neutral 700). Hairline grids, panel separators, table cell lines.
• Border on Light: #CACBBF. Card edges, input borders, dividers.
• Overlay Scrim: rgba(14,14,14,0.64). Modal/dialog backdrop over the dark canvas.
• Accent Glow: rgba(224,97,58,0.20). Subtle focus halo around accented elements.

Typography

Font Family

• UI / Prose: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif — a neutral grotesque with excellent legibility at small sizes and tabular figure support. Retool's product and marketing favor a clean grotesque of this class.
• Monospace: "IBM Plex Mono", "JetBrains Mono", "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace — used for code blocks, query editors, table values, environment keys, and any literal value.
• Display (marketing): The same grotesque at heavy weights (600–700) with tightened tracking for hero headlines.

Hierarchy

Principles

• Sans for labels, mono for values. The cleanest tell of Retool's type system: anything that is a value (an ID, a query result, an env var, a number in a table) renders in monospace; anything that describes renders in the grotesque. This split mirrors how developers read code.
• Tabular numerals everywhere data lives. Tables, metrics, and counters use tabular figures so columns align and values don't jitter on update.
• Tight tracking on display. Hero and section headlines pull letter-spacing to -0.02em for a dense, engineered feel. Body stays at normal tracking.
• Three working weights. 400 (body), 500 (subtle emphasis / nav), 600 (headings). 700 reserved for marketing display only.
• Uppercase eyebrows. Small 11px uppercase labels with 0.06em tracking mark section starts and table column headers — a developer-doc convention.

Layout

Spacing System

• Base unit: 4px (developer-grid precision)
• Common values: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
• UI density: builder panels use tight 8–12px gaps; marketing uses generous 64–96px section rhythm
• Horizontal page padding: 24px mobile, 48–64px desktop, max-width container 1200px

Grid & Container

• Marketing: 12-column grid, 1200px max content width, 24px gutters
• Product builder: 3-zone layout — component tray (left ~240px), canvas (fluid 12-col app grid), inspector (right ~300px)
• The app-grid metaphor (snap-to-grid component placement) is the visual DNA reused in marketing mockups

Whitespace Philosophy

• Dense where it's a tool, airy where it's a pitch. Product surfaces pack information; marketing surfaces breathe. The brand holds both registers deliberately.
• The grid is visible. Unlike consumer apps that hide structure, Retool shows its grid — hairline borders, snap guides, and aligned columns are part of the aesthetic, not noise.
• Alignment over decoration. Order comes from rigorous left-alignment and column rhythm, not from ornament.

Border Radius Scale

• Sharp (4px): Badges, tags, table corners
• Standard (6px): Buttons, inputs, ghost controls
• Comfortable (8px): Cards, panels, toasts
• Large (10px): Modals, dialogs
• Pill (9999px): Toggles, status pills

Responsive Behavior

Breakpoints

Touch / Click Targets

• Buttons: 36px standard, 40px accent CTA, 32px ghost/icon
• Table rows: 36px height (dense), 44px on touch devices
• Min interactive target on touch: 44×44px

Collapsing Strategy

• Builder's 3-zone layout collapses to tabbed panels on tablet/mobile (the product is desktop-first by nature)
• Marketing hero mockups scale down and crop the inspector panel first
• Nav: full horizontal bar → hamburger drawer below 640px
• Tables become horizontally scrollable with a sticky first column rather than reflowing

Image / Asset Behavior

• Product screenshots and app-builder mockups are the hero imagery — rendered on dark, framed with a 1px #2E2E2E border
• Integration/resource logos: 24–32px monochrome or full-color on neutral tiles
• Code blocks: full-width within content column, never reflowed

Elevation & Depth

Shadow Philosophy: On dark surfaces, Retool defines elevation primarily through 1px borders and background-value steps (#1A1A1A → #232323 → #2E2E2E), not shadow — shadows are nearly invisible on near-black anyway. Shadows return on light surfaces and for true overlays. The aesthetic is structural: edges are drawn, not blurred. This is the visual logic of an IDE, where panels are bounded by lines.

Blur Effects

• Command palette and floating menus use a subtle backdrop-filter: blur(8px) over a rgba(14,14,14,0.64) scrim
• Sticky nav applies a faint blur on scroll over the dark canvas

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.subtle: 0px 1px 2px rgba(14,14,14,0.06)
• shadow.standard: 0px 4px 12px rgba(14,14,14,0.24)
• shadow.elevated: 0px 8px 24px rgba(14,14,14,0.40)
• shadow.modal: 0px 16px 48px rgba(14,14,14,0.50)

Motion & Easing

Durations (named):

Easings:

Signature motions.

1. Panel slide-in. Inspector and side panels enter from the edge with motion-standard / ease-enter — a single decisive slide, no bounce. Tooling motion is functional, never playful; overshoot would undermine the engineering tone.
2. Tab indicator. The 2px #E0613A underline slides horizontally between tabs over motion-fast / ease-standard, tracking the active panel. Crisp and immediate.
3. Query-result paint. When a query resolves, table rows fade-and-rise 8px into place over motion-data / ease-enter, staggered subtly so a result set feels like it lands rather than flickers. Values never cross-fade between states.
4. Shimmer skeleton. Loading skeletons use a linear 1.2s left-to-right sweep with an 8% white highlight over #232323 blocks. The only continuously-animated element on the canvas.
5. Reduce motion. Under prefers-reduced-motion: reduce, all motion-* tokens collapse to motion-instant; slides become instant swaps, shimmer becomes a static #232323 block. The tool stays fully usable.

Components

Buttons

Retool buttons are low-radius, structural, and lean neutral by default — accent color is spent sparingly on the single most important action per view.

Primary (neutral / dark fill)

• Background: #3C3C3C
• Text: #FFFFFF
• Border: none
• Radius: 6px
• Padding: 0 16px
• Height: 36px
• Font: 14px / 500 / Inter
• Hover: #2E2E2E
• Use: Default primary action on light surfaces (Save, Run, Create)

Accent (Burnt Sienna)

• Background: #E0613A
• Text: #FFFFFF
• Border: none
• Radius: 6px
• Padding: 0 18px
• Height: 40px
• Font: 15px / 600 / Inter
• Hover: #C94F2C
• Use: Top-of-funnel marketing CTA ("Start for free", "Book a demo")

Secondary (outline)

• Background: transparent
• Text: #3C3C3C (light) / #D6D6D6 (dark)
• Border: 1px solid #CACBBF (light) / #3C3C3C (dark)
• Radius: 6px
• Padding: 0 16px
• Height: 36px
• Font: 14px / 500 / Inter
• Hover: bg #F4F5EF (light) / #232323 (dark)
• Use: Secondary action paired beside a primary

Ghost / Text

• Background: transparent
• Text: #3C3C3C (light) / #B4B4B4 (dark)
• Border: none
• Radius: 6px
• Padding: 0 10px
• Height: 32px
• Font: 14px / 500 / Inter
• Hover: bg rgba(0,0,0,0.04) / rgba(255,255,255,0.06)
• Use: Toolbar actions, inline controls, tertiary links

Destructive

• Background: #E5484D
• Text: #FFFFFF
• Border: none
• Radius: 6px
• Padding: 0 16px
• Height: 36px
• Font: 14px / 500 / Inter
• Hover: #CE3A3F
• Use: Delete query, remove resource, destructive confirmation

Icon Button

• Background: transparent → rgba(255,255,255,0.06) on hover (dark)
• Size: 32×32px
• Radius: 6px
• Icon: 16px, #B4B4B4 → #FFFFFF on hover
• Use: Toolbar / panel-header controls in the builder

Disabled across all variants: 40% opacity, no pointer events. Focus: 2px rgba(224,97,58,0.20) ring + 1px #E0613A outline.

Inputs

Text Field (light)

• Background: #FFFFFF
• Text: #1A1A1A
• Border: 1px solid #CACBBF
• Radius: 6px
• Padding: 8px 12px
• Height: 36px
• Font: 14px / 400 / Inter
• Placeholder: #8A8A8A
• Focus: border #E0613A + 2px rgba(224,97,58,0.20) ring
• Use: Standard form input on light surfaces

Text Field (dark)

• Background: #1A1A1A
• Text: #FFFFFF
• Border: 1px solid #2E2E2E
• Radius: 6px
• Padding: 8px 12px
• Height: 36px
• Font: 14px / 400 / Inter
• Placeholder: #6B6B6B
• Focus: border #E0613A
• Use: Inspector panels, builder forms on the dark canvas

Code / Query Editor

• Background: #0E0E0E
• Text: #D6D6D6
• Border: 1px solid #2E2E2E
• Radius: 6px
• Padding: 12px
• Font: 13px / 400 / IBM Plex Mono
• Syntax: keywords #E0613A, strings #2FA86A, numbers #6E8BE0, comments #6B6B6B
• Use: SQL/JS query editors, transformers, code components

Error State

• Border: 1px solid #E5484D
• Helper text: #E5484D 13px below field
• Use: Validation failure — one actionable sentence

Cards

Standard (light)

• Background: #FFFFFF
• Border: 1px solid #CACBBF
• Radius: 8px
• Padding: 20px
• Shadow: 0px 1px 2px rgba(14,14,14,0.06)
• Use: Marketing feature cards, dashboard tiles

Panel (dark)

• Background: #232323
• Border: 1px solid #2E2E2E
• Radius: 8px
• Padding: 16px
• Shadow: none
• Use: Inspector, component tray, builder side panels

Resource Card

• Background: #1A1A1A
• Border: 1px solid #2E2E2E
• Radius: 8px
• Padding: 16px
• Hover: border #3C3C3C, accent icon tint
• Use: Connected resource / integration tiles in the home grid

Tables

The signature Retool surface. Tables are dense, mono-valued, and grid-lined.

• Header: #232323 bg, #8A8A8A 11px uppercase 0.06em, 1px #2E2E2E bottom border
• Row: #1A1A1A bg, #D6D6D6 13px IBM Plex Mono, 36px row height
• Row hover: #232323
• Selected row: rgba(224,97,58,0.12) bg, 2px #E0613A left border
• Cell border: 1px #2E2E2E (hairline grid)
• Zebra (optional): alternate #1E1E1E

Badges

Status (Success)

• Background: rgba(47,168,106,0.14)
• Text: #2FA86A
• Border: none
• Radius: 4px
• Padding: 2px 8px
• Font: 12px / 600 / Inter
• Use: "Deployed", "Connected", "Passing"

Status (Error)

• Background: rgba(229,72,77,0.14)
• Text: #E5484D
• Radius: 4px · Padding: 2px 8px · Font: 12px / 600
• Use: "Failed", "Disconnected"

Status (Warning)

• Background: rgba(224,162,58,0.14)
• Text: #E0A23A
• Radius: 4px · Padding: 2px 8px · Font: 12px / 600
• Use: "Unsaved", "Deprecated"

Neutral / Tag

• Background: #2E2E2E
• Text: #B4B4B4
• Radius: 4px · Padding: 2px 8px · Font: 12px / 500 IBM Plex Mono
• Use: Environment tags, resource types, version labels

Tabs

• Container border: 1px #2E2E2E bottom
• Tab (inactive): #8A8A8A 14px / 500, 10px 14px padding
• Tab (active): #FFFFFF text + 2px #E0613A bottom indicator
• Hover: #D6D6D6
• Use: Builder panels (Query / State / Logs), settings sections

Toasts

Default

• Background: #232323
• Text: #FFFFFF
• Border: 1px solid #2E2E2E
• Radius: 8px
• Padding: 12px 16px
• Shadow: 0px 8px 24px rgba(14,14,14,0.40)
• Font: 14px / 400 / Inter
• Leading status dot: success #2FA86A, error #E5484D
• Use: "Query ran successfully", "Changes saved"

Dialogs

Modal

• Background: #1A1A1A (dark) / #FFFFFF (light)
• Border: 1px solid #2E2E2E / #CACBBF
• Radius: 10px
• Padding: 24px
• Shadow: 0px 16px 48px rgba(14,14,14,0.50)
• Header: 18px / 600, Body: 14px / 400 #B4B4B4
• Use: Confirmations, resource setup, settings

Toggles

• On: #E0613A · Off: #3C3C3C
• Track: 36×20px, Radius 9999px
• Thumb: #FFFFFF 16px circle, 0px 1px 2px rgba(0,0,0,0.3)
• Use: Feature flags, environment switches, boolean settings

---

Verified: 2026-06-06 Tier 1 sources: https://retool.com (live brand site — dark-first developer aesthetic, Burnt Sienna accent CTAs, app-builder layout language, "Start for free" / "Book a demo" copy), https://docs.retool.com/apps/guides/presentation-styling/themes (theme + typography controls), https://mobbin.com/colors/brand/retool (palette names: Green White #E9EBDF, Cod Gray, Smalt Blue, Burnt Sienna, Cornflower, White). · https://retool.com (live production site) Note: Retool ships no public token catalog; component geometry (radii, heights, spacing) is reconstructed from the live product/marketing UI and standard developer-tool conventions. Hex values for accent/semantic tiers are calibrated to the documented brand palette names.

States

Do's and Don'ts

Do

• Default to the dark canvas (#1A1A1A) for product/tool surfaces; use Green White (#E9EBDF) for marketing/light
• Spend Burnt Sienna (#E0613A) sparingly — one accented action per view
• Render values (IDs, results, env vars, table data) in IBM Plex Mono; render labels in Inter
• Use tabular numerals in every table and metric
• Define edges with 1px hairline borders (#2E2E2E dark / #CACBBF light)
• Keep radii low — 6px buttons/inputs, 8px cards, 4px badges
• Use uppercase 11px eyebrows with 0.06em tracking for section starts and column heads

Don't

• Don't use Burnt Sienna as a fill for neutral/default buttons — neutral #3C3C3C is the default primary
• Don't use pure #FFFFFF as the light page surface — Green White (#E9EBDF) is the brand's warm off-white
• Don't apply heavy gradients or glow — this is a tooling aesthetic, not a consumer SaaS one
• Don't round corners past 10px — geometry stays structural
• Don't set values (numbers, IDs) in the sans face — mono signals "this is data"
• Don't rely on shadow for elevation on dark; use background-value steps + borders
• Don't mix proportional and tabular figures in the same table column

Voice & Tone

Retool talks to engineers like a senior colleague — direct, technically precise, allergic to fluff. Copy assumes the reader knows what an API, a query, and a deploy are. It sells leverage, not magic: the promise is "build the thing your team needs in hours instead of months," stated plainly. Marketing leads with verbs (Build, Ship, Connect, Govern) and grounds claims in capability, not adjectives. There is confidence without hype — enterprise-grade trust language ("a platform you can trust", "governance", "security") sits alongside builder energy ("Start for free").

Forbidden moves. No exclamation-point hype, no "magical"/"effortless"/"revolutionary" filler, no cutesy mascot voice, no apology theater ("Oops! Something broke"). Errors name the resource and the next step. The reader is a builder, not a consumer to be delighted.

Agent Prompt Guide

Quick Color Reference

• Dark canvas: Cod Gray (#1A1A1A)
• Deepest surface: Ink Black (#0E0E0E)
• Light surface: Green White (#E9EBDF)
• Raised panel (dark): #232323
• Accent CTA: Burnt Sienna (#E0613A)
• Accent hover: #C94F2C
• Neutral primary button: #3C3C3C
• Border (dark / light): #2E2E2E / #CACBBF
• Body text (dark / light): #B4B4B4 / #3C3C3C
• Muted text: #8A8A8A
• Success / Error / Warning: #2FA86A / #E5484D / #E0A23A
• Secondary accents: Cornflower #6E8BE0, Smalt Blue #4E7C82

Example Component Prompts

• "Create a Retool-style data table: #1A1A1A bg, header #232323 with #8A8A8A 11px uppercase column labels (0.06em tracking), rows 36px, cell values in IBM Plex Mono 13px #D6D6D6, 1px #2E2E2E cell borders, hover row #232323, selected row rgba(224,97,58,0.12) with 2px #E0613A left border, tabular numerals."
• "Build a primary button: #3C3C3C bg, white 14px/500 Inter text, 6px radius, 36px height, 0 16px padding, hover #2E2E2E. Focus ring 2px rgba(224,97,58,0.20)."
• "Build an accent CTA: #E0613A bg, white 15px/600 text, 6px radius, 40px height, hover #C94F2C. Label 'Start for free'."
• "Create a query editor: #0E0E0E bg, 1px #2E2E2E border, 6px radius, IBM Plex Mono 13px #D6D6D6, syntax keywords #E0613A, strings #2FA86A, numbers #6E8BE0, comments #6B6B6B."
• "Design a status badge set: success rgba(47,168,106,0.14) bg / #2FA86A text; error rgba(229,72,77,0.14) / #E5484D; 4px radius, 2px 8px padding, 12px/600 Inter."
• "Build an inspector panel: #232323 bg, 1px #2E2E2E border, 8px radius, 16px padding, dark text fields #1A1A1A with #2E2E2E borders, section eyebrow 11px uppercase #8A8A8A."

Iteration Guide

1. Default surface is dark (#1A1A1A); reserve Green White (#E9EBDF) for marketing/light contexts
2. Accent Burnt Sienna (#E0613A) is for one emphasis per view — neutral #3C3C3C is the default primary
3. Values render in IBM Plex Mono; labels and prose render in Inter
4. Edges are drawn with 1px hairlines, not shadows (on dark)
5. Radii stay low: 6px controls, 8px cards, 4px badges, 10px modals
6. Tabular numerals in all data contexts
7. Uppercase 11px 0.06em eyebrows mark sections and table columns

---

Governance

Known Gaps

• Contrast, button-accent. Text #ffffff on #e0613a measures 3.54:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-destructive. Text #ffffff on #e5484d measures 3.91:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-success. Text #2fa86a on #2fa86a24 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-error. Text #e5484d on #e5484d24 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-warning. Text #e0a23a on #e0a23a24 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.