Design tokens

Every color, space, size and font the components use comes from a --gui-* CSS variable in tokens.css. Change a token and every component that reads it follows.

Changing tokens

Set a token on :root to change it everywhere, or on any element to change it for the components inside:

/* Taller, rounder fields everywhere. */
:root {
  --gui-widget-size: 48px;
  --gui-radius-md: 12px;
}

/* A brand focus color in one form only. */
.checkout {
  --gui-border-focus: #d96c3f;
}

Your own rules are outside the GolemUI Components cascade layers, so they win over the defaults without extra specificity. Each component page lists the tokens it reads under Styling.

Colors

The colors come in two levels. The primitive ramps hold the raw values; the semantic tokens pick from them by purpose. The components read only the semantic tokens, so change those to restyle them, and the ramps to repaint every token that uses them.

Primitive ramps

Ramp	Steps
`--gui-color-neutral-*`	50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
`--gui-color-primary-*`	50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
`--gui-color-success-*`	50, 100, 300, 400, 500, 600, 700, 900
`--gui-color-info-*`	50, 100, 300, 400, 500, 600, 700, 900
`--gui-color-warning-*`	50, 100, 300, 400, 500, 600, 700, 900
`--gui-color-error-*`	50, 100, 300, 400, 500, 600, 700, 900

There are also --gui-color-white, --gui-color-black and --gui-color-transparent.

Backgrounds

The dark values apply under data-theme="dark", or data-theme="auto" on a dark system. See Themes and dark mode.

Token	Light	Dark
`--gui-bg-default`	`var(--gui-color-white)`	`var(--gui-color-neutral-950)`
`--gui-bg-surface`	`var(--gui-color-white)`	`var(--gui-color-neutral-900)`
`--gui-bg-surface-hover`	`var(--gui-color-neutral-200)`	`var(--gui-color-neutral-800)`
`--gui-bg-surface-active`	`var(--gui-color-neutral-100)`	`var(--gui-color-neutral-700)`
`--gui-bg-disabled`	`var(--gui-color-neutral-300)`	`var(--gui-color-neutral-800)`
`--gui-bg-inverse`	`var(--gui-color-neutral-900)`	`var(--gui-color-white)`

Text

Token	Light	Dark
`--gui-text-default`	`var(--gui-color-neutral-900)`	`var(--gui-color-neutral-50)`
`--gui-text-secondary`	`var(--gui-color-neutral-500)`	`var(--gui-color-neutral-400)`
`--gui-text-muted`	`var(--gui-color-neutral-400)`	`var(--gui-color-neutral-500)`
`--gui-text-inverse`	`var(--gui-color-white)`	`var(--gui-color-neutral-900)`
`--gui-text-disabled`	`var(--gui-color-neutral-400)`	`var(--gui-color-neutral-600)`

Borders

Token	Light	Dark
`--gui-border-default`	`var(--gui-color-neutral-300)`	`var(--gui-color-neutral-700)`
`--gui-border-subtle`	`var(--gui-color-neutral-200)`	`var(--gui-color-neutral-800)`
`--gui-border-strong`	`var(--gui-color-neutral-400)`	`var(--gui-color-neutral-600)`
`--gui-border-disabled`	`var(--gui-color-neutral-200)`	`var(--gui-color-neutral-700)`
`--gui-border-focus`	`var(--gui-color-primary-500)`	`var(--gui-color-primary-500)`

Intents

The colors of states and actions: primary for buttons and selections, success, info and warning for alerts, error for invalid fields and their messages.

Token	Light	Dark
`--gui-intent-primary`	`var(--gui-color-primary-600)`	`var(--gui-color-primary-500)`
`--gui-intent-primary-hover`	`var(--gui-color-primary-700)`	`var(--gui-color-primary-400)`
`--gui-intent-primary-active`	`var(--gui-color-primary-800)`	`var(--gui-color-primary-300)`
`--gui-intent-primary-text`	`var(--gui-color-white)`	Same
`--gui-intent-success`	`var(--gui-color-success-600)`	Same
`--gui-intent-success-hover`	`var(--gui-color-success-700)`	Same
`--gui-intent-success-bg`	`var(--gui-color-success-50)`	`color-mix(in srgb, var(--gui-color-success-500) 20%, transparent)`
`--gui-intent-success-text`	`var(--gui-color-success-900)`	`var(--gui-color-success-400)`
`--gui-intent-info`	`var(--gui-color-info-600)`	Same
`--gui-intent-info-hover`	`var(--gui-color-info-700)`	Same
`--gui-intent-info-bg`	`var(--gui-color-info-50)`	`color-mix(in srgb, var(--gui-color-info-500) 20%, transparent)`
`--gui-intent-info-text`	`var(--gui-color-info-900)`	`var(--gui-color-info-400)`
`--gui-intent-warning`	`var(--gui-color-warning-500)`	Same
`--gui-intent-warning-hover`	`var(--gui-color-warning-600)`	Same
`--gui-intent-warning-bg`	`var(--gui-color-warning-50)`	`color-mix(in srgb, var(--gui-color-warning-500) 20%, transparent)`
`--gui-intent-warning-text`	`var(--gui-color-warning-900)`	`var(--gui-color-warning-400)`
`--gui-intent-error`	`var(--gui-color-error-600)`	`var(--gui-color-error-400)`
`--gui-intent-error-hover`	`var(--gui-color-error-700)`	`var(--gui-color-error-300)`
`--gui-intent-error-bg`	`var(--gui-color-error-50)`	`var(--gui-color-error-900)`
`--gui-intent-error-text`	`var(--gui-color-error-900)`	`var(--gui-color-error-100)`

Spacing

