InferStack

Overview

InferStack is a developer-focused API orchestration platform that unifies access to multiple large language models through a single, OpenAI-compatible interface. The brand embodies "Technical Clarity"—a design philosophy that prioritizes precision, directness, and functional elegance over decorative flourish. The aesthetic combines a clean, light-neutral canvas (rgb(249, 250, 251)) with a vibrant emerald-green accent (rgb(46, 204, 113)) that signals action, trust, and forward momentum. The UI evokes a sense of control and transparency: users feel they are commanding a sophisticated system, not navigating a black box. Voice: direct, confident, and jargon-aware. Example: "Route your requests to the fastest provider. We handle the complexity."

Colors

The color system is anchored by a high-saturation primary green (#2ecc71, rgb(46, 204, 113)) used exclusively on call-to-action buttons, active navigation states, and brand-critical interactive elements. This green is never used for passive surfaces or body text—it is reserved for moments of user agency. The secondary color palette draws from a sophisticated dark forest green (#1a3d2e, rgb(26, 61, 46)) and its lighter variant (#2d5a45, rgb(45, 90, 69)), used for depth layers, secondary containers, and supporting UI elements that require visual hierarchy without competing for attention. The surface stack progresses from the brightest white (#ffffff) for primary containers, through warm grays (#f9fafb, #f3f4f6, #e9ecef) for subtle depth, to near-black (#1a1a1a, rgb(26, 26, 26)) for primary t

Typography

The type system uses Inter exclusively, a geometric sans-serif that communicates technical sophistication while remaining approachable. Display (60px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence. Headline-lg (48px, 800 weight, -0.02em tracking) is reserved for primary page titles and major section breaks—the weight is deliberately heavy to command attention in a minimalist layout. Headline-md (32px, 600 weight) serves secondary headings and feature titles. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and prominent descriptive text, ensuring readability at scale. Body-md (16px, 400 weight, 24px line-height) is the default paragraph text. Label-md (14px, 500 weight, 0.01em tracking) is applied to button text, navigation items, and form l

Layout

The layout uses a 12-column grid with a max-width of 1440px (container-max: 1440px), providing a spacious, breathing canvas that prevents content from feeling cramped on ultra-wide displays. The page rhythm is governed by a semantic spacing scale: lg (40px) separates major sections (hero, features, footer), md (24px) is the default padding inside cards and containers, sm (12px) is used for internal component spacing (button padding, input fields), and xs (4px) is reserved for micro-interactions and icon spacing. The gutter (24px) is applied consistently to left/right page margins on desktop, collapsing to sm (12px) on mobile. White space is treated as a first-class design element—sections are separated by full-height gaps (py-16, py-20 in Tailwind terms, translating to 64px–80px), creating

Elevation & Depth

Depth is achieved through a restrained shadow system that mimics real-world light without theatrical drama. Level 1 (Base): no shadow; surfaces sit flush on the background (rgb(249, 250, 251)). Level 2 (Standard Card): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), a barely-perceptible lift that defines the card boundary without distraction. Level 3 (Elevated/Hover): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied on card hover and modal overlays, creating a sense of forward motion. Level 4 (Maximum Depth): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), reserved for hero code blocks and prominen

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used strategically to soften the precision of a technical interface without introducing organic or playful aesthetics. Buttons use full radius (border-radius: 9999px), creating pill-shaped affordances that feel modern and clickable. Cards and containers use lg (1rem, 16px) or xl (1.5rem, 24px) radius, providing gentle rounding that softens hard edges while maintaining geometric clarity. Input fields use DEFAULT (0.5rem, 8px) radius, a subtle curve that signals interactivity without distraction. Code blocks use lg (1rem) radius to dis

Components

Action Elements Buttons are the primary interaction primitive. Primary buttons (button-primary) use the full primary green (#2ecc71) background with white text, 10px vertical / 24px horizontal padding, full border-radius, and a 40px minimum height. On hover, the background shifts to the darker inverse-primary (#27ae60, rgb(39, 174, 96)), maintaining the green family while signaling state change. The transition is 150ms cubic-bezier(0.4, 0, 0.2, 1), providing snappy feedback without feeling abrupt. Secondary buttons (button-secondary) use a transparent background with a 1px border (#d0d0d0) and dark text (#1a1a1a), allowing them to recede visually while remaining accessible. On hover, the background becomes surface-container-high (#e9ecef), providing subtle feedback. Ghost buttons (butt

Do's and Don'ts

**Do**

• Do use the primary green (#2ecc71) exclusively for interactive elements that represent user agency—buttons, active navigation, focus states. Never use it for passive surfaces or body text.
• Do apply the full-radius pill shape (border-radius: 9999px) to all primary action buttons; it is the visual signature of clickability in this system.
• Do maintain the 150ms cubic-bezier(0.4, 0, 0.2, 1) transition timing on all interactive state changes (hover, focus, active) to create a consistent, snappy feel.
• Do use the surface-container stack (#f9fafb → #e9ecef) to create subtle depth without relying on shadows; borders (#d0d0d0) define edges crisply.
• Do apply lg (40px) spacing between major sections and md (24px) padding inside containers to create visual rhythm and prevent cognitive overload.

**Don't**

• Don't use the primary green for backgrounds, disabled states, or secondary information; it is reserved for moments of user action and brand emphasis.
• Don't apply shadows heavier than 0 16px 40px rgba(0, 0, 0, 0.12); the system prioritizes clarity over depth drama.
• Don't mix rounded corner radii arbitrarily; use the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't use transitions longer than 150ms or easing functions other than cubic-bezier(0.4, 0, 0.2, 1); the system values snappy, predictable feedback.
• Don't place text directly on busy backgrounds without a text-shadow (0 1px 2px rgba(0, 0, 0, 0.1)) or sufficient contrast; legibility is non-negotiable.