Home
DESIGN.mdStar on GitHub

What will you build?

Replit is the browser IDE where you write, run, and ship software from anywhere — no setup, just a tab.

Signature — Workspace
main.py
1def greet(name):
2 return f"Hello, {name}!"
3
4names = ["Ada", "Linus", "Grace"]
5
6for n in names:
7 print(greet(n))
8
9print(f"\n{len(names)} greetings sent ✨")
Console
Press Run to execute main.py
Hit Run — the console streams the program's stdout line-by-line, then the exit status (like a real Replit run).
Colors
Brand
orange#FF3C00Run, CTAs, mark
peach#FFB199Accent tint
coral#F45D48Secondary accent
cyan#49CCF9Syntax · funcs
Surfaces — warm
cream#FAF6F1Marketing page
ink#191818Dark page
editor#1B1A19IDE panel
warm-dark#312E2ERaised
Typography — Diatype ≈ Inter · Mono ≈ JetBrains · Pixel ≈ Silkscreen
display
Inter · 800
What will you build?
56px800
body
Inter · 400
Write, run, and deploy from the browser — no setup required.
15px400
mono / code
JetBrains Mono
print(greet(n)) # main.py
13pxmono
pixel / label
Silkscreen
CONSOLE
11pxpixel
Components
Buttons
Syntax tokens
def / return print() "string" len()
Guardrails
DO
Keep the mark orange #FF3C00 (fixed); let the wordmark adapt to the theme.
Keep the marketing canvas warm cream; keep the IDE/workspace panel dark on both themes.
Use orange for the Run button and primary actions — it's the one accent.
Set all code, filenames, and console output in the mono face.
Keep dark surfaces warm near-black #191818 — never a cool blue-black.
DON'T
Don't render the IDE panel light — the workspace is a dark cockpit.
Don't introduce a second saturated accent competing with orange.
Don't set code or console text in a proportional font.
Don't cool the neutrals — Replit's grays and darks are warm.
Don't recolor the orange mark.