Token	Default
`--gui-space-0`	`0px`
`--gui-space-1`	`0.25rem`
`--gui-space-2`	`0.5rem`
`--gui-space-3`	`0.75rem`
`--gui-space-4`	`1rem`
`--gui-space-5`	`1.25rem`
`--gui-space-6`	`1.5rem`
`--gui-space-7`	`1.75rem`
`--gui-space-8`	`2rem`
`--gui-space-10`	`2.5rem`
`--gui-space-12`	`3rem`

The grid’s gaps have tokens of their own, so a theme can change them apart from the rest of the spacing. --gui-layout-column-min is the narrowest column of an auto grid. See Grid.

Token	Default
`--gui-layout-gap-none`	`0px`
`--gui-layout-gap-xs`	`var(--gui-space-1)`
`--gui-layout-gap-sm`	`var(--gui-space-2)`
`--gui-layout-gap-md`	`var(--gui-space-4)`
`--gui-layout-gap-lg`	`var(--gui-space-6)`
`--gui-layout-gap-xl`	`var(--gui-space-8)`
`--gui-layout-column-min`	`12rem`

Typography

Token	Default
`--gui-font-family`	`ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`
`--gui-font-xs`	`0.75rem`
`--gui-font-sm`	`0.875rem`
`--gui-font-base`	`1rem`
`--gui-font-lg`	`1.125rem`
`--gui-font-xl`	`1.25rem`
`--gui-font-2xl`	`1.5rem`
`--gui-font-3xl`	`2rem`

Radii and shadows

Token	Default
`--gui-radius-none`	`0px`
`--gui-radius-sm`	`0.125rem`
`--gui-radius-md`	`0.25rem`
`--gui-radius-lg`	`0.5rem`
`--gui-radius-xl`	`0.75rem`
`--gui-radius-full`	`9999px`

--gui-shadow-focus is the focus ring; --gui-shadow-focus-error replaces it on an invalid field.

Token	Default
`--gui-shadow-sm`	`0 1px 2px 0 rgb(0 0 0 / 0.05)`
`--gui-shadow-md`	`0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)`
`--gui-shadow-lg`	`0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)`
`--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)`
`--gui-shadow-focus-error`	`0 0 0 2px var(--gui-bg-default), 0 0 0 4px color-mix(in srgb, var(--gui-intent-error) 50%, transparent)`

Sizes

--gui-widget-size, 40px by default, is the height of every field and the size of each day of the calendar. Change it to make every field taller or shorter.

Component tokens

A few components have tokens of their own.

Carets

--gui-caret-shape and --gui-caret-image draw the arrows of the pickers, selects, dropdowns, number spinner, calendar and accordion. See Carets.

Pills

The pills of the tags field, the multi-select and the range fields. They grow on touch screens: see Responsive values.

Token	Default
`--gui-pill-height`	`24px`
`--gui-pill-action-size`	`16px`
`--gui-pill-action-hit`	`24px`
`--gui-pill-font-size`	`var(--gui-font-xs)`

Toggle

Token	Default
`--gui-toggle-width`	`38px`
`--gui-toggle-height`	`20px`
`--gui-toggle-slider-width`	`16px`
`--gui-toggle-slider-height`	`16px`
`--gui-toggle-slider-transform`	`16px`

Calendar

Token	Default
`--gui-calendar-width`	`300px`
`--gui-calendar-change-month-button-width`	`36px`
`--gui-calendar-change-month-button-height`	`36px`
`--gui-calendar-day-button-size`	`var(--gui-widget-size)`
`--gui-calendar-year-button-width`	`66px`
`--gui-calendar-year-button-height`	`32px`
`--gui-calendar-year-grid-height`	`216px`
`--gui-calendar-time-grid-height`	`216px`
`--gui-calendar-time-button-height`	`32px`

Markdown text

The typography of gui-markdown-text.

Token	Light	Dark
`--gui-md-text-color`	`var(--gui-text-default)`	Same
`--gui-md-line-height`	`1.6`	Same
`--gui-md-heading-color`	`var(--gui-text-default)`	Same
`--gui-md-heading-weight`	`600`	Same
`--gui-md-link-color`	`var(--gui-intent-primary)`	Same
`--gui-md-link-hover-color`	`var(--gui-intent-primary-hover)`	Same
`--gui-md-blockquote-bg`	`var(--gui-bg-surface-hover)`	Same
`--gui-md-blockquote-border-color`	`var(--gui-border-strong)`	Same
`--gui-md-blockquote-color`	`var(--gui-text-secondary)`	Same
`--gui-md-code-bg`	`var(--gui-color-neutral-300)`	`var(--gui-color-neutral-700)`
`--gui-md-code-color`	`var(--gui-text-default)`	Same
`--gui-md-code-radius`	`var(--gui-radius-sm)`	Same
`--gui-md-hr-color`	`var(--gui-border-default)`	Same

Responsive values

On small screens, some tokens shrink so the components fit:

Screen	Tokens
768px or narrower	`--gui-space-6` 1.25rem, `--gui-space-8` 1.5rem, `--gui-space-10` 2rem
640px or narrower	`--gui-space-4` 0.75rem, `--gui-space-6` 1rem, `--gui-space-8` 1.25rem, `--gui-space-10` 1.5rem, `--gui-font-2xl` 1.25rem, `--gui-font-3xl` 1.5rem
400px or narrower	`--gui-space-3` 0.25rem
Touch screens	`--gui-pill-height` 32px, `--gui-pill-action-size` 24px, `--gui-pill-action-hit` 32px, `--gui-pill-font-size` `var(--gui-font-sm)`

--gui-bp-sm (640px), --gui-bp-md (768px), --gui-bp-lg (1024px) and --gui-bp-xl (1280px) hold the breakpoints for reference. CSS can’t use a variable in a media query, so they don’t change the breakpoints.