Everything you need to start building on-brand: load the tokens, get the fonts, and (optionally) pull in the components. Two files get you 90% of the way there.
Link colors_and_type.css. It declares every token (colors, type scale, spacing, motion, borders) and registers the brand fonts via @font-face, with a Google Fonts network fallback so demos work without the local files.
<!-- from a page at the project root -->
<link rel="stylesheet" href="colors_and_type.css">
Then style with the variables — never hard-code hexes:
.cta {
background: var(--signal); /* Signal Red */
color: var(--bone-white);
font-family: var(--font-headers);
border: 1px solid var(--charcoal);
}
The fonts/ folder holds Lexend Deca and JetBrains Mono as variable .ttf files. Keep it as a sibling of colors_and_type.css so the @font-face url("fonts/…") paths resolve. Weights used: 400, 500, 600, 700.
Field note. Lexend Deca carries headers, eyebrows, and titles. JetBrains Mono carries body, prices, tables, and system text. That split is the typographic signature — don't blur it.
The reusable React component(s) compile into _ds_bundle.js. Load it and read from the namespace:
<script src="_ds_bundle.js"></script>
<script>
const { ContentCalendar } = window.DigitalAlliesDesignSystem_611984;
</script>
Or, in a CMS page template, mount via x-import:
<x-import component="ContentCalendar"
from="ui_kits/website/ContentCalendar.jsx"
data="{{ cms.calendar }}" hint-size="100%,600px"></x-import>
| You need… | Take |
|---|---|
| Tokens + fonts | colors_and_type.css + fonts/ |
| Logos / icons | the files you use from assets/ (don't bulk-copy) |
| Components | _ds_bundle.js (+ the source under ui_kits/ to edit) |
| Page starts | a template from templates/ |
For the full token list and rules, read the README. For AI assistants, paste Global Context for Claude.