Home
DESIGN.mdStar on GitHub
Copied!

Your fastest path to
production

Deploy apps and agents with zero ops. Intuitive hosting and private networking for web services, Postgres databases, cron jobs, workflows, and static sites.

Zero DevOps Auto-scaling Preview envs Managed Postgres
Colors
Brand Purple
purple-600
#8a05ff
Primary CTA, links, active
purple-500
#9b52fb
Hover state
purple-200
#d1b8ff
Dark mode secondary text
purple-100
#e7dbff
Badge bg, light chips
Dark Mode Surfaces (Purple)
purple-900
#1c0037
Hero bg, deepest surface
purple-800
#2a0052
Deep dark surface
purple-700
#48008c
Dark mode card/section bg
gray-900
#0d0d0d
Dark mode page bg
Success / Live — Green (semantic only)
green-400
#00db7c
Live badge, success state
green-300
#1efe9d
Dark hero gradient end
green-500
#009e7a
Success on light bg
green-800
#001f16
Hero gradient start (dark)
Typography
display
Your fastest path to production
Roobert→DM Sans 48px 700 lh 1.05
h1
Deploy apps and agents with zero ops
Roobert→DM Sans 28px 600
h2
Full-stack previews for every pull request
PPNeueMontreal→DM Sans 20px 600
body
Intuitive hosting and private networking for web services, Postgres databases, cron jobs, workflows, and static sites.
PPNeueMontreal→DM Sans 16px 400
label
Web Service · Oregon · Starter
PPNeueMontreal→DM Sans 13px 500
mono
render deploy --region oregon
PPNeueMontrealMono→JetBrains Mono 13px 400
Components
Buttons
Service Status Badges
Live Building Failed Suspended
Service Type Chips
Web Service PostgreSQL Redis Cron Job Static Site Background Worker
Deploy Log
12:34:01==> Cloning from https://github.com/acme/api
12:34:03==> Detected Node.js 20 runtime
12:34:08==> Running build command: npm run build
12:34:22==> Build successful
12:34:23==> Starting service on port 3000
12:34:24==> Your service is live 🎉
Signature — Services Dashboard
acme-production
6 services · Oregon, Frankfurt
All services
Databases
Cron Jobs
Settings
Service Status Region Plan Last deploy
Web Service
api
api.acme.com
Live
 🇺🇸Oregon Starter 2 min ago
Deploy log — api · main · a3f9c12
close ✕
14:22:01==> Cloning from https://github.com/acme/api
14:22:04==> Detected Node.js 20 runtime
14:22:09==> Running build command: npm run build
14:22:18==> Build successful
14:22:19==> Starting service on port 3000
14:22:20==> Your service is live 🎉
PostgreSQL
acme-db
postgres-oregon
Live
 🇺🇸Oregon Standard 3 days ago
acme-db · PostgreSQL 16 · 1GB RAM
close ✕
info Status: available
info PITR enabled · up to 7 days recovery
info High availability: enabled
Background Worker
email-queue
internal
Building
 🇺🇸Oregon Starter just now
Deploy log — email-queue · main · b1d4e78
close ✕
14:29:01==> Cloning from https://github.com/acme/workers
14:29:04==> Running npm install...
Cron Job
daily-report
0 9 * * *
Live
 🇩🇪Frankfurt Starter 6 hr ago
daily-report · next run in 14h 32m
close ✕
09:00:01==> Job started
09:00:04==> Generating report for 2026-07-01...
09:00:07==> Report sent · exited with code 0
Static Site
docs
docs.acme.com
Live
 🌍Global CDN Free 1 day ago
docs · static site · main · c9a1b44
close ✕
info Deployed to 280 edge nodes worldwide
info Build time: 18s · Deploy time: 3s
Guardrails
DO
Use #8a05ff as the sole primary brand color — all interactive elements trace back to this one value
Reserve green (#00db7c) strictly for live and success states — it is semantic, not decorative
Use dark purple (#1c0037, #48008c) for dark mode feature cards and hero sections
Keep fill="currentColor" on the mark and wordmark — both adapt to dark/light automatically
Use the diagonal staircase mark exactly as is — it is Render's most distinctive visual element
DON'T
Use green as a decorative accent — it signals "live" and nothing else in the Render vocabulary
Use orange (#d67f2e) anywhere except the hero H1 gradient
Place bright purple #8a05ff as a background — it's a foreground/border/icon color only
Add elevation shadows — Render uses subtle borders for surface hierarchy, not shadows
Mix the three font roles: Roobert is headings-only, PPNeueMontreal is UI, Mono is code