Component gallery

Tap, hover, and type — everything here is live. Skins:

Foundations

Warm paper and coffee ink for a 6 AM room. Ember is the only action color; pine means "here". Serif for numbers that matter, system type for everything else.

bg
card
ember — action
pine — present
amber — in progress
rust — attention

Live count — <g-count>

The number the greeter glances at as the room fills. Kiosk header.

early door
filling, with guests

Roll-call card — <g-card> signature

The manual check-in fallback: tap a name, it flips to "Here" with the time. Try tapping these.

not yet arrived (tap it)
checked in
first-time guest

Search — <g-search>

Filters the roll-call grid as you type. Try it on the demo grid below.

Stat tile — <g-kpi>

Admin dashboard headline numbers. Tone only when the number needs attention.

plain
good
alert

Weekly trend — <g-trend>

Saturday attendance, one bar per week. Hover a bar for the exact count; the latest week is labeled directly.

Group health — <g-health>

Of each group's members, how many showed up in the last four weeks.

Status chip — <g-chip>

Outreach states. Icon + word, never color alone.

Call list row — <g-outreach>

Who to call, how long they've been missing, and one button to move it along. The button advances the status — try it.

Meeting row — <g-meeting>

Past meetings show attendance; upcoming ones show as ember.

Add a member — <g-intake>

Default is the minimal ask: email, mobile, and the communication checkbox. The full kiosk variant adds name, invited-by, and instant-promote via the fields attribute. Submit either — the gallery just echoes what it captured.

default (minimal)
full kiosk intake

Token gate — <g-gate>

First-run screen on a kiosk or admin browser: paste the token once, it's remembered.