Replit design system

What font does Replit use?

Replit’s website uses Replit Diatype for headings and body text. Replit Diatype is not on Google Fonts; the closest free match is Figtree.

Replit colour palette

Replit’s home page is light (#FAF6F1 background, #18191B text) and uses #181818 for its main actions. Its palette: #F6F5F4, #FAF6F1, #FFFFFF, #F3F2EE, #FAF5F0, #FFB199.

• #F6F5F4
  41.2% · backgrounds
• #FAF6F1
  32.1% · backgrounds
• #FFFFFF
  6.9% · backgrounds
• #F3F2EE
  5.6% · backgrounds
• #FAF5F0
  3.8% · backgrounds
• #FFB199
  2.4% · backgrounds, drawings
• #312E2E
  1.3% · text
• #F9AA8B
  0.9% · backgrounds
• #2C3328
  0.9% · backgrounds
• #EDEDED
  0.9% · backgrounds

Type scale

Each size the page sets text in, with its weight and line height. Replit’s largest type is 68.92px at weight 400.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 48px, 64px.

Corner radii: 4px, 6px, 7px, 8px, 12px, 16px, pill. 2 shadow levels measured.

What makes Replit look like Replit

Almost entirely neutral: 96% of the page is painted in #F6F5F4 and #FAF6F1.

#FFB199 is an accent: 2.4% of the page, as small fills such as buttons and badges. Keep it to small areas.

#F9AA8B is an accent: 0.9% of the page, as small fills such as buttons and badges. Keep it to small areas.

The largest type (68.92px Replit Diatype) is regular weight, not bold (400), tracked to -0.06em.

Replit DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Replit’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Replit’s product, so use your own name, words and images.

Download Replit DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Replit’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap");

:root {
  --color-background: #FAF6F1; /* Background */
  --color-surface: #FFFFFF; /* Surface */
  --color-text: #18191B; /* Text */
  --color-text-muted: #73767F; /* Text muted */
  --color-border: #DBD9D3; /* Border */
  --color-action: #181818; /* Action */
  --color-on-action: #FFFFFF; /* On action */
  --color-negative: #FF3C00; /* Negative */
  --color-warning: #F9AA8B; /* Warning */
  --color-f6f5f4: #F6F5F4; /* 41.2% of the page, as fills */
  --color-f3f2ee: #F3F2EE; /* 5.6% of the page, as fills */
  --color-faf5f0: #FAF5F0; /* 3.8% of the page, as fills */
  --color-ffb199: #FFB199; /* 2.4% of the page, as fills */
  --color-2c3328: #2C3328; /* 0.9% of the page, as fills */
  --color-ededed: #EDEDED; /* 0.9% of the page, as fills */
  --color-dbd4cf: #DBD4CF; /* 0.8% of the page, as fills */
  --color-ff764d: #FF764D; /* 0.8% of the page, as fills */
  --color-191818: #191818; /* 0.5% of the page, as drawings */
  --font-body: "Replit Diatype", "Figtree", sans-serif; /* Replit Diatype on the site; Figtree renders */
  --font-code: "Replit Diatype Mono", "JetBrains Mono", monospace; /* Replit Diatype Mono on the site; JetBrains Mono renders */
  --type-display-1: 68.92px; /* Display 1, weight 400 */
  --type-display-1-leading: 68.92px;
  --type-display-1-tracking: -0.06em;
  --type-display-2: 64px; /* Display 2, weight 400 */
  --type-display-2-leading: 64px;
  --type-display-2-tracking: -0.06em;
  --type-display-3: 56px; /* Display 3, weight 400 */
  --type-display-3-leading: 56px;
  --type-display-3-tracking: -0.04em;
  --type-display-4: 48px; /* Display 4, weight 400 */
  --type-display-4-leading: 48px;
  --type-display-4-tracking: -0.06em;
  --type-display-5: 40px; /* Display 5, weight 400 */
  --type-display-5-leading: 44px;
  --type-display-5-tracking: -0.03em;
  --type-display-6: 36px; /* Display 6, weight 400 */
  --type-display-6-leading: 36px;
  --type-display-6-tracking: -0.03em;
  --type-headline-1: 32px; /* Headline 1, weight 400 */
  --type-headline-1-leading: 32px;
  --type-headline-1-tracking: -0.04em;
  --type-headline-2: 31.78px; /* Headline 2, weight 400 */
  --type-headline-2-leading: 31.78px;
  --type-headline-2-tracking: -0.04em;
  --type-headline-3: 28px; /* Headline 3, weight 400 */
  --type-headline-3-leading: 23.24px;
  --type-headline-3-tracking: -0.04em;
  --type-headline-4: 26px; /* Headline 4, weight 400 */
  --type-headline-4-leading: 31.2px;
  --type-headline-4-tracking: -0.03em;
  --type-title-large: 20px; /* Title Large, weight 460 */
  --type-title-large-leading: 28px;
  --type-title-small: 18px; /* Title Small, weight 400 */
  --type-title-small-leading: 27px;
  --type-body-1: 17px; /* Body 1, weight 400 */
  --type-body-1-leading: 17.85px;
  --type-body-1-tracking: -0.04em;
  --type-body-2: 16px; /* Body 2, weight 400 */
  --type-body-2-leading: 17.6px;

How this was measured

PikSpec’s scanner read the replit.com home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Replit is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Replit.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.