Design Tokens

GolemUI defines its entire visual language through CSS custom properties on :root. Override any variable to customize the look of all components at once — no need to hunt through component-specific styles.

Primitive colors

These are the base color palettes that power the entire design system. Override them to transform the overall look of every component at once.

Neutral (Slate)

Token	Default	Preview
`--gui-color-neutral-50`	`#f8fafc`
`--gui-color-neutral-100`	`#f1f5f9`
`--gui-color-neutral-200`	`#e2e8f0`
`--gui-color-neutral-300`	`#cbd5e1`
`--gui-color-neutral-400`	`#94a3b8`
`--gui-color-neutral-500`	`#64748b`
`--gui-color-neutral-600`	`#475569`
`--gui-color-neutral-700`	`#334155`
`--gui-color-neutral-800`	`#1e293b`
`--gui-color-neutral-900`	`#0f172a`
`--gui-color-neutral-950`	`#020617`

Primary (Blue)

Token	Default	Preview
`--gui-color-primary-50`	`#eff6ff`
`--gui-color-primary-100`	`#dbeafe`
`--gui-color-primary-200`	`#bfdbfe`
`--gui-color-primary-300`	`#93c5fd`
`--gui-color-primary-400`	`#60a5fa`
`--gui-color-primary-500`	`#3b82f6`
`--gui-color-primary-600`	`#2563eb`
`--gui-color-primary-700`	`#1d4ed8`
`--gui-color-primary-800`	`#1e40af`
`--gui-color-primary-900`	`#1e3a8a`
`--gui-color-primary-950`	`#172554`

Success (Green)

Token	Default	Preview
`--gui-color-success-50`	`#f0fdf4`
`--gui-color-success-100`	`#dcfce7`
`--gui-color-success-300`	`#86efac`
`--gui-color-success-400`	`#4ade80`
`--gui-color-success-500`	`#22c55e`
`--gui-color-success-600`	`#16a34a`
`--gui-color-success-700`	`#15803d`
`--gui-color-success-900`	`#14532d`

Info (Cyan)

Token	Default	Preview
`--gui-color-info-50`	`#ecfeff`
`--gui-color-info-100`	`#cffafe`
`--gui-color-info-300`	`#67e8f9`
`--gui-color-info-400`	`#22d3ee`
`--gui-color-info-500`	`#06b6d4`
`--gui-color-info-600`	`#0891b2`
`--gui-color-info-700`	`#0e7490`
`--gui-color-info-900`	`#164e63`

Warning (Amber)

Token	Default	Preview
`--gui-color-warning-50`	`#fffbeb`
`--gui-color-warning-100`	`#fef3c7`
`--gui-color-warning-300`	`#fcd34d`
`--gui-color-warning-400`	`#fbbf24`
`--gui-color-warning-500`	`#f59e0b`
`--gui-color-warning-600`	`#d97706`
`--gui-color-warning-700`	`#b45309`
`--gui-color-warning-900`	`#78350f`

Error (Red)

Token	Default	Preview
`--gui-color-error-50`	`#fef2f2`
`--gui-color-error-100`	`#fee2e2`
`--gui-color-error-300`	`#fca5a5`
`--gui-color-error-400`	`#f87171`
`--gui-color-error-500`	`#ef4444`
`--gui-color-error-600`	`#dc2626`
`--gui-color-error-700`	`#b91c1c`
`--gui-color-error-900`	`#7f1d1d`

Base

Token	Default	Preview
`--gui-color-white`	`#ffffff`
`--gui-color-black`	`#000000`
`--gui-color-transparent`	`transparent`

Semantic tokens

Semantic tokens control how components actually look — backgrounds, text colors, borders, and status indicators. They adapt automatically between light and dark mode.

Backgrounds

Token	Light	Dark	Usage
`--gui-bg-default`	`white`	`neutral-950`	Page / form background
`--gui-bg-surface`	`white`	`neutral-900`	Card and input surfaces
`--gui-bg-surface-hover`	`neutral-50`	`neutral-800`	Hovered surfaces
`--gui-bg-surface-active`	`neutral-100`	`neutral-700`	Active / pressed surfaces
`--gui-bg-disabled`	`neutral-100`	`neutral-800`	Disabled elements
`--gui-bg-inverse`	`neutral-900`	`white`	Inverted backgrounds

Text

Token	Light	Dark	Usage
`--gui-text-default`	`neutral-900`	`neutral-50`	Primary text
`--gui-text-secondary`	`neutral-500`	`neutral-400`	Secondary text
`--gui-text-muted`	`neutral-400`	`neutral-500`	Muted / placeholder text
`--gui-text-inverse`	`white`	`neutral-900`	Text on inverse backgrounds
`--gui-text-disabled`	`neutral-400`	`neutral-600`	Disabled text

Borders

Token	Light	Dark	Usage
`--gui-border-default`	`neutral-300`	`neutral-700`	Standard borders
`--gui-border-subtle`	`neutral-200`	`neutral-800`	Subtle / divider borders
`--gui-border-strong`	`neutral-400`	`neutral-600`	Emphasized borders
`--gui-border-disabled`	`neutral-200`	`neutral-700`	Disabled borders
`--gui-border-focus`	`primary-500`	`primary-500`	Focus ring color

Status / Intent

Each status intent provides a base color, hover variant, background tint, and text color.

Primary

Token	Light	Dark
`--gui-intent-primary`	`primary-600`	`primary-500`
`--gui-intent-primary-hover`	`primary-700`	`primary-400`
`--gui-intent-primary-active`	`primary-800`	`primary-300`
`--gui-intent-primary-text`	`white`	`white`

