Color
Semantic palettes
Components never use raw color values. They use semantic palettes that say what a color means, each with ten shades from 50 (lightest) to 900 (darkest). The 500 shade is the main color; light shades serve as backgrounds, dark ones as text on light backgrounds.
Every shade comes with a -contrast color for text on top of it, black or white. The swatches below use it for their labels.
| Palette | Means |
|---|---|
primary | Main actions, links, selection and focus |
secondary | Accents that complement primary |
neutral | Text, borders, backgrounds and neutral actions |
success | Completed, positive outcomes |
warn | Attention needed, reversible problems |
critical | Errors and destructive actions |
Spectrum
Further palettes for categories without a meaning of good or bad: chart series, tags, status colors of custom workflows or avatars.
Surfaces, borders & text
A few colors have their own token instead of a shade. Text uses the base font color with different opacities, so it works on any surface.
backdrop-surfaceBackground of the applicationelevated-surfaceTiles, menus, dialogselevated-surface-alternateFlat areas within elevated surfacesborderDefault borders and dividersborder-strongBorders that need more contrastbase-fontText, see opacities belowaccent-fontHighlighted text| Text | Opacity of base-font | Token |
|---|---|---|
| Titles | 100% | --opacity--title-base-font |
| Body text | 87% | --opacity--body-base-font |
| Subtitles, captions | 55% | --opacity--subtitle-base-font |
| Placeholders | 43% | --opacity--placeholder-base-font |
Light & dark mode
Every token has a value for the light and the dark theme. Switch the theme in the account menu: all colors on this page change, while their meaning stays. In the dark theme the neutral scale runs the other way (neutral-1000 is light, so text stays readable), elevated surfaces are lighter than the backdrop instead of white, and shadows are stronger. That’s why components must only use tokens.
Using colors
In SCSS, use get-color of fusion-css. The second argument sets the opacity. In CSS and inline styles, use the custom properties directly.
@use "@brynlabs/fusion-css/index" as fusioncss;.selected {color: fusioncss.get-color("primary-500");background: fusioncss.get-color("primary-500", 0.06);border: var(--size--border-width) solid fusioncss.get-color("border");}.label {color: fusioncss.get-color("base-font", var(--opacity--subtitle-base-font));}
<div style={{background: 'var(--color--success-50)'}}>Saved</div>
Guidelines
- Use color to support meaning, never as the only carrier: add a label or icon.
- Reserve
criticalfor errors and destructive actions, so it keeps its signal. - Put text on a shade with its
-contrastcolor to keep the contrast sufficient in both themes.