Optimus

Overview

Optimus is a high-velocity creative platform designed for teams who ship at scale. The design system embodies **Architectural Minimalism**—a philosophy that strips away ornamentation to expose pure function and intent. The interface is deliberately monochromatic, using deep black (#080503) as the primary accent on all call-to-action elements, while a warm off-white canvas (#fafaf9) provides breathing room and reduces cognitive load. The aesthetic evokes precision, clarity, and technical confidence: users feel they are working with a tool built by engineers, not marketers.

The brand voice is direct, unadorned, and action-oriented. Sentences are short and declarative: "Build. Deploy. Scale." The vocabulary favors technical terms (velocity, throughput, infrastructure) paired with human-centered outcomes (teams, experiences, innovate). There is no breathlessness or hype—only facts and capability. Example: "Securely build, deploy, and scale the best experiences" communicates competence without flourish.

Colors

The color system is rooted in **high-contrast minimalism**. Primary (#080503, near-black) is reserved exclusively for interactive elements—buttons, links, and focus states—ensuring every clickable surface commands attention through color alone, not decoration. On-primary (#fafaf9, warm off-white) provides maximum legibility over the dark primary. The surface stack progresses from #fafaf9 (base canvas) through #f3f2ee (dim) to #ffffff (bright), creating subtle depth without relying on shadows. On-surface (#080503) is the default text color, maintaining the monochromatic aesthetic. Tertiary (#e40014, vivid red) is used sparingly for error states, alerts, and status indicators—its intensity demands immediate recognition. Secondary (#f3f2ee) and its container (#ecebe7) serve as neutral backgro

Typography

The type system pairs **Instrument Serif** (display, headline) with **Instrument Sans** (body, label), creating a clear hierarchy between narrative and functional content. Display (96px, 400 weight, -0.02em tracking) anchors hero sections with authoritative presence; headline-lg (48px) breaks major sections; body-md (16px, 400 weight) is the workhorse for all body copy, set at 24px line-height for comfortable reading at 1400px container width. Label-md (14px, 500 weight) is applied to buttons and form labels, with 0.01em tracking to add precision. Mono (JetBrains Mono, 14px) is reserved for code snippets and technical references. All type uses 400 weight as default, with 500 weight for interactive elements (buttons, labels) to signal affordance. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0

Layout

The layout operates on a **12-column fluid grid** with a fixed max-width of 1400px, centered on the viewport. The gutter is 24px (md spacing), applied consistently between columns and sections. Hero sections use full-width backgrounds with 40px (lg spacing) vertical padding; content cards sit within the container with 24px horizontal margins on mobile, expanding to full gutter on desktop. White-space is aggressive: section separation uses 64px (xl spacing) between major blocks, creating rhythm and preventing cognitive overload. Container max-width of 1400px ensures text lines remain readable (60–80 characters per line at body-md). The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is used semantically: xs for micro-interactions (icon spacing), sm for component padding, md

Elevation & Depth

Depth is achieved through **subtle layering and borders**, not dramatic shadows. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.04)) for hover states on cards and inputs, md (0 3px 8px rgba(0, 0, 0, 0.15)) for modals and elevated surfaces, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for dropdowns and overlays. All cards carry a 1px solid border at outline-variant (#d0d0d0), which defines the surface boundary without relying on shadow alone. Transitions between elevation states use 300ms cubic-bezier(0.4, 0, 0.2, 1) to create smooth, purposeful movement. The base surface (#fa

Shapes

The shape philosophy is **Technical Precision with Approachability**. Buttons and CTAs use full radius (9999px) to signal primary actions and reduce visual aggression; this rounded-full treatment makes the interface feel modern and friendly while maintaining technical credibility. Cards and containers use lg radius (8px), a subtle curve that softens edges without appearing playful. Input fields and secondary components use DEFAULT radius (4px), a minimal curve that preserves the architectural aesthetic. Dividers and borders are 1px solid, never rounded, reinforcing the technical foundation. Th

Components

Action Elements Buttons are the primary interaction surface. Button-primary uses full radius (9999px), 44px height, 12px vertical / 32px horizontal padding, and label-md typography (14px, 500 weight). The background is primary (#080503), text is on-primary (#fafaf9). On hover, the background shifts to primary-fixed-dim (#cccccc) with on-primary-container text (#080503), creating a reversible feedback loop. All button transitions use 200ms cubic-bezier(0.4, 0, 0.2, 1). Button-secondary mirrors the primary structure but uses transparent background with a 1px outline-variant border; on hover, it fills with surface-container-high (#ffffff) and the border darkens to primary (#080503).

Containers & Surfaces Cards use lg radius (8px), md padding (24px), and a 1px outline-variant border (

Do's and Don'ts

**Do**

• Do use primary (#080503) exclusively for interactive elements—buttons, links, focus states—to create a clear affordance hierarchy.
• Do apply full radius (9999px) to primary CTAs and lg radius (8px) to cards; this creates visual distinction between action and container.
• Do maintain 24px (md spacing) as the default padding inside cards and components; use 12px (sm spacing) for form inputs and list items.
• Do use Instrument Serif for display and headline text (96px, 48px, 32px) and Instrument Sans for body and labels; never mix serif and sans in the same line.
• Do apply 300ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all hover and focus state changes; this creates a cohesive, responsive feel.
• Do use tertiary (#e40014) only for error states, alerts, and critical status indicators; never use it for secondary actions.

**Don't**

• Don't use shadows as the primary depth mechanism; always pair shadows with 1px borders (outline-variant) to define surface boundaries.
• Don't introduce new accent colors beyond primary (#080503), secondary (#f3f2ee), and tertiary (#e40014); the monochromatic palette is the brand signature.
• Don't apply rounded corners to dividers, borders, or structural elements; reserve curves for interactive surfaces (buttons, cards).
• Don't use font weights other than 400 (default) and 500 (interactive); avoid 600, 700, or lighter weights to maintain the minimalist aesthetic.
• Don't exceed 1400px container max-width; this ensures text remains readable and the layout feels intentional, not stretched.
• Don't use opacity or transparency for text; always use solid on-surface or on-surface-variant colors to maintain legibility and technical clarity.