Skip to system
Visual Systemv0.6.9 · Living reference
Audited from production code

Current visual system

A living, interactive inventory of the production UI language: tokens, typography, iconography, controls, pet states, data, cards, navigation, media, feedback and responsive behavior.

Product · Pets67 v0.6.0Visual System · v0.6.9Basis · Production UICaptured · 22 Jul 202618 routes · 12 pets
productionsrc/components/catalog-pet-card.tsx--surface-card--command-height--radius-panel

System in practice

Switch the composition and test the production card anatomy in a protected sandbox. Every action stays on this page and leaves product data untouched.

Production component · sandboxed
Catalog / specimen1120px composition
Pet 11/Stability mechanic
Stability Mechanicunstable builds

Otvertka 67

A mysterious idol mechanic who tunes unstable code back into rhythm.

Best

unstable builds / intermittent bugs

Avoid

rapid ideation

  • Debug94
  • Focus88
productionsrc/app/design-tokens.css

Rules in use

Change a rule and inspect the geometry it owns. These are system tokens, not decorative playground values.

01
Spacing cadence--space-4
Measured inset
16px
02
Concentric radiiRinner = Router − inset
Outer · 12px
Inner · 8px
12 − 4 = 8px
03
Control heightvisual / target
One target contract · two visual densities
04
Unit ownershiprem
rem48rem
0.25rem → 4remRhythm and controls

Spacing and control scales follow the root rhythm instead of page-local numbers.

Composition principles

Focus or point at a principle to reveal the part of the live specimen it governs.

01
Quiet surfaces, tactile commands

Passive cards stay quiet; commands earn the keycap border, depth and press response.

02
Radius follows ownership

Outer ownership defines the corner. Nested content subtracts the measured inset.

03
Responsive means recomposed

Breakpoints change composition and priority, never the component's meaning.