Setup & theming
Make it yours: override tokens, pick your dark-mode strategy, swap the mark.
Your brand in one block
/* after the imports — this is the entire API */:root { --accent: #6d4aff; --font-display: 'Clash Display', sans-serif; --radius-card: 1.25rem;}never edit source — override tokens; every component reads them live in both themes
Dark mode
Themes ride data-theme="light|dark" on
<html>. Set it from the OS with a
two-line script, persist the choice in localStorage — exactly what the
toggle in this sidebar does.
Swap the mark
The logo is markup, not an image (Logo):
put your own word in, keep the tittle. Icons live in
creator-design-system/icons/ — currentColor, so they
follow your ink automatically.
Checklist
| Item | Detail |
|---|---|
Tokens overridden | --accent, faces, radii — after the imports |
data-theme wired | OS default + persisted toggle |
Fonts self-hosted or linked | or --font-* pointed at yours |
Favicon | assets/favicon.svg pattern: mark + prefers-color-scheme ink |
State via ARIA | aria-current / aria-pressed / [data-done] — never .active |