Design System
A live UI library for the Cavaliere & Mangiaracina marketing site. Every component has a canonical name you can reference from Claude Code to drop it into any page.
How to use
This catalog is the source of truth for visual components. Copy the canonical name (the blue pill above each demo) and ask Claude Code to insert, modify, or extend it.
- Find a component. Use the sidebar to navigate Primitives, Sections, or Tokens.
- Reference it by canonical name. Format:
DS/<Layer>/<Component>[/<Variant>]. Examples:DS/Primitive/Button,DS/Section/Hero/Split,DS/Section/CTABanner/Phone. - Ask Claude Code in plain English — natural-language prompts work. See examples below.
- Extend, don't duplicate. Need a new look? Add a variant to the existing file. Only create a new file when the role is genuinely new. Update
src/design-system/README.mdwhenever you add one.
Example prompts
Paste any of these into Claude Code as a starting point.
Insert DS/Section/Hero/Split on /services/medical-malpractice with ctaLabel "Free Case Review" and eyebrow "Medical Malpractice · PA & NJ"Append DS/Section/CTABanner/Phone to the end of every practice-area pageCreate a new variant DS/Section/Hero/Video with a background <video> loopReplace the current trust section on the homepage with DS/Section/StatsBand/DarkShow me the source of DS/Primitive/Card
Rules
Every demo is labeled with a blue pill — that is the exact string to paste into your Claude Code prompt.
Do not hard-code colors, spacing, or font sizes. Everything lives in src/design-system/tokens.scss. Import it with @use '../tokens' as *;
Demo copy follows CLAUDE.md TOV rules. Medical / clinical content uses the Cavaliere voice; product / institutional / jury content uses the Mangiaracina voice.
This page is marked noindex,nofollow. Visibility is controlled by site.flags.showDesignSystem in src/data/site.ts — set it to false before the production release.