ModelsLab

Overview

ModelsLab is an enterprise-grade generative AI platform that democratizes access to 1000+ cutting-edge AI models through a unified, developer-first API. The design system embodies a "Technical Clarity" aesthetic—combining the precision of engineering with the accessibility of modern SaaS. The interface prioritizes information density and rapid model discovery, using a light, spacious canvas (rgb(246, 247, 249) background) punctuated by a vibrant primary blue (#4075dd) that signals interactivity and trust. The brand personality is direct, competent, and solution-oriented: we speak to developers as peers, avoiding hype while celebrating capability. Example voice: "Deploy Stable Diffusion, FLUX, or GPT-4V in milliseconds—no infrastructure required."

Colors

The color system balances a clean, minimal light theme with strategic accent colors that guide user attention. Primary (#4075dd, rgb(64, 117, 221)) is the signature brand blue used exclusively for CTAs, focus states, and primary navigation; it conveys trust and technical sophistication. Secondary (#00ed09, a vivid lime-green) and Tertiary (#00897b, teal) are accent colors drawn from the vibrant model-generation imagery, used sparingly for status indicators, success states, and secondary actions. The surface stack progresses from the base light gray (#f6f7f9) through container layers (ranging from #f0f2f6 to #d0d4da) to create subtle depth without relying on shadows. On-surface text is a near-black (#161c1d, rgb(22, 24, 29)) for maximum readability at 16px body size. Error states use a warm

Typography

The type system uses Space Grotesk as the primary typeface—a geometric sans-serif that conveys technical precision while remaining approachable. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 700 weight) structures page sections; Headline-md (28px, 700 weight) breaks up content hierarchies. Body text runs at 16px with 400 weight and 24px line-height, providing comfortable reading at any screen size. Labels and UI text use 14px at 500 weight with 0.01em tracking for crisp, scannable interface elements. Code snippets and technical documentation use Geist Mono (14px, 400 weight) to distinguish programmatic content. All headings use -0.02em to -0.04em negative letter-spacing to create visual weight and reduce perceived size; body

Layout

The layout uses a 12-column grid with a max-width of 1280px (matching Tailwind's 2xl breakpoint), ensuring content remains scannable on ultra-wide displays while maintaining focus on desktop. The gutter is 24px, applied consistently to section padding and component spacing. White-space is used generationally: lg spacing (40px) separates major sections (hero, feature blocks, footer); md spacing (24px) divides component groups and card stacks; sm spacing (12px) provides breathing room within components. The search bar and model cards use a 3-column layout on desktop, collapsing to 1 column on mobile. Container max-width is enforced at 1280px to prevent line-length from exceeding 75 characters in body text, supporting cognitive load reduction. Margins follow the spacing scale: section margins

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic elevation changes. The base surface (Level 1) is the light background (#f6f7f9) with an optional subtle dot pattern (24px grid, rgba(229, 231, 235, 0.4)) for visual texture. Standard cards (Level 2) use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and a 1px border in {colors.outline-variant} (#d1d5db) to separate from the background. Elevated surfaces (Level 3)—modals, popovers, dropdowns—use box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with the same border treatment. On hover, cards transition to the elevated shadow (200ms

Shapes

The shape philosophy is "Minimal Geometry"—rounded corners are used sparingly to soften interfaces without introducing visual noise. The default radius is 0.5rem (8px), applied to buttons, inputs, and small components for a modern, approachable feel. Cards and larger containers use 0.75rem (12px) to create subtle visual separation. Modals and popovers use 1.5rem (24px) for a more pronounced, friendly appearance. Buttons and chips use 9999px (full) for pill-shaped elements in secondary and tertiary contexts, creating visual distinction from primary rectangular buttons. The rationale: sharp corn

Components

Action Elements Buttons use a consistent 40px height (8px vertical padding + 16px horizontal padding + 24px line-height) for comfortable touch targets on mobile and desktop. Primary buttons (#4075dd background, white text, 14px 500 weight label) are reserved for the most important action per page (e.g., "Book a Call", "Sign Up"). On hover, the background darkens to #2d5aa8 with a 200ms ease-out transition. Secondary buttons use a transparent background with a 1px outline in {colors.outline-variant} and on-surface text; on hover, they fill with {colors.surface-container-high}. Accent buttons use the secondary green (#00ed09) for success-oriented actions (e.g., "Deploy Model"). All buttons disable at opacity: 0.5 with cursor: not-allowed.

Containers & Surfaces Cards are the primary

Do's and Don'ts

**Do**

• Do use primary blue (#4075dd) exclusively for CTAs and focus states—it's the brand's signature accent and must remain reserved for the most important interactions.
• Do maintain 24px gutters and 40px section spacing to create breathing room; dense layouts undermine the technical clarity aesthetic.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) to provide responsive feedback without distraction.
• Do use Space Grotesk at 16px/400 weight for body text and 14px/500 weight for labels; this pairing is tested for readability at all sizes.
• Do layer cards with 1px borders (#d1d5db) and subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to create depth without relying on color.
• Do reserve the secondary green (#00ed09) and tertiary teal (#00897b) for status indicators, badges, and secondary actions—never use them for primary CTAs.

**Don't**

• Don't use rounded corners >1.5rem on standard components; excessive rounding contradicts the precision-focused brand and wastes visual hierarchy.
• Don't apply shadows >0 8px 24px rgba(0, 0, 0, 0.12); deeper shadows create visual confusion and undermine the clean, minimal aesthetic.
• Don't mix typefaces—Space Grotesk is the primary body and UI font, Geist Mono is reserved for code blocks, Instrument Serif is not used in the UI system.
• Don't use opacity or transparency for primary surfaces; all backgrounds must be fully opaque (#ffffff or light gray) to maintain accessibility and clarity.
• Don't apply color to text beyond {colors.on-surface} (#161c1d) and {colors.on-surface-variant} (#374151) for body content; colored text reduces readability.
• Don't create custom button sizes; always use 40px height with 8px/16px padding to maintain consistency and touch-target accessibility.