Ryan Perez · UI system

The element system.

A button is not a rectangle. It is an object plus content, action, state, feedback and outcome. Every element below is rendered with its real anatomy — then run through its states, and through the transformations that turn it into something else entirely.

Seven layers Foundations · Primitives · Components · Composites · Patterns · Templates · Governance
{{ total }} elements rendered
Foundations 01

Semantic colour, both modes

The rule is not “invert everything.” Preserve the hierarchy and the meaning; change the values.
Token Light Dark Role
{{ t.name }} {{ t.light }} {{ t.dark }} {{ t.role }}
Foundations 02

Type scale

One family, two weights. The tension is huge-and-tight against tiny-and-wide.
{{ t.name }} · {{ t.spec }} {{ t.sample }}
Foundations 03

Spacing & radius

If every gap is equal, the hierarchy is missing.
{{ sp.name }} {{ sp.role }}
{{ r.name }}
{{ f.n }}{{ f.t }}{{ f.count }}
{{ f.role }}
{{ i.code }}{{ i.label }}
{{ i.note }}
Matrix 01

Every state a button has to have

A kit that ships one picture of a button has shipped nothing. Colour is never the only state indicator.
{{ b.label }}
Matrix 02

Every state an input has to have

{{ b.label }}
Grid 01

A button, run through LAKA

{{ r.a }}{{ r.b }}
Grid 02

A card, run through LAKA

{{ r.a }}{{ r.b }}
Meta-variables

Seventeen questions to ask of any element

{{ m.a }} {{ m.b }} {{ m.c }}
Layer 05

Interaction patterns

A component library says what exists. A pattern library says how those things work together.
{{ g.t }}
{{ i.t }}
Layer 06

Page templates

{{ g.t }}
{{ i.t }}
Layer 07

Governance — what documenting an element means

Anatomy → content → variants → states → conditions → behaviour → feedback → accessibility → outcome → transformations. A picture is none of those.
{{ g.t }}