GUILD OF GLEKS UIv21.14.0
← Back to Theming

Theme Generator

Change a foundation token below and the whole gallery updates at once, live across the entire site — not just this page. Hit Randomize for a fresh palette and fonts in one click, or fine-tune a single component further down. Export the result when you're happy with it and paste it into your own project; nothing here is saved, reloading the page resets everything.

Foundation

Every component derives from these — palette, fonts, spacing, radius, motion, elevation. Change one and watch the whole gallery below follow.

Elevation is ten knobs and no steps, which is deliberate: the six heights every raised surface reads (--gog-elevation-0 … -5) are generated from those ten, so a card, a dropdown, a toast and a dialog all move together and keep their order. Turn --gog-elevation-key-y to 0 and raise the blur and the whole library starts glowing instead of dropping shadows — that is how terminal is built. Randomize picks one of those styles rather than jittering the ten apart from each other.

The cheapest one to try first is --gog-density (Character Layer, below). Set it to 0.85 and every padding and gap in the gallery tightens at once: it multiplies the ten-step spacing scale that all of them derive from, so a whole compact theme is one number rather than fifty overrides. Open the Select card afterwards and look inside the panel: its option rows go from 12px 24px of padding to 10.2px 20.4px, because those are scale steps rather than literals. That is the part 21.9.0 finished — dropdown panel gaps, icon offsets, error-line offsets and the badge's overhang follow density now as well, where fourteen lengths used to ignore it. Four things deliberately still do not: the glyph box, the focus-ring offset, the float-label reserve and the scrollbar and toggle thumb insets are legibility and geometry fitted to a fixed track, not spacing.

Fonts & Type Scale

--gog-font-heading
--gog-font-body
--gog-font-mono
--gog-text-2xs
--gog-text-xs
--gog-text-sm
--gog-text-md
--gog-text-lg
--gog-text-slg
--gog-text-xl
--gog-text-2xl
--gog-text-3xl

Palette

--gog-background-color
--gog-surface-color
--gog-hover-color
--gog-border-color
--gog-control-boundary-color
--gog-text-color
--gog-accent-text-color
--gog-muted-text-color
--gog-primary-color
--gog-accent-color
--gog-accent-bright
--gog-accent-dim
--gog-accent-pale
--gog-secondary-color
--gog-success-color
--gog-danger-color
--gog-warning-color
--gog-info-color
--gog-success-text-color
--gog-danger-text-color
--gog-warning-text-color
--gog-info-text-color
--gog-success-shade
--gog-danger-shade
--gog-warning-shade
--gog-info-shade

Character Layer

--gog-radius
--gog-border-width
--gog-border-style
--gog-panel-border-width
--gog-panel-border-style
--gog-control-border-width
--gog-control-border-style
--gog-text-transform
--gog-letter-spacing
--gog-font-weight-medium
--gog-font-weight-semibold
--gog-font-weight-bold
--gog-font-weight-heavy
--gog-line-height-none
--gog-line-height-tight
--gog-line-height-snug
--gog-line-height-normal
--gog-line-height-relaxed
--gog-line-height-loose
--gog-density

Spacing

--gog-space-xs
--gog-space-sm
--gog-space-md
--gog-space-lg
--gog-space-2xl

Elevation

--gog-elevation-ink
--gog-elevation-key-alpha
--gog-elevation-ambient-alpha
--gog-elevation-contact-blur
--gog-elevation-key-x
--gog-elevation-key-y
--gog-elevation-key-blur
--gog-elevation-ring-width
--gog-elevation-highlight-ink
--gog-elevation-highlight-alpha

Motion & Focus

--gog-duration-fast
--gog-duration-base
--gog-duration-slow
--gog-focus-ring-width
--gog-focus-ring-offset
--gog-disabled-opacity

Stacking

--gog-z-base

Control Metrics

--gog-control-padding-y
--gog-control-padding-x
--gog-control-icon-offset
--gog-control-clear-icon-ratio

Component Gallery

Every component the library ships, live, all at once — so a foundation change is visible everywhere immediately instead of one dropdown selection at a time.

Accordion

This is the accordion body content.

Alert

Read-only

Billing needs attention before this workspace can be edited.

Autocomplete

Badge

Button

Button Toggle

Calendar

October 2026
SunMonTueWedThuFriSat

Card

Quarterly summary

One self-contained thing, usually one of many in a grid.

Checkbox

Chip

Angular
Informational

Collapsible

Ships within 2 business days via standard courier.

Datepicker

Dialog

Divider

OR

Icon

Input Field

Menu

Multiselect

