Color system

All colors in rCTF are defined using OKLCH. Colors are declared as CSS custom properties in apps/web/src/app.css, with :root containing light mode values and [data-theme='dark'] providing dark mode overrides. The theme is toggled via the data-theme attribute on <html>, persisted to localStorage, and respects prefers-color-scheme on first load.

Color reference#

Layered colors#

The foundation of rCTF’s color system is an altered version of shadcn/ui’s system. We add nested lightness layers 0 through 5, where layer l0 represents the base (page background or primary text). Higher numbers progressively add emphasis (for backgrounds) or reduce prominence (for foregrounds).

Layer	Background (light)	Background (dark)	Foreground (light)	Foreground (dark)
`l0`	`oklch(98% 0 0)`	`oklch(15% 0 0)`	`neutral-700`	`neutral-50`
`l1`	`oklch(95% 0 0)`	`oklch(18.5% 0 0)`	`neutral-600`	`neutral-200`
`l2`	`oklch(93% 0 0)`	`oklch(22% 0 0)`	`neutral-500`	`neutral-300`
`l3`	`oklch(91% 0 0)`	`oklch(26% 0 0)`	`oklch(60% 0 0)`	`neutral-400`
`l4`	`oklch(89% 0 0)`	`oklch(30% 0 0)`	`oklch(65% 0 0)`	`oklch(59.7% 0 0)`
`l5`	`oklch(84% 0 0)`	`oklch(40% 0 0)`	`oklch(70% 0 0)`	`neutral-500`

These variables are mapped to Tailwind utilities via @theme inline in app.css, enabling classes like bg-background-l1 and text-foreground-l2 that we use throughout the application.

Semantic colors#

Semantic colors are used to convey meaning.

Color	Light	Dark	Usage
`accent`	`sky-200 @ 50%`	`sky-800 @ 30%`	Primary actions, buttons, links
`destructive`	`red-400 @ 30%`	`red-950 @ 50%`	Error states, delete actions
`success`	`emerald-500 @ 10%`	`emerald-900 @ 10%`	Success states, solved challenges

Scoreboard colors#

Leaderboard colors are reserved for visualizing rankings on scoreboards and podiums, as well as for highlighting first, second, and third bloods. Gold, silver, and bronze semantically denote the top three placements (see Wikipedia’s “Hierarchy of precious substances”), while “self” highlights the current user’s row. The “nth” color is applied to all other participants outside the top three, and is just mappings of our layered color system.

Color	Background (light)	Background (dark)	Foreground (light)	Foreground (dark)
`gold`	`yellow-500 @ 15%`	`yellow-950 @ 20%`	`yellow-600`	`yellow-400`
`silver`	`slate-400 @ 20%`	`slate-700 @ 20%`	`slate-600`	`slate-300`
`bronze`	`amber-800 @ 10%`	`amber-950 @ 20%`	`amber-800`	`amber-500`
`self`	`oklch(93% 0.02 160)`	`oklch(22% 0.015 163)`	`emerald-700 @ 80%`	`emerald-400`
`nth`	`background-l4`	`background-l3`	`foreground-l1`	`foreground-l2`

Graph colors#

Graph colors are exclusively used to color lines on graphs and sparklines.

Color	Light	Dark
`first`	`red-500`	`red-300`
`second`	`amber-500`	`amber-300`
`third`	`lime-500`	`lime-300`
`fourth`	`emerald-500`	`emerald-300`
`fifth`	`cyan-500`	`cyan-300`
`sixth`	`sky-500`	`sky-300`
`seventh`	`blue-500`	`blue-300`
`eighth`	`violet-500`	`violet-300`
`ninth`	`fuchsia-500`	`fuchsia-300`
`tenth`	`pink-500`	`pink-300`

Prose colors#

Prose colors are used for text in prose content, such as descriptions of challenges and homepage content.

Color	Light	Dark
`prose`	`foreground-l1`	`foreground-l2`
`prose-link`	`sky-700`	`sky-300`
`prose-inline-code`	`foreground-l1`	`red-100`

Category colors#

Each challenge category is assigned an arbitrary color set from the following sets:

Color	`background-${color}-l0`	`background-${color}-l1`	`foreground-${color}-l0`	`foreground-${color}-l1`
`red`	`red-400 @ 15%`	`red-400 @ 5%`	`red-900 @ 90%`	`red-900 @ 80%`
`orange`	`orange-400 @ 15%`	`orange-400 @ 5%`	`orange-900 @ 90%`	`orange-900 @ 80%`
`yellow`	`yellow-400 @ 15%`	`yellow-400 @ 5%`	`yellow-900 @ 90%`	`yellow-900 @ 80%`
`green`	`green-400 @ 15%`	`green-400 @ 5%`	`green-900 @ 90%`	`green-900 @ 80%`
`teal`	`teal-400 @ 15%`	`teal-400 @ 5%`	`teal-900 @ 90%`	`teal-900 @ 80%`
`blue`	`sky-400 @ 15%`	`sky-400 @ 5%`	`sky-900 @ 90%`	`sky-900 @ 80%`
`purple`	`purple-400 @ 15%`	`purple-400 @ 5%`	`purple-900 @ 90%`	`purple-900 @ 80%`
`fuchsia`	`fuchsia-400 @ 15%`	`fuchsia-400 @ 5%`	`fuchsia-900 @ 90%`	`fuchsia-900 @ 80%`
`pink`	`pink-400 @ 15%`	`pink-400 @ 5%`	`pink-900 @ 90%`	`pink-900 @ 80%`
`gray`	`gray-400 @ 15%`	`gray-400 @ 5%`	`gray-900 @ 90%`	`gray-900 @ 80%`