Success

Token	Light	Dark
`--gui-intent-success`	`success-600`	`success-600`
`--gui-intent-success-hover`	`success-700`	`success-700`
`--gui-intent-success-bg`	`success-50`	`success-500` at 20% opacity
`--gui-intent-success-text`	`success-900`	`success-400`

Info

Token	Light	Dark
`--gui-intent-info`	`info-600`	`info-600`
`--gui-intent-info-hover`	`info-700`	`info-700`
`--gui-intent-info-bg`	`info-50`	`info-500` at 20% opacity
`--gui-intent-info-text`	`info-900`	`info-400`

Warning

Token	Light	Dark
`--gui-intent-warning`	`warning-500`	`warning-500`
`--gui-intent-warning-hover`	`warning-600`	`warning-600`
`--gui-intent-warning-bg`	`warning-50`	`warning-500` at 20% opacity
`--gui-intent-warning-text`	`warning-900`	`warning-400`

Error

Token	Light	Dark
`--gui-intent-error`	`error-600`	`error-600`
`--gui-intent-error-hover`	`error-700`	`error-700`
`--gui-intent-error-bg`	`error-50`	`error-500` at 20% opacity
`--gui-intent-error-text`	`error-900`	`error-400`

Spacing

A rem-based spacing scale used for padding, margins, and gaps throughout all components.

Token	Value	Pixels
`--gui-space-0`	`0px`	0
`--gui-space-1`	`0.25rem`	4
`--gui-space-2`	`0.5rem`	8
`--gui-space-3`	`0.75rem`	12
`--gui-space-4`	`1rem`	16
`--gui-space-5`	`1.25rem`	20
`--gui-space-6`	`1.5rem`	24
`--gui-space-8`	`2rem`	32
`--gui-space-10`	`2.5rem`	40

Typography

Token	Value	Pixels
`--gui-font-family`	System sans-serif stack	—
`--gui-font-xs`	`0.75rem`	12
`--gui-font-sm`	`0.875rem`	14
`--gui-font-base`	`1rem`	16
`--gui-font-lg`	`1.125rem`	18
`--gui-font-xl`	`1.25rem`	20
`--gui-font-2xl`	`1.5rem`	24
`--gui-font-3xl`	`2rem`	32

The default font stack is:

--gui-font-family:
  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
  Roboto, 'Helvetica Neue', Arial, sans-serif;

Border radius

Token	Value	Pixels
`--gui-radius-none`	`0px`	0
`--gui-radius-sm`	`0.125rem`	2
`--gui-radius-md`	`0.25rem`	4
`--gui-radius-lg`	`0.5rem`	8
`--gui-radius-xl`	`0.75rem`	12
`--gui-radius-full`	`9999px`	pill shape

Shadows

Token	Value	Usage
`--gui-shadow-sm`	`0 1px 2px 0 rgb(0 0 0 / 0.05)`	Subtle elevation
`--gui-shadow-md`	`0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)`	Medium elevation
`--gui-shadow-lg`	`0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)`	Large elevation
`--gui-shadow-focus`	Ring effect using `color-mix()`	Focus indicator

The focus shadow creates a double-ring effect — a solid inner ring matching the background and a semi-transparent outer ring in the focus color:

--gui-shadow-focus:
  0 0 0 2px var(--gui-bg-default),
  0 0 0 4px color-mix(in srgb, var(--gui-border-focus) 50%, transparent);

Component-specific tokens

Some components expose dedicated tokens for fine-grained control.

Toggle

Token	Default	Description
`--gui-toggle-width`	`38px`	Track width
`--gui-toggle-height`	`20px`	Track height
`--gui-toggle-slider-width`	`16px`	Thumb width
`--gui-toggle-slider-height`	`16px`	Thumb height
`--gui-toggle-slider-transform`	`16px`	Translation distance when checked

Calendar

Token	Default	Description
`--gui-calendar-width`	`300px`	Calendar container width
`--gui-calendar-change-month-button-width`	`36px`	Month navigation button width
`--gui-calendar-change-month-button-height`	`36px`	Month navigation button height

Markdown Text

These tokens control the typography and visual style of rendered markdown content inside the Markdown Text widget.

Token	Default	Description
`--gui-md-text-color`	`--gui-text-default`	Base text color
`--gui-md-line-height`	`1.6`	Base line height
`--gui-md-heading-color`	`--gui-text-default`	Color for h1–h6 headings
`--gui-md-heading-weight`	`600`	Font weight for headings
`--gui-md-link-color`	`--gui-intent-primary`	Link text color
`--gui-md-link-hover-color`	`--gui-intent-primary-hover`	Link color on hover
`--gui-md-blockquote-bg`	`--gui-bg-surface-hover`	Blockquote background
`--gui-md-blockquote-border-color`	`--gui-border-strong`	Blockquote left border color
`--gui-md-blockquote-color`	`--gui-text-secondary`	Blockquote text color
`--gui-md-code-bg`	`--gui-bg-surface-active`	Background for inline code and code blocks
`--gui-md-code-color`	`--gui-text-default`	Text color for inline code and code blocks
`--gui-md-code-radius`	`--gui-radius-sm`	Border radius for inline code
`--gui-md-hr-color`	`--gui-border-default`	Color of horizontal rules (`<hr>`)

Breakpoints

These tokens are defined as CSS custom properties for reference. They document the breakpoints used in GolemUI’s media queries.

Token	Value
`--gui-bp-sm`	`640px`
`--gui-bp-md`	`768px`
`--gui-bp-lg`	`1024px`
`--gui-bp-xl`	`1280px`