examplicity

Design system: brand, colour, type, spacing and components for the Examplicity site and its labs, drawn from the codebase and the current lab standard.

This page is the single design reference for the site and its labs; how to build, adapt and check a lab is on Adapt or create. Shared CSS: token layer and components · lab components. Updated 10 October 2026.

Brand

Lab drawingsConcept line drawings: 4px round stroke, one blue accent shape

Catalogue card art · app/lab-icon.tsx · 640 × 360 canvas

colourink, one blue accent, paper white; grey only for thin context lines (secondary-line thin-lines), never a fill heroone bold object in ink outline, a quarter to a half of the drawing (beaker, padlock, rover, lens) supporting casttwo to four simple outline shapes; at most one construction or context line blue focusexactly one, about 5% of the area or less; lines tone-one focus-line, fills is-solid tone-one line weights4 primary · 3 detail (thin-lines) · 5 blue focus (focus-line) · no one-off strokeWidth sizesdots 5 / 7–8 / 10 focus · nodes 16, leaves 12 · tiles 20–24, focus 24–30 · radii 4–5, 6, 12, 16, round marksopen chevron, 12-unit arms · dotted 1 12 = reply · dashed 6 7 = empty slot · solid dot = 1, hollow = 0 compositionsafe area x 64–576, y 56–308 · 75–85% of the width · overlaps use fill var(--paper)

Abstract ink on paper: one mechanism or gesture per card, tied to the lab's idea, never a screenshot of the lab. Objects over diagrams.
No letters or numerals, except binary 0 and 1 in the monospace face at 32 units. No clichés: stars for errors, clock faces, filler app windows.
Solid black only for small accents or a data pattern that needs it (set pixels), never slabs or bars. When in doubt, remove an element rather than shrink it.
Prefer the direct idea: when an earlier drawing showed the mechanism plainly, redraw it to these rules rather than swapping in a looser metaphor.
Squint test: at 200–400px wide the card reads as one clear silhouette with an obvious blue focus. Details under 12 units, or bits closer than 24 units, blur.

Lab artworkInside a lab: draw the thing, not a labelled box

Draw thisreal apparatus, labelled in the prompt's words

Not thislabelled boxes explain nothing

Draw real apparatus, devices and anatomy with the subject's conventions right. Precise symbolic subjects may stay schematic.
Keep or improve source artwork when changing a lab; port its drawing functions. Grips, tags and notes are drawn to the scene's standard, not pasted on as interface chrome.
The parts bank, the drag preview and the placed item use the same artwork. Flat interface styling never flattens physical objects: keep bezels, ports, key shapes and restrained depth.
Circuits: wires meet ports, junction dots join branches, gaps mark crossings, and output paths carry their current bit values.

IconsMaterial Symbols (filled) for features; hand-set 1.7px line icons in chrome

school

explore

code

auto_awesome

remix-sparkle

download

arrow-up-right

pause

Icons label site features and chrome actions. Inside a lab, an icon is never the only handle: operable things carry a one-word label in the prompt's word.

Wordmark“exam” in accent blue + “plicity” in ink

examplicityexamplicity Examplicity icon

Weight 680, −.055em tracking. Site chrome only; a lab body names the lab, not the brand.

Colors

Accent blueThe single site blue: actions, current execution, goal ink

accent-surface#f8fbff

accent-soft#eef2fa

accent-line#9fb4d6

accent#5277b8

accent-hover#4569aa

accent-pressed#3a5d99

accent-ink#315b91

Blue introduces or identifies an action: selection, a cue, the current execution step, the current progress segment. It never judges work as right or wrong.
Selected: accent-soft fill, accent border, accent-ink text. Focus is a 3px ink outline, not blue.
In the v5 lesson shell the primary button is ink-filled; blue marks position and selection. Existing v3 labs keep their blue primary lab-action.

Concept identityObject/process identity colours; tinted at 20–30% over white

violet#7563a7

amber#c9782c

amber-soft#fff2e6

