9Router

Overview

9Router is a developer-first AI orchestration platform that embodies the aesthetic of "Technical Minimalism with Warm Accents"—a design philosophy that prioritizes clarity and function while injecting warmth through a distinctive coral-orange primary color (#e56a4a). The brand serves developers and AI engineers who need reliable, cost-optimized access to 60+ language model providers without vendor lock-in. The UI evokes confidence and precision: clean typography (Inter at 60px for headlines, 16px for body), generous white space (40px section gaps, 24px gutters), and a restrained color palette (mostly white, black, and grays) punctuated by the energetic primary accent. The emotional response is one of control and possibility—users feel empowered to route their AI workloads intelligently, never blocked by a single provider's rate limits or outages.

The brand voice is direct, technical, and optimistic. Vocabulary patterns favor concrete action verbs ("connect," "route," "maximize," "switch") and avoid hype. Tone is conversational but precise—never breathless, always grounded in real developer pain points. Example sentence in brand voice: "Smart 3-tier fallback keeps you coding when limits hit—no manual intervention, no downtime."

Colors

The color system is anchored by a warm, energetic primary (#e56a4a, RGB 229, 106, 74) that appears on all call-to-action buttons, accent badges, and interactive focus states. This coral-orange is the visual signature of the brand—it signals actionability and draws the eye to primary CTAs like "Start FREE Now" and "Get Started." The primary is supported by a full Material 3 surface stack: the base surface is pure white (#ffffff), with container variants descending through subtle grays (#f5f3f0 for surface-dim, #ede9e5 for surface-container) to create depth without darkness. Text on light surfaces is near-black (#0a0a0a, RGB 10, 10, 10) for maximum contrast and readability at 16px body size. Secondary and tertiary colors provide supporting accents: secondary is a bright blue (#3b82f6, used f

Typography

The type system uses Inter exclusively across all scales, loaded from Google Fonts (wght 400–900), ensuring consistent rendering and a modern, technical aesthetic. Display headings (60px, weight 800, line-height 68px, letter-spacing -0.04em) command attention on hero sections; headline-lg (40px, weight 700) anchors section titles; headline-md (28px, weight 600) breaks up content into digestible chunks. Body text is set at 16px (weight 400, line-height 24px) for comfortable reading at standard viewing distances, with a generous 1.5x line-height ratio. Labels and UI text use 14px (weight 600, letter-spacing 0.01em) to maintain hierarchy without sacrificing legibility. On small labels over busy backgrounds (e.g., badge text on gradient cards), apply a subtle text-shadow: 0 1px 2px rgba(0, 0,

Layout

The layout uses a 12-column grid with a fixed container max-width of 1280px, centered with auto margins. Sections are separated by 40px (lg spacing) vertical gaps, creating a rhythm that feels spacious without appearing disconnected. The gutter (24px) is applied consistently to left/right padding on all sections, ensuring content never touches viewport edges on desktop and scales responsively on mobile (gutter reduces to 16px below 768px breakpoint). White space is treated as a design element: the hero section uses a 2-column grid (left text, right image) with 48px gap, allowing the eye to rest between content blocks. Cards are laid out in a flexible grid (basis-72, min-width 280px) that reflows from 1 column on mobile to 3–4 columns on desktop without explicit breakpoint declarations. The

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than dramatic layering. The base elevation (Level 1) is the white background (#ffffff) with no shadow. Level 2 (standard cards) uses a 1px border in outline-variant (#cccccc) and a soft shadow of 0 1px 2px rgba(0, 0, 0, 0.06) to separate the card from the background. Level 3 (elevated cards on hover) applies a stronger shadow: 0 2px 12px -2px rgba(229, 106, 74, 0.25), which tints the shadow with the primary color to reinforce brand identity. The most prominent elevation is reserved for the primary CTA button, which uses the

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are applied strategically to soften the geometric precision of a developer tool while maintaining a professional, trustworthy appearance. Buttons and interactive elements use 0.75rem (12px) border-radius, creating a friendly, approachable feel without the extreme roundness of full-pill buttons (reserved for badges and tags, which use 9999px). Cards and containers use 1rem (16px) border-radius, a middle ground that feels modern and slightly organic. Input fields and smaller UI components use 0.5rem (8px) border-radius, maintaining visual

Components

Action Elements Primary buttons use the brand primary (#e56a4a) with white text, 44px height, 24px horizontal padding, and 12px border-radius. The default state includes the signature glow shadow (0 8px 24px -8px rgba(229, 106, 74, 0.45)). On hover, the background darkens to #cc5236 and the shadow intensifies to 0 12px 32px -8px rgba(229, 106, 74, 0.6), with a 200ms transition-all ease. Secondary buttons have a white background, 2px border in outline-variant (#cccccc), and on-surface-variant text (#6b6b6b). On hover, the border shifts to primary and text becomes on-surface (#0a0a0a). Ghost buttons are transparent with on-surface-variant text; on hover, they gain a surface-container-low background (rgba(245, 243, 240, 1)) and text becomes on-surface. All buttons use label-md typography

Do's and Don'ts

**Do**

• Do use the primary color (#e56a4a) exclusively for call-to-action buttons, focus states, and brand-critical interactive elements—it is the visual signature and should never be diluted or overused.
• Do maintain generous white space (40px between sections, 24px gutters) to create a sense of control and clarity, reflecting the brand's promise of simplicity in AI routing.
• Do apply the glow shadow (0 8px 24px -8px rgba(229, 106, 74, 0.45)) to primary CTAs to create a subtle breathing effect that draws attention without aggression.
• Do use Inter weight 600 for all labels and UI text (14px, letter-spacing 0.01em) to maintain technical credibility and hierarchy.
• Do transition all interactive state changes over 200ms with cubic-bezier(0.4, 0, 0.2, 1) easing to feel responsive and polished.

**Don't**

• Don't use the primary color (#e56a4a) for body text, backgrounds, or non-interactive elements—it must remain reserved for actions and accents to maintain visual hierarchy.
• Don't apply border-radius greater than 1rem (16px) to cards or containers; the brand is technical, not playful, and extreme roundness undermines credibility.
• Don't use shadows with blur radius greater than 24px or spread greater than 0px; the design is clean and modern, not layered or skeuomorphic.
• Don't mix typefaces; Inter is the only font family used across all scales, sizes, and weights—consistency is essential to the brand's technical identity.
• Don't reduce the gutter below 16px on mobile or below 24px on desktop; white space is a core brand value and cramped layouts contradict the promise of clarity.