None of these forms were invented for this page. Each was extracted from the locked home page, measured, and written into DESIGN.md as a contract. A new surface starts here.
Basis
DESIGN.md §5
Scope
Seven items
Ground
Galvanised dark
01POZ
Type scale
Seven steps, floor 11 px. No section writes a size outside this list. Steps 5–7 scale together, so no intermediate size can appear.
StepValueRoleSample
--gs-fs-111 pxStamp · label · hint · language codeHot dip galvanising
Six steps and one rhythm. Measured: 191 spacing declarations carried 40 distinct values and only 61% sat on a 4 px grid. This board is the first surface to use the scale.
StepValueRoleMeasure
--gs-bo-14 pxTight — between a label and its value
--gs-bo-28 pxClose — list items, inside a button
--gs-bo-312 pxApart — under a label, between line groups
--gs-bo-416 pxBlock — a component’s inner padding
--gs-bo-524 pxGroup — between components
--gs-bo-632 pxDivision — a major break inside a section
--gs-ritim40 → 72 pxRhythm — a section’s vertical breathing
Each bar is exactly as wide as its step
03POZ
Palette and contrast
Ratios are calculated against the dark ground (#1B1E20). On a flat ground contrast is calculated; over an image or video it is MEASURED — calculation drifts by up to 40 units there.
RoleValueMeasure
Ground#1B1E20—
Surface#24282A—
Text#E6E9EA13.73:1
Secondary#B9BFC29.01:1
Muted#8E95995.51:1
Divider rule#363B3E1.48:1
Action#B404042.36:1
Red cannot be text on this ground
It yields 2.36:1 here. It is used as FILL only — a red button with white text is 7.10:1 on white. A focus ring cannot be red here either.
7.10:1
The divider rule is 1.48:1, below the threshold. It counts as decorative: it carries no information. The same ratio is not exempt when it draws the button ITSELF.
04POZ
Frame · stamp · calliper
Every place an image enters uses the same frame. Not four separate shows — four uses of one system.
Frame
04Stamp
Where the image goes
Contract
Edge
1 px rule · top edge one shade lighter
Corner mark
Top right and bottom left · 20 px arm · 0 radius
Stamp
Riveted to the top left · SOLID ground · tabular figures
Calliper
The division is identical everywhere — the interval CANNOT be a percentage
A percentage resolves against the cell’s own width, so notches thin out threefold in a wide cell. The division derives from a single width variable.
05POZ
Action — button and link
At most ONE filled red button per page. The secondary action is a link, not a second button.
Padding 0.9 / 1.6 rem · size 16 · 7.10:1 on white
Padding 0.62 / 1.05 rem · size 14
All projects1 px underline · on hover the RULE brightens, not the colour
Touch target
At least 24 × 24 CSS px. The target is not the size of the text: an 11 px language code still carries a 24 px area. The box grows, the text stays vertically centred.
A dynamic list need not be a card grid. A cover image is a component when the data carries one; otherwise it is a hole.
NoTopic · TitleDate
01Light Steel StructuresC profile production on the rollform line and tolerance control
02VentilationAxial Fans
03A record with no topic — the badge’s space closes entirely
Empty state
No published records yet.
When there are no records the controls go too: no dead arrow, no empty counter, no filter that does nothing. An empty state is a different decision from the condition that drops a section entirely.
The provider returns the field empty and CSS hides it. Left to JavaScript, an empty box would remain for readers with motion off.
07POZ
Motion and focus
With motion off the content stays put — the starting state is never written into CSS. Interaction depends on motion too: the JavaScript-free state must work in full.
RoleDurationCurve
Words settling — entrance0.85 spower4.out
Entrance, secondary0.7 spower4.out
Entrance, soft0.8 spower2.out
Settling — user action0.62 spower3.out
Scroll-boundthe scroll’snone
State transition0.18 sease
Focus ring
Try Tab — a 2 px ring with 3 px offset. Light toned on a dark ground.