Heading levels, text sizes, and font families — all driven by Automatic.css variables. Sizes are fluid and responsive out of the box.
The cause you couldn't see has been working the whole time.
The cause you couldn't see has been working the whole time.
The cause you couldn't see has been working the whole time.
The cause you couldn't see has been working the whole time.
The cause you couldn't see has been working the whole time.
The cause you couldn't see has been working the whole time.
The cause you couldn't see has been working the whole time. This paragraph runs at the default text size, on the configured line-height and held to the site's reading measure — the shape ordinary body copy takes anywhere on the site.
A second paragraph shows the rhythm between them. ACSS Smart Content Spacing sets the vertical space between paragraphs, headings and lists, so nothing here carries a margin of its own.
The ACSS colour families, with auto-generated shades computed in OKLCH. Each swatch reads the live CSS variable, so this guide follows the dashboard rather than describing it. Four families carry the site: primary, accent, base and neutral. Secondary and tertiary are deliberately switched off — see below. Use color-mix() for transparencies.
The action colour — links, active states and markers. On this site it resolves to sage, the one quiet accent.
Retired, not unfinished. The palette runs on one quiet accent, and a second brand colour would work against that. The slot stays empty so the decision is visible; the hatched swatches below are the record of it, not a gap to fill.
Retired for the same reason as secondary. Nothing on the site references –tertiary, and leaving it off keeps it from drifting into use.
Sage. Used sparingly for emphasis, and the source of the link and focus colours.
The warm, low-chroma neutral behind backgrounds, body text and borders.
Black, white and the grey ramp between them.
Success, warning, info and danger, on the same eight-shade scale as the brand colours. All four are enabled and tuned to the site rather than left on the ACSS defaults: danger is the house terracotta, warning a muted ochre, info the existing teal, success a green held apart from the sage accent. They earn their place — the contact form styles its error state from –danger, and the inline documentation callouts read –warning and –info. Button classes stay switched off, because nothing here uses a semantic button and generating them would add contrast pairs no one checks.
ACSS emits light-dark() for every palette variable. Shades invert, so –primary-ultra-light shows the ultra-dark value and –white and –black swap. Main colours and hover variants do not invert: they hold the same value in both schemes, which is why –primary and –secondary are identical above. That is the documented behaviour, not a broken demo, and Main Color Override in the dashboard is where you change it. Force a scheme on any element with .scheme–light or .scheme–dark.
Standard linkPrimary ButtonBoth cards paint this button with the same fill on purpose: –primary is a main colour and does not invert. Its label does, because a label colour is a shade. Measured here: fill oklch(0.664 0.107 202) in both cards, label lightness 0.95 in light against 0.10 in dark. That asymmetry is what makes some solid buttons unreadable under a dark scheme, see Buttons on Assigned Backgrounds.
ACSS emits light-dark() for every palette variable. Shades invert, so –primary-ultra-light shows the ultra-dark value and –white and –black swap. Main colours and hover variants do not invert: they hold the same value in both schemes, which is why –primary and –secondary are identical above. That is the documented behaviour, not a broken demo, and Main Color Override in the dashboard is where you change it. Force a scheme on any element with .scheme–light or .scheme–dark.
Standard linkPrimary ButtonBoth cards paint this button with the same fill on purpose: –primary is a main colour and does not invert. Its label does, because a label colour is a shade. Measured here: fill oklch(0.664 0.107 202) in both cards, label lightness 0.95 in light against 0.10 in dark. That asymmetry is what makes some solid buttons unreadable under a dark scheme, see Buttons on Assigned Backgrounds.
Content spacing and contextual gaps. All values are fluid and responsive via ACSS clamp() functions. Nested containers show how each spacing level relates to the others — padding is applied to all sides so you can see both block and inline simultaneously.
Every downward pairing of the scale exists as one fluid token, –space–to-, 15 for content spacing and the same 15 again for section spacing. A bridge spans a wider range than either end alone: desktop of the large size down to mobile of the small one. At desktop width a bridge and its plain counterpart print almost the same value below; narrow the window and the bridge falls faster.
The section scale has the identical matrix, –section-space-xl-to-m and friends, for section padding that has to collapse harder on mobile than the fluid calculation alone would.
Vertical rhythm between sections. Each ring shows its actual padding-block value — the visible vertical space is the real section padding applied by ACSS.
ACSS's utility grids and the Content Grid. The zones are additive offsets on one shared width: feature is content plus 2 × –feature-width, feature-max adds –feature-max-width on top, full spans everything. So a content width that already fills the container leaves the zones nowhere to go, and every child renders the same width with no error.
ACSS 4 is variable-first: the .grid–* utility classes were removed with most class modules, and grids are built from variables on your own class or, as here, inline. Each demo below is one declaration, grid-template-columns: var(–grid-N), with gap riding the contextual –grid-gap. The auto variants pack columns by available space.
One grid with named zones. Children land in the centred content zone by default and opt out sideways with a class. The bands below are live children of a real .content-grid, their widths measured off the rendered page. Here full is the section's inner width; on a real page it is the viewport.
Two traps worth naming. The zone rules select direct children, so wrapping a grid's content in a container silently disables every zone class below it. And because –content-width does double duty, a wide container setting collapses all zones onto the content width with no error. Opt a single box out of a defaulted grid with .content-grid–off.
The tokens this guide borrows for its own chrome, finally shown as specimens. –radius is one dial, not a scale: –radius-m resolves straight to –radius here, and the remaining radius tokens are fixed geometry, 0, 50% and 50vw. The composites assemble the pieces: –border is –border-size –border-style –border-color-dark.
–border paints with –border-color-dark, a translucent mix of –black, so it rides any light surface. –border-light is the same composite built on –white, for dark surfaces, shown here on a bg–dark strip.
Deliberately a single dial. Each chip below carries its token as border-radius and prints the value it resolves to.
A divider is a border on its own line: –divider assembles –divider-size, –divider-style and –divider-color-dark, and –divider-gap rides the contextual –content-gap so its spacing follows the site's rhythm.
Content above the divider.
Content below the divider.
Three steps per scale, 1 to 3, each black mixed at increasing opacity and blur; shipped 4.0.1 has no six-step ladder and no -subtle step. The specimens sit on a fixed light panel because a shadow on a dark page is invisible, which is a property of shadows, not of the tokens.
–text-shadow-1
–text-shadow-2
–text-shadow-3
filter: drop-shadow() follows the rendered contour instead of the box, which only shows on a non-rectangular shape. The filter sits on a parent and the clip-path on a child; on one element the clip would cut the shadow away with it.
Default link styles, link color variations on light and dark surfaces, and the ACSS button system. All buttons inherit global variables from the ACSS dashboard.
Light surface (default)
Here is a paragraph with a standard inline link embedded in the middle of the text to show how it reads in context. Links should be clearly distinguishable from surrounding body text.
Under a dark colour scheme these two panels invert. Measured on this install, .bg–dark computes oklch(0.25) in light and oklch(0.85) in dark, so a section that reads as dark in one scheme reads as light in the other. Background assignments are scheme-aware. Main colours are not, and that pairing is why some labels below drop out: the button text colour is a shade, so it inverts to the dark end, while the fill is a main colour and stays put. .btn–neutral measured 1.02:1 here. The fix is per colour, under Main Color Override in the ACSS dashboard.
bg–dark
Buttons
All six variants paint the same colour here, and that is ACSS working as designed. Automatic Color Relationships assign one Button Style per background context, and the rule matches on the btn– prefix, so the variant class is never read. Add .unrelate to a button to opt it out, as in the row below.
Buttons with .unrelate
Links
Links are the one element Color Assignments leaves alone by default: the Link Color input for this background is blank on this install, and blank means a link keeps its global –link-color on any surface. The variants here set a light shade per link instead, which is the manual route until that input is filled.
bg–ultra-dark
Buttons
All six variants paint the same colour here, and that is ACSS working as designed. Automatic Color Relationships assign one Button Style per background context, and the rule matches on the btn– prefix, so the variant class is never read. Add .unrelate to a button to opt it out, as in the row below.
Buttons with .unrelate
Links
Links are the one element Color Assignments leaves alone by default: the Link Color input for this background is blank on this install, and blank means a link keeps its global –link-color on any surface. The variants here set a light shade per link instead, which is the manual route until that input is filled.
The background utility classes and the assignment tokens behind them. A .bg–* class does more than paint: Automatic Color Relationships assign text, heading, link and button treatment for that context, which is why this guide's own panels carry these classes instead of colours.
Text on this surface is assigned by Automatic Color Relationships, not set by the guide.
Text on this surface is assigned by Automatic Color Relationships, not set by the guide.
Text on this surface is assigned by Automatic Color Relationships, not set by the guide.
Text on this surface is assigned by Automatic Color Relationships, not set by the guide.
The tokens the classes resolve to. –text-color, the body default, is –text-dark-muted, a translucent mix, not –text-dark; opaque body text is an explicit override.
There is no .bg–primary in ACSS 4: the contextual classes are exactly the four assigned ones above, and everything else went variable-first when the utility class modules were removed. A brand surface is painted with the token directly, and because no class is involved, Automatic Color Relationships do not fire: foreground and background are picked by hand, as in the strip below.
No class, no relationship: this pairing is a manual choice. Both tokens are shades from one family on purpose, shades invert together under a colour scheme, so the pairing holds in light and dark. Pairing a shade with the main colour does not: the shade flips, the main colour stays, and the two meet.
The focus system is context-aware: –focus-color is reassigned by every background relationship, so the ring on a dark panel is not the ring on the page. Every link and button in this guide is a real target, so the whole document is keyboard-testable.
Tab through the row below. The ring is ACSS's own focus styling, a specimen; the guide adds nothing to it.
ACSS wraps its motion output in prefers-reduced-motion guards, and this guide follows the same signal: smooth scrolling and the scheme switch transition turn off when the OS asks for less motion. There is nothing to see here unless your system requests it, which is the point.