Skip to main content
Gelium UI
Blog View source 0.6.5 Theme Gallery
Appearance
Menu

Theme gallery

Component recipe
Advanced

Contract controls Gelium platform floors (for example touch targets). Source-faithful keeps third-party skin density; product CSS can still override either mode.

Execution does not change behavior. HTMX is optional server enhancement; native details remains the baseline.

Native behavior · Default for behavior · Gelium defaults · Native baseline

Visual mapping: Default uses reference=auto + skin=none; Material and Base UI neutral use Gelium reference presets; Basecoat packs, Vercel, Alden, and Linear use product skin overlays. Base UI neutral is not official Base UI CSS. Contract defaults to Gelium floors; contract=source opts into source-faithful density.

Native field with floating label.

Open dialog
New information is available.
Your changes were saved.

  1. Live component card

    This is the same Gelium card markup used by every theme.

  2.
  1. Dot — pair with accompanying text
  2. 3 Count badge
  3. New Label badge

A live design-system card for the active theme. This live kitchen-sink compares the Refero direction with Gelium’s resolved implementation. Use the Theme Gallery link in navigation; the native theme selector and light/dark switcher remain available above.

Active direction · Material · light or OS preference

Expressive purple surfaces, generous controls, and tonal elevation.

Accordion profile: native behavior · native execution. Skin is the active theme above; behavior and execution are independent contracts.

Honest per-theme font metadata: source, family, available weights, subset, loading status, and mapped Gelium tokens.

Inter / system sans; SFMono-Regular / Consolas

Source
System fallback
Weights
400 / 500 / 600
Subset / status
Platform-provided; no bundled subset · system fallback stacks; no dedicated webfont pack
Gelium mapping
--ui-font-sans; all sans type families

Material monospace

Source
System fallback
Weights
400 / 500
Subset / status
Platform-provided; no bundled subset · Used only when the mono token is requested
Gelium mapping
--ui-font-mono; code and mono roles

Actual values from the active theme stylesheet. Every swatch includes its role, token, and value.

Canvas--ui-color-canvas#fff7ff · page background
Primary--ui-color-primary#6750a4 · primary action
Surface--ui-color-surface#f7f2fa · alternate surface
Foreground--ui-color-fg#1d1b20 · primary text
Border--ui-color-border#cac4d0 · hairline

Live CSS uses the decomposed --ui-type-* tokens; aliases are never redeclared by themes.

Design systems should be legible

Display--ui-type-display-lg3.5rem / 4rem · tracking normal

A live headline specimen

Headline--ui-type-headline-sm1.5rem / 2rem · tracking normal

The active theme supplies this real body role.

Body--ui-type-body-md1rem / 1.5rem · tracking normal

TOKEN LABEL

Label--ui-type-label-md.875rem / 1.25rem · tracking normal
Base unit--ui-space-1.25rem · Gelium spacing vocabulary
Control--ui-size-controltheme-defined · live control geometry
Field--ui-size-fieldtheme-defined · floating-label headroom
Card radius--ui-card-radiustheme-defined · component anatomy token
Container--ui-container-max64rem · core max-width contract

Material 3-inspired semantic roles

Implemented directly

semantic color roles, typescale, controls, fields, cards, badges, status, focus, scheme switching, and a semantic blockquote/figure quote

Adapted / approximated

Refero spacing and shape are mapped to Gelium --ui-space/--ui-size/--ui-radius vocabulary; component anatomy keeps Gelium markup

Missing or intentionally out of scope

blue wash, logo strip, avatar stack, and product stage remain decorative style-specific patterns, not global primitives

A calm interface gives important work room to breathe.
— Gelium design-system audit

Audited against existing rich-article blockquotes: Gelium reuses semantic figure, blockquote, and cite rather than adding a decorative quote primitive.

Native details/summary is always the fallback. HTMX is an optional server-driven enhancement only; it does not own open/close state and no custom JavaScript runtime is used. Try Alden + Base UI + native, Vercel + Material + native, or Linear + native + HTMX fallback.

Frequently asked questions

Is this native HTML?
Yes. Each item is a details/summary disclosure and remains usable when JavaScript is disabled.
Does it follow the active theme?
The same semantic markup is styled with the active theme's accordion and focus tokens.
Where does HTMX fit?
HTMX may progressively enhance a server-rendered panel; it is not required for opening or closing items.

These controls are real server-rendered Gelium components, not screenshots or decorative replicas.