Set up Artist

Files, load order, project overrides, and optional JavaScript.

1. Add the files

artist.css contains the default settings, layout, artwork, and UI styles. It has no CSS imports. Load artist-applied.css after it for project-specific overrides, and add artist.js when a documented interaction needs it.

File	Needed for
artist.css	Required. Framework settings and styles. Keep this file unchanged.
artist-applied.css	Optional. Project tokens and custom styles. Load it after `artist.css`.
artist.js	Optional. Documented interaction behavior for navigation, tabs, dialogs, coordinated media, and motion.

your-site/
  index.html
  assets/
    css/
      artist.css
      artist-applied.css  (optional)
    js/
      artist.js           (optional)

No npm package, Sass compiler, Jekyll installation, external font or JavaScript library is needed to use those runtime files. The documentation site uses Jekyll; your page does not need it. Add your own images when your design calls for them.

The code-* assets, documentation layouts, data files and Jekyll plugin belong to this documentation site. They are not runtime dependencies.

2. Load Artist

<link rel="stylesheet" href="/assets/css/artist.css">
<script src="/assets/js/artist.js" defer></script>

artist.css is the only required file. Include the optional script once with defer, so the component HTML is present before initialization. Avoid async for this script.

These example URLs start at the website root. If your assets live somewhere else, change the URLs to their deployed locations.

Artist supplies page-level resets, body typography and global component classes. Load it on the pages you want it to style.

3. Copy a working page

Save this as index.html beside the assets folder above. It uses only Artist’s runtime files—no documentation CSS or scripts, images, or custom styles.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first Artist page</title>
  <link rel="stylesheet" href="/assets/css/artist.css">
  <script src="/assets/js/artist.js" defer></script>
</head>
<body>
  <main>
    <section class="group">
      <div class="container">
        <div class="content block">
          <h1>Hello, Artist.</h1>
          <p>A section, a readable content boundary, and a Card.</p>
        </div>
        <article class="card">
          <div class="content">
            <h2 class="like-h3">A small working example</h2>
            <p>Card supplies the surface. Content supplies text spacing.</p>
            <div class="accordion">
              <details>
                <summary>What does the optional JavaScript add?</summary>
                <div class="accordion-body content">
                  <p>This disclosure opens with measured, reversible motion.
                    Without the script, native details/summary still works.</p>
                </div>
              </details>
            </div>
          </div>
        </article>
      </div>
    </section>
  </main>
</body>
</html>

Open this exact page

Serve the folder over HTTP. If Python 3 is available, run this from your-site, then open http://localhost:8080/:

python3 -m http.server 8080

Group defines the section, Container limits content width, Block adds an explicit gap, and Card contains a padded Content region. The accordion works natively and gains motion when artist.js is loaded.

4. Add project overrides

Copy artist-applied.css when the project needs different tokens or site-specific styles, then load it after artist.css. Omit it when the defaults are sufficient.

<link rel="stylesheet" href="/assets/css/artist.css">
<link rel="stylesheet" href="/assets/css/artist-applied.css">

Put token overrides at the top and site-specific styles below them. The supplied file has no effect until it is edited.

/* Colors, fonts and spacing */
:root {
  --primary: #3158b5;
  --link: var(--primary);
  --radius: 20px;
}

/* Site-specific styles */
.homepage-illustration {
  object-position: center top;
}

The Default settings section at the top of artist.css lists the available colors, fonts, spacing and other choices. Copy only the settings you want to change into :root in your applied file. Everything else keeps its default. Variables starting with --_ are calculated by Artist; leave those alone.

Keep your customizations in your applied file so you can update artist.css independently. The filename is a convention, not a requirement: an existing site stylesheet works too, as long as it loads after Artist.

What needs JavaScript?

Pattern	Without artist.js	With artist.js
Layout, Card, Figure, Exhibit, Backdrop, buttons and fields	CSS presentation and native controls.	Optional behaviors where explicitly requested by the component’s markup.
Accordion / Dropdown	Native details/summary disclosure.	Animated disclosure; Dropdown adds outside-click and Escape dismissal.
Navbar / Tabs	Navigation and native nested disclosures remain available; all tab content is readable.	Mobile menu, drill-down, scroll-aware visibility, and keyboard-aware tab switching.
Track / Marquee / Scroll-Story / Selector	Native scrolling or the original readable content sequence.	Navigation buttons, looping proof, sticky transitions or coordinated image selection.
Modal	Artist’s open/close buttons require JavaScript.	Native dialog opening, focus containment and animated dismissal.
Tooltips / notifications / validation	Native title hints and browser form validation; notices remain visible.	Positioned tooltips, animated dismissal and invalid-state styling.

The script discovers component HTML at page load. Use the markup and data-* attributes shown on each component page; no application-wide initialization call is needed for a static page. Copy the author HTML from the docs, rather than the enhanced DOM from the browser inspector.

Dynamic applications: there is currently no general mount/unmount API for components inserted later by React, Framer or another client renderer. Tooltips are delegated, and existing Scroll-Story sources support live updates, but that is not automatic initialization for arbitrary new components. Plan that integration explicitly; do not re-include artist.js after each render.

Your application still owns form submission, data loading, routing and button actions. Artist supplies their presentation and documented component interactions.

Browser expectations

Artist targets current Chrome, Edge, Firefox and Safari. It uses modern CSS—including custom properties, Grid/Flexbox, :has(), container units and color-mix()—and modern browser APIs such as ResizeObserver, Web Animations, native dialog and inert content. No legacy-browser polyfills are bundled.

Enhancements are progressive where supported: customizable Select pickers receive additional styling and motion, while other browsers retain their native picker. Reduced-motion preferences keep the content and controls available without decorative movement.

Verification status: automated browser checks currently cover Chrome. Safari/iOS and Firefox release verification is still pending; the target list above is not a completed compatibility certification.

Component reference

Each component page contains its explanation, controls, rendered example, and author HTML.

All components Artwork with Exhibit Card Forms and labels