№ replit-com

Replit

Warm, muted coral and terracotta—clean, open type—expansive, airy digital workshop.

Ecosystem Indexminimalism swiss developer tools ailight

The page prioritizes a clean, functional aesthetic with a focus on user action. The layout is structured around clear calls to action for different development workflows, presented with a restrained color palette and ample white space. · developer tools, coding platform, online compiler, collaboration, ide, replit, build online, code playground

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · warm · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#fc4d18
OKLCHoklch(66.3% 0.219 36)
RoleDominant
find sites →
Hex#821f01
OKLCHoklch(40.1% 0.139 35)
RoleSurface
find sites →
Hex#fc946c
OKLCHoklch(76.8% 0.137 42)
RoleInk
find sites →
Hex#828282
OKLCHoklch(60.7% 0.000 90)
RoleAccent
find sites →
Hex#c4bcbc
OKLCHoklch(80.2% 0.009 17)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	ABC Diatype Plus Variable	64px	400	1	-3.84px	Aa Bb Cc
h2	ABC Diatype Plus Variable	60px	400	0.89	-3px	Aa Bb Cc
h3	ABC Diatype Plus Variable	26px	400	1.2	-0.78px	Aa Bb Cc
body	IBM Plex Sans	14px	400	1.4	0	Aa Bb Cc
button	ABC Diatype	13px	400	1.4	0	Aa Bb Cc

Spacing scale

4px

48px

120px

Radius scale

0px

6px

8px

12px

20px

24px

28px

40px

Container

Max content width 1920px

Export

:root {
  --color-dominant: #fc4d18;
  --color-surface: #821f01;
  --color-ink: #fc946c;
  --color-accent: #828282;
  --color-detail: #c4bcbc;
}