amber-line#e0b383

rose#b85f52

rose-soft#fff1ef

slate-ink#34454f

concept-blue#4779b7

blue#4779b7 · 30%

teal#2d8792 · 30%

violet#7563a7 · 30%

amber#c9782c · 30%

rose#b85f52 · 30%

slate#536773 · 30%

Use identity colour only where it carries model meaning, and name it by the subject it represents: blue A, teal shared factors, amber Ready rule.
Tint at 30% over white (--lab-concept-*-surface); inside a tinted parent use the opaque -fill. Never stack tints. Number tiles and given model values stay white.
Identity never implies correctness, and model colours (painted pixels, insulation, indicator colours) stay data, independent of the interface palette. Pair identity colour with a label or shape.
Flat interface fills, no decorative gradients. Meaningful instrument shading is not decoration.
v5 labs: violet is reserved for the learner's mark (see Learner state). Use blue, teal, amber, rose or slate for identity. Existing v3 labs keep their violet maths material.

Learner stateNeeded yellow, correct green, mistake red — reserved for learner work

Needed

soft #fff9db

surface #fffdf4

line #d8c36a

base #946200

ink #735100

Correct

soft #edf8f1

surface #f7fcf8

line #9cc7aa

base #18794e

ink #225f43

Mistake

soft #fff0ee

surface #fff8f7

line #d99b93

base #b42318

ink #8f2f27

Marks in the picture · v5

Learner's markviolet · nothing else

Heldsolid green ring

Missedgrey dashed ring · actual result shown

Kept reading / ghostdashed, stays where reality differs

Working fields get a complete semantic border; other feedback gets the full surface with a ✓ or ×. No one-sided state rails, and never colour alone.
Yellow is unfinished work the learner owes; green is a checked correct result; red is a checked mistake. Supplied values stay neutral or concept-tinted.
In a v5 lab the verdict lives in the picture, in the subject's notation, with the learner's mark beside it. A miss plays out: the real result appears next to the dashed ring so the learner can compare and repair.
A ghost shows the outcome a commitment implies, never the answer, and never a live match-by-eye.

NeutralsPaper, canvas, ink, lines — the Apple-like grey ladder

paper#fbfbfd

canvas#f3f5f7

surface-muted#f7f8fa

paper-hover#f0f0f2

line-subtle#e7e8eb

line#d2d2d7

line-strong#a7a7ad

muted#6e6e73

ink-secondary#424245

ink#1d1d1f

Site pages sit on paper; labs sit on canvas with white operated surfaces.

Syllabus palettesPer-qualification chip tints from app/labs.ts

CS IGCSE 0478CS AS/A 9618Maths 0580Biology 0610Chemistry 0620Physics 0625

bg / border / text / hover — e.g. maths #edf8f3 / #91c4b0 / #235f4e / #dcf0e7

Site chrome only: catalogue cards and the site's lab header. A lab body shows no syllabus codes; tier labels (Core, Supplement, Extended, A Level) are allowed.

Type

Body & labelsIntro, body, kicker, notes

Interactive Cambridge IGCSE Mathematics (0580) labs for exam practice and visual concept explanations you can see, change and understand.

intro · clamp(18–22px) · #424245 · -.018em · lh 1.45

Paint a bitmap, change its colour depth, and compare normal, RLE and Huffman encoding.

description · 14px · muted · lh 1.5

Visual experiment

kicker · 11px · 650 · .09em · caps

Interactive learning labs
note · 12px

DisplaySystem sans, heavy negative tracking, tight leading

Make complex
ideas click.

hero · clamp(52–108px) · 630 · -.075em · lh .88

FamiliesSystem font stack — no webfonts ship

Sans (system)
-apple-system, SF Pro Display, Helvetica Neue, Arial

Mono
ui-monospace, SFMono-Regular, Consolas

Index serif I
Georgia — only for index identifiers

The serif capital I appears only in index identifiers, so I1 and IX stay distinct; surrounding labels keep the sans.

