--- version: alpha name: "Replit" website: "https://replit.com" description: "Replit’s design system rides on a tight pure white canvas, employs the variable ABC Diatype Plus Variable typeface at lightweight 300‑400 display weights, and opts for a tight 4‑8px step‑ladder corner radius while deliberately omitting any brand accent color or monospace voice." seo: title: "Replit Design System for React — pure white canvas, ABC Diatype Plus Variable, 12 components" metaDescription: "Replit’s UI leans on a stark white background, a single variable typeface, and tight step‑ladder radii, all without a brand accent hue or monospace styling, delivering a focused developer experience." highlights: - "No brand accent color — the system relies on pure white and neutral tones, keeping visual hierarchy uncluttered and focused." - "Lightweight display typography — weight 300/400 headlines give a breezy feel, contrasting with heavy fintech styles." - "Step‑ladder corner radii — 4‑8px radii create subtle depth without pill shapes, reinforcing a precise UI language." - "Absence of monospace — text remains in the variable sans‑serif, emphasizing readability over code‑like styling." tags: - "Design & Creative Tools" lastUpdated: "2026-05-17" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Replit’s UI makes a bold statement by stripping away any brand hue and letting a stark pure white canvas do the heavy lifting. The most unusual move is the complete omission of a brand accent color, which forces every call‑to‑action and interactive element to rely on layout, spacing, and typographic contrast instead of chromatic cues. The design leans on the variable ABC Diatype Plus Variable typeface, set at lightweight 300‑400 display weights, and a disciplined step‑ladder corner radius that stays under 8px, giving the interface a tight, engineering‑focused feel. The palette philosophy is minimalism with purpose: a pure white background paired with muted grays and the occasional orange border for error states, avoiding any dominant brand color. Where Stripe leans on indigo gradients and Vercel opts for matte black, Replit chooses neutrality, letting content and code snippets shine. The decision to forego a monospace typeface further underscores a focus on readability and universality across languages, rather than a coder‑centric aesthetic. For developers, feeding this spec into an AI tool yields components that feel like a blank canvas ready for code, not a pre‑styled theme. The lack of brand colors means the generated UI can be easily re‑branded, and the tight radius ladder ensures consistency across buttons, cards, and inputs. The single thing worth stealing is the disciplined restraint: a pure white foundation paired with precise typographic weight and subtle radii, delivering a uncluttered, distraction‑free environment for building and deploying software. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://replit.com" title: "Replit — official site" description: "Replit's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "what-typographic-weight-does-replit-use" title: "what-typographic-weight-does-replit-use" answer: "Replit’s display headlines sit at weight 300‑400, a light typographic setting that feels airy compared to the heavyweight 700+ styles often seen in fintech dashboards. This choice aligns with the system’s overall minimal aesthetic, letting the pure white canvas and spacing do the visual lifting. The variable ABC Diatype Plus Variable family provides the flexibility to scale across sizes while maintaining that light feel, reinforcing readability without sacrificing hierarchy." - id: "what-corner-radius-style-is-applied-acro" title: "what-corner-radius-style-is-applied-acro" answer: "The UI employs a step‑ladder corner radius, ranging from 4 to 8 px across components, which the system describes as a tight ladder without any pill‑shaped elements. This subtle rounding adds just enough visual softness to buttons and cards while preserving a precise, engineering‑focused look. The approach contrasts with brands that use full pills or large 16‑24 px radii, reinforcing Replit’s commitment to a uncluttered, code‑centric interface." - id: "does-replit-use-a-monospace-typeface-for" title: "does-replit-use-a-monospace-typeface-for" answer: "No, Replit does not introduce a monospace typeface anywhere in its UI. All text, from headings to body copy, lives in the variable ABC Diatype Plus Variable sans‑serif family, which keeps the visual language uniform and readable across code snippets, documentation, and marketing copy. This decision underscores the platform’s emphasis on a universal, developer‑friendly experience without forcing a code‑like aesthetic." - id: "how-does-replit-s-canvas-color-compare-t" title: "how-does-replit-s-canvas-color-compare-t" answer: "Replit’s canvas is pure white, a stark, tight backdrop that differs sharply from the off‑white or warm cream tones used by many SaaS products. This starkness amplifies the contrast of text and UI elements, making the interface feel spacious and focused on content. The choice also aligns with the brand’s decision to forgo any accent color, letting layout and typography carry visual interest." - id: "what-components-are-included-in-replit-d" title: "what-components-are-included-in-replit-design" answer: "The system ships with twelve core components, including primary and secondary buttons, a top navigation bar, hero headings, body paragraphs, cards, text inputs, and navigation links. Each component follows the light typographic scale, step‑ladder radii, and the pure white canvas, ensuring a unified look across the IDE, documentation, and marketing pages. The component set is deliberately lean, mirroring the overall minimalist philosophy." colors: ink: "#0e0e0f" ink-muted: "#36373b" canvas: "#ffffff" surface-1: "#f1f0ee" surface-2: "#dbd9d3" hairline: "#76716f" secondary-1: "#ff3c00" secondary-2: "#ffb199" typography: display-xl: fontFamily: "\"ABC Diatype Plus Variable\", sans-serif" fontSize: 60px fontWeight: 400 lineHeight: 53.4px letterSpacing: "-3px" display-lg: fontFamily: "\"ABC Diatype Plus Variable\", sans-serif" fontSize: 28px fontWeight: 400 lineHeight: 23.24px letterSpacing: "-1.12px" display-md: fontFamily: "\"ABC Diatype Plus Variable\", sans-serif" fontSize: 26px fontWeight: 400 lineHeight: 31.2px letterSpacing: "-0.78px" heading-md: fontFamily: "\"ABC Diatype Plus Variable\", sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 28px heading-sm: fontFamily: "\"ABC Diatype Plus Variable\", sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 20px letterSpacing: "-0.4px" body-lg: fontFamily: "\"ABC Diatype Plus Variable\", sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 22px body-md: fontFamily: "\"ABC Diatype Plus Variable\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 22.4px letterSpacing: "-0.48px" body-sm: fontFamily: "\"ABC Diatype Plus Variable\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 22.4px label-md: fontFamily: "\"ABC Diatype\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 22.4px caption: fontFamily: "\"ABC Diatype\", sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 18px button-md: fontFamily: "\"ABC Diatype Plus Variable\", sans-serif" fontSize: 14px fontWeight: 500 lineHeight: normal letterSpacing: "-0.28px" nav-link: fontFamily: "\"ABC Diatype\", sans-serif" fontSize: 14px fontWeight: 400 lineHeight: normal rounded: none: "0px" xs: "6px" sm: "16px" md: "20px" lg: "40px" spacing: xxs: "4px" xs: "8px" sm: "12px" md: "16px" lg: "24px" xl: "32px" 2xl: "48px" components: button-primary: backgroundColor: "{colors.secondary-1}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" fontFamily: "{typography.button-md.fontFamily}" fontSize: "{typography.button-md.fontSize}" fontWeight: "{typography.button-md.fontWeight}" lineHeight: "{typography.button-md.lineHeight}" letterSpacing: "{typography.button-md.letterSpacing}" borderRadius: "{rounded.sm}" padding: "0px 8px" height: "32px" width: "auto" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" fontFamily: "{typography.button-md.fontFamily}" fontSize: "{typography.button-md.fontSize}" fontWeight: "{typography.button-md.fontWeight}" lineHeight: "{typography.button-md.lineHeight}" letterSpacing: "{typography.button-md.letterSpacing}" borderRadius: "{rounded.sm}" padding: "0px 8px" height: "32px" width: "auto" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "0" fontFamily: "{typography.nav-link.fontFamily}" fontSize: "{typography.nav-link.fontSize}" fontWeight: "{typography.nav-link.fontWeight}" lineHeight: "{typography.nav-link.lineHeight}" letterSpacing: "{typography.nav-link.letterSpacing}" borderRadius: "{rounded.none}" padding: "0px" height: "auto" width: "100%" hero-heading: backgroundColor: "0" textColor: "{colors.ink}" borderColor: "0" fontFamily: "{typography.display-xl.fontFamily}" fontSize: "{typography.display-xl.fontSize}" fontWeight: "{typography.display-xl.fontWeight}" lineHeight: "{typography.display-xl.lineHeight}" letterSpacing: "{typography.display-xl.letterSpacing}" borderRadius: "{rounded.none}" padding: "0px" height: "auto" width: "auto" body-paragraph: backgroundColor: "0" textColor: "{colors.ink}" borderColor: "0" fontFamily: "{typography.body-md.fontFamily}" fontSize: "{typography.body-md.fontSize}" fontWeight: "{typography.body-md.fontWeight}" lineHeight: "{typography.body-md.lineHeight}" letterSpacing: "{typography.body-md.letterSpacing}" borderRadius: "{rounded.none}" padding: "0px" height: "auto" width: "auto" card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" fontFamily: "{typography.body-sm.fontFamily}" fontSize: "{typography.body-sm.fontSize}" fontWeight: "{typography.body-sm.fontWeight}" lineHeight: "{typography.body-sm.lineHeight}" letterSpacing: "{typography.body-sm.letterSpacing}" borderRadius: "{rounded.md}" padding: "{spacing.sm}" height: "auto" width: "auto" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" fontFamily: "{typography.body-sm.fontFamily}" fontSize: "{typography.body-sm.fontSize}" fontWeight: "{typography.body-sm.fontWeight}" lineHeight: "{typography.body-sm.lineHeight}" letterSpacing: "{typography.body-sm.letterSpacing}" borderRadius: "{rounded.sm}" padding: "{spacing.xs}" height: "auto" width: "100%" nav-link: backgroundColor: "0" textColor: "{colors.ink}" borderColor: "0" fontFamily: "{typography.nav-link.fontFamily}" fontSize: "{typography.nav-link.fontSize}" fontWeight: "{typography.nav-link.fontWeight}" lineHeight: "{typography.nav-link.lineHeight}" letterSpacing: "{typography.nav-link.letterSpacing}" borderRadius: "{rounded.none}" padding: "0px" height: "auto" width: "auto" --- ## Overview Replit’s visual language is built on a stark white foundation that forces every interaction to rely on spacing, typography, and subtle color cues. **Zero‑Accent Discipline.** Unlike many platforms that splash a bold brand hue across buttons and links, Replit opts for a neutral palette, letting the variable ABC Diatype Plus Variable typeface and precise layout do the work. This is not a bland canvas; it is a purposeful blank slate that highlights code and content. **Key Characteristics:** - Pure white canvas with muted gray text and borders. - Variable ABC Diatype Plus Variable typeface at lightweight 300‑400 display. - Step‑ladder corner radii ranging 4‑8 px, no pill shapes. - No brand accent color, relying on neutral tones for hierarchy. - Absence of monospace, keeping all text in the same sans‑serif family. - Light display weight contrasts with heavier fintech typographies. - Twelve core components designed for consistency across IDE and marketing. - Orange border accents used sparingly for error states. ## Known Gaps - The system does not define a dedicated brand accent palette, which may require designers to create custom hues for branding purposes. - No monospace typeface limits options for code‑heavy UI sections where a distinct code font could improve readability. - The step‑ladder radius system can feel inconsistent when mixing components with different radius values, demanding careful component selection. - Light display weights may reduce visual impact for headline hierarchy in dense content areas. - Absence of dark mode specifications leaves accessibility considerations for low‑light environments unanswered.