--- title: "Color system" description: "Understanding and customizing the rCTF color system, including light/dark themes and semantic colors." order: 1 --- rCTF builds its palette from [Radix Colors](https://www.radix-ui.com/colors). The values and theme tokens are defined in `apps/web/src/styles/color.css{:file}`. Each token defines its light and dark values with `light-dark(){:css}`. Set `data-theme="light"{:html}` or `data-theme="dark"{:html}` on `{:html}` to choose one. Without that attribute, `prefers-color-scheme{:css}` follows the operating system setting. The theme toggle saves the choice to `localStorage{:js}`. On later visits, `static/theme.js{:file}` applies it before the page paints so the other theme does not flash during loading. ## Color reference ### Layered colors Most of the interface uses Radix's neutral `gray{:css}` scale, arranged into six background and foreground layers named `l0` through `l5`. Backgrounds move from the page-level `gray-1{:css}` toward `gray-7{:css}`, becoming more prominent as the layer number rises. Foregrounds move the other way, starting with `gray-12{:css}` for primary text and fading toward `gray-8{:css}`. :::table{cols="auto auto auto auto auto"} | Layer | Background (light) | Background (dark) | Foreground (light) | Foreground (dark) | | --- | --- | --- | --- | --- | | `l0` | gray-1 | gray-1 | gray-12 | gray-12 | | `l1` | gray-3 | gray-2 | gray-11 | gray-11 | | `l2` | gray-4 | gray-3 | gray-10 | gray-10 | | `l3` | gray-5 | gray-4 | gray-9 | gray-9 | | `l4` | gray-6 | gray-5 | gray-8 | gray-8 | | `l5` | gray-7 | gray-6 | gray-8 | gray-7 | ::: Component CSS can use these tokens wherever it needs a layered color, for example `background: var(--background-l1){:css}` or `color: var(--foreground-l2){:css}`. ### Semantic colors Semantic colors convey meaning. Each role pairs a soft background wash with a readable foreground, and the interactive roles add a `-hover{:css}` background variant. :::table{cols="auto auto auto wrap"} | Role | Light | Dark | Tokens | Usage | | --- | --- | --- | --- | --- | | `accent` | sky-4 | sky-4 | `--background-accent`, `--background-accent-hover`, `--foreground-accent` | Primary actions, buttons, links | | `destructive` | red-4 | red-4 | `--background-destructive`, `--background-destructive-hover`, `--foreground-destructive` | Error states, delete actions | | `success` | jade-3 | jade-3 | `--background-success`, `--foreground-success` | Success states, solved challenges | ::: ### Scoreboard colors These colors appear on scoreboards, podiums, and blood medals. `gold`, `silver`, and `bronze` mark the top three places, `self` highlights the current user's row, and `nth` uses the neutral layers for everyone else. :::table{cols="auto auto auto auto auto"} | Color | Background (light) | Background (dark) | Foreground (light) | Foreground (dark) | | --- | --- | --- | --- | --- | | `gold` | amber-a3 | amber-9 15% | amber-11 | amber-11 | | `silver` | slate-a3 | slate-9 30% | slate-11 | slate-11 | | `bronze` | brown-a5 | brown-9 25% | brown-11 | brown-11 | | `self` | jade-3 | jade-3 | jade-11 | jade-11 | | `nth` | background-l4 | background-l3 | foreground-l0 | foreground-l3 | ::: Use the `-l0{:css}` foregrounds for primary text and `-l1{:css}` for secondary text. ### Graph colors Graph colors are only used for lines on graphs and sparklines. The tokens run from `--foreground-first{:css}` to `--foreground-tenth{:css}`. Each one is step 9 of a different Radix hue and stays the same in both modes. :::table{cols="auto auto auto"} | Color | Light | Dark | | --- | --- | --- | | `first` | red-9 | red-9 | | `second` | amber-9 | amber-9 | | `third` | lime-9 | lime-9 | | `fourth` | jade-9 | jade-9 | | `fifth` | cyan-9 | cyan-9 | | `sixth` | sky-9 | sky-9 | | `seventh` | blue-9 | blue-9 | | `eighth` | violet-9 | violet-9 | | `ninth` | plum-9 | plum-9 | | `tenth` | pink-9 | pink-9 | ::: ### Prose colors Prose colors style rendered Markdown, such as challenge descriptions and homepage content. :::table{cols="auto auto auto"} | Color | Light | Dark | | --- | --- | --- | | `prose` | gray-11 | gray-11 | | `prose-link` | sky-11 | sky-11 | | `prose-inline-code` | gray-11 | red-11 | ::: ### Category colors Challenge categories pick from ten hues. Each hue has two background tints plus a hover variant and two foreground levels. All of them come from Radix's alpha scales, so they blend into whatever layer they sit on. :::table{cols="auto auto auto auto auto"} | Color | `--background--l0{:css}` | `--background--l1{:css}` | `--foreground--l0{:css}` | `--foreground--l1{:css}` | | --- | --- | --- | --- | --- | | `crimson` | crimson-a3 | crimson-a2 | crimson-a12 | crimson-a11 | | `red` | red-a3 | red-a2 | red-a12 | red-a11 | | `orange` | orange-a3 | orange-a2 | orange-a12 | orange-a11 | | `yellow` | yellow-a3 | yellow-a2 | yellow-a12 | yellow-a11 | | `green` | green-a3 | green-a2 | green-a12 | green-a11 | | `teal` | teal-a3 | teal-a2 | teal-a12 | teal-a11 | | `sky` | sky-a3 | sky-a2 | sky-a12 | sky-a11 | | `violet` | violet-a3 | violet-a2 | violet-a12 | violet-a11 | | `plum` | plum-a3 | plum-a2 | plum-a12 | plum-a11 | | `gray` | gray-a3 | gray-a2 | gray-a12 | gray-a11 | ::: A `[data-category-color='']{:css}` block in `color.css{:file}` points the generic `--category-*{:css}` tokens at one of these ramps. See [Categories](/theming/categories/) for how a component picks its hue.