HeadingsTopic, lab title, card and dialog headings

Data representation

topic h2 · clamp(36–56px) · 620 · -.055em

Binary Number Practice

lab title · clamp(25–40px) · 650 · -.045em

Report an issue

dialog · 27px

Huffman Rover

card h3 · 21px · 630

Lab type rolesRegular-weight, readable roles inside labs

v5 lesson shell

Supplement

kicker · tier only · 13px · 600 · accent-ink

Where must the screen go for a sharp image?

title · a question · 25px · 700

Drag the screen until the rays meet on it, then press Test.

prompt · one or two sentences · under the title

Thin-lens model; rays drawn from one point of the object.

v4-foot · limitations line · 12px · muted

v3 labs and shared roles

Find the upper and lower bounds of 7.4 cm.

goal · 16px · 400 · #315b91

Upper bound

card/section heading · 15px · 400

Half the rounding unit is 0.05, so the bound is 7.45.

working · 14px · lh 1.45

Reset model

label · 12px

Working

annotation · 11px

PRINT Total(4)

code · 14px mono · 24px lh

Size diagram text at its rendered scale: 14px body, 12px labels, 11px annotations. Nothing renders below 11px at 390px width; set SVG text units for the scaled viewBox.
Card titles: 15px regular, sentence case, 6px above their content (lab-card-title). Working stays 14px; field labels 12px.
Code inputs, syntax overlays and line numbers share 14px mono on 24px lines. Growing stacks gain height rather than smaller text.
Working is regular weight. Bold is for headings and the held verdict. No bold grey microtitles, all-caps labels or decorative tracking inside labs.
Reserve space or shorten wording before reducing type; a changed viewBox must not silently shrink labels (data-lab-readable-chart accounts for SVG scaling). Keep meaningful mathematical notation.

Spacing

Motion & attention.2s ease UI, .3s card lift, 2s attention pulse

blue guide pulse

Predict first

needed pulse

spinner .8s linear

card: .3s cubic-bezier(.2,.8,.2,1)
ui: .2s ease · chips 140ms
reduced-motion → static

Motion is the explanation: whatever changes travels a visible path, in one scene, with the moving thing big enough to follow. Pause about 700ms where the result meets the mark; the path stays drawn.
Reduced motion shows the start, the decisive stop and the end, and keeps the same evidence.
Attention: the first required control gets a one-time ring (on a choice screen, all options or none). Pulses stop once used; completed, locked and non-actionable items stay still. One pulsing target at a time.

Layout rhythm1200px rail, 28px gutter, generous section padding

max width1200px guttermax(28px, (100vw − 1200px)/2) header / footer bar66px / 58px topic section88px 28px 104px card grid gap48px row · 20px col · 3 cols lab column (v5)data-lab-col="standard" 900px · "wide" 1160px · 32px gutter (24px under 520px) lab check frames1366 × 644 and 390 × 672 (what the site header and footer leave) lab work card12px pad · 10px gap · 8px radius lab control height40px (36px compact) · v5 chip 44px · nav button 50px

Layout follows the learning, not a template. Header, title, prompt, picture, status and nav start and end on the column edges; no local widths.
Two columns only while the side column holds a real block (working, readings with a row, a graph); otherwise the picture takes the full width. The drawn subject spans about 60% of the column or more.
Vertical flow is fine: content below the fold is allowed, the subject is never squashed to fit. Keep column widths consistent and horizontal space balanced.
Phone is a redesign, not a shrink: stack, fold tables into rows, drop decoration before evidence. No horizontal page scroll.
Lay out against the actual container width, not the browser width. The site supplies the outer rail and the lab's manifest header; never rewrite generated chrome locally.
Keep the reading position across stage changes: model, current controls, required working and the main action stay in a stable vertical order. Keep or reserve working content rather than inserting and removing stage-only cards, without fixed reserves that clip longer text.

Corner radiiBig soft cards on the site, tight 8px controls inside labs

26pxpreview

22pxdialog

18pxmenu

