Contra Labs

Overview

Contra Labs is a frontier evaluation platform for creative AI, powered by a verified network of 1.5M+ creative experts. The design system embodies Refined Minimalism—a disciplined, editorial aesthetic that treats taste and creative judgment as measurable, scientific phenomena. The visual language is deliberately restrained: a warm cream canvas (#fbfaf6) paired with deep charcoal text (#2b2b29), punctuated by a vivid electric blue accent (#0000ee) that signals actionable intelligence and precision. The brand personality is authoritative yet approachable, speaking to creative professionals with clarity and respect. Voice: measured, evidence-based, never hyperbolic. Example: 'Our 1.5M verified experts have evaluated 50M+ creative variations—here's what separates benchmark from derivative.'

Colors

The color system operates on a principle of editorial restraint with strategic accent deployment. The primary surface palette consists of warm, off-white backgrounds (#fbfaf6 for base, #ede9e3 for containers, #dbd8ce for elevated surfaces) that evoke paper and print—grounding the digital interface in tactile, human-centered design. The on-surface text is a deep, warm charcoal (#2b2b29) that maintains 15.2:1 contrast ratio against the cream background, ensuring legibility and sophistication. Primary (#0000ee) is an electric, saturated blue reserved exclusively for interactive elements: call-to-action buttons, links, and focus states. This high-contrast accent creates visual hierarchy without relying on size or weight alone. Secondary (#387478) is a muted teal used for supporting information

Typography

The type system pairs Source Serif 4 Variable for display-level headlines (64px, 400 weight, -0.02em letter-spacing) with GT Standard family for body and interface text. This serif-and-sans pairing creates visual tension that signals editorial authority—the serif headlines evoke print journalism and cultural criticism, while the clean sans-serif body text ensures digital legibility at 16px (body-md, 400 weight, 24px line-height). Headlines use GT Standard L Semibold at 600 weight for emphasis without heaviness; the medium weight (500) is reserved for labels and interactive elements to maintain visual hierarchy. Letter-spacing is conservative across all sizes (ranging from -0.02em to 0.03em), reflecting a preference for tightness and precision over airy spacing. Apply text-shadow: 0 1px 2px

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, maintaining a fluid-to-fixed breakpoint strategy that adapts from mobile to desktop without jarring reflows. The spacing scale is semantic: unit (8px) for micro-adjustments, sm (12px) for compact UI, md (24px) for standard padding and gutter, lg (40px) for section separation, and xl (64px) for major layout breaks. Sections are separated by lg spacing (40px) vertically, creating a breathing rhythm that prevents cognitive overload. The gutter (24px) is applied consistently to container edges, ensuring content never touches viewport edges on desktop. White-space is treated as a first-class design element: negative space around headlines and CTAs is intentional, never accidental. Cards and containers use md paddi

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the visual heaviness of Material Design's deeper shadows. Level 1 (Base): no shadow; surfaces sit flush on the cream background (#fbfaf6). Level 2 (Standard Card): box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15) inset—a subtle drop shadow paired with a faint inset highlight that creates a paper-like lift. Level 3 (Elevated/Modal): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a slightly deeper shadow for modals and overlays that demand visual prominence. The inset highlight (0 1px 0 rgba(255, 255, 255, 0.1

Shapes

The shape philosophy is 'Architectural Precision'—rounded corners are used sparingly and strategically to soften hard edges without introducing organic, playful curves. Buttons use full border-radius (9999px) to create pill-shaped affordances that signal interactivity; this is the only component using maximum rounding. Cards and containers use md (12px / 0.75rem) for a subtle, refined corner treatment that feels contemporary without being trendy. Input fields use DEFAULT (8px / 0.5rem) for a more utilitarian appearance, signaling functional form elements. Dividers and thin UI elements use sm (

Components

Action Elements Buttons are the primary interactive affordance. The button-primary uses a vivid electric blue background (#0000ee) with white text, 44px height, 12px 24px padding, and full border-radius (24px). On hover, the background shifts to #0000cc (a darker blue) with a 200ms transition using cubic-bezier(0.2, 0, 0, 1) for snappy feedback. The button-secondary inverts the color scheme: dark charcoal background (#2b2b29) with blue text (#0000ee), maintaining equal visual weight. Links are unstyled by default but inherit the primary color (#0000ee) with an underline on hover; apply text-decoration-thickness: 2px and text-underline-offset: 4px for clarity.

Containers & Surfaces Cards use surface-container background (#ede9e3) with md padding (24px) and md border-radius (12px).

Do's and Don'ts

**Do**

• Do use the electric blue (#0000ee) exclusively for interactive elements—buttons, links, focus states—to create a clear visual hierarchy and signal actionability.
• Do maintain the warm cream background (#fbfaf6) as the dominant surface; it grounds the interface in print aesthetics and reduces eye strain.
• Do apply md padding (24px) and lg spacing (40px) consistently; the rhythm of white-space is as important as the content itself.
• Do use Source Serif 4 for display headlines (64px+) to evoke editorial authority; pair with GT Standard for body text to ensure digital legibility.
• Do apply the inset highlight (0 1px 0 rgba(255, 255, 255, 0.15)) to all elevated cards; it reinforces the tactile, paper-like aesthetic.
• Do use full border-radius (24px) only on buttons; all other components use md (12px) or smaller for architectural precision.

**Don't**

• Don't use gradients, blur effects, or glassmorphism; the brand is grounded in print, not digital transparency.
• Don't apply shadows deeper than 0 3px 8px rgba(0, 0, 0, 0.15); excessive depth undermines the refined, editorial aesthetic.
• Don't use the secondary or tertiary colors as primary CTAs; reserve #0000ee for all high-priority interactive elements.
• Don't exceed 1280px container width; ultra-wide layouts dilute focus and contradict the editorial, print-inspired philosophy.
• Don't use sans-serif fonts for display headlines; the serif-sans pairing is fundamental to the brand's cultural authority.
• Don't apply rounded corners to dividers, borders, or thin UI elements; keep them sharp to maintain architectural precision.