Heroku DESIGN.md
Brands
App platform design with official purple foundations, cloud-blue support, and developer-friendly deployment workflows.
At a glance
- Group
- Brands
- Main color
- #5a1ba9Purple design systems
- Fonts
- Salesforce SansSF Mono
Colors in this file
- #ffffff
background
- #5a1ba9
background
- #300b60
background
- #d7bff2
background
- #e5ddf3
Unnamed
- #0176d3
Unnamed
- #f6f2fb
Unnamed
- #22c55e
Unnamed
- #f59e0b
Unnamed
App platform design with official purple foundations, cloud-blue support, and developer-friendly deployment workflows.
1. Visual Theme & Atmosphere
Heroku should feel like application deployment made approachable. The design language needs to support apps, dynos, add-ons, pipelines, logs, teams, data services, AI PaaS messaging, and operational confidence.
- Mood: productive, cloud-native, developer-friendly, calm, reliable
- Density: medium for dashboards and deployment flows
- Character: official Heroku purple, cloud blue, rounded app cards, log panels
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--heroku-purple | #5A1BA9 | Official primary brand color |
--heroku-purple-dark | #300B60 | Dark hero and product surface |
--heroku-purple-light | #D7BFF2 | Soft purple highlight |
--salesforce-blue | #0176D3 | Cloud support and link color |
--surface-page | #F6F2FB | Light purple page field |
--surface-card | #FFFFFF | App and dashboard cards |
--border-default | #E5DDF3 | Dividers and controls |
--success | #22C55E | Deployed / healthy state |
--warning | #F59E0B | Build warning |
Use Heroku Purple for primary identity and actions. Use blue as a Salesforce/cloud support accent.
3. Typography Rules
css--font-sans: "Salesforce Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;
| Element | Size | Weight | Line Height |
|---|---|---|---|
| Hero Display | 58px | 700 | 1.05 |
| Page Title | 40px | 700 | 1.12 |
| Section Title | 30px | 650 | 1.2 |
| App Title | 20px | 650 | 1.3 |
| Body | 16px | 400 | 1.6 |
| Log Text | 13px | 500 | 1.55 |
| Label | 13px | 600 | 1.35 |
4. Component Stylings
css.button-primary {
min-height: 44px;
padding: 0 18px;
border: 1px solid #5A1BA9;
border-radius: 10px;
background: #5A1BA9;
color: #FFFFFF;
font: 600 14px/1 "Salesforce Sans", Inter, sans-serif;
}
.app-card {
border: 1px solid #E5DDF3;
border-radius: 16px;
background: #FFFFFF;
padding: 18px;
}
.log-panel {
border-radius: 14px;
background: #300B60;
color: #FFFFFF;
padding: 16px;
font: 500 13px/1.55 "SF Mono", monospace;
}
.pipeline-stage {
border-radius: 999px;
background: #D7BFF2;
color: #300B60;
padding: 6px 10px;
}
5. Layout Principles
| Token | Value | Usage |
|---|---|---|
--space-2 | 8px | Status rows |
--space-4 | 16px | Dashboard rhythm |
--space-5 | 24px | App panels |
--space-8 | 48px | Sections |
Organize around apps, pipelines, dynos, releases, add-ons, metrics, and logs. Keep deployment status close to app identity.
6. Depth & Elevation
css.shadow-card { box-shadow: 0 8px 18px rgba(48, 11, 96, 0.08); }
.shadow-panel { box-shadow: 0 20px 48px rgba(48, 11, 96, 0.16); }
Use soft purple-tinted depth for app cards and modal deployment flows.
7. Do's and Don'ts
Do use the official purple palette. Do make app, pipeline, dyno, and log state visible. Do not make deployment status ambiguous. Do not overuse Salesforce blue as the main brand color.
8. Responsive Behavior
| Breakpoint | Min Width | Behavior |
|---|---|---|
| Mobile | 0px | Stack apps, metrics, and logs |
| Tablet | 768px | Two-column app/dashboard panels |
| Desktop | 1200px | Full pipeline, add-on, and logs layout |
Log panels should scroll horizontally on mobile.
9. Agent Prompt Guide
Design like Heroku: official purple app-platform UI, cloud-blue support accents, rounded app cards, pipeline stages, dark log panels, and calm developer deployment workflows.
Use it with your agent
Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.
Download
MCP server
MCP tool call
Related Design.md files
Nutanix
Brands · Inter
Hybrid-cloud platform design with deep purple branding, dark product surfaces, and enterprise infrastructure clarity. Nutanix’s current visual language frames platform complexity inside modular, future-oriented…
Railway
Brands · Inter
Deployment platform design with dark command-center surfaces, violet infrastructure accents, and fast project-to-production workflows.
Udemy
Brands · Udemy Sans
Course marketplace with strong category browsing, educational commerce clarity, and a dark-purple brand anchor. Udemy's public site combines white surfaces, black text, purple accents, and broad catalog navigation.
Wayfair
Brands · Inter
Home furnishings retail with broad catalog density, warm merchandising, and soft home-oriented polish. Wayfair's public site uses a white base, dark text, subtle category framing, and the Wayfair purple identity…
Datadog
Brands · NationalWeb
Datadog is the rare observability platform that refuses to dress in blue. In a category — backend monitoring, APM, cloud security — where nearly every competitor reaches for the same trustworthy enterprise blue,…
Dailymotion
Brands · ABCFavorit
"The home for videos that matter." Dailymotion's mission page says it is "more than just a video app": it builds "the next generation of media platforms designed to inspire millions of people to grow and share a…