12pxlab panel

11pxfield

10pxcontext

8pxlab control

4pxmath

999pxpill

20pxv5 picture card

22pxv5 chip (44px)

25pxv5 nav button (50px)

v3 lab controls are 8px rounded rectangles; pills there are reserved for syllabus chips. The v5 shell's chips, nav buttons and quiet actions are fully rounded at their heights.

ShadowsBarely-there elevation; menus and dialogs only go deep

panel

control

trigger

remix step

dialog

v5 picture card: 0 6px 20px #1d1d1f08. Working cards and nested panels have no shadow; use space within one parent before adding boxes.

Hit areas44px targets, drawn at their real size

Small terminalpainted 14px · target 44 × 44

Neighbourstargets meet, never cover each other

Imperfect dragstart 6–10px off, curve, release near

Every handle and button has at least a 44 × 44 target at 390px width (24px is a floor, never the target). This is input geometry, not painted size: keep connectors and grips their drawn size.
Overlaps are settled by the visible object; a hidden target never covers a neighbouring visible one.
A drag that starts off-centre, curves and releases near the target completes the act, with mouse and touch. Snaps settle the geometry but leave wrong constructions reachable.
The dragged surface owns the gesture; the page still pans from the background and header, and the first tap after a drag works.

Components

Site components first, then lab parts. v5 marks the current lesson shell for new and converted labs (shared tools in lab-v4.css, scoped by body.lab-v4-tools). v3 marks parts still shipped in existing labs: follow them when editing those labs; do not add them to a v5 lab.

ActionsSite pill buttons, shell buttons, idea chips; v5 lab buttons

Lab actions v5

v4-btn is lesson navigation only (Back, Continue, “Continue with this result”, Finish). v4-chip is Experiment and in-card actions; v4-quiet is utility actions; select.v4-select is selectors.
A disabled primary keeps its shape with the kit's muted fill; never fade it locally. Disabled is not secondary: no hover, shadow or movement, native disabled kept.
The lab's own action (Test, Run, Check, Send, Step) stays on its object where that is the direct interaction, and is named in the prompt by the word on the button.
Controls that are part of the subject (a bit switch, a socket, a nameplate) are drawn as that object, not given button chrome.

CatalogueLab cards and home feature cards

Visual experiment

Set Membership

Place elements in regions and build unions, intersections and complements.

Card art follows Lab drawings. The kicker names the lab's format; the description says what the learner does, in one sentence.

ContentRemix steps and changelog entries

Download the lab

A single HTML file that keeps working offline.

9 September 2026

Fixed missed clicks when building TCP/IP packets and replaced repeated guidance prompts with one expandable explainer.

HandlesDrawn, labelled, operated on the object

Grip tabon the object, labelled in the prompt's word

Boundary griplab-boundary-grip · drag halo while held

Switch with knoba subject control, drawn as the object

Act on the object: drag the chord, flip the switch, connect the socket, edit the bit where it is shown. Selectors and Run or Test controls may sit beside the picture; nothing covers the drawing.
Everything operable looks operable (grip tab, knob, bordered button) and carries a one-word label. A number, badge or plain region is never the only handle.
Grab and grabbing cursors; keep the pickup offset; end on release or cancel. Keyboard moves the same underlying variable as the pointer. LabDesign.bindSvgDrag supplies pickup, capture and release; the lab keeps constraints, snapping and maths.
Editors stay with the object: opening an editor, disclosure or menu never moves the picture or changes the scroll position. A control that cannot act says why in the status line.
Manipulate the model where it expresses the action (pull the percentage bar, move the graph point, rotate the ray); never add a second slider for the same operation.
Put grips only on existing geometry. A line that leaves view or degenerates gets a stable parameter control (lab-value-grip, lab-boundary-grip); freeze it during a proof if the lab requires it.

Lab controlsActivity bar, toggles, stage markers, lab actions v3

Find the bounds of 7.4 cm, rounded to 1 decimal place.

Working

Exam

