Skip to main content
Brand
Changelogv0.43
Home/Resources · Install

Install

One <link> tag, two attributes on <html>, and you are on-brand. No build step required.

CDN 0.43.3
Updated Jul 28 2026
brandOS v0.43.3

Quick start · 60 seconds

Link once, theme everywhere.

Add one stylesheet, set two attributes. Every component frombrandOS/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
  • Governed SVG assets
  • 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.

02 · 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="bos:dui-btn bos:dui-btn-primary">Ship it</button>
  </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.

AttributeValuesWhat it controls
data-brandsnyderhackermancontrolbusmcitmicroinnomicrolightlqdmrkalexlabsFlips the brand palette, semantic slots, and font pairing.
data-themelightdarkSurface + content polarity. Every semantic slot adapts.
data-palettevividmutedmonoHome tile palette — vivid is default; mono tints all tiles primary.
data-tile-columns579Home tile columns — 5 featured, 7 balanced, 9 dense. Default: 7. (data-density is reserved for the compact/spacious UI density axis.)

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/…Rolling

Recommended 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/0.42.13/…Pinned

Pin 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>/…Beta

Roll 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

Common integration and SVG delivery issues, with the canonical fix for each.

01
Theme looks default, no Snyder colors.

Cause data-brand or data-theme missing on <html>.

Fix Add both attributes at the root element, never on <body> or a wrapper div.

02
Custom fonts not loading.

Cause CSP blocks CDN font requests.

Fix Allow brand.snyder.tech in style-src + font-src CSP directives.

03
Dark theme flashes white on first paint.

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.

04
Tailwind utilities using --brandOS-* fail to build.

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.

05
Custom brand-button does not render.

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>.

06
A logo shifts size when the theme changes.

Cause The light and dark files do not share one normalized viewBox, or a consumer is overriding the intrinsic ratio.

Fix Use the registered brandOS variants and run just brandos-svg-check --report before replacing either file.

07
A local SVG renders but fails repository policy.

Cause Reusable artwork was authored inline, loaded from a local app folder, or imported through the aggregate asset barrel.

Fix Move it into the correct brandOS asset class, register its owner, then import the exact .svg?react or .svg?raw path.

07 · SVG assets

Import the asset, preserve the artwork.

Reusable logos, marks, icons, illustrations, shapes, and backgrounds belong inbrandOS/ui/src/assets. Resolve the owning registry entry first, then import the exact file instead of the aggregate asset barrel.

import Logo from '@brandos/ui/assets/brand-logos/acme-logo-ink.svg?react';

export function HeaderLogo() {
  return <Logo role="img" aria-label="Acme" />;
}
  • Use -logo-ink.svg inline when the artwork should inherit currentColor.
  • Use registered -logo-light.svg and -logo-dark.svg files for fixed-color contexts. Both variants must share one viewBox.
  • Decorative inline SVGs require aria-hidden="true" and focusable="false". Informative SVGs require role="img" and an accessible name.
  • Do not add root sizing or preserveAspectRatio mechanically. Choose behavior from the asset class and test multiple viewport sizes.
  • Before review, run just brandos-svg-check --report and just brandos-assets-check --report.

08 · Agent skills + Office artifacts

Connect without auth. Install with review.

The activation-ready public endpoint is https://brand.snyder.tech/mcp. It serves read-only catalog metadata, immutable URLs, byte sizes, and SHA-256 values. It remains unavailable until a public-approved artifact catalog is published.

Open the complete no-auth setup guide for Codex, Claude Code, Cursor, VS Code, GitHub Copilot CLI, Gemini CLI, and generic Streamable HTTP clients.

CodexNo auth

codex mcp add brandos --url https://brand.snyder.tech/mcp

Claude CodeNo auth

claude mcp add --transport http --scope project brandos https://brand.snyder.tech/mcp

CursorNo auth

Add {"mcpServers":{"brandos":{"url":"https://brand.snyder.tech/mcp"}}} to .cursor/mcp.json.

MCP cannot write a Skill to your computer. Resolve an exact version, display and approve its immutable URL, byte size, SHA-256, and unsigned status; download the singleSKILL.md into a temporary directory; verify its digest; inspectSKILL.md, then copy atomically into one local skill root. Never usecurl | sh, npx, source, or server-returned install commands.

Read the complete Office Artifact Kit and safe skill-install contract.

09 · Next

Where to go from here