design
system
The warm, papery workshop-desk tokens and component library that every matuta subdomain shares. One stylesheet, one shell script, mobile-first. This page is the living reference — everything below is rendered by the real CSS.
Colors warm neutrals + clay brand
Every value is a CSS custom property on :root. Reference them as var(--clay) — never hard-code hex.
Tones data-tone drives --tone
Set data-tone="teal" on any element (or ancestor) and every var(--tone) inside it retints — accent borders, dots, chips, arrows. This is how one component library yields per-section color.
Typography Barlow Condensed · Barlow · Spline Sans Mono
Display (Barlow Condensed) for headings & labels, usually uppercase. Body (Barlow) for prose. Mono (Spline Sans Mono) for data, meta and code.
H1 device · mtt-h1
H2 with rule mtt-h2
Lead paragraph — mtt-lead — a slightly larger intro line for a section.
Spacing 4px base scale
Step tokens --space-1…--space-24. Semantic aliases: --gap-card, --gap-grid, --gap-section, --pad-card, --pad-panel.
Radius & shadow
Chips mtt-chip · mtt-filterchip
Cards & tiles
data-tone, título display e corpo em body.mtt-card--interactive para o lift + sombra no hover.List & guide rows
Notices & callout
- Meça duas vezes, corte uma.
- Óculos sempre.
- Lixe na direção dos veios.
Metrics, facts & tables
| Grão | Uso | Etapa |
|---|---|---|
| P80 | desbaste | 1 |
| P120 | nivelar | 2 |
| P220 | acabar | 3 |
Usage one link, one script
The whole system is two files in sites/_shared/, copied into every site at build time. Link the stylesheet, drop the shell script before </body>, and set the active section on <body>.
<link rel="stylesheet" href="/_shared/matuta.css"> <body data-mtt-section="guias"> <!-- page content using .mtt-* classes --> <script src="/_shared/shell.js" defer></script> </body>
Root-relative /_shared/… resolves per subdomain. From outside the monorepo, the canonical URL is https://design.matuta.art/_shared/matuta.css. data-mtt-section takes inicio · guias · blog · apps · sobre.
React components @matuta/ds
The same system also ships as a typed React component library — @matuta/ds, in packages/matuta-ds/. Every class documented above is wrapped as a component, and the tokens + CSS are generated from this very stylesheet at build time, so there is one source of truth and no drift. It's also the format Claude Design builds with — the components map 1:1 onto the .mtt-* markup.
import "@matuta/ds/styles.css"; import { Button, Card, Notice, Icon } from "@matuta/ds"; <Button variant="outline" tone="teal" icon={<Icon name="wrench" />}>Ferramentas</Button> <Card tone="clay" title="Broca 6 mm" sub="HSS · madeira"> Uma card com a barra de acento colorida pelo tom. </Card>
Every component takes a tone prop — or wrap a subtree in <ToneProvider tone="teal"> — and every var(--tone) inside retints, exactly like the data-tone system above.
| Group | Components |
|---|---|
| Actions | Button · Chip · ChipPath · FilterChip |
| Surfaces | Card · Tile · TileGrid |
| Rows | GuideRow · ListRow · PostRow · FeaturedPost |
| Feedback | Notice · Callout · RuleList · EmptyState |
| Data | Metric · Facts · Fact · DataTable |
| Navigation | Tabs · Breadcrumb · SearchBar · Nav |
| Content | Hero · SectionHeader · Eyebrow · Lead · Manifesto · Pillars · Pillar · Prose |
| Primitives | Icon · ToneProvider |
Build with npm run build in packages/matuta-ds/ → dist/ (ESM bundle + .d.ts types + CSS). React is a peer dependency.