Core concepts
Foundations
Artist’s default settings are CSS custom properties. They keep design choices consistent across components without introducing a build step.
Use tokens, not one-off values
All public settings live in the Default settings section at the top of artist.css. Override only the values your site needs in :root inside a stylesheet loaded after Artist.
:root {
--primary: #3158b5;
--font-heading: "Your heading font", sans-serif;
--radius: 20px;
--content-width: 72rem;
}--primary. Variables beginning --_ are internal calculations and are not a stable customization API.Color roles
Roles describe intent rather than a fixed hue. Components that accept a role share the same vocabulary: Primary, Tertiary, Link, Info, Success, Warning, and Danger.
--primary--tertiary--info--success--warning--dangerOpen the live Colors reference to inspect tinting and generated palette steps.
Typography
Eyebrow / short context
Heading one
Heading two
Heading three
Lede text introduces a section without changing its semantic structure.
Body text defaults to 18px with normal Content rhythm. Use heading elements for document structure and like-h* only when presentation needs to differ from semantic level.
See Content & typography for measures, alignment, and explicit sizes.
Spacing and shape
| Token | Default | Responsibility |
|---|---|---|
--group-space | 100px | Section-level vertical breathing room. |
--layout-gap | 48px | Space between major layout regions. |
--item-gap | 24px | Space between repeated or related items. |
--content-gap | 20px | Rhythm inside Content. |
--gutter | 15px | Minimum inline page edge. |
--radius | 18px | Shared corner treatment for surfaces. |
These tokens are intentionally few. A component may expose a specific token when its job needs one; that is preferable to a large numeric utility scale.
Widths and reading measures
--group-width caps the complete section, --content-width caps its Container, and --solo-width caps centered solo content. Text measures (--measure-sm, --measure-md, and --measure-lg) control readable line length independently.