Environment should only set display, grid/flex, gap, max-width. No color, font, border, shadow.
distributed
A
B
C
D
focused
Focused single-column content area
viewport-hero (promoted from atmosphere)
Centered flex content in full viewport height
dense-grid (promoted from atmosphere)
1
2
3
4
5
6
Test 2: Entity Variants (Surface Only)
Entity should set padding, border, border-radius, background. No display/flex/grid, no font, no hover, no transition.
primary: elevated surface with border and padding
secondary: supporting surface
imperative: urgent visual weight
editorial: content-focused surface (no hover — hover is synapse territory)
Test 3: Cognition Variants (Typography Only)
Cognition should set font-size, font-weight, font-family, line-height, color. Protocol/quantum also set background/padding/border as self-contained Level 4 leaf elements.
Axiom — Bold headline statement
Discourse — Body prose for reading
Protocol — Code/technical data
Gloss — Small supporting annotation
Motive — Emphasized instruction
Quantum — Compact tag/chip
Test 4: Synapse Variants (Interaction — Self-Contained at Level 4)
Synapse is self-contained at leaf level. Sets interaction feedback plus necessary visual context for interactive elements.
State should set opacity, filter, animation, transition. No color, no font-weight, no text-decoration (those are cognition).
stable — Verified, no visual change
evolving — Actively updating
deprecated — No longer current (opacity + grayscale only, no text-decoration)
active — Current item indicator (::after underline only, no color/font-weight)
Test 6: Atmosphere Variants (Mood Only)
Atmosphere should set background, color scheme, box-shadow. No display/grid/flex (layout is environment), no font properties.
neutral — Standard appearance
ethereal — Light, translucent
void — Deep space, minimal
vibrant — High-energy, data-rich
Test 7: Composed — Research Paper
Demonstrates correct mixin composition per hierarchy level.
Research Paper Title
Author A, Author B
Machine LearningNLP
This is the abstract section demonstrating entity('secondary') for surface
combined with cognition('discourse') for typography — no property conflicts.