Predict

Measure

Explain

One activity bar spans model and working: task left; extra settings, Working, Exam and real checkpoints right; model tools and resets below it. Controls wrap on narrow screens and stay above the model.
Working None / Some / All is one control reflecting the active mode; each mode keeps its own progress. None still requires operating the model. Stage markers show current, completed and upcoming with the same detail on hover, focus and tap; no counters or internal phase names.
Toggle geometry: 10px track corners, 7px segment corners, 3px inset, 1px neutral border, 0 1px 3px rgba(29,29,31,.08); regular 12px options at least 32px high; selected charcoal with white text; “Working” or “Exam” centred above in regular 11px, no colon. Expose selection with aria-pressed or radio semantics.
Offers read “Try some working” or “Try all working”. Qualification-specific working appears only where its content is implemented and verified; never invent assistance levels or an exam toggle.
Actions: primary blue with white text, secondary white with blue text, 8px corners, thin border, subtle shadow, regular 12px labels, 40px high (34px compact). Disabled #eef1f3 / #6e6e73 / #d2d2d7, no shadow, native disabled. A lone reset sits beside the model heading (data-lab-reset-target), clear of manipulatives; a visible tool container is rounded and never overlaps its parent.
Checkpoints are real stages, farthest right: no “1/4”, no internal phase names, no skip-ahead. Completed stages show their evidence; future stages describe the task without answers.
v5 replaces this bar with the lesson header in Lab shell: no Working levels, no exam toggle, no stage counters.

Lab shellThe v5 lesson, top to bottom v5

Converging Lenses

Supplement

Where must the screen go for a sharp image?

Drag the screen until the rays meet on it, then press Test.

The screen must go where the rays meet: 15.0 cm behind the lens.

Screen 15.0 cm from the lens.

Order: shared header (lab name, progress bar, route v4-select where there is a route, Experiment v4-chip, ↺ restart) · tier kicker (may be empty) · title, a question · prompt · picture card · status line · nav. Exactly one h1.
The prompt sits between title and picture and is fully visible on arrival at both check frames. One instruction per screen: the status line reports what the picture shows; it never adds a second instruction.
The verdict strip, <p class="v5-verdict" role="status">, is inside the card directly under the drawing: empty until a test, the earned statement in green on a hold, the comparison cue on a miss. It answers the title in the same words.
Progress shows position, not correctness. Experiment shows the lab name, no guided bar and “Return to guided”, restoring the saved stage exactly.

Lab surfacesHeader, canvas, stage surface, field; picture card and evidence regions

Rounded Measurements

Find limits of accuracy and test claims against them.

IGCSE 0580·C1.10

Measurement

Upper bound (cm)

The model owns its space: a white or transparent canvas with modest padding, readable labels and no internal scrolling of an operated diagram. Crop the viewBox to the drawing; no empty bands or reserved blank verdict boxes.
Function decides the layout. Keep the meaningful pairs side by side: sender → network → receiver, CPU and memory, editor and console, circuit and truth table, bitmap and encoding. Code panes, tables and logs may scroll.
Evidence cards (lab-evidence-card, lab-simulation): 12px padding and corners, 15px regular heading, 14px text, borderless inner explanations.
Readings: seven-segment instruments (LabDesign.digitalReadout) where rounded precision matters, keeping trailing zeros; live values as flat tinted material (data-lab-value). Compare displayed values, never raw floats.
Connections: thin straight segments anchored to real device edges, no arrowheads; directional dashes show transfer and stay static with reduced motion.
Protocol workbenches: configuration in one row and frame actions in a second near the model; the live phase beside the transmission path; result cards revealed when data arrives; optional protocol detail in a disclosure.
Some guidance works better inline: lab-working-context keeps a short current requirement above a simulation. Genuine editing popups, such as a flowchart statement chooser, stay.

Lab workingWork cards, claim context, maths surface, chips

Claim: the true length could be 7.45 cm

Test the claim against the limits of accuracy.

