Install
One <link> tag, two attributes on <html>, and you are on-brand. No build step required.
Quick start · 60 seconds
Link once, theme everywhere.
Add one stylesheet, set two attributes. Every component from
brandOS/ui, every DaisyUI utility, and every
--brandOS-* token becomes available.
- 19-step primary scale
- 12 accent palettes
- Red Hat + Inter + Mono
- 7 brand themes
- Light + dark parity
- 26 stroke icons
- DaisyUI overlay
- Tailwind v4 reference
<html data-brand="snyder" data-theme="light">
<head>
<link rel="stylesheet"
href="https://brand.snyder.tech/cdn/latest/themes/brand-all.css">
</head>
</html>01 · CDN bundles
Pick the right file
The full kit is under 50 KB gzipped — start there unless you know you want a subset.
All bundles are versioned under /cdn/v1/; new majors ship at /v2/, etc.
brand-all.css 52 KB The full kit — every brand theme, fonts, reset, framework overlays.
/cdn/latest/themes/brand-all.cssglobal-tokens.css 12 KB Just the CSS custom properties. No resets, no framework.
/cdn/latest/themes/global-tokens.csssnyder-brand.css 6 KB Snyder theme only — pair with global-tokens.css.
/cdn/latest/themes/snyder-brand.csshackerman-brand.css 6 KB Hackerman theme only — same pairing.
/cdn/latest/themes/hackerman-brand.csscontrolbus-brand.css 7 KB ControlBus profile only — pair with global-tokens.css.
/cdn/latest/themes/controlbus-brand.cssmcit-brand.css 7 KB MCIT profile only — pair with global-tokens.css.
/cdn/latest/themes/mcit-brand.cssmicroinno-brand.css 7 KB Micro Innovation profile only — pair with global-tokens.css.
/cdn/latest/themes/microinno-brand.cssliquid-brand.css 7 KB Liquid Intelligence & Marketing profile only — pair with global-tokens.css.
/cdn/latest/themes/liquid-brand.cssalexander-brand.css 7 KB Alexander Labs profile only — pair with global-tokens.css.
/cdn/latest/themes/alexander-brand.csstailwind.css 3 KB Tailwind v4 @reference file exposing every token as a utility.
/cdn/latest/themes/framework/tailwind.cssdaisyui.css 8 KB DaisyUI semantic slots wired to BrandOS tokens.
/cdn/latest/themes/framework/daisyui.css02 · Framework snippets
Copy-paste for your stack
Every snippet produces the same runtime. Pick your stack, click copy.
<!DOCTYPE html>
<html data-brand="snyder" data-theme="light">
<head>
<link rel="stylesheet" href="https://brand.snyder.tech/cdn/latest/themes/brand-all.css">
</head>
<body>
<button class="btn btn-primary">Ship it</button>
</body>
</html><!-- src/layouts/BaseLayout.astro -->
<html data-brand="snyder" data-theme="light">
<head>
<link rel="stylesheet" href="https://brand.snyder.tech/cdn/latest/themes/brand-all.css">
<slot name="head" />
</head>
<body><slot /></body>
</html>// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html data-brand="snyder" data-theme="light">
<head>
<link
rel="stylesheet"
href="https://brand.snyder.tech/cdn/latest/themes/brand-all.css"
/>
</head>
<body>{children}</body>
</html>
);
}// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
htmlAttrs: { 'data-brand': 'snyder', 'data-theme': 'light' },
link: [
{
rel: 'stylesheet',
href: 'https://brand.snyder.tech/cdn/latest/themes/brand-all.css',
},
],
},
},
});<!-- index.html -->
<html data-brand="snyder" data-theme="light">
<head>
<link rel="stylesheet"
href="https://brand.snyder.tech/cdn/latest/themes/brand-all.css">
</head>
<body><app-root></app-root></body>
</html>03 · Theme activation
Drive everything from <html>
Every theme decision lives on the root element. Never re-theme per-component — flip one attribute and all tokens follow.
| Attribute | Values | What it controls |
|---|---|---|
data-brand | snyderhackermancontrolbusmcitmicroinnoliquidalexander | Flips the brand palette, semantic slots, and font pairing. |
data-theme | lightdark | Surface + content polarity. Every semantic slot adapts. |
data-palette | vividmutedmono | Home tile palette — vivid is default; mono tints all tiles primary. |
data-density | 579 | Tile density — 5 featured, 7 balanced, 9 dense. Default: 7. |
04 · Version pinning
Pick your update cadence
CDN paths are versioned at the major. Minor and patch releases ship under the same major path so you pick up fixes without code changes; breaking changes wait for the next major.
/cdn/latest/…RollingRecommended for most apps. Auto-receives every minor + patch (new tokens, bug fixes, accessibility polish). The "latest" alias resolves to whatever the current published version is.
/cdn/1.4.4/…PinnedPin an exact version for reproducible builds. You opt in to updates by editing the URL. Use when your CI records pixel-perfect snapshots or you need an audit-friendly trail.
/cdn/<next-major>/…BetaRoll forward to a preview version when one is published. Only use in staging environments or internal previews — never production.
05 · Verify
Confirm BrandOS loaded
Paste into the DevTools console. You should see a real OKLCH value, not an empty string.
getComputedStyle(document.documentElement)
.getPropertyValue('--brandOS-primary-500')
.trim();
// → "oklch(0.72 0.1557 239.5)"06 · Common pitfalls
When something looks off
Five things that trip people up the first time they integrate.
Cause data-brand or data-theme missing on <html>.
Fix Add both attributes at the root element — never on <body> or a wrapper div.
Cause CSP blocks CDN font requests.
Fix Allow brand.snyder.tech in style-src + font-src CSP directives.
Cause data-theme is set via JS after hydration.
Fix Server-render the attribute, or add a blocking script in the document head to set it before the stylesheet loads.
Cause The Tailwind config did not pick up our @reference file.
Fix Add @reference "https://brand.snyder.tech/cdn/v1/framework/tailwind.css" at the top of your global CSS.
Cause Web component not registered — the brandOS/ui package is loaded separately.
Fix Import it: <script type="module" src="https://brand.snyder.tech/cdn/v1/ui.js"></script>.
07 · Next
Where to go from here
- AI Guardrails — the non-negotiable rules for any generated UI.
- Brand components — 24 first-party web components that drop in over the CDN link.
- Downloads — logos, fonts, raw
tokens.css+tokens.js. - llms-full.txt — machine-readable contract for AI assistants.