ACSS 4.0.1 · e2 template
ACSS 4 Elements
Every element ACSS 4 actually ships, rendered live and labelled with the exact class string that produces it. If a class is not on this page, ACSS 4 does not paint it.
Buttons
Colour variants
A button is four independent choices: a colour variant, an optional outline modifier, a size, and the background it sits on. The framework selector is an attribute match on the class prefix, so it paints any tag — every button on this page is a real button element, not a link.
.btn--primary
.btn--primary-dark
.btn--primary-light
.btn--base
Buttons
The outline modifier
btn--outline is a modifier, not a variant. ACSS 4 only ships rules for a colour variant combined with it. On the default page background the variant class decides the colour — the row below is the only one on this page where that is true.
.btn--primary.btn--outline
Buttons
Background context
Put a button on a tinted band and the band decides its treatment, not the class on the button. Each band below is set to a different Button Style in Color Assignments, and the row in it carries the matching variant class so the two agree. The last group in each band shows what happens to a button that does not match, and what .unrelate does about it.
.bg--ultra-light
Button Style: primary-dark
.btn--primary-dark.btn--outline · 6 sizes
Solid buttons on this band become primary-dark. .unrelate keeps the button primary.
.bg--light
Button Style: base
.btn--base.btn--outline · 6 sizes
Solid buttons on this band become base. .unrelate keeps the button primary.
.bg--dark
Button Style: base-light
.btn--base-light.btn--outline · 6 sizes
ACSS ships no SOLID btn--base-light, so this band emits an outline rule only — solid buttons keep their own variant and these two are identical. That is the framework declining to invent a treatment, not a bug.
.bg--ultra-dark
Button Style: primary-light
.btn--primary-light.btn--outline · 6 sizes
Solid buttons on this band become primary-light (pale fill, primary text). .unrelate keeps the button primary.
Buttons
btn--none, and the classes that do not exist
btn--none opts an element out of the button framework entirely. Below it are four class names that look like they should work and do not: ACSS 4 ships no rule for them, so they inherit the framework layout and no paint at all. btn--base-light is in this group because on its own, without btn--outline, it has no rule either.
.btn--none
No ACSS 4 rule — renders unpainted
Type
The text styles on this page
Almost none of the typography here is an ACSS class. ACSS 4 sets the family and the size scale in the dashboard and ships six text size utilities; everything else is a small site chip built on ACSS tokens. Each one below names where it comes from. For the opposite experiment — the same page with zero custom CSS — see /acss-4-elements-pure/.
body text
ACSS 4 setting — no class
Inter, 18px. Family comes from Typography → Fonts, size from Typography → Text Sizes. Nothing on this page sets it.
.subtitle
Site chip — e2, not ACSS
font-size: calc(var(--text-m) * 1.15) → 21px; font-weight: 300. Two declarations on top of an ACSS size token. No colour is set, so it inherits and stays legible on any band.
.kicker
Site chip — e2, not ACSS
font-size: var(--text-s) → 14px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500. Also sets no colour, which is why it flips correctly on the dark bands.
.section-intro · .measure--m
Site chip — e2, the documented intro system
A flex column with gap, plus a readable-width cap. Never write a per-section __intro class.
.elements-demo__label
New chip — created for this page
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0.85. No colour is set — it inherits currentColor, which is why one chip works on white, light, dark and ultra-dark bands. The opacity was 0.72 and failed AA on two bands; ACSS’s own muted tokens use alpha 0.8.
.elements-demo__row
New chip — created for this page
display: grid; gap: var(--space-s); padding: var(--space-m); border-radius: var(--radius); and a border built from the ACSS tokens --border-size and --border-style with a colour mixed from currentColor at 20% so it inverts on dark bands. ACSS does globalise borders — --border, --border-light, --border-dark — but those are not contextual, which is the only reason the colour here is hand-mixed.
.elements-demo · .elements-demo__item
New chips — created for this page
Layout only. ACSS 4 ships no flex, grid or gap-scale utility, so a labelled item row cannot be built without them.
.button-group · .text--xs
Site chip · ACSS 4 utility
.button-group is an e2 chip (flex, wrap, gap). .text--xs is a genuine ACSS 4 utility and renders 10px.
code
Plain HTML, no class
Every class name on this page sits in a code element. WordPress’s wptexturize converts a double hyphen into an en dash in prose, which silently rewrote all 102 class names on this page until it was caught. Texturize skips code elements.