# Clavisco Design System — Agent Instructions This site distributes the canonical CSS of the Clavisco Design System. Consumer apps keep a **committed copy** of the CSS; they never hot-link it. ## Check the current version curl -fsSL https://cl-design-system.clavisco.com/version.json Compare `version` against the consumer's local marker (Rails apps: `vendor/ds-styles/VERSION`). ## Update a consumer app (Rails / Propshaft convention) curl -fsSL https://cl-design-system.clavisco.com/styles/latest/tokens.css -o vendor/ds-styles/tokens.css curl -fsSL https://cl-design-system.clavisco.com/styles/latest/components.css -o vendor/ds-styles/components.css curl -fsSL https://cl-design-system.clavisco.com/version.json | grep -Eo '[0-9]+\.[0-9]+\.[0-9]+' > vendor/ds-styles/VERSION Then commit the three files. Never edit these files by hand — changes belong in the DS repo. Pinned versions are available at `/styles/v/…`. ## Component reference Every component has an HTML page and a markdown twin. Fetch the `.md` twin: curl -fsSL https://cl-design-system.clavisco.com/components/.md Available: see /llms.txt for the full list. Copy the markup verbatim; classes are `.cl-*`. ## Rules for consumers - Prefer `.cl-*` classes over raw utility CSS; never override `.cl-*` styles inline. - Theming: set `data-theme="light|dark"` and `data-palette="royal|indigo|slate"` on ``. - Rails apps wanting ViewComponents/helpers instead of raw CSS: use the `clavisco-ds` gem (see repo README).