Skip to content

Replit Design System

Replit's stark white canvas, one variable typeface (ABC Diatype Plus) and tight stepped radii, with no accent hue, as a DESIGN.md for React and AI tools.

Get ProDownload DESIGN.md
Primary color
#ff3c00
Typeface
ABC Diatype Plus Variable
Shape
Sharp
Base radius
20px
Colors
8
Type tokens
12
Components
8
Spacing values
7

About Replit DESIGN.md

Curated by Dov Azencot, updated May 17, 2026. Source replit.com (opens in a new tab).

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.

What makes it distinct

4 highlights

  1. No brand accent colorThe system relies on pure white and neutral tones, keeping visual hierarchy uncluttered and focused.
  2. Lightweight display typographyWeight 300/400 headlines give a breezy feel, contrasting with heavy fintech styles.
  3. Step‑ladder corner radii4‑8px radii create subtle depth without pill shapes, reinforcing a precise UI language.
  4. Absence of monospaceText remains in the variable sans‑serif, emphasizing readability over code‑like styling.

Live at replit.com

Replit in production, as captured. Scroll the window to see the whole page.

Visit replit.com (opens in a new tab)
Replit's website at replit.com

8 colors

Replit's system runs on #ff3c00 as its primary voltage, used in 1 of 8 components. Type is set in ABC Diatype Plus Variable across 12 tokens from 12px to 60px, weights 400–500. Shape language is sharp — components average 0px corner radius, favoring crisp rectangles.

Surface

Page and card backgrounds · 3

Text

Headlines, body, captions · 2

Borders & Hairlines

Dividers, outlines, rules · 1

Other

Specialty colors · 2

12 type tokens

Set in ABC Diatype Plus Variable across 12 tokens, from 12px to 60px, weights 400–500. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.

  • display-xl60px · weight 400 · lh 53.4px · tracking -3pxThe quick brown fox jumps over the lazy dog
  • display-lg28px · weight 400 · lh 23.24px · tracking -1.12pxThe quick brown fox jumps over the lazy dog
  • display-md26px · weight 400 · lh 31.2px · tracking -0.78pxThe quick brown fox jumps over the lazy dog
  • heading-md20px · weight 500 · lh 28pxThe quick brown fox jumps over the lazy dog
  • heading-sm20px · weight 400 · lh 20px · tracking -0.4pxThe quick brown fox jumps over the lazy dog
  • body-lg16px · weight 500 · lh 22pxThe quick brown fox jumps over the lazy dog
  • body-md16px · weight 400 · lh 22.4px · tracking -0.48pxThe quick brown fox jumps over the lazy dog
  • body-sm14px · weight 400 · lh 22.4pxThe quick brown fox jumps over the lazy dog
  • label-md14px · weight 400 · lh 22.4pxThe quick brown fox jumps over the lazy dog
  • caption12px · weight 400 · lh 18pxThe quick brown fox jumps over the lazy dog
  • button-md14px · weight 500 · lh normal · tracking -0.28pxThe quick brown fox jumps over the lazy dog
  • nav-link14px · weight 400 · lh normalThe quick brown fox jumps over the lazy dog

Radii and spacing

5 corner radii and 7 spacing values. Shape language: sharp, on a 20px base radius.

Radii5

  • none0px
  • xs6px
  • sm16px
  • md20px
  • lg40px

Spacing7

  • xxs4px
  • xs8px
  • sm12px
  • md16px
  • lg24px
  • xl32px
  • 2xl48px

8 components

Each rendered from its tokens (color, type, radius, padding) on Replit's own canvas.

  • Button Primary
    Button Primarybutton-primary
  • Button Secondary
    Button Secondarybutton-secondary
  • Top Nav
    Top Navtop-nav
  • Hero Heading
    Hero Headinghero-heading
  • Body Paragraph
    Body Paragraphbody-paragraph
  • Card
    Cardcard
  • Type here…
    Text Inputtext-input
  • Nav Link
    Nav Linknav-link

The system, in use

Replit's tokens on the kind of product it builds.

Marketing heroThe homepage: its nav, a headline and the main call to action.
Replit
Get started

Plan, build and ship in one place

Bring your team's work together, from the first idea to the final release.

Get startedBook a demo
ReplitA
Active users12,489
Projects342
Tasks done8,921
Avg. response1.8h
ActivityLast 30 days

Replit design system FAQ

Replit's tokens, its components and how to use this DESIGN.md in your project.

What are the color tokens in the Replit DESIGN.md?

Replit's DESIGN.md has 8 color tokens: ink (#0e0e0f), ink-muted (#36373b), canvas (#ffffff), surface-1 (#f1f0ee), surface-2 (#dbd9d3), hairline (#76716f) and 2 more. Every value is a quoted hex you can copy.

What is Replit's primary color hex code?

The color token `secondary-1` is #ff3c00, used by 1 component. The surface behind it is `canvas` (#ffffff).

How do I use Replit's colors in Tailwind CSS?

Map the tokens to your CSS variables: `secondary-1` (#ff3c00) to `--primary`, `canvas` (#ffffff) to `--background`, `ink` (#0e0e0f) to `--foreground`. shadcn/ui's Tailwind setup maps them to classes such as `bg-primary` and `text-foreground`, so they then use Replit's palette.

how-does-replit-s-canvas-color-compare-t

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.

Related reading

Specs, directories and component libraries that pair with this design system.

Use Replit in your project

One machine-readable file. Drop it into Claude Code, Cursor, VS Code or any AI tool that reads DESIGN.md.

Download DESIGN.md

  1. Download the DESIGN.md

    One machine-readable file: every color, type, radius, spacing, and component token of Replit.

  2. Feed it to your AI tool

    Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Replit's visual language.

  3. Reference the tokens directly

    Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.

Read the full DESIGN.md overview, rationale, do’s and don’ts

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.

More systems like this

Adobe, Boursorama, Bun and 23 more in Design & Creative Tools: each brand's colors, type and components in one file your AI agent builds from.

All 27 in Design & Creative Tools

Build it with Pro

The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

  • How many people can use the license.Seats: 1 seat
  • Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
  • Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
  • Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
  • Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
  • Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
  • Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
  • Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
  • WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
  • One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
  • React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
  • From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
  • Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
  • Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
  • Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
  • From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
  • Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
  • Restyle every component and block at once: 8 styles, 7 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Priority requests are answered first.Support: Priority

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

  • How many people can use the license.Seats: Unlimited seats
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

4.9 out of 5 from 150+ developers

Your system, built for you

Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.

Get Pro
  • Cancel anytime
  • Keep what you've shipped