Gradients

The BSS Design System permits only LIGHT × LIGHT gradient combinations. Four wash tokens and a hero-wash pattern are provided; the single source of truth for all values is app/_v2/tokens.css.

Wash Tokens

The four --gr-wash-* tokens are for background washes only. Use color tokens for text, icons, and borders.

Wash Soft

--gr-wash-soft

linear-gradient(180deg, #FFFFFF 0%, #ECF0F3 100%)

White → light-grey. The subtlest wash. Default for card and section backgrounds.

Wash Sky

--gr-wash-sky

linear-gradient(180deg, #FFFFFF 0%, #CDEAFF 100%)

White → sky-light. A bright, airy wash. Use on hero and accent sections.

Wash Cool

--gr-wash-cool

linear-gradient(180deg, #ECF0F3 0%, #CDEAFF 100%)

light-grey → sky-light. A mid-step bridging two light tones.

Wash Diag

--gr-wash-diag

linear-gradient(135deg, #FFFFFF 0%, #CDEAFF 100%)

135° diagonal, white → sky-light. Well-suited for asymmetric layouts and banners.

Hero Wash

The canonical pattern for page-top backgrounds. linear-gradient(to bottom, var(--c-sky-light), var(--c-canvas)) set to no-repeat / 100% 520px fades the top area softly from sky to white.

Gradient Cards

Applying a wash to a card background elevates it above a plain white card without needing a primary tone. In dark mode, light washes are automatically swapped for their dark equivalents.

Wash Soft

Early Application Deadline Approaching

A light wash lifts a white card one step above the baseline.

Learn More
Wash Sky

Cohort 5 Mentor Interview

The sky-light tone feels cool and calm. Well-suited for informational cards.

Read More
Wash Diag

Curriculum Update

The diagonal wash adds directionality and depth. Ideal for hero and feature cards.

View All

DON'T — Gradients between dark colors

Gradients between primary, dark-blue, and ink-deep make pages feel heavy and become an AI-style anti-pattern. When a dark tone is needed, use a solid ink-deep or primary surface; express depth with solid color + shadow instead.

primary → dark-blue
dark-blue → ink-deep
primary → ink-deep

Rules

Hard constraints that apply whenever gradients are used.

LIGHT × LIGHT only. Both gradient stops must be from the light palette (white, light-grey, sky-light). Gradients between dark colors — primary, dark-blue, ink-deep — are never permitted.

No light washes in dark mode. Placing a light wash over a dark background destroys contrast. In dark mode, override via [data-theme="dark"] token overrides to apply a dark wash instead, or express depth with solid color + shadow.

No arbitrary hex values. Never write raw color values into a wash. Always use --gr-wash-* tokens or approved color token variables.

Gradients are for background washes only. Do not apply gradients to text or icons. Use the background property exclusively.