Design / Experiments / CSS
CSS experiments should teach rules, variables, and SVG-adjacent structure, not only show decoration.
Landing surface
This route tunes three low-level axes that can travel to the rest of the site: contour profile, stroke profile, and field resonance. The rule bench adds selector scope, cascade layer, and box-model comparison, while the SVG map shows how the same grammar can become a diagram.
The settings are browser-local and persist after you leave the lab, so you can tune here, then inspect the same atmosphere on the website design route or the broader website field guide.
Choose A Baseline, Then Refine
The bundle buttons set a coherent starting point. The chips below them let you separate contour, stroke, wonder carryover, and field reach so the grammar becomes inspectable instead of magical.
Contour Profile
Corner families and blur depth. This changes how components feel cut, braced, or softened.
Stroke Profile
Line width, annotation weight, and the severity of structural seams.
Field Resonance
How widely the page's local attention field echoes when operators are hovered, focused, or remembered.
Wonder Carryover
This uses the site's existing wonder-memory setting so the tuned field can remain nearby or travel route-to-route.
These controls save locally and remain active on later routes.
The rule beneath the surface.
Cold read
Before the town learned how to keep records, it learned how to show its seams. Not crudely. The seams were subtler than that: a hairline of teal where one room gave responsibility to another; a softened corner where an old argument had been sanded down by use; a faint glow at the edge of a card when someone hovered too near a question they were not ready to ask.
The Design Lab stood east of the Town Library, and nothing there moved without leaving a readable reason. A border darkened when a rule took responsibility. A surface softened when the work inside it needed gentleness. A line grew bold when a boundary wanted to be felt before it was crossed.
The town did not become less playful when it got more explicit. It became easier to choose among behaviors, which is what made the lab feel generous rather than strict.
A rule is an address plus a responsibility.
The lab’s work is visible rule physics: selector scope, cascade layers, box model behavior, custom properties, and inspectable browser state all leave readable reasons behind.
That gives the town optionality. Practical routes stay practical. Story routes stay story-rich. The in-between surfaces can be inspected, tuned, and read aloud without becoming cryptic.
Watch The Same Variables Touch Multiple Surface Types
The point is not a single pretty card. The same grammar should shape panels, annotations, chips, separators, and hover-field behavior together.
Primary card
Contour profile changes the cut of the card. Stroke profile changes the felt seriousness of the border. Field resonance changes how strongly matching operators glow back at you.
Annotation rail
The rail and divider are useful because they expose boundary weight faster than a hero card does.
Read contour first
If contour changes feel unclear, ignore color and look only at corner cut, blur edge, and seam softness.
Then read stroke
Stroke shows up in dividers, annotation rails, SVG paths, and border insistence. It should feel structural, not merely thicker.
Then read field
Hover matching chips and compare how far the resonance spreads. That is the field, not just decoration.
CSS as literature.
A selector is a title, a declaration is a sentence, a layer is a chapter, and the cascade is revision. The page becomes easier to read when the code can be quoted back as prose and the prose can point back to the rule that made it possible.
Selectors name the subject.
The first clause of a rule tells you what is being addressed and why the address should be narrow enough to stay teachable.
Declarations carry the line.
Each declaration is a promise about weight, space, color, or motion. Too many promises in one place reads like clutter, not style.
Layers act like chapters.
Tokens, components, surfaces, and ornament are easier to remember when the reader can follow the order in which meaning is written.
Read a rule as a stanza.
@layer tokens, components, ornament;
:where(.site-frame) {
border-radius: var(--shape-surface);
background: color-mix(in srgb, var(--surface-strong) 96%, transparent);
}The stanza works because the line breaks make revision visible. The reader can see where the rule starts, where it turns, and which responsibility it keeps.
CSS Rule Anatomy Bench
Rules become easier to learn when selector scope, cascade layer, and box model are visible at the same time. Change one axis, then read the specimen before touching another.
Selector Scope
Choose whether the rule addresses the whole region, one component, or a slot inside the component.
Cascade Layer
Move the same idea through token, component, and ornament responsibilities.
Box Model
Compare predictable sizing with a content-box rule that lets padding and border change the apparent footprint.
A rule is an address plus a responsibility.
Selector scope decides what is addressed. Cascade layer decides which responsibility is being expressed. The box model decides whether the component keeps its promised footprint.
CSS Variable Lab
Learn the live custom-property vocabulary here. Move a slider, watch the token register update below, then reset before comparing another route.
--shape-component
Controls chip and small control curvature.
5px
--shape-surface
Controls frame and panel curvature.
8px
--line-mid
Controls the weight of structural dividers.
1.5px
--material-blur
Controls the depth of the glass-like surfaces.
6px
--attention-field-radius
Controls how broad operator resonance feels.
0.4
--spw-wonder-memory-reach
Controls how much wonder memory travels across routes.
0.54
Adjust a variable, then compare the token register under it.
Current Token Register
These are live computed values from the document root, not hard-coded copy. They update when the experiment settings change.
--shape-component
Small control and chip radius.
5px
--shape-surface
Frame and panel radius.
8px
--line-mid
Primary structural divider weight.
1.5px
--material-blur
Shared blur depth for glass-like surfaces.
6px
--attention-field-radius
How broad operator resonance feels.
0.4
--spw-wonder-memory-reach
How much wonder memory spills into the rest of the site.
0.54