Remixes of openrouter.ai
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
OpenRouter's design system embodies a clean, modern, and developer-focused aesthetic built for high-performance AI model exploration. The interface prioritizes clarity and accessibility across complex data, using a minimalist dark-light balance with strategic use of vibrant accent colors to guide user action. The visual language is intentionally tech-forward with precise typography, subtle shadows, and a spacious layout that reduces cognitive load. Purple serves as the primary brand anchor, representing innovation and AI velocity, while complementary colors highlight critical actions and status states. The overall tone is professional yet approachable—designed to instill confidence in enterprise-grade infrastructure while remaining intuitive for individual developers.
Key Characteristics
#03080A): Primary text, headings, and core interface elements. Dominant throughout the system for maximum contrast and legibility.#7624F4): Primary call-to-action buttons, links, and interactive focus states. Represents OpenRouter's AI-velocity positioning.#035ADE): Secondary interactive element, accent highlights, and hover states.#FF2D55): Error states, destructive actions, and critical alerts.#FF6849): Warning states and secondary alerts.#00BF6F): Positive confirmations, checkmarks, and completed states.#007544): Secondary success indicators and alternative positive state.#34DFAA): Light success highlight and accent overlay.#7624F4): Buttons labeled "Get API Key," "Sign Up," "Get Started," "Contact Sales"—driving conversion.#035ADE): Secondary buttons and link underlines.#7624F4 at 0.85 opacity): CTA hover state with reduced opacity for visual feedback.#FFFFFF): Primary background for cards, inputs, and light surfaces.#FCFCFE): Secondary light background and navigation bar.#E2DFE5): Subtle borders and divider lines.#A29FA5): Placeholder text, secondary labels, and muted content.#737177): Tertiary text and secondary information.#FFFFFF): Primary container for grouped content.#E2DFE5): Subtle 1px borders on cards and inputs.#03080A at 0.08): Very subtle borders for form elements.#FFAB00): Primary warning indicator and attention state.#C8FF00): Alternative warning highlight.#E5A000): Warning tertiary state.#FBBF24): Soft warning background.#E6F6EB): Light success background tint.Primary: Gordita
"Gordita", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Secondary: Plus Jakarta Sans
"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Tertiary: Jakarta
"Jakarta", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Monospace: GeistMono / Geist Mono
"GeistMono", "Geist Mono", "Courier New", monospace
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Gordita | 60px | 700 | 60px | 0px | Hero headlines, page titles |
| Display LG | Gordita | 56px | 700 | 67.2px | 0px | Large section headers |
| Display MD | Gordita | 48px | 700 | 48px | 0px | Major section headers |
| Heading XL | Plus Jakarta Sans | 36px | 600 | 40px | 0px | Large headings, feature titles |
| Heading LG | Gordita | 36px | 700 | 43.2px | 0px | Section headings |
| Heading MD | Jakarta | 24px | 700 | 28.8px | 0px | Card titles, subsection headers |
| Heading SM | Gordita | 20px | 600 | 24px | 0px | Subheadings, feature names |
| Heading XS | Jakarta | 16px | 600 | 21.6px | 0px | Block headers |
| Heading 2XS | Jakarta | 16px | 500 | 21.6px | 0px | Secondary labels |
| Body LG | Jakarta | 16px | 450 | 21.6px | 0px | List items, description text |
| Body | Plus Jakarta Sans | 16px | 400 | 24px | 0px | Body copy, navigation links |
| Body SM | Jakarta | 14px | 450 | 20px | 0px | Default body text, button labels |
| Body 2XS | Jakarta | 14px | 500 | 22.75px | 0px | Small body, form text |
| Caption | Plus Jakarta Sans | 14px | 400 | 24px | 0px | Captions, metadata |
| Small | Jakarta | 11.2px | 500 | 18.2px | 0px | Fine print, helper text |
| Code | GeistMono | 14px | 400 | 24px | 0px | Code blocks, inline code |
| Code SM | GeistMono | 12px | 500 | 16.2px | 0px | Compact code snippets |
#7624F4#FFFFFF0px 12px (height 36px implied)14px400Plus Jakarta Sans24px12px0px solid transparentrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.438945 0.00519995 -0.00856951 / 0.3) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px0.85, text remains white0.70, slight inward shadow#FFFFFFrgba(3, 8, 10, 0.69)0px 12px (height 32px)16px450Jakarta21.6px1px solid rgba(3, 8, 10, 0.08)6pxnone#FCFCFE, border to rgba(3, 8, 10, 0.15)#E2DFE5rgba(0, 0, 0, 0) (transparent)rgba(3, 8, 10, 0.69)0px 8px (height 32px)14px500Jakarta22.75px0px solid transparent6pxrgba(0, 0, 0, 0.04), text color #03080Argba(0, 0, 0, 0.08)rgba(0, 0, 0, 0)rgba(3, 8, 10, 0.69)22px4px 4px 4px 4px4px14pxrgba(0, 0, 0, 0.05)#FFFFFF1px solid rgba(3, 8, 10, 0.08)24px 24px 24px 24px8pxnone#03080A110pxrgba(0, 0, 0, 0) (transparent)1px solid oklab(0.522881 0.0988102 -0.251639 / 0.2) (light gray)64px 64px 64px 64px8pxnone#03080A0.3#E6F6EB (light success tint)1px solid rgba(0, 191, 111, 0.3)24px 24px 24px 24px8px#03080Argba(0, 0, 0, 0) with underline treatment#FFFFFF or rgb(241, 239, 245) in dark contexts0px (underline via pseudo-element)10px 40px 10px 14px (accounting for icon)14px400Plus Jakarta Sans20pxrgba(162, 159, 165, 0.7)2px solid #7624F4, text color #FFFFFFrgba(255, 255, 255, 0.08)1px solid rgba(255, 255, 255, 0.15)8px 12px 8px 12px6px#A29FA5#A29FA5 at 0.5 opacity1px solid #7624F4, background rgba(118, 36, 244, 0.1)#FCFCFE56px0px 24px 0px 24px (inferred)0px1px solid #E2DFE5#03080A#03080A14px450Jakarta#7624F4, opacity 0.85#7624F4, text-decoration underline/ or >#A29FA512px#03080A#A29FA5#00BF6F or #E6F6EB#007544 (dark green) or #FFFFFF4px 8px 4px 8px4px11.2px500#00BF6F or #007544#FFAB00 or #FFF3CD#E5A000 or #9974044px 8px 4px 8px4px11.2px500#FF2D55 or #FFE0E6#FFFFFF or #C41E3A4px 8px 4px 8px4px11.2px500#FCFCFE1px solid #E2DFE5#03080A14px60012px 16px 12px 16px#FFFFFF (alternating #FCFCFE for odd rows)1px solid #E2DFE5#03080A14px12px 16px 12px 16px#FCFCFE8px4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 96px1200px (inferred from layout consistency)24px between columns (halved at smaller breakpoints)20px to 40px depending on viewportOpenRouter employs aggressive whitespace to reduce cognitive load and highlight key information. Content blocks are separated by 48px–64px vertical gaps, with generous padding (24px–64px) inside cards and sections. This creates visual hierarchy through breathing room rather than visual decoration alone. Negative space is treated as a first-class design element, preventing UI overcrowding and enabling rapid content scanning.
0px (inputs with underline treatment, horizontal separators)4px (icon buttons, small elements)6px (buttons, small cards, input fields)8px (primary cards, container corners)12px (large CTAs, prominent buttons)1px (primary border weight for cards, inputs, dividers)2px (focus states, active borders)3px (emphasis, critical borders)| Level | Treatment | Use |
|---|---|---|
| Base | No shadow, 0px 0px 0px 0px | Cards, containers at rest |
| Hover | Subtle elevation shadow | Interactive elements on hover |
| Dropdown | rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px | Dropdowns, popovers |
| Pressed | Border-only depth with oklab(0.438945 0.00519995 -0.00856951 / 0.3) 0px 0px 0px 1px | Buttons in active state |
| Modal | rgba(0, 0, 0, 0.3) 0px 20px 40px -10px (implied) | Modal overlays, full-screen dialogs |
Shadow Philosophy
Shadows are minimal and purposeful in the OpenRouter system. The default approach uses 0px shadows to maintain a flat, modern aesthetic. Elevation is introduced sparingly through thin 1px borders with subtle color shifts rather than traditional drop shadows. When shadows are employed (dropdowns, modals), they use soft, darkened gradients with increased blur radius (15px) and negative vertical offset to suggest content floating above the plane. This approach maintains clarity while signaling depth.
0.30 — Reduced interactivity visibility0.50 — Secondary text, placeholders0.70 — Interactive hover state reduction0.20 — Very light backgrounds, borders0.85 — Active button/link state1 — Default component layer10 — Sticky navigation, pinned elements20–22 — Dropdown menus, select options30 — Semi-transparent modal background49–50 — Modal dialogs, overlays50+ — Notifications, toast messages (highest layer)#7624F4) for all primary CTAs — buttons labeled "Get API Key," "Sign Up," "Get Started" drive conversion and must be visually distinct.rgba(3, 8, 10, 0.08)) to separate content blocks and increase visual definition without clutter.#00BF6F) for success, red (#FF2D55) for errors, orange (#FF6849) for warnings.2px solid #7624F4 outline on interactive elements for keyboard navigation.1px borders.#03080A text on light backgrounds, #FFFFFF text on dark.48px minimum on touch devices.6px–8px radius throughout a feature group.| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–479px | Single column, full-width padding 12px, font -2px, button height 40px, gap halved |
| Tablet | 480px–767px | 2-column grid, padding 20px, standard fonts, button height 40px |
| Desktop | 768px–1199px | 12-column grid, padding 24px, standard fonts, button height 40px |
| Wide | 1200px+ | 12-column grid centered max-width 1200px, padding 40px outer, button height 44px |
48px × 48px (buttons, links, icon buttons on mobile)40px (reduced from desktop 36px for thumb accessibility)8px minimum on all sides to prevent accidental adjacent taps44px × 44px minimum on touch devices44px tap area, minimum 16px text size#7624F4)#035ADE)#FCFCFE)#FFFFFF)#03080A)#03080A) at 0.69 opacity#00BF6F)#FF2D55)#FF6849)rgba(0, 0, 0, 0.30) opacityAlways use #7624F4 for primary CTAs — "Get API Key," "Sign Up," "Get Started" buttons must be purple with #FFFFFF text, 36px height, 12px padding, 12px border-radius, no border.
Maintain 8px base spacing grid — all padding, margins, gaps must be multiples of 8px (8, 16, 24, 32, 40, 48, 64, 80, 96px).
Typography hierarchy: Display 48–60px (Gordita 700), Heading 24–36px (Jakarta/Gordita 600–700), Body 14–16px (Jakarta/Plus Jakarta Sans 400–450) — infer role from context and never deviate.
Cards always include 1px solid border rgba(3, 8, 10, 0.08), 24px padding, 8px border-radius, white background — exceptions only for featured/highlighted cards with light green tint.
Apply 1px borders to all form inputs — never borderless unless explicitly input-underline component; use rgba(3, 8, 10, 0.08) default, #7624F4 on focus.
Semantic colors are strict: green (#00BF6F) = success only, red (#FF2D55) = error only, orange (#FF6849) = warning only — never use for other purposes.
Dropdowns and popovers require shadow rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px and z-index 20–22 — all other elements default to z-index 1 or 10 for sticky.
Mobile: stack vertically, reduce font sizes 20–30%, halve spacing (64px → 32px), full-width buttons 40px height, hamburger menu for navigation.
Focus states: 2px solid #7624F4 outline or visible ring on all interactive elements; keyboard navigation must be supported — test with Tab key.
Never mix rounded corners carelessly — use 4px for small elements, 6px for buttons/inputs, 8px for cards, 12px for large CTAs only; consistency within feature groups.