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. Good typography ensures readability and visual rhythm across every page of your website.
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.
Content spacing (padding, gaps, margins), section spacing (vertical rhythm between sections), and contextual gaps. All values are fluid and responsive via ACSS clamp() functions.
Default link styles and the ACSS button system. All buttons inherit global variables from the ACSS dashboard — padding, radius, font-weight, transitions, and colors.
Here is a paragraph with an inline link embedded in the middle of the text to show how it reads in context.
Links on bg–ultra-dark
bg–dark
bg–ultra-dark
bg–primary