It holds only if the value rounds to 7.4 cm.

Upper boundAdd half the unit: 7.4 + 0.05Work needed

Lower bound7.4 − 0.05 = 7.35Correct

Endpoint7.45 rounds up to 7.5, so it is excluded.Try again

GivenRounded to 1 d.p.

GivenRemainder 3Sample B

IGCSE 0580·C1.10, E1.10 A Level 9618·19.2

Work cards: full fine border, 12px padding, 8px corners, 10px between steps, no shadow or nested panels. Checks and crosses sit at the field, not also in the card corner.
Required unfinished work pulses yellow; red attention only when correcting a mistake is the current action (data-work-state="bad" with data-lab-attention="true", dismissed by data-interacted="true"). Focus or touch stops the pulse and dismissal survives redraws. Current, completed and upcoming steps stay visible at every support level; supplied values swap for fields in place.
Sequenced attention (LabDesign.attention(scope, targets)) follows the required step (prediction → control or calculation → next action) and pulses the actual grip, not the whole diagram. Recompute after each state change; clear with [] in free exploration.
The learner computes from the model's own readings and the result sets or checks the model. Never print the method with the learner's numbers substituted, or a field that shows the value they are asked to produce.
Claim context (lab-context): light blue, no border, 12 × 16px padding, 15px heading, 14px text. Keep the claim and its criterion visible through an investigation without giving the unearned result.
Maths surface: borderless 20% tint, 4px corners, 3 × 7px padding; it identifies content, not correctness (in v5, not violet). Chips are information, not controls.

NavigationSite header and footer; v5 lesson nav

Lesson nav v5

.v4-nav is the only lesson navigation. The kit makes it sticky with a fade; no local position overrides and nothing beneath it.
The first required action is clear of the nav on arrival, and every required control is clear where it is used after ordinary scrolling.
After two different missed tests, where the lab allows a way on, “Continue with this result” appears in the Continue position; the stage stays Not finished. Finish reads “Done” or “Not finished”.

OverlaysDialogs and loading; restart menu; v3 phase cards and cues

Restart menu v5

↺

Completion card and cue v3

Boundary verifiedEvery test point is equally distant from A and B.

Visual stepMake PA a tangentRotate PA until OA is perpendicular to it.

The restart menu is an overlay (position:absolute; z-index:30), closed by an outside tap or Escape. It may cover the title while open and never moves the page.
Dialogs: 22px corners, a deep shadow over a dimmed backdrop, then kicker, title, one intro line and actions on the right.
v3 completion and support cards mark a real transition, have no blocking backdrop, move with pointer and keyboard (LabKit.direct.movableCompletion) and never advance the model. Blue offers configure the next case; green confirms the current one.
v3 target-anchored cues introduce each newly required action at its target. v5 drops them: the prompt names the act and the first required control gets the one-time ring.

PickersSubject select, segmented control; menus and lab selectors

Choose a subject

Choose a level

Lab selector v5

Keep native select access. Where appearance: base-select is supported, open menus echo the home page: white, 18px corners, 7px inset, rounded rows, thin border, soft shadow, light blue selected row with a check. Other browsers keep the system menu; multi-select listboxes remain lists.
Rounded controls keep regular text and show focus by darkening the border. Discrete selects keep native keyboard and touch operation.

Reference labsRead the whole lab, not a plate of its parts

Binary Number PracticeCompact practice: question generator, register and answer checks with complete-border feedback.
Coordinate Distance, Midpoint and Perpendicular LinesDirect construction with measurements beside the map and one working column.
Dijkstra and A* Graph SearchAlgorithm trace: frontier decisions, settled history and route comparisons.

These v3 labs show the shared chrome, working and feedback in context. Component plates describe surface grammar; they never justify reducing a model to those plates.

Intentional differencesStructures that shared components must respect