/* CSS variables exposed by source */
:root {
  --brand-surface-color--600: hsl(14deg, 100%, 68.5%);
  --text-input-text-color--100: hsl(222deg, 5%, 52.6%);
  --text-input-text-color--1100: hsl(222deg, 5%, 85.15%);
  --brand-surface-color-600: hsl(14deg, 100%, 42.50000000000001%);
  --brand-off-white-surface-color-600: hsl(33deg, 47%, 87.30767525%);
  --shadow-overlay: 0px 8px 16px -4px #00000014, 0px 24px 48px -12px #0000001a;
  --font-family-default: "IBM Plex Sans", sans-serif;
  --accent-brown-dimmer: #DEA483;
  --primary-text-color-800: hsl(210deg, 100%, 88%);
  --brand-surface-color-400: hsl(14deg, 100%, 45.49999999999999%);
  --brand-off-white-text-color--300: hsl(222deg, 5%, 58.900000000000006%);
  --foreground-dimmest: #5C5F66;
  --primary-text-color-700: hsl(210deg, 100%, 89.5%);
  --brand-off-white-text-color--1000: hsl(222deg, 5%, 81.65%);
  --brand-inverted-text-color-200: hsl(11deg, 50%, 40%);
  --border-radius-8: 8px;
  --brand-surface-color-000: hsl(14deg, 100%, 53.5%);
  --brand-off-white-surface-color-400: hsl(33deg, 47%, 90.87260515%);
  --brand-background: #f3f3f3;
  --brand-text-color-300: hsl(14deg, 100%, 95.5%);
  --primary-inverted-surface-color-1100: hsl(210deg, 66.85%, 80.853729%);
  --accent-grey-default: #898989;
  --primary-inverted-text-color-1200: hsl(210deg, 40%, 34.25%);
  --brand-off-white-text-color--1100: hsl(222deg, 5%, 85.15%);
  --text-input-text-color-100: hsl(222deg, 5%, 46.3%);
  --primary-inverted-surface-color-300: hsl(210deg, 38.05%, 92.9707458%);
  --space-24: 24px;
  --brand-surface-color--900: hsl(14deg, 100%, 74.5%);
  --primary-inverted-text-color-1600: hsl(210deg, 40%, 21.25%);
  --brand-off-white-text-color--1400: hsl(222deg, 5%, 95.65%);
  --brand-surface-color-900: hsl(14deg, 100%, 38%);
  --primary-inverted-text-color-1500: hsl(210deg, 40%, 24.499999999999993%);
  --brand-surface-color--100: hsl(14deg, 100%, 56.5%);
  --brand-inverted-surface-color-1500: hsl(16deg, 50%, 72.70757565%);
  --brand-surface-color-300: hsl(14deg, 100%, 47%);
  --font-size-header-default: 24px;
  --accent-blue-dimmest: #B2D9FF;
  --brand-text-color-500: hsl(14deg, 100%, 92.5%);
  --primary-text-color-1400: hsl(210deg, 100%, 78.25%);
  --brand-inverted-text-color-600: hsl(11deg, 50%, 34.4%);
  --brand-surface-color--200: hsl(14deg, 100%, 59.5%);
  --shadow-raised: 0px 2px 4px #0000000a, 0px 8px 16px -4px #0000000f;
  --font-size-subhead-big: 20px;
  --brand-off-white-text-color-200: hsl(222deg, 5%, 43.15%);
  --brand-inverted-surface-color-900: hsl(16deg, 50%, 81.81392535%);
  --font-size-header-big: 32px;
  --primary-inverted-surface-color-1000: hsl(210deg, 63.25%, 82.3683561%);
  --brand-surface-color--1400: hsl(14deg, 100%, 84.5%);
  --accent-primary-stronger: #005CB8;
  --primary-inverted-text-color--800: hsl(210deg, 40%, 99.25%);
  --accent-grey-stronger: #616161;
  --brand-off-white-text-color--1200: hsl(222deg, 5%, 88.65%);
  --brand-inverted-text-color-500: hsl(11deg, 50%, 35.8%);
  --primary-surface-color-1600: hsl(210deg, 100%, 27.937000000000012%);
  --primary-inverted-text-color-100: hsl(210deg, 40%, 70%);
  --accent-primary-dimmer: #6BB5FF;
  --brand-off-white-surface-color-200: hsl(33deg, 47%, 94.43753505%);
  --primary-text-color-500: hsl(210deg, 100%, 92.5%);
  --space-4: 4px;
  --brand-text-color-600: hsl(14deg, 100%, 91%);
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Replit.
Reference design system (extracted from the live site):
- Palette: #fc4d18, #821f01, #fc946c, #828282, #c4bcbc
- Typefaces: ABC Diatype Plus Variable, IBM Plex Sans, ABC Diatype
- Macrostructure: Ecosystem Index
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/replit-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

ABC Diatype Plus Variable

64px

400

-3.84px

Aa Bb Cc

ABC Diatype Plus Variable

60px

400

0.89

-3px

Aa Bb Cc

ABC Diatype Plus Variable

26px

400

1.2

-0.78px

Aa Bb Cc

body

IBM Plex Sans

14px

400

1.4

Aa Bb Cc

button

ABC Diatype

13px

400

1.4

Aa Bb Cc

:root { --color-dominant: #fc4d18; --color-surface: #821f01; --color-ink: #fc946c; --color-accent: #828282; --color-detail: #c4bcbc; } /* CSS variables exposed by source */ :root { --brand-surface-color--600: hsl(14deg, 100%, 68.5%); --text-input-text-color--100: hsl(222deg, 5%, 52.6%); --text-input-text-color--1100: hsl(222deg, 5%, 85.15%); --brand-surface-color-600: hsl(14deg, 100%, 42.50000000000001%); --brand-off-white-surface-color-600: hsl(33deg, 47%, 87.30767525%); --shadow-overlay: 0px 8px 16px -4px #00000014, 0px 24px 48px -12px #0000001a; --font-family-default: "IBM Plex Sans", sans-serif; --accent-brown-dimmer: #DEA483; --primary-text-color-800: hsl(210deg, 100%, 88%); --brand-surface-color-400: hsl(14deg, 100%, 45.49999999999999%); --brand-off-white-text-color--300: hsl(222deg, 5%, 58.900000000000006%); --foreground-dimmest: #5C5F66; --primary-text-color-700: hsl(210deg, 100%, 89.5%); --brand-off-white-text-color--1000: hsl(222deg, 5%, 81.65%); --brand-inverted-text-color-200: hsl(11deg, 50%, 40%); --border-radius-8: 8px; --brand-surface-color-000: hsl(14deg, 100%, 53.5%); --brand-off-white-surface-color-400: hsl(33deg, 47%, 90.87260515%); --brand-background: #f3f3f3; --brand-text-color-300: hsl(14deg, 100%, 95.5%); --primary-inverted-surface-color-1100: hsl(210deg, 66.85%, 80.853729%); --accent-grey-default: #898989; --primary-inverted-text-color-1200: hsl(210deg, 40%, 34.25%); --brand-off-white-text-color--1100: hsl(222deg, 5%, 85.15%); --text-input-text-color-100: hsl(222deg, 5%, 46.3%); --primary-inverted-surface-color-300: hsl(210deg, 38.05%, 92.9707458%); --space-24: 24px; --brand-surface-color--900: hsl(14deg, 100%, 74.5%); --primary-inverted-text-color-1600: hsl(210deg, 40%, 21.25%); --brand-off-white-text-color--1400: hsl(222deg, 5%, 95.65%); --brand-surface-color-900: hsl(14deg, 100%, 38%); --primary-inverted-text-color-1500: hsl(210deg, 40%, 24.499999999999993%); --brand-surface-color--100: hsl(14deg, 100%, 56.5%); --brand-inverted-surface-color-1500: hsl(16deg, 50%, 72.70757565%); --brand-surface-color-300: hsl(14deg, 100%, 47%); --font-size-header-default: 24px; --accent-blue-dimmest: #B2D9FF; --brand-text-color-500: hsl(14deg, 100%, 92.5%); --primary-text-color-1400: hsl(210deg, 100%, 78.25%); --brand-inverted-text-color-600: hsl(11deg, 50%, 34.4%); --brand-surface-color--200: hsl(14deg, 100%, 59.5%); --shadow-raised: 0px 2px 4px #0000000a, 0px 8px 16px -4px #0000000f; --font-size-subhead-big: 20px; --brand-off-white-text-color-200: hsl(222deg, 5%, 43.15%); --brand-inverted-surface-color-900: hsl(16deg, 50%, 81.81392535%); --font-size-header-big: 32px; --primary-inverted-surface-color-1000: hsl(210deg, 63.25%, 82.3683561%); --brand-surface-color--1400: hsl(14deg, 100%, 84.5%); --accent-primary-stronger: #005CB8; --primary-inverted-text-color--800: hsl(210deg, 40%, 99.25%); --accent-grey-stronger: #616161; --brand-off-white-text-color--1200: hsl(222deg, 5%, 88.65%); --brand-inverted-text-color-500: hsl(11deg, 50%, 35.8%); --primary-surface-color-1600: hsl(210deg, 100%, 27.937000000000012%); --primary-inverted-text-color-100: hsl(210deg, 40%, 70%); --accent-primary-dimmer: #6BB5FF; --brand-off-white-surface-color-200: hsl(33deg, 47%, 94.43753505%); --primary-text-color-500: hsl(210deg, 100%, 92.5%); --space-4: 4px; --brand-text-color-600: hsl(14deg, 100%, 91%); }

Build a landing page in the visual style of Replit. Reference design system (extracted from the live site): - Palette: #fc4d18, #821f01, #fc946c, #828282, #c4bcbc - Typefaces: ABC Diatype Plus Variable, IBM Plex Sans, ABC Diatype - Macrostructure: Ecosystem Index Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/replit-com