Gradients
The interface has three gradients, built from the logo’s stops.
sweep is the logo gradient itself. fade runs bottom-up from the purple
through magenta to coral, and fades out over its last 40%. wash is peach at
18% opacity fading to nothing, top to bottom.
--gradient-sweep217°- #FFB162 at 0%
- #E88C69 at 22%
- #A4237F at 60%
- #5B054F at 100%
--gradient-fadeDrawn on the purple band it belongs to.0°- #5B054F at 0%
- #A4237F at 30%
- #E88C69 at 60%
- transparent at 100%
--gradient-wash180°- #FFB162, 18% opacity, at 0%
- transparent at 100%
| Token | Allowed placements |
|---|---|
sweep |
|
fade |
|
wash |
|
Using a token
Each token is a variable on :root, so a component paints it with
bg-(image:--gradient-wash). A surface with no CSS variables, such as a share
image drawn by next/og, reads the same string from BRAND.gradients.wash.
On the hero, the element’s own opacity holds fade at 12% or less.
--brand-gradient and BRAND.cssGradient resolve to sweep for one release;
new code uses the token names.
Where they never go
A gradient never sits on a button, and never inside a table, a card or a form.
It is never a text fill and never a backdrop for body text.
packages/ui/tests/gradient-placement.test.ts fails a gradient in any file
outside the list above. A new placement goes into §3 of the v3 design-system
spec before it goes into that test.