GUILD OF GLEKS UIv21.4.4
← 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. Change one and watch the whole gallery below follow.

Fonts & Type Scale

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

Palette

--gog-background-color
--gog-surface-color
--gog-hover-color
--gog-border-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

Spacing & Radius

--gog-space-xs
--gog-space-sm
--gog-space-md
--gog-space-lg
--gog-space-2xl
--gog-radius
--gog-panel-border-width

Motion & Focus

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

Control Metrics

--gog-control-padding-y
--gog-control-padding-x
--gog-control-icon-offset
--gog-control-border-width

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.

Autocomplete

Badge

Button

Button Toggle

Calendar

August 2026
SunMonTueWedThuFriSat

Checkbox

Chip

Angular
Informational

Datepicker

Dialog

Divider

OR

Icon

Input Field

Multiselect

Paginator

Progress Bar

Radio Group

Delivery

Select

Skeleton

Slider

45
0100

Spinner

Table

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

Tabs

Profile content.

Tag

AvailableDeprecatedBetaNew

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-btn-active-scale
--gog-btn-border-style
--gog-btn-border-width
--gog-btn-disabled-opacity
--gog-btn-focus-ring-offset
--gog-btn-focus-ring-width
--gog-btn-font-family
--gog-btn-font-weight
--gog-btn-gap
--gog-btn-ghost-bg
--gog-btn-ghost-border
--gog-btn-ghost-color
--gog-btn-ghost-hover-bg
--gog-btn-ghost-hover-color
--gog-btn-ghost-hover-shadow
--gog-btn-ghost-shadow
--gog-btn-ghost-spinner-color
--gog-btn-letter-spacing
--gog-btn-lg-font-size
--gog-btn-lg-padding
--gog-btn-line-height
--gog-btn-loading-opacity
--gog-btn-md-font-size
--gog-btn-md-padding
--gog-btn-outline-bg
--gog-btn-outline-border
--gog-btn-outline-color
--gog-btn-outline-hover-bg
--gog-btn-outline-hover-color
--gog-btn-outline-hover-shadow
--gog-btn-outline-shadow
--gog-btn-outline-spinner-color
--gog-btn-primary-bg
--gog-btn-primary-border
--gog-btn-primary-color
--gog-btn-primary-hover-bg
--gog-btn-primary-hover-color
--gog-btn-primary-hover-shadow
--gog-btn-primary-shadow
--gog-btn-primary-spinner-color
--gog-btn-radius
--gog-btn-secondary-bg
--gog-btn-secondary-border
--gog-btn-secondary-color
--gog-btn-secondary-hover-bg
--gog-btn-secondary-hover-color
--gog-btn-secondary-hover-shadow
--gog-btn-secondary-shadow
--gog-btn-secondary-spinner-color
--gog-btn-size-font-size
--gog-btn-size-padding
--gog-btn-slg-font-size
--gog-btn-slg-padding
--gog-btn-sm-font-size
--gog-btn-sm-padding
--gog-btn-spinner-max-size
--gog-btn-text-transform
--gog-btn-transition-duration
--gog-btn-variant-bg
--gog-btn-variant-border
--gog-btn-variant-color
--gog-btn-variant-hover-bg
--gog-btn-variant-hover-color
--gog-btn-variant-hover-shadow
--gog-btn-variant-shadow
--gog-btn-variant-spinner-color
--gog-btn-xsm-font-size
--gog-btn-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-xs: ;
  --gog-text-sm: ;
  --gog-text-md: ;
  --gog-text-lg: ;
  --gog-text-xl: ;
  --gog-text-2xl: ;
  --gog-text-3xl: ;
  /* Palette */
  --gog-background-color: ;
  --gog-surface-color: ;
  --gog-hover-color: ;
  --gog-border-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: ;
  /* Spacing & Radius */
  --gog-space-xs: ;
  --gog-space-sm: ;
  --gog-space-md: ;
  --gog-space-lg: ;
  --gog-space-2xl: ;
  --gog-radius: ;
  --gog-panel-border-width: ;
  /* Motion & Focus */
  --gog-duration-fast: ;
  --gog-duration-base: ;
  --gog-duration-slow: ;
  --gog-focus-ring-width: ;
  --gog-focus-ring-offset: ;
  --gog-disabled-opacity: ;
  /* Control Metrics */
  --gog-control-padding-y: ;
  --gog-control-padding-x: ;
  --gog-control-icon-offset: ;
  --gog-control-border-width: ;
}