Heading levels, text sizes, and font families — all driven by Automatic.css variables. Sizes are fluid and responsive out of the box.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
This is a standard body text paragraph rendered at the default text size with your configured line-height and max-width.
A second paragraph demonstrates content spacing. ACSS Smart Content Spacing handles the vertical rhythm between paragraphs, headings, lists, and other elements automatically.
The six ACSS color families with auto-generated shades (OKLCH in v4). Each swatch uses the corresponding CSS variable — change your ACSS dashboard and this guide updates instantly. Use color-mix() for transparencies.
Your action color — buttons, links, CTAs.
Your secondary brand color.
Your third brand color.
Your least-used brand color — sparingly for emphasis.
Your preferred neutral color — backgrounds, text, borders.
Black, white, and shades of grey.
ACSS uses light-dark() for all palette variables. Shades auto-invert: –ultra-light becomes dark, –white and –black swap. Force a scheme on any element with .scheme–light or .scheme–dark.
Standard linkPrimary ButtonACSS uses light-dark() for all palette variables. Shades auto-invert: –ultra-light becomes dark, –white and –black swap. Force a scheme on any element with .scheme–light or .scheme–dark.
Standard linkPrimary ButtonContent 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.
Vertical rhythm between sections. Each ring shows its actual padding-block value — the visible vertical space is the real section padding applied by ACSS.
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.
Review WCAG contrast ratings for ACSS global colors, including optional semantic colors and shade comparisons.