— Apply / Build targets
Three targets.
One token contract.
How to consume the Obney design system in each kind of thing we build. The token CSS is the contract everywhere — only the wiring differs. Full guidance lives in design.md → Consuming this design system.
At a glance
| Target | Load tokens | Components | Notes |
|---|---|---|---|
| Static HTML | <link rel="stylesheet" href="colors_and_type.css"> |
<script src="_ds_bundle.js"> → window.ObneyAiDesignSystem_019e1d.{Button,Label,Eyebrow} |
CSS vars + .o-* / .eyebrow classes. Specimens in preview/. |
| Minimal React | import "colors_and_type.css" |
import { Button } from "../components/Button.jsx" (zero deps) |
Lift from ui_kits/marketing/App.jsx. Don't add a UI lib. |
| Grain | @import "./tokens.css" in css/main.css |
utility classes in Hiccup | Bridge vars → utilities via @theme; see the files below. |
Grain — starter files
grain/tokens.css ↗Obney palette as runtime CSS vars
grain/main.css ↗Tailwind v4 + @theme bridge + @source + fonts
design.md ↗Full consumption guidance
Aligning obney-ops-workshop
— Migration
The ops-workshop uses this exact bridge — just a different palette.
- Replace its
css/tokens.csswithgrain/tokens.css(or remap its var names to these). - Swap fonts to
Figtree + IBM Plex Mono(self-host Cal Sans for any display headers). - Map its earthy accents onto the Obney accent set (green / orange / pink / yellow), one at a time, or drop them.
- Keep its
@themebridge +@sourcelines; just point them at the Obney vars.