Galileo Viewer Kit · Catalog
Live previews and reference for the kit's tokens, atoms, UI components, and widgets. Pages here load the kit's actual CSS and custom-element code via relative paths into the vendored kit tree — the same files the lab loads — so a render mismatch here is a kit-side bug, not a catalog-side one.
Simulating
Clip running · step bar carries the SIM phase chip · time-control bar at bottom-centre with the device widget stacked above it
Conventions
Three rules that explain most of the system
| Convention | What it does | Where you see it |
|---|---|---|
| Two type families | Plex Sans for chrome, Space Grotesk for narrative voice, Plex Mono for numeric readouts. Three voices kept strictly apart so each role reads at a glance. | Buttons · step instructions · value readouts |
| Hard offset shadows | No blur. Every elevated surface uses a 2–6 px solid offset (2px 2px 0, 5px 5px 0, 6px 6px 0) that reads as ink-print, not glass. |
Step bar · widget bar · completion screen |
| Tight rectangles | --radius-full: 2px is the default for buttons and bars; true circles use --radius-pill: 9999px. Chosen to look stamped, not glassy. |
Buttons · widget bar · step-bar phase chip |
Foundations
The visual layer behind every Galileo investigation. A creamy lab-bench surface, hard-offset shadows, Space Grotesk display type for instructions, IBM Plex Sans for body, IBM Plex Mono for labels and numeric readouts.
Typography
IBM Plex Sans for chrome, Space Grotesk for narrative, IBM Plex Mono for data — with a 7-step display scale.
3 families · 7 sizes · 4 weights
Open → FoundationsSpacing & rhythm
Six spacing tokens from 8 → 32 px.
6 steps · 8 → 32 px
Open → FoundationsColor
Cream lab bench, yellow sticky chrome, ink black, cyan highlights, and the semantic palette read live from tokens.css.
All swatches resolved at runtime
Open → FoundationsRadii & shadows
Tight rectangles by default, true circles only when intended. Hard-offset shadows — never blurred — so every elevated surface reads as ink-stamped paper.
Open → ReferenceAtoms
Buttons, pills, toggles, indicators, and label primitives — the shared classes every component and widget reuses.
Buttons · pills · toggles · indicators
Open →Components
The UI a student sees around the 3D scene, one page each.
Step bar
StepBarHandler · #step-bar · handlers/stepbar/step-bar.css
Time control
TimeControlHandler · #time-control · handlers/time/time-control.css
Time-skip callout
TimeSkipCalloutHandler · .tsc-callout · handlers/time-skip/time-skip-callout.css
Labels
Open →Picture-in-picture
<lab-pip-panel> · js/components/pip-panel/
Modal
ModalHandler · #modal-backdrop · handlers/modal/modal.css
Completion
CompletionHandler · #completion-backdrop · handlers/completion/completion.css
Pause overlay
PauseOverlayHandler · 6 px green inset · handlers/overlay/pause-overlay.css
Loading screen
LoadingHandler · handlers/loading/loading-screen.css
Restart
RestartLinkHandler · handlers/restart/restart-link.css
Instruments
Per-device controls, grouped by control archetype.
Patterns
How the pieces behave in a lab: what the student does, what the kit decides, and how an author asks for it.
Touchbar widget
How a student sets a graded physics parameter by gesture and commits it.
Three skins · case by case
Open →Case by case
Eight real lab moments, each pinned to its true gesture, instrument, unit and readout mode.
Open →Object labels
How a student knows what each thing on the bench is.
State gallery · conceptual model · 22 behavioural rules · hazard marks · drag choreography · the numeric exception
Open →Liquid level mark
A bright ring around a vessel at the height its liquid started at, with a caption where the lesson asked for one.
Conceptual model · 4-moment walkthrough · before/after diagram · caption rules
Open →Precision dispense
How a student tops a graduated cylinder up to an exact volume with a Pasteur pipette — one drop at a time, under a hard-prevent overshoot guard.
Conceptual model · 5-step walkthrough · UI element states
Open →Calculating state
What the student sees while the physics server works out what happens next.
Trigger rules · state on its own · state in the lab · what is hidden and why
Open →Camera presets
Twelve camera roles in six families every investigation draws from — intro, working, overhead, instrument, phenomenon, compare and their close, focused and high variants — with a map for choosing one, how close each sits, and the rules that govern when each one fires.
12 roles · 6 families · 7 rules · 3 applied examples
Open →Microscope
How a student looks at a sample under a microscope — drag the sample onto the plate, the picture-in-picture panel mounts, switch objectives, drag the sample back.
Conceptual model · 5-step walkthrough · authoring snippet
Open →Magnifying glass
How a student looks at a sample with a magnifying glass — drag the glass to hover over a sample, the picture-in-picture panel follows.
Conceptual model · 4-step walkthrough · authoring snippet
Open →Smell
How a student smells a sample. Smell has no instrument: the camera close-in is the affordance, and a short authored line on the widget bar carries the description.
Conceptual model · 3-step walkthrough · authoring snippet
Open →Telemetry graph
How a student watches several measured quantities change over time — speed, force, acceleration — as curves on a shared clock.
Live demo · anatomy · states gallery · how it works
Open →Screens
Whole lab screens, assembled from the pieces above.