The cloud application platform for building, deploying, and scaling apps.
Deploy, manage, and scale apps on Heroku — a PaaS built on a managed container system of dynos, buildpacks, and add-ons.
01 / Color
Palette
Brand purple leads; a bright mint-teal is the signature accent. Coral and gold appear only in illustration and badges.
Primary — purple
--brand
#5A1BA9
Buttons, links, build arrows
--brand-deep
#300B60
Gradients, deep surfaces
--mark
#6762A6
Logomark square
Accent
--teal
#5EEAD4
Signature mint — highlights, success
--teal-ink
#0E9A87
Teal as text on light (contrast)
--coral
#EE643F
Illustration, crashed state
--gold
#F7B500
Badges, sparingly
Surfaces & text
--bg
#FFFFFF
Page canvas (light)
--bg2
#F7F5FB
Subtle purple-tinted fill
--bg (dark)
#1A1523
Deep purple-black canvas
02 / Type
Typography
BentonSans — Heroku's brand humanist sans, self-hosted & CORS-open — carries display, UI, and body. JetBrains Mono is reserved for the CLI, terminal, and dyno counts.
BentonSans46px · 500
Scale apps
BentonSans24px · 500
Deploy from a git push
BentonSans16px · 400
Heroku runs your apps inside dynos — smart, secure containers on a fully managed runtime.
JetBrains Mono13px · 400
$ git push heroku main
03 / Components
Building blocks
Real Heroku primitives — dyno & build states, process-type chips, add-ons, buttons.
Buttons
Dyno & build state
Building
Up
Crashed
Idle
Process types
webworkerclockrelease
Add-ons
heroku-postgresqlheroku-redispapertrail
04 / Signature
git push heroku main
Push code, watch the remote build stream, then scale dynos — the whole Heroku loop in one view.
05 / Guardrails
Do & Don't
Do
Lead with brand purple #5A1BA9; use teal #5EEAD4 as the bright accent
Darken teal to #0E9A87 for teal text on light surfaces
Keep the build terminal dark in both themes
Call the runtime units “dynos”; use real buildpack language
Don't
Don't use teal #5EEAD4 as small text on white — it fails contrast
Don't put purple text on the purple primary button
Don't invent deploy copy — mirror real “-----> …” log phrasing
Don't use Math.random — keep the deploy deterministic