CircleCI DESIGN.md
Brands
CI/CD platform design with confident black-and-green delivery surfaces, automation-first dashboards, and pipeline clarity.
At a glance
- Group
- Brands
- Main color
- #00b871Green design systems
- Fonts
- InterSF Mono
Colors in this file
- #00b871
background
- #111111
background
- #ffffff
background
- #e2e8f0
Unnamed
- #008f5a
Unnamed
- #2563eb
Unnamed
- #dc2626
Unnamed
- #f59e0b
Unnamed
- #f8fafc
Unnamed
CI/CD platform design with confident black-and-green delivery surfaces, automation-first dashboards, and pipeline clarity.
1. Visual Theme & Atmosphere
CircleCI should feel like reliable software delivery at speed. The product language needs to support pipelines, workflows, jobs, tests, rollbacks, releases, agents, config, and platform-team controls.
- Mood: confident, automated, technical, operational, scalable
- Density: medium-to-high for pipeline and job views
- Character: near-black hero surfaces, green validation accents, white dashboard cards, status-driven rows
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--circle-black | #111111 | Hero and code/log surface |
--circle-green | #00B871 | Passing build / positive state |
--circle-green-dark | #008F5A | Hover / active state |
--circle-blue | #2563EB | Link and info state |
--circle-red | #DC2626 | Failed build |
--circle-yellow | #F59E0B | Running / queued state |
--surface-page | #F8FAFC | Page background |
--surface-card | #FFFFFF | Pipeline cards |
--border-default | #E2E8F0 | Dividers and inputs |
Use green for validation and successful delivery. Use red/yellow only for pipeline status and failures.
3. Typography Rules
css--font-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 | 60px | 700 | 1.05 |
| Page Title | 40px | 700 | 1.12 |
| Section Title | 30px | 650 | 1.2 |
| Job Title | 18px | 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 #00B871;
border-radius: 10px;
background: #00B871;
color: #111111;
font: 700 14px/1 Inter, sans-serif;
}
.pipeline-card {
border: 1px solid #E2E8F0;
border-radius: 14px;
background: #FFFFFF;
padding: 18px;
}
.job-pass {
border-left: 4px solid #00B871;
}
.log-panel {
border-radius: 14px;
background: #111111;
color: #FFFFFF;
padding: 16px;
}
5. Layout Principles
| Token | Value | Usage |
|---|---|---|
--space-2 | 8px | Job rows |
--space-4 | 16px | Pipeline rhythm |
--space-5 | 24px | Detail panels |
--space-8 | 48px | Sections |
Organize by project, branch, workflow, job, status, duration, artifact, and test result.
6. Depth & Elevation
css.shadow-card { box-shadow: 0 8px 18px rgba(17, 17, 17, 0.07); }
.shadow-panel { box-shadow: 0 20px 48px rgba(17, 17, 17, 0.16); }
Use borders and status strips for dense lists. Use elevation for job detail panels.
7. Do's and Don'ts
Do make build status impossible to miss. Do keep logs readable. Do not hide failure cause behind decorative charts. Do not use status colors for generic decoration.
8. Responsive Behavior
| Breakpoint | Min Width | Behavior |
|---|---|---|
| Mobile | 0px | Stack workflows, jobs, and logs |
| Tablet | 768px | Two-column pipeline/detail views |
| Desktop | 1200px | Full pipeline graph, job table, and log panels |
Logs and config snippets should scroll horizontally on mobile.
9. Agent Prompt Guide
Design like CircleCI: black-and-green CI/CD confidence, white pipeline cards, clear pass/fail status strips, readable log panels, and automation-first software delivery dashboards.
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
New Relic
Brands · Inter
Observability platform design with bold teal identity, full-stack telemetry surfaces, query-builder clarity, and site-reliability UX.
Segment
Brands · Inter
Customer data platform design with bold green identity, data-pipeline clarity, integration catalog surfaces, and schema-driven UX.
Tripadvisor
Brands · Trip Sans
Travel discovery with content-heavy browsing, green brand cues, and review-driven utility. Tripadvisor's public site uses white surfaces, black text, rounded search controls, and the familiar Tripadvisor green…
Nuxt
Official · Inter
The Nuxt team's own DESIGN.md for nuxt.com: built on Nuxt UI and Tailwind CSS v4, dark by default, with the Nuxt green as its accent.
Ecosia
Brands · Founders Grotesk
Ecosia is a search engine and browser that puts "100% of profits for the planet": "We use all our profits for climate action, with the majority going into tree-planting projects around the world." Its homepage counts…
Jobright
Brands · Inter
An analysis of Jobright's design language — an AI job-hunting platform built on an energetic spring-mint green against black and white, with pale-mint section bands carrying the page rhythm. Bold condensed Titillium…