Foundations · v2.0
Colors, with intent.
Every hue in the Cypress palette is tuned for a specific job — from the teal that carries the brand, to the jade that marks a passing test, to the neutrals that hold an interface together. Copy a value, drop it in.
Brand colors
Teal, jade, and indigo do 80% of the work in Cypress interfaces. Everything else is support — semantic roles, surfaces, and the occasional accent.
The Cypress signature. Brand surfaces, primary marketing, and the hue users associate first with the product.
Cypress green — reserved for success, passing tests, and the healthy state of a system. Never use jade for neutral confirmation.
Links, focus rings, and the places attention should land first. The accent that signals interactivity across product surfaces.
Ten scales, grouped by role. Primary carries the brand; Secondary handles semantic accents; Tertiary is reserved for generated content like syntax highlighting and chart series. Click any swatch to copy the Tailwind class.
Primary colors
Used frequently as the base colors for establishing the brand. Common across products, docs, and marketing.
Gray
The foundation: text, borders, dividers, surfaces. Every other scale leans on these steps to set hierarchy.
Jade
Cypress green. Reserve for healthy system state — passing tests, positive deltas, successful deploys. Never generic confirmation.
Teal
Cypress teal. Brand surfaces, primary marketing, and the hue users associate first with the product.
Indigo
Links, focus rings, and the places attention should land first. The accent that signals interactivity.
Secondary colors
Generally used as accent colors and for semantic purposes throughout products, docs, and marketing.
Purple
Used for accents, occasional highlights, and complement to teal. Pairs cleanly with the primary scales without competing.
Red
Destructive actions, failed tests, errors, blockers. Used sparingly so it keeps its weight where it matters.
Orange
Flaky tests, pending states, rate limits, degraded behavior. Warmer than red — attention without alarm.
Tertiary colors
Reserved for generated content — syntax highlighting, charts with many data points. Use only when necessary.
Fuchsia
Reserved for generated content — syntax highlighting, chart series, data visualizations with many points.
Green
Reserved for generated content. A yellow-green for chart series and code highlights — distinct from jade.
Magenta
Reserved for generated content — additional chart series and syntax highlighting tones.
Reading the contrast scores
Each swatch is scored as a text color — the color you'd set a paragraph to if the swatch were the background. AA requires a 4.5:1 contrast ratio for body text; AAA requires 7:1. Icons, dividers, and decorative fills can use any step, but text should always pick a step that passes on its background.
A good rule of thumb: for text on white, reach for a
600 or darker.
For text on dark surfaces, reach for a
300 or lighter.
The middle steps (400–500) are for fills, borders, and decorative surfaces.
Fresh complementary color pairings
Tokens read as a list, but they earn their keep in combination. These pairings are tuned for product surfaces, illustration accents, and icon duos — proven on white, ready to lift.
Token reference
JS variables
Import colors in JavaScript or TypeScript:
import { colors } from '@cypress-design/css'
// e.g. colors.jade[400], colors.indigo[700]CSS variables
Color tokens are available as CSS custom properties after linking colors.css:
color: var(--cy-indigo-500);
background: var(--cy-jade-200);Tailwind classes
All design system color tokens are available as Tailwind text color and background color utility classes. Use these when styling components or building new UI — they keep colors consistent with the design tokens and respond correctly to light/dark mode.
<div class="text-white bg-jade-400">background of jade 400</div>
<div class="text-indigo-700">text of indigo 700</div>