Sequence, Set MembershipSeparate reference and current construction; attention on the actionable pieces; white items against concept-tinted regions. Recurring DecimalsAligned remainder-in, ×10, digit, remainder-out rows; matching remainders share one tint; factor explanation optional. BoundsSeven-segment readings with trailing zeros; one scale for ticks, bounds and markers; included and excluded endpoints; claim and criterion visible. Time ZonesFull-width calendar lanes beside working; date crossings, fixed offsets and complete-duration checks kept. Relative FrequencyReference and tested devices differ by shape and identity colour without revealing unknown probabilities; outcome labels outside rotating wheels. Packet Switching, TCP/IP, DNSMulti-region comparisons and device artwork kept; real ports connected; parallel DNS servers together; TCP/IP keeps its nested packet and upward unpacking path. CSMAPacket markers stop and visibly corrupt at collision; collision, detection, jam, wait and retry stay separate; reduced motion keeps the states. CPU / MemoryFlat values inside devices; queues and progress bars kept; processor work distinct from page transfers and waiting; serif I for index identifiers. SchedulingInstalled rules carry stronger identity than tray items; Ready, Running and Blocked stay adjacent and labelled; failure colour stays on the result. ProgrammingAligned editor layers and padded themed consoles; Run pulses until the first run; Clear stays distinct. Recursive CallsSuccessive Observe Total(4), Some Total(5), All Total(6) exercises; compact frame labels; execution blue distinct from assessment. Floating PointAllocation divider distinct from mantissa shift; starting and current stored values and the lost bit shown; success needs the intended learner action. Science investigationsApparatus, waves and linked population plots kept; current decision beside the visual, comparison evidence below; selection changes inherited trait frequencies, not adult traits.

Component lookupNeed → shared part → what the lab supplies

NeedShared partLab supplies Lesson header v5LabV4.progress, .v4-lesson-topStage labels, position, skipped and continued stages Restart v5LabV4.restart, details.v4-restartStage and whole-lab reset callbacks Lesson actions v5v4-btn, v4-chip, v4-quiet, select.v4-selectHandlers, enabled state, the word on the button Verdict v5p.v5-verdict[role=status]The earned statement or comparison cue Learner marks v5v4-mark, v4-held-ring, v4-miss-ringMark position and held or missed state Existing-lab adoptionlab-adopt-v3Layout adapter and semantic classes Settings v3lab-toggle, lab-working-toggle, data-kindOptions, selection, availability Action v3lab-action, data-priority="primary", data-lab-actionsHandler and enabled state Model toolslab-model-tools, lab-computing-tools, sim-tool-rowPlacement and grouping Working and evidencelab-work-card, lab-evidence-card, lab-sidebarContents and state Claim under testlab-context; claimContextTitle, Statement, CriterionThe claim and criterion, without the result Formula or valuelab-math-surfaceA short expression Informational chiplab-chip, lab-chip-rowPurpose tone; chips are not buttons Sequenced pulseLabDesign.attention, data-lab-attentionCurrent card, grip or button; dismissal Introduction v3data-lab-intro, LabDesign.introduceTarget, stable key, title and short purpose Stage markers v3LabDesign.checkpointsStage names, state and evidence Completion card v3LabKit.direct.movableCompletion, data-dialog-dragCard, workspace and message SVG draggingLabDesign.bindSvgDrag, LabDesign.svgPointModel coordinates and constraints Readable chart textdata-lab-readable-chartRendered size and label space Live valuedata-lab-valueSVG value text Digital instrumentLabDesign.digitalReadoutValue string, precision and position Inline simulation steplab-working-context, lab-working-readoutRequirement and ready, working, correct or mistake state Cycle progresslab-cycle-progressActual progress and accessible value Parameter griplab-value-grip, lab-boundary-gripParameter maths, limits and keyboard changes Travelling packetlab-packet-markerPath, timing and collision state

Shared adapters cover investigations, geometry, simulations, computing, builders and programming. Choose one for a matching structure; do not add a grid adapter merely to get button styling.
Lab state owns learning; shared CSS and runtime own presentation and reusable interaction mechanics. Keep calculations, constraints and geometry local.