Labs

Map element studio

Live in-browser tuner for map markers — layers, states, and design tokens, rendered on the real map.

/pin-tuner

Scrim lab

Tune the liquid-glass scrim over a live full-bleed map — tint, blur, saturation, fade and height, across both themes and both basemaps.

/scrim-lab

Layers panel studio

Interactive editor for the map Layers panel — the real component over a basemap still, with full typography control per text role.

/layers-lab

Dropdown layouts

Ten common dropdown / select patterns built on the shared form-control kit.

/dropdown-lab

Input lab

Seventy-six field recipes — fill, rim, depth, focus, disclosure, label and density — on the real query form, light and dark, beside the production buttons.

/input-lab

Field layouts

~30 ways to arrange label, value, and control — with when-to-use notes + macro examples.

/field-lab

Inline edit — save & cancel

Nine live ways an open field offers commit and abandon — in-field icons, attached groups, buttons below, commit-on-blur.

/inline-edit-lab

Data grid

Roster card view

The student roster in two views — the table, and a grid of portrait cards — on the full 1,372-student district list, for measuring the card view before it ships.

/roster-lab

Data grid

Column filters

Excel/ag-grid per-column filtering on the real Fleet grid — label sorts, funnel filters, counted checklists and min/max ranges.

/column-filter-lab

Data grid

Paste grid

Paste a CSV or TSV range into a spreadsheet-like studio — edit cells in place, rename and reorder columns, map each to a SMARTtag field, and dry-run the import against the real roster.

/paste-lab

Capability ticker lab

Tune the landing’s capability wheel on the real page — beat, travel, easing, fade curve, row geometry and edge dissolve, live.

/ticker-lab

Puck lab

Sculpt the Waze-style DrivingBus puck over the roaming road — tilt, extruded thickness, border, roundness, colors, shadow and glow, live.

/puck-lab

Brand

Generate the fictional school-district wordmarks for the landing’s social-proof row — a mark from src/shapes/ plus a name and a qualifier, each with its own family, weight, size, tracking, case and grey. Roll for a whole set, Copy TS to bake it.

/logo-lab

Badge lab

Tune the icon badge (.icon-plate) on the real driver-band rows — translucent fill, gradient rim, inset well and outer cast, over grid, canvas or photo, with a size ladder.

/badge-lab

Orb lab

Shape the golden bullet — flat, raised stud, inset notch, or isometric extrusion, with color, rim, shadow, glow, squash and animation.

/orb-lab

Toggle motion

Bench for the switch slide — every token easing and duration side by side, plus a main-thread load test.

/toggle-lab

Button lab

Tune the tactile face-and-chassis foundation, replay press/hover motion in slow-mo, and bench tooltips and latched selected states.

/button-lab

Button lab 2

The bench-control chip style in isolation — press and latched states, pinned side by side in light and dark.

/button-lab-2

Component lab

Showcase of UI primitives and patterns — cards, badges, map markers.

/lab

Icons

Icon lab

Browse the brand icon set.

/icon-lab

Assets

Photo library

Every photograph under a short ID (B1, S4, T7) you can call out by name — searchable, filterable, with a per-photo crop check.

/photos

Tokens

Foundations

The design tokens — color, type, spacing, motion, elevation.

/foundations

Place pin lab

Place-pin family exploration (stops, schools, depots, hazards…).

/place-pins

Pin 3D lab

Give the place pins body for the driving road — tilt, clone-stack extrusion, wall shade, lift and ground shadow, judged near/mid/far on the rolling grid.

/pin-lab