Trace

Overview

Trace is an AI orchestration platform designed for technical teams who demand precision, clarity, and control over operational workflows. The design system embodies 'Architectural Minimalism'—a philosophy that strips away decorative elements to expose the essential structure beneath, much like a blueprint or technical schematic. The interface uses a high-contrast palette of warm beige (#f1f1e6) and deep charcoal (#2b2b2b) as the foundation, with strategic accent colors (burnt orange #f6543e, rust #e05e0a) deployed only on critical interactive elements and status indicators. This restraint creates a visual hierarchy that feels authoritative and trustworthy, evoking the precision of engineering diagrams rather than the playfulness of consumer apps. The emotional response is one of competence and control: users feel they are operating sophisticated machinery, not playing with a toy.

The brand voice is direct, technical, and unadorned. Trace speaks in active verbs and concrete outcomes: 'Align AI agents and human judgment,' 'Unlock leverage at scale,' 'From change to production — fully validated, every step.' There is no marketing fluff, no hedging language. Vocabulary favors operational terms (orchestration, validation, alignment, leverage) over aspirational ones. The tone is calm and authoritative, never breathless or urgent. Example sentence in brand voice: 'Trace understands your operational context and routes decisions to the right agent or human, every time.'

Colors

The color system is rooted in a neutral, warm-toned foundation that prioritizes legibility and technical clarity. The primary surface (#f1f1e6) is a soft, off-white with warm undertones—not pure white (#ffffff), which would create harsh contrast and fatigue during extended use. The on-surface text color (#2b2b2b) is a deep charcoal that provides 15:1 contrast ratio against the surface, exceeding WCAG AAA standards. Primary (#2b2b2b) is the dominant text and structural color, used for headings, borders, and the default button background. It is NOT an accent—it is the backbone of the interface. Secondary (#f6543e), a burnt orange, is reserved exclusively for CTAs, alerts, and status indicators that demand immediate attention. Tertiary (#e05e0a), a deeper rust tone, provides a supporting acce

Typography

The type system is built on two complementary families: Geist for body and display text, and Geist Mono for labels and technical annotations. Geist is a humanist sans-serif with generous spacing and open letterforms, chosen for its legibility at all sizes and its subtle warmth that complements the beige palette. Display (60px, 400 weight, -0.02em tracking) is used for hero headlines and major section breaks, setting a commanding but not aggressive tone. Headline-lg (40px, 400 weight) and headline-md (28px, 400 weight) establish the section hierarchy, with consistent -0.01em to 0em tracking to maintain the technical aesthetic. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) are optimized for scanning and reading at normal viewing distance. Geist

Layout

The layout system uses a 12-column grid with a fixed max-width of 1280px, centered on the viewport. This provides a stable, predictable canvas for content while accommodating both desktop and tablet viewports. The gutter (24px) is applied consistently between columns and sections, creating a rhythm that feels spacious without being wasteful. White-space is treated as a design material, not a void: the lg spacing (40px) is used for section separation, creating visual breathing room that aids comprehension. The md spacing (24px) is applied to card padding and component margins, while sm spacing (12px) is reserved for internal component spacing (button padding, list item margins). The container-max-width of 1280px ensures that long-form content (body text, data tables) remains within the opti

Elevation & Depth

Depth in this system is conveyed through subtle shadows and border treatments rather than dramatic layering. The elevation scale uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle depth on interactive elements like buttons and inputs, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and popovers that float above the surface, and lg (0 24px 80px rgba(0, 0, 0, 0.35)) for modals and full-screen overlays. All shadows use a neutral black with low opacity, avoiding colored shadows that would introduce visual noise. Borders are preferred over shadows for structural hierarchy: a 1px solid bor

Shapes

The shape philosophy is 'Technical Precision'—favoring sharp, geometric forms over organic curves. Border-radius is applied conservatively: sm (0.25rem / 4px) for small, dense components like badges and tags; DEFAULT (0.5rem / 8px) for buttons and inputs, providing a subtle softness without compromising the technical aesthetic; md (0.75rem / 12px) for cards and larger containers; lg (1rem / 16px) for modals and full-width sections; xl (1.5rem / 24px) for hero sections and feature cards; and full (9999px) for pill-shaped elements like avatars and toggle switches. The rationale is that smaller r

Components

Action Elements Buttons are the primary interactive element and must clearly signal their role. The button-primary component uses backgroundColor: {colors.primary} (#2b2b2b), textColor: {colors.on-primary} (#fafafa), rounded: {rounded.DEFAULT} (8px), padding: 11px 16px, and height: 40px. The label-md typography (14px, 500 weight, 0.02em tracking) ensures text is legible and scannable. On hover, button-primary-hover shifts to backgroundColor: {colors.primary-container} (#444444) with a 150ms ease-out transition, providing tactile feedback. The button-secondary component uses a transparent background with a 1px border at {colors.outline} (#87868a), maintaining visual hierarchy while offering an alternative action. On hover, the background shifts to {colors.surface-container-high} (#e8e8e