Amp

Overview

Amp is a frontier agent and development environment that enables autonomous systems to persist and operate independently. The design system embodies 'Warm Minimalism'—a philosophy that pairs austere, technical precision with organic earth tones and humanistic serif typography. The brand personality is confident yet approachable: it speaks to developers and technical users with clarity and directness, never condescending, always purposeful. The visual language evokes a sense of control and capability—users feel empowered to delegate complex tasks to agents that work tirelessly in the background. The UI prioritizes focus and clarity, using generous whitespace and a restrained color palette to reduce cognitive load. Voice example: 'Your agent keeps working after you close your laptop—no supervision required.'

Colors

The color system is anchored by a warm, burnt-orange primary (#f6833b) that signals action and agency on a deep charcoal canvas (#0b0d0b). This high-contrast pairing ensures accessibility and visual hierarchy without relying on bright, artificial accents. The primary color appears on all CTAs, focus states, and interactive elements—it is the signature of user agency. Secondary colors include a muted sage green (#7fb08a) for supporting actions and status indicators, and a warm beige (#c9d1c9) for tertiary accents. The surface stack is deliberately minimal: a near-black base (#0b0d0b) with subtle container layers (surface-container at #151815, surface-container-high at #1f221f) that provide depth without visual noise. The inverse surface (#dfdfc1) is a warm, off-white used sparingly for high

Typography

The type system pairs humanistic serifs (Sagittaire Display and Sagittaire Text) for headlines and display text with system-ui sans-serif for body copy and UI labels. This combination creates visual warmth and personality at large scales while maintaining technical clarity in dense information. Display and headline levels use Sagittaire Display at 400 weight (not bold) to convey confidence without aggression—the serif letterforms themselves provide visual weight. Body text uses system-ui at 400 weight with 1.5 line-height (24px on 16px base) to ensure readability on dark backgrounds. Labels and UI text use 500 weight for emphasis. Monospace (Berkeley Mono) is reserved for code snippets, technical identifiers, and small labels (12px). Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small

Layout

The page layout uses a 12-column grid with a max-width of 1120px, centered on the viewport. Sections are separated by lg spacing (40px) vertically, creating a clear rhythm that guides the eye through content. The gutter (24px) is applied consistently to all horizontal padding, ensuring alignment across cards, sections, and containers. Hero sections use full-width backgrounds with centered content, while feature sections employ a 2-3 column card layout with md spacing (24px) between cards. Container max-widths are enforced to prevent line-length from exceeding 70-80 characters on body text, maintaining readability. Whitespace is treated as a first-class design element: generous margins around CTAs, breathing room between sections, and minimal visual clutter. The spacing scale (xs: 4px, sm:

Elevation & Depth

Depth is conveyed through subtle layering and shadow rather than dramatic elevation changes. The base layer (Level 1) is the dark surface (#0b0d0b) with no shadow. Level 2 (cards, inputs, standard containers) uses a 1px border in outline-variant (#5a6359) and a soft shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (modals, elevated cards, popovers) adds a stronger shadow: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) with a 1px border in outline (#7f877f). Shadows are always cast downward and slightly to the right, creating a consistent light source from the top-left. No blur effects or

Shapes

The shape philosophy is 'Technical Warmth'—sharp enough to feel precise and engineered, yet soft enough to feel approachable. Border-radius follows a minimal scale: sm (2px) for small UI elements like badges and tags, DEFAULT (4px) for inputs and small buttons, md (6px) for primary buttons and standard cards, lg (8px) for larger cards and modals, xl (24px) for hero sections and feature blocks, and full (9999px) for pills and circular elements. Buttons use md (6px) radius to balance precision with approachability. Cards use lg (8px) to create visual distinction from buttons. Inputs use DEFAULT

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses the primary color (#f6833b) with on-primary text (#091c1e), md radius (6px), and padding 6px 12px for a 40px height. Hover state transitions to primary-fixed-dim (#f08a80) over 120ms with ease-out timing. The button-secondary variant uses a transparent background with a 1px outline border and primary text; on hover, it fills with surface-container-high (#1f221f). All buttons use label-md typography (14px, 500 weight) for consistency. Focus states apply a 3px inset box-shadow in primary with 10% opacity.

Containers & Surfaces Cards use surface-container (#151815) background with a 1px border in outline-variant (#5a6359) and md padding (24px). The card-hover variant shifts to surface-con

Do's and Don'ts

**Do**

• Do use the primary color (#f6833b) exclusively for CTAs, focus states, and high-priority interactive elements—it is the signature of user agency.
• Do apply md spacing (24px) between major sections and lg spacing (40px) for visual breathing room; whitespace is a design tool.
• Do use Sagittaire Display serif for headlines and display text to convey confidence and personality; reserve system-ui sans-serif for body copy and UI labels.
• Do enforce a max-width of 1120px on content to maintain readability and visual hierarchy across all screen sizes.
• Do transition all interactive states (hover, focus, active) over 120ms with ease-out timing to create a responsive, polished feel.

**Don't**

• Don't use pure white (#ffffff) for text on dark backgrounds; use the soft off-white (#f6fff5) to reduce eye strain and maintain the warm aesthetic.
• Don't apply shadows larger than lg elevation (0 8px 24px rgba(0, 0, 0, 0.2)) or use blur effects; the design favors clarity and solid surfaces.
• Don't mix serif and sans-serif fonts within a single headline or body paragraph; maintain clear typographic hierarchy by pairing Sagittaire with system-ui.
• Don't use secondary or tertiary colors for CTAs; primary (#f6833b) is reserved for all user-initiated actions to maintain visual consistency and reduce cognitive load.