Colors
Rasuke does not ship framework helpers such as .bg-primary or .text-900. Bind section styles to semantic tokens. Primitive ramps exist only so aliases can resolve.
How to use a color
.cta-1 {
background-color: var(--color-surface-base);
color: var(--color-text-primary);
}
.cta-1__link {
color: var(--color-accent-base); /* brand orange #FF6A3A */
}
Because semantic tokens alias primitives per mode, the same rule flips in dark mode. Do not hardcode hex in SCSS or components.
Semantic tokens
| Role | Variable | Light | Dark |
|---|---|---|---|
| Brand | --color-brand-1 / --color-accent-base | #FF6A3A | #FF6A3A (identical) |
| Surface base | --color-surface-base | #FFFFFF | #111111 |
| Surface subtle | --color-surface-subtle | #F4F4F4 | #1B1B1B |
| Surface cream | --color-surface-cream | #FCF7F3 | #FCF7F3 |
| Surface inverse | --color-surface-inverse | #111111 | #FFFFFF |
| Text primary | --color-text-primary | #111111 | #FCF7F3 |
| Text secondary | --color-text-secondary | #8C8987 | #8C8987 |
| Text muted | --color-text-muted | #999999 | #999999 |
| Text inverse | --color-text-inverse | #FFFFFF | #111111 |
| Text on brand | --color-text-on-brand | #FFFFFF | #111111 |
| Border | --color-border-base | rgba(17,17,17,.1) | rgba(255,255,255,.1) |
| Button bg / text | --color-button-bg / --color-button-text | #FF6A3A / #FFFFFF | #FCF7F3 / #111111 |
| Footer surface | --color-footer-surface | #1B1B1B | #1B1B1B |
| Placeholder | --color-placeholder-base / -strong | #F4F4F4 / #E8E8E8 | #1B1B1B / #333333 |
| Preloader base | --color-preloader-base | #6E5F52 | #6E5F52 |
| Offcanvas surface | --color-offcanvas-base | #FCF7F3 | #111111 |
Ink primitives
ink.black#111111 ·ink.white#FFFFFF ·ink.cream#FCF7F3 ·ink.sub#999999 — identical in both modes; modes are expressed through the semantic aliases above.
Change these values only in tokens/tokens.json, then run npm run tokens. Keep the dark text / background pairs (#FCF7F3 on #111111) intact unless you re-check contrast. Note that the button flips from orange-on-white in light mode to cream-on-black in dark mode.
Where colors live
tokens/tokens.json→color.*(source of truth, Light + Dark values)src/styles/abstracts/_tokens.generated.scss→ generated maps (never edit)src/styles/abstracts/_css-vars.scss→ emits the CSS variables for both schemes
See Dark Mode for the mechanism and Design Tokens for the full pipeline.