Contract v1.1 · web kit
One studio, many skins.
Every token, component, screen, icon and sound slot the studio shares, drawn live from the tokens of the theme you pick. A game changes values, skins, or replaces a component; the names, states, focus ring, touch target and sound slots stay.
Theme studio-dark
Color roles
Each role with its value in this theme and its contrast against color.bg.
Text roles need 4.5:1, UI roles 3:1.
Contrast pairs
The pairs the build checks (WCAG AA), measured in the browser for this theme.
| Pair | Sample | Ratio | Needs | Result |
|---|
Type scale
Six roles. Display, title and heading use font.display; the rest use font.body.
Space and radius
space.0 to space.8; radius steps and borders.
Elevation
Shadows lift surfaces; glows matter for dark neon themes.
Motion
Durations and easings. Reduced motion (the OS setting or the switch above) sets every duration to 0ms.
Button and icon button
Four variants, three sizes, five states. Hover, pressed and focus are shown forced; the live ones are below each table.
Toggle, slider, cycle
A toggle is a button role="switch"; a slider is a native range input; a
cycle steps through options with its arrows or the arrow keys.
Tabs and panels
Arrow keys move between tabs. Panels come flat or raised.
aria-selected and plays ui.move.Panel, flat
On color.surface, hairline border, no shadow. For lists and grouped settings.
Panel, raised
On color.surface-raised with shadow.md. For menus over the game.
Dialog, toast, tooltip
A native <dialog> with a themed backdrop and focus return; toasts in four
variants; a tooltip on hover and keyboard focus.
Dialog
Opens with ui.open, closes with ui.close; Esc plays ui.back.
Tooltip
Toast
Meter
A native <meter>: health, charge, progress. The default variant follows
low, high and optimum.
Form controls
Native elements first: input type="checkbox", radios in a fieldset,
select (the stylable select where the browser ships it, a drawn caret elsewhere),
input and textarea. A field-row holds a label, a description and
a control, and stacks itself below field-row.stack-below.
field-row, live
Click anywhere on a row to reach its control; ArrowUp and ArrowDown move row by row.
The soundtrack under every scene.
Stacked: the control sits under the label.
Disabled: not in this build.
field-row, narrow
The same inline rows in a narrow box stack without a media query.
Choice tiles
single is a label around a radio; multi is a
button aria-pressed. Selected draws choice-tile.border-selected and a check
badge; locked plays ui.deny.
Live
Lists and structure
section-header, divider, list-item, a themed
scroll-area and the disclosure on <details>.
eyebrow
Section header
line
strong
inset
scroll-area
Patch notes, version 1.4. Drag the bar (it turns dragging), or focus the area and use the arrow keys.
New: a lantern that lights the cave. Changed: the river is slower in the first world. Fixed: the owl no longer sleeps through the boss.
New: three save slots. Changed: captions follow the caption-size setting. Fixed: controller focus after closing a dialog.
New: high contrast and color-vision layers. Changed: buttons grow with the text size. Fixed: a stuck key after rebinding.
New: the community screen. Changed: links ask a grown-up first in kids' games. Fixed: the share sheet on small screens.
disclosure
What is saved?
Your progress and settings, on this device only.
Open
The [open] state, with the chevron turned.
Disabled
Hidden.
Progress, badges, chips
progress-bar is a native <progress>; no value makes it indeterminate.
Badges sit on the soft status fills; chips come as status, filter and input.
Captions
Sized by caption.size.* (the player's caption size), never by the text scale.
The backing opacity follows caption.opacity.
v1.2 forms: stepper, hold-button, assign-slot
parts/forms.css. Every size, variant and state; the live rows play their sounds.
v1.2 layout
parts/layout.css: content-card, sheet, grid, carousel, pagination-dots, action-bar, nav-rail, data-table, avatar, setting-detail.
v1.2 feedback
parts/feedback.css: notice, spinner, empty-state, change-readout, chart, stat, stat-breakdown.
v1.2 overlays
parts/overlays.css: popover, help-mark, context-menu, timed-confirm, keyword-link.
v1.2 amends
Each amend beside its earlier form: slider, toast, tabs, tooltip, list-item, progress-bar, icon-button, caption, resource-bar, badge, panel.
v1.2 patterns
screen-stack, input-mode and screen-reader live; drag-and-drop is in the assign-slot row above.
v1.2 screens
The four new core screens and every amended screen, built from contract/screens.json: every item in order, group headers, repeated items, reset. Toggles marked data-sds-setting (reduce-flashing, reduced-motion, menu-narration) set the kit's switches.
Input pack: keycap and rebind-row
A keycap draws the glyph for an action on a device (data-device, data-action)
from glyphs.svg, with its text as the fallback and the accessible name. A rebind row
listens for the next key or gamepad button and raises sds-rebind; the game stores it.
Follows the last device
These caps use data-device="auto". Pick a family, or press a gamepad button.
- Confirm
- Confirm
- Back
- Back
- Previous / next tab
- Previous tabNext tab
- Move
- Move
rebind-row, live
Activate a row, then press a key (Esc cancels). Bind two rows to one key to see a conflict.
No rebind yet.
HUD pack: hud-bar, resource-bar, counter
A glass bar inside the safe area. Resource bars take value, max, segments and turn
low at resource-bar.low-at and critical at
resource-bar.critical-at, with a hatch and a pulse, not color alone. Counters count to
their new value (they jump under reduced motion).
game view
Map pack: map-controls
A toolbar of buttons that raise sds-zoom-in, sds-zoom-out,
sds-recenter, sds-toggle-layer and sds-fullscreen; the game moves
its camera and sets data-state="at-min-zoom" or "at-max-zoom" at the limits.
Zoom 3 of 5.
Connect pack
Wired to the real studio profile (dist/web/studio-profile.json) merged with the theme's
game. The kit never sends data: forms raise events. Every external link goes through one
setOpenExternal hook; kids' themes ($parentalGate) ask a grown-up first.
contact-card
link-row
Studio websiteOpens signalandecho.com in your browser Disabled linkaria-disabled plays ui.denyshare-sheet
qr-code
feedback-form
sds-submit (feedback): not fired yet
newsletter-signup
sds-submit (newsletter): not fired yet
rating-prompt
Screens
The shared screens, built from the kit only, items in contract order. Each opens with
ui.open, closes with ui.close, goes back with ui.back; inside a
screen, Escape presses its back button. Stacked screens use screen-header.
Signal & Echo presents
Lantern Run
Paused
Settings
Display
Audio
Accessibility
Controls
Credits
A Signal and Echo game
- Design
- Signal and Echo
- Code
- Signal and Echo
- Sound
- Signal and Echo
- Design system
- studio-design-system
- Input glyphs
- Kenney (CC0)
- Thanks
- Every player who tested
Load game
Victory
The cave is lit. Chapter 3 complete.
- Time12:48
- Lanterns lit18 / 20
The lantern went out
You reached the second bridge.
- Time06:02
- Best12:48
Delete this save?
The Lantern Cave, chapter 3. This cannot be undone.
The safe choice comes first and takes focus.
Loading
Feedback
Icons
Grid 24, stroke 2, round caps, currentColor.
Input glyphs
Kenney Input Prompts (CC0), from dist/web/glyphs.svg, symbol ids <device>-<name>.
Brand icons
Simple Icons (CC0 data; the marks are their owners' trademarks), from
dist/web/brands.svg. Monochrome, or the official color with brands.css; never
recolored otherwise.
Sound slots
Play, repeat or compare each slot through sds-sound.js. Volume and Stop all cover the whole section.