Paginator

Panel

Notifications

A titled region of a page — a real landmark, and it can collapse.

Progress Bar

Radio Group

Delivery

Ripple

Scroll

Line one of a list too long to fit.

Line two, still scrolling.

Line three.

Line four.

Line five.

Line six — the themed thumb should be visible by now.

Select

Skeleton

Slider

45
0100

Spinner

Table

# Component Status
1 Button Ready
2 Checkbox Ready
3 Dialog Ready

Tabs

Profile content.

Tag

AvailableDeprecatedBetaNew

Text Area

Toast

Saved successfully

Toggle

Tooltip

Fine-tune a single component

Every token for one component, individually — for when the foundation isn't granular enough and one component genuinely needs to differ from the rest.

Button tokens

--gog-button-active-scale
--gog-button-border-style
--gog-button-border-width
--gog-button-danger-fill
--gog-button-danger-fill-hover
--gog-button-danger-fill-press
--gog-button-danger-ink
--gog-button-danger-on-fill
--gog-button-danger-wash
--gog-button-disabled-opacity
--gog-button-focus-ring-color
--gog-button-focus-ring-offset
--gog-button-focus-ring-width
--gog-button-font-family
--gog-button-font-weight
--gog-button-gap
--gog-button-ghost-bg
--gog-button-ghost-border
--gog-button-ghost-color
--gog-button-ghost-hover-bg
--gog-button-ghost-hover-color
--gog-button-ghost-hover-shadow
--gog-button-ghost-press-bg
--gog-button-ghost-press-color
--gog-button-ghost-shadow
--gog-button-ghost-spinner-color
--gog-button-ghost-toggled-shadow
--gog-button-info-fill
--gog-button-info-fill-hover
--gog-button-info-fill-press
--gog-button-info-ink
--gog-button-info-on-fill
--gog-button-info-wash
--gog-button-letter-spacing
--gog-button-lg-font-size
--gog-button-lg-padding
--gog-button-line-height
--gog-button-loading-opacity
--gog-button-md-font-size
--gog-button-md-padding
--gog-button-outline-bg
--gog-button-outline-border
--gog-button-outline-color
--gog-button-outline-hover-bg
--gog-button-outline-hover-color
--gog-button-outline-hover-shadow
--gog-button-outline-press-bg
--gog-button-outline-press-color
--gog-button-outline-shadow
--gog-button-outline-spinner-color
--gog-button-outline-toggled-shadow
--gog-button-primary-bg
--gog-button-primary-border
--gog-button-primary-color
--gog-button-primary-hover-bg
--gog-button-primary-hover-color
--gog-button-primary-hover-shadow
--gog-button-primary-press-bg
--gog-button-primary-press-color
--gog-button-primary-shadow
--gog-button-primary-spinner-color
--gog-button-primary-toggled-shadow
--gog-button-radius
--gog-button-secondary-bg
--gog-button-secondary-border
--gog-button-secondary-color
--gog-button-secondary-hover-bg
--gog-button-secondary-hover-color
--gog-button-secondary-hover-shadow
--gog-button-secondary-press-bg
--gog-button-secondary-press-color
--gog-button-secondary-shadow
--gog-button-secondary-spinner-color
--gog-button-secondary-toggled-shadow
--gog-button-severity-fill
--gog-button-severity-fill-hover
--gog-button-severity-fill-press
--gog-button-severity-ink
--gog-button-severity-on-fill
--gog-button-severity-wash
--gog-button-size-font-size
--gog-button-size-padding
--gog-button-slg-font-size
--gog-button-slg-padding
--gog-button-sm-font-size
--gog-button-sm-padding
--gog-button-spinner-max-size
--gog-button-success-fill
--gog-button-success-fill-hover
--gog-button-success-fill-press
--gog-button-success-ink
--gog-button-success-on-fill
--gog-button-success-wash
--gog-button-text-transform
--gog-button-toggle-border-color
--gog-button-toggle-border-style
--gog-button-toggle-border-width
--gog-button-toggle-disabled-opacity
--gog-button-toggle-focus-ring-color
--gog-button-toggle-focus-ring-offset
--gog-button-toggle-focus-ring-width
--gog-button-toggle-font-family
--gog-button-toggle-font-weight
--gog-button-toggle-gap
--gog-button-toggle-hover-bg
--gog-button-toggle-hover-color
--gog-button-toggle-icon-size
--gog-button-toggle-letter-spacing
--gog-button-toggle-line-height
--gog-button-toggle-press-bg
--gog-button-toggle-radius
--gog-button-toggle-rest-bg
--gog-button-toggle-rest-color
--gog-button-toggle-selected-bg
--gog-button-toggle-selected-border-color
--gog-button-toggle-selected-color
--gog-button-toggle-selected-press-bg
--gog-button-toggle-separated-gap
--gog-button-toggle-text-transform
--gog-button-toggle-transition-duration
--gog-button-toggled-ring-width
--gog-button-transition-duration
--gog-button-variant-bg
--gog-button-variant-border
--gog-button-variant-color
--gog-button-variant-hover-bg
--gog-button-variant-hover-color
--gog-button-variant-hover-shadow
--gog-button-variant-press-bg
--gog-button-variant-press-color
--gog-button-variant-shadow
--gog-button-variant-spinner-color
--gog-button-variant-toggled-shadow
--gog-button-warning-fill
--gog-button-warning-fill-hover
--gog-button-warning-fill-press
--gog-button-warning-ink
--gog-button-warning-on-fill
--gog-button-warning-wash
--gog-button-xsm-font-size
--gog-button-xsm-padding

