Replit

Overview

Replit is an AI-powered collaborative development platform that democratizes software creation by eliminating setup friction and accelerating ideation-to-deployment cycles. The design system embodies "Efficient Minimalism"—a philosophy that strips away visual noise while maintaining warmth and approachability. The interface prioritizes clarity through generous whitespace (background: #FCFCFC, surface: #F0F1F2), a restrained neutral palette (foreground: #07080A, outline: #AFB1B3), and strategic accent colors that guide user attention to high-value actions. The emotional response is one of calm competence: users feel empowered to build without cognitive overload.

The brand voice is direct, encouraging, and technically credible without being pretentious. Replit speaks to both novices and experienced developers, using concrete language and avoiding jargon when possible. Example sentence in brand voice: "Turn your idea into a working app in minutes—no setup, no friction, just code." The visual identity reinforces this through IBM Plex Sans (a humanist sans-serif that balances professionalism with accessibility), consistent 150ms transitions on interactive elements, and a color hierarchy that reserves the vibrant blue (#0F87FF) and orange (#EC4E02) accents for moments that matter—CTAs, confirmations, and status indicators.

Colors

The Replit color system operates on a light-first, accent-driven model. The surface stack provides a subtle tonal hierarchy: surface (#FCFCFC) serves as the primary canvas, surface-dim (#F0F1F2) creates gentle separation for secondary containers, and surface-container-highest (#D2D4D6) anchors the darkest neutral layer. The on-surface palette (#07080A for primary text, #3D4047 for secondary text, #5C5F66 for tertiary) ensures WCAG AA contrast across all surfaces. Primary (#0F87FF) is the signature interaction color—reserved for primary CTAs, focus states, and active navigation elements. It appears in three intensities: primary-container (#B2D9FF) for backgrounds, primary (#0F87FF) for interactive elements, and primary-fixed-dim (#6BB5FF) for hover states. Secondary (#EC4E02, a warm orange-

Typography

The typography system uses IBM Plex Sans exclusively across all scales, creating a unified, professional voice. Display (60px, 500 weight, -0.02em tracking) anchors hero sections and major announcements; headline-lg (40px, 500 weight) structures primary page headings; headline-md (32px, 500 weight) organizes section breaks; title-lg (20px, 600 weight) emphasizes card titles and subsections; body-lg (18px, 400 weight, 28px line-height) handles long-form content with generous leading; body-md (16px, 400 weight, 24px line-height) is the default paragraph text; label-md (14px, 500 weight, 0.01em tracking) styles interactive labels and button text; label-sm (12px, 500 weight, 0.02em tracking) is reserved for metadata, timestamps, and secondary annotations. The weight progression (400 → 500 → 60

Layout

Replit uses a 12-column fluid grid with a max-width of 1280px, allowing responsive scaling from mobile (single column) to desktop (multi-column layouts). The spacing scale is semantic: unit (8px) is the baseline increment; xs (4px) and sm (12px) are used for tight component spacing; md (24px) is the default gutter between sections and card padding; lg (40px) separates major content blocks; xl (64px) anchors full-page margins and hero sections. Container max-width (1280px) prevents line-length from exceeding 80 characters on desktop, maintaining readability. White-space is intentional and generous—the hero section uses lg spacing above and below to create breathing room around the headline "What will you build?" and supporting copy. Cards and input fields use md padding (24px) internally, w

Elevation & Depth

Elevation in Replit is achieved through subtle shadows and surface color shifts rather than dramatic depth. Level 1 (Base): the default surface (#FCFCFC) with no shadow, establishing the primary plane. Level 2 (Cards & Inputs): surface-container-low (#F0F1F2) background with elevation.sm shadow (0 1px 2px rgba(0, 0, 0, 0.05)), creating gentle separation from the base. Level 3 (Hovered Cards & Modals): surface-container (#F0F1F2) or surface-container-high (#E4E5E6) background with elevation.md shadow (0 4px 8px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.05)), signaling interactivi

Shapes

Replit employs "Geometric Warmth"—a shape philosophy that balances precision with approachability. Buttons use full rounding (border-radius: 9999px) to create pill-shaped affordances that feel inviting and modern, signaling interactivity at a glance. Cards and containers use lg (16px) or xl (24px) rounding to soften corners without appearing overly playful; this radius is applied consistently across all card types, creating visual cohesion. Input fields use md (12px) rounding, slightly less than cards, to establish a subtle hierarchy—inputs feel contained and focused. Badges and small UI eleme

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses primary (#0F87FF) background with on-primary (#FFFFFF) text, 40px height, 12px vertical / 24px horizontal padding, and full rounding (9999px). On hover, the background shifts to inverse-primary (#6BB5FF) with a 150ms ease-out transition. Button-secondary uses a transparent background with on-surface text (#07080A), a 1px outline-variant border (#C0C3C4), and the same padding and rounding. Button-cta-accent (for high-priority actions like "Create account") uses secondary (#EC4E02) background with on-secondary (#FFFFFF) text, matching the primary button dimensions but with a warmer accent color. All buttons include a 150ms transition on background-color to provide tactile feedback.

Containers & Surfac

Do's and Don'ts

**Do**

• Do use primary (#0F87FF) exclusively for primary CTAs, focus states, and active navigation—never for decorative elements or backgrounds.
• Do apply md (24px) padding consistently to all cards and containers to maintain visual rhythm and breathing room.
• Do use full rounding (9999px) on all buttons to create clear affordances that signal interactivity.
• Do transition interactive elements over 150ms (ease-out) to provide smooth, responsive feedback without feeling sluggish.
• Do maintain at least 3:1 contrast between text and background colors across all surfaces to ensure WCAG AA compliance.
• Do use IBM Plex Sans at 500 weight for headlines and 400 weight for body text—avoid mixing typefaces.

**Don't**

• Don't use secondary (#EC4E02) or tertiary (#00A11B) for primary CTAs—reserve these for high-priority confirmations and status indicators only.
• Don't apply shadows larger than elevation.lg (0 8px 16px rgba(0, 0, 0, 0.08)) as they create visual clutter and reduce clarity.
• Don't use rounding smaller than sm (4px) on buttons or cards—sharp corners feel harsh and reduce approachability.
• Don't exceed 1280px container max-width on desktop to prevent line-length from becoming difficult to scan.
• Don't transition elements faster than 150ms or slower than 300ms—faster feels jarring, slower feels unresponsive.
• Don't mix IBM Plex Sans with other typefaces (e.g., Replit Diatype or ABC Diatype) in the main UI—reserve specialty fonts for code blocks and monospace contexts only.