SHELEG style packs

34 style packs for coding agents. Each one was extracted from a real production interface: colours, type, spacing, radii and motion tokens read off the running page, with every contrast ratio recomputed by a gate rather than asserted. A pack is a token layer plus the rules for spending it — and a list of what it bans.

The site each pack was measured from is not published here. Sources are recorded inside the packs; this page is about the systems, not about whose they were.

34

Browse the packs

Every card rendered in its own token layer — swatches, radius, accent and type stack read out of the pack, not described. Filter by field, by motion ceiling, by text.

 21/34

Collection audit

How each pack was measured, and what the automated gates cannot see. 6 sit on the core contract by design; the rest answer all thirteen headings.

 ↔

The rest of the family

This is the visual layer of a set of skills that split the work around the code — what the interface must do, how it sounds, how a change reaches the repository. No count here: this repository cannot derive one, and a number it cannot check is a number that goes stale.

Source, and installing just this one: the repository · npx sheleg-design-skill · 5 of 34 packs stand on a dark field.

What a pack contains

Thirteen headings, and the same thirteen every time: register, palette, type, texture and surface, components, hero, responsive, motion tokens, signature motifs, the signature element, micro-interactions, bans, and the traps the reference carries. Alongside it ships a token CSS file to copy verbatim and a React reference kit that renders the states a token layer cannot describe — hover, focus-visible, disabled, selected.

Why the ratios are computed

A production site is a real source and an imperfect one. Across this library, references were found putting white text on a fill at 2.9:1, secondary copy at 2.5:1, and a focus ring composited to 1.3:1 against a 3:1 floor. Each pack keeps the measured hue and moves only lightness until the pairing clears, and states the correction with its number at the declaration — so a derived value can never later be read as a measured one.