Export CSS

Every foundation token's current value, ready to paste into your project after the library import — plus a second block for anything fine-tuned individually above, if you used it. This already reproduces the whole look: every other token in the library reads one of these through var(...), which is why changing 44 values here visibly changes far more than 44 things in the gallery above.

css 
:root {
  /* Fonts & Type Scale */
  --gog-font-heading: ;
  --gog-font-body: ;
  --gog-font-mono: ;
  --gog-text-2xs: ;
  --gog-text-xs: ;
  --gog-text-sm: ;
  --gog-text-md: ;
  --gog-text-lg: ;
  --gog-text-slg: ;
  --gog-text-xl: ;
  --gog-text-2xl: ;
  --gog-text-3xl: ;
  /* Palette */
  --gog-background-color: ;
  --gog-surface-color: ;
  --gog-hover-color: ;
  --gog-border-color: ;
  --gog-control-boundary-color: ;
  --gog-text-color: ;
  --gog-accent-text-color: ;
  --gog-muted-text-color: ;
  --gog-primary-color: ;
  --gog-accent-color: ;
  --gog-accent-bright: ;
  --gog-accent-dim: ;
  --gog-accent-pale: ;
  --gog-secondary-color: ;
  --gog-success-color: ;
  --gog-danger-color: ;
  --gog-warning-color: ;
  --gog-info-color: ;
  --gog-success-text-color: ;
  --gog-danger-text-color: ;
  --gog-warning-text-color: ;
  --gog-info-text-color: ;
  --gog-success-shade: ;
  --gog-danger-shade: ;
  --gog-warning-shade: ;
  --gog-info-shade: ;
  /* Character Layer */
  --gog-radius: ;
  --gog-border-width: ;
  --gog-border-style: ;
  --gog-panel-border-width: ;
  --gog-panel-border-style: ;
  --gog-control-border-width: ;
  --gog-control-border-style: ;
  --gog-text-transform: ;
  --gog-letter-spacing: ;
  --gog-font-weight-medium: ;
  --gog-font-weight-semibold: ;
  --gog-font-weight-bold: ;
  --gog-font-weight-heavy: ;
  --gog-line-height-none: ;
  --gog-line-height-tight: ;
  --gog-line-height-snug: ;
  --gog-line-height-normal: ;
  --gog-line-height-relaxed: ;
  --gog-line-height-loose: ;
  --gog-density: ;
  /* Spacing */
  --gog-space-xs: ;
  --gog-space-sm: ;
  --gog-space-md: ;
  --gog-space-lg: ;
  --gog-space-2xl: ;
  /* Elevation */
  --gog-elevation-ink: ;
  --gog-elevation-key-alpha: ;
  --gog-elevation-ambient-alpha: ;
  --gog-elevation-contact-blur: ;
  --gog-elevation-key-x: ;
  --gog-elevation-key-y: ;
  --gog-elevation-key-blur: ;
  --gog-elevation-ring-width: ;
  --gog-elevation-highlight-ink: ;
  --gog-elevation-highlight-alpha: ;
  /* Motion & Focus */
  --gog-duration-fast: ;
  --gog-duration-base: ;
  --gog-duration-slow: ;
  --gog-focus-ring-width: ;
  --gog-focus-ring-offset: ;
  --gog-disabled-opacity: ;
  /* Stacking */
  --gog-z-base: ;
  /* Control Metrics */
  --gog-control-padding-y: ;
  --gog-control-padding-x: ;
  --gog-control-icon-offset: ;
  --gog-control-clear-icon-ratio: ;
}