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.

Material behavior · Vercel · 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 · Vercel · light or OS preference

Light-first typeset terminal on white paper: crisp hairlines, black actions, blue interaction, and compact status dots.

Accordion profile: material 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; Geist Mono name with platform mono fallbacks

Source
System fallback
Weights
400 / 500 / 600
Subset / status
Platform-provided; no bundled subset · Geist pack not verified or bundled; fallback stacks only
Gelium mapping
--ui-font-sans; all sans type families

Vercel 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#fafafa · paper canvas
Elevated--ui-color-surface#ffffff · raised surface
Recessed--ui-color-surface-container#f2f2f2 · recessed surface
Ink--ui-color-fg#171717 · primary text / black action
Interactive--ui-color-primary#0072f5 · interactive blue
Hairline--ui-color-border#ebebeb · shadow-as-border outline

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-14px · 4px-derived compact rhythm
Control--ui-size-control2.75rem · touch-safe; reference 32/40px heights are not copied
Field--ui-size-field3rem · floating-label and 44px touch contract
Card radius--ui-card-radius12px · reference card panel anatomy
Container--ui-container-max80rem · about 1280px; not the reference breakpoint list

Refero Vercel · design-bites DESIGN.md

Implemented directly

semantic colors, black primary/outline controls, fields, cards, badges/status dots, type direction, spacing, dark class route, focus-visible and live Gelium components

Adapted / approximated

Geist becomes Inter/system fallback; Refero anatomy maps to Gelium tokens; status palette remains compact dots/icons; card panels use 12px while functional controls use 6px

Missing or intentionally out of scope

verified Geist font files, 32/40px form heights, 45px breakpoint list, brand triangle/wordmark, marketing gradients, bespoke product-stage and avatar-stack primitives, and a core focus double-ring token

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.