OpenRouter

Overview

OpenRouter is a unified API aggregation layer for AI models, serving developers and enterprises who need transparent pricing, real-time performance benchmarks, and seamless model switching without vendor lock-in. The design aesthetic is 'Technical Clarity'—a minimalist, data-forward interface that prioritizes information density and developer ergonomics over decorative flourish. The UI evokes precision and trust through a clean white canvas (rgb(252, 252, 254)), bold typography hierarchy, and a vibrant purple accent (rgb(118, 36, 244)) that signals action and capability. The emotional response is one of confidence: users feel they are in control of a powerful, transparent system.

The brand voice is direct, technical, and respectful of developer time. Sentences are concise and action-oriented, avoiding marketing hyperbole. Example: 'Compare latency across 80+ providers in real time. Switch models with a single parameter. No subscriptions, no lock-in.' The vocabulary favors precision (tokens, latency, throughput, providers) over abstraction, and the tone assumes the user is knowledgeable and impatient.

Colors

The color system is built on a neutral, light foundation with a bold purple primary accent. Primary (#7624f4) is the signature brand color, used exclusively for call-to-action buttons, active states, focus rings, and key interactive elements—it commands attention without overwhelming the interface. Secondary (#035ade, a deep blue) supports data visualization and secondary actions, while Tertiary (#ff2d55, a vibrant red/pink) is reserved for error states, alerts, and critical feedback. The surface stack progresses from #fcfcfe (surface, the page background) through #efeff2 (surface-container, used for cards and panels) to #e0e0e3 (surface-container-highest, for elevated modals). On-surface text is #03080a (near-black), ensuring 15:1 contrast for accessibility. Outline colors (#7a7f86 for pr

Typography

The type system pairs Gordita (a geometric, confident sans-serif) for headlines and display text with Plus Jakarta Sans (a warm, approachable humanist sans-serif) for body and UI text. This pairing creates visual hierarchy while maintaining legibility at all sizes. Display (56px, 700 weight, -0.02em tracking) is used for hero headlines like 'The Unified Interface For Every Model'; Headline-lg (40px, 700 weight) for section titles; Headline-md (28px, 700 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and prominent descriptions; Body-md (16px, 400 weight, 24px line-height) for standard paragraph text and card content. Label-md (14px, 500 weight, 20px line-height) is applied to button text, form labels, and UI controls. On small labels over busy ba

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on the viewport. The page rhythm is driven by a semantic spacing scale: xs (4px) for micro-spacing within components, sm (12px) for internal padding and gaps, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The hero section occupies the full viewport height with centered content (headline, subheadline, dual CTAs) and generous vertical padding (lg spacing above and below). Feature cards and model listings use md spacing for internal padding and lg spacing for grid gaps. The gutter (24px) is applied consistently to left/right margins on all sections, creating breathing room on desktop while collapsing to sm (12px) on tablets. Container ma

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color shifts. The elevation system uses three levels: Level 1 (Base, no shadow) for the page background and surface elements; Level 2 (Standard card, 0 3px 8px rgba(0, 0, 0, 0.15)) for cards, dropdowns, and modals; Level 3 (Elevated, 0 8px 24px rgba(0, 0, 0, 0.12)) for floating action buttons, popovers, and top-level modals. Cards use a 1px solid border at #c9cdd2 (outline-variant) in addition to shadows to define edges crisply. On hover, cards transition from Level 1 to Level 2 shadow (0 3px 8px rgba(0, 0, 0, 0.15)) and shift

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used consistently but conservatively to balance approachability with precision. Buttons use 6px (DEFAULT) border-radius, creating a slightly rounded rectangle that feels modern without being overly playful. Cards and panels use 8px (md) radius, slightly more rounded than buttons to signal containment and hierarchy. Input fields use 6px (DEFAULT) radius to match buttons, creating visual consistency in the form layer. Chips and badges use 9999px (full) radius for a pill shape, appropriate for their small scale and discrete nature. The

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (Get API Key, Sign Up) use #7624f4 background with #fcfcfe text, 12px vertical padding, 32px horizontal padding, 6px border-radius, and 500 font-weight. On hover, the background darkens to #6b1ee0 (a 10% luminosity shift). On active/press, it darkens further to #5d1ac8. The transition duration is 150ms (cubic-bezier(0.4, 0, 0.2, 1)). Secondary buttons (Discover Models) use a transparent background with #7624f4 text and a 1px border at #c9cdd2. On hover, the background fills with #f5f5f7 (surface-container-low). Focus states on all buttons apply a 3px ring of rgba(118, 36, 244, 0.1) with a 2px offset.

Containers & Surfaces Cards are the primary content container. Standard cards use #fcfcfe background, 1p

Do's and Don'ts

**Do**

• Do use Primary (#7624f4) exclusively for CTAs, focus states, and active indicators—it is the brand's signature accent and must remain focal.
• Do apply md (24px) spacing for card padding and lg (40px) for section separation to maintain consistent rhythm and breathing room.
• Do use Gordita for all headlines (Display, Headline-lg, Headline-md) and Plus Jakarta Sans for body and UI text to create clear visual hierarchy.
• Do apply 150ms transitions on hover/active states (cubic-bezier(0.4, 0, 0.2, 1)) to provide responsive feedback without feeling sluggish.
• Do use 6px border-radius for buttons and inputs, 8px for cards, and 9999px for chips to maintain the Soft-Technical aesthetic.

**Don't**

• Don't use Primary (#7624f4) for body text, backgrounds, or non-interactive elements—reserve it exclusively for actionable UI.
• Don't exceed 1280px container max-width; this ensures line-length stays under 80 characters and maintains readability.
• Don't mix Gordita and Plus Jakarta Sans within a single headline or body paragraph; use Gordita for headlines only.
• Don't apply shadows deeper than 0 8px 24px rgba(0, 0, 0, 0.12) or use more than three elevation levels; excessive depth creates visual noise.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 6px, md: 8px, lg: 12px, xl: 16px, full: 9999px)—consistency is critical to the system.