Color System

A color system keeps UI colors structured, consistent and accessible. Beekeeper Studio uses Radix Colors algorithm to generate colors.

How Colors Work

Every color in the interface travels through four layers:

Layer	Example
Seeds	--base-blue
Primitives	--blue-1, --blue-2, --blue-3, ...
Semantics	--blue-solid-bg, --blue-text, ...
Components	--btn-bg, --sidebar-bg, ...

Here's a breakdown of each layer:

1. Seeds

Seeds are the colors you set in your theme. Beekeeper Studio reads them when your theme loads:

--background      /* the page background */
--base-gray       /* the neutral the whole UI is built from */
--base-accent     /* drives the primary family */

--base-red        --base-orange     --base-yellow
--base-green      --base-blue       --base-purple
--base-pink

Every seed is optional:

• --background defaults to white in light mode and #121212 in dark mode.
• --base-accent isn't a hue of its own. It generates the primary scale (see Semantic Families).
• Seeds usually differ between light and dark mode.

See the default seeds in default/style.css.

2. Primitives

Each seed is expanded into a 12-step scale. The scale is generated in the app, and is adjusted to your --background.

For a seed named blue, you get:

Token	Description
--blue-1 … --blue-12	Solid colors
--blue-a1 … --blue-a12	The same steps as translucent colors, blended against the background
--blue-contrast	Text color that's legible on top of step 9
--blue-surface	Translucent panel fill, based on step 2

These are raw colors, with no meaning attached yet.

Note

Step 9 is the seed color itself. The other eleven steps are built around it.

3. Semantics

Each step is meant for a specific job, following Radix's use cases:

Step	Role	Example use cases
1	bg-base	App background
2	bg-subtle	Subtle backgrounds, such as sidebars and striped rows
3	bg	Component background
4	bg-hover	Component background, hovered
5	bg-active	Component background, pressed or selected
6	border-subtle	Borders on non-interactive elements
7	border	Borders on interactive elements
8	border-hover	Borders, hovered, and focus rings
9	solid-bg	Solid fills, such as primary buttons and badges
10	solid-bg-hover	Solid fills, hovered
11	text	Low-contrast text
12	text-contrast	High-contrast text

Every step is also available by its role name. For example:

--blue-solid-bg     /* = --blue-9   */
--yellow-border     /* = --yellow-7 */

Gray is the neutral color, so its semantic names have no prefix:

--bg-base           /* = --gray-1  */
--border-subtle     /* = --gray-6  */
--text              /* = --gray-11 */
--text-contrast     /* = --gray-12 */

See every semantic token in semantics.scss.

4. Components

Component tokens are the top layer. They name a color by where it's used, like --sidebar-bg, and each one points at a primitive or a semantic token:

--btn-primary-bg: var(--primary-solid-bg);
--btn-flat-bg: var(--gray-a3);
--sidebar-bg: var(--gray-2);

See every component token in component.css.

Semantic Families

Families give a hue a meaning, so components can ask for "the danger color" instead of "red".

Family	Hue
primary	Gray, or --base-accent if your theme sets one
info	Blue
success	Green
warning	Orange
danger	Red

Families have the same steps and role names as a hue, such as --primary-9, --danger-text and --info-bg-hover, plus --<family>-contrast for text on step 9.

Component tokens use families, not hues. That's why a danger button follows your --base-red without anything naming red.

primary works a little differently. It falls back to gray, but you can point it at any color by setting --base-accent:

--base-accent: #0969da;   /* primary is now blue */

The other four families always follow their hue. To change one, override the component tokens that use it.

Syntax Highlighting

Editor colors are grouped into eleven categories:

--syntax-keyword      --syntax-string       --syntax-constant
--syntax-variable     --syntax-function     --syntax-type
--syntax-decorator    --syntax-link         --syntax-diff
--syntax-comment      --syntax-punctuation

Each category colors a group of more specific --editor-*-fg tokens, such as --editor-keyword-fg or --editor-number-fg. Set a category to recolor the whole group, or set an --editor-*-fg token to change just one.

See every editor token in component.css.