Foundations: the primitives

Foundations is the first layer Collider builds, the primitives everything else aliases. It runs in five stages, and the names it gives values follow one rule you can predict.

• Colours. Ramps built from your brand colour, plus the neutrals a system needs.
• Typography. A type scale: sizes, weights, line heights.
• Spacing and sizing. One dimensional ladder shared by both families.
• Radius and borders. Corner radii and stroke widths.
• Effects. Shadows and elevation.

Each stage is reviewed and accepted on its own. You can skip a stage you do not need.

A generated name tells you the value. That is deliberate: a name that encodes a position in an array stops being true the moment the array changes.

Spacing and sizing share one ladder. The key is the pixel value divided by four, so the same number means the same size in both families: spacing/2 and size/2 are both 8px. Half-steps are written with a hyphen, so spacing/0-5 is 2px and size/2-5 is 10px. The hyphen is not a style choice. Figma does not allow a period in a variable name.

Radius uses t-shirt sizes against fixed values: radius/none 0, radius/sm 4, radius/md 8, radius/lg 12, radius/xl 16, and radius/full for a fully rounded end.

Stroke widths are named by weight: stroke/width/hairline 1, stroke/width/thin 1.5, stroke/width/thick 2.

When a value falls outside these tables, Collider names it by the value itself rather than inventing a position for it.

Modes are not a second system bolted on later. Every value that differs between light and dark carries both from the moment it is generated, so a theme switch is a mode switch.

If your file already has variables, you can import them at the Foundations stage instead of generating from scratch. Collider will build the semantic layer on top of what you already have.