# Snyder BrandOS — Full Contract for AI Assistants This file inlines every rule an AI assistant needs to generate UI that stays inside the BrandOS brand system. If a required token does not exist, STOP and ask — do not invent a new token, alias, or literal. Canonical URL: https://brand.snyder.tech/llms-full.txt Short index: https://brand.snyder.tech/llms.txt Deployment platform: Cloudflare Workers ================================================================ 1 · Allowed inputs ================================================================ 1.1 · Colors ------------ Use only: - DaisyUI semantic classes: bg-base-100 / bg-base-200 / bg-base-300 bg-primary / bg-secondary / bg-accent bg-success / bg-warning / bg-error / bg-info text-base-content / text-primary / text-success / text-warning / text-error / text-info border-base-300 - Snyder scale variables: --brandOS-primary-050 through --brandOS-primary-950 (19 steps) --brandOS-gray-050 through --brandOS-gray-1000 (21 steps) --brandOS-accent-{name}-050..950 + -light/-base/-dark/-hover/-active names: azure · violet · teal · coral · amber · lime · rose · slate · magenta · cyan · electric · matrix 1.2 · Typography ---------------- - Families: --brandOS-font-red-hat (heading), --brandOS-font-inter (body), --brandOS-font-jetbrains (mono) - Sizes: --brandOS-text-xs through --brandOS-text-9xl (fluid via clamp()) - Weights: --brandOS-font-weight-thin/light/regular/medium/semibold/bold/bolder - Leading: --brandOS-leading-none/tight/snug/normal/relaxed/loose - Tracking: --brandOS-tracking-denser/dense/normal/loose/looser 1.3 · Spacing ------------- --brandOS-space-0 through --brandOS-space-24 (13-step rem scale): 0 · 1 · 2 · 3 · 4 · 5 · 6 · 8 · 10 · 12 · 14 · 16 · 18 · 20 · 24 Fractional half-steps available: 3-5, 5-5. 1.4 · Radius, shadow, motion ---------------------------- - Radius: --brandOS-radius-sm/default/md/lg/xl/2xl/full - Shadow: --brandOS-shadow-sm/default/md/lg/xl - Duration: --brandOS-duration-instant (50ms) / fast (150ms) / normal (300ms) / page (400ms) / slow (500ms) - Easing: --brandOS-ease-linear/snappy/smooth/bounce/stroke-draw/enter/exit 1.5 · Components ---------------- Import order (first match wins): 1. @brandos/ui web components — see /brand-components 2. Shoelace primitives — @shoelace-style/shoelace 3. DaisyUI utility classes — via @brandos/tokens/css/daisyui 4. MUI components (React only) — via @brandos/tokens/css/mui 1.6 · SVG assets ---------------- Canonical home: @brandos/ui/assets (no per-app vector-graphics/ folders). Typed manifest exports: - brandLogos — URLs for company wordmarks / lockups (brand-logos/*.svg) - brandLogosRaw — raw SVG content of brand-logos (for inline rendering) - brandFavicons — URLs for per-tenant favicons (brand-favicons/*.svg) - brandFaviconsRaw — raw SVG content of tenant favicons (for inline) - socialAssets — URLs for OG / share cards (social/*.svg) - socialAssetsRaw — raw SVG content of social cards - loginBackgrounds — per-tenant login screen backgrounds - shapes — brand-specific decorative shapes - icons — URLs to generic UI icons - iconsRaw — raw SVG content of icons (preferred for theming) Subpath imports also resolve, e.g. @brandos/ui/assets/icons/cog.svg. Always inline SVG (Fragment set:html, , or equivalent) so glyphs inherit currentColor and animate via CSS — never . ================================================================ 2 · Forbidden patterns ================================================================ Never emit any of these. Every row shows the anti-pattern and its fix: Anti-pattern Example Fix ----------------------------- ---------------------- ----------------------------------- Hex color literal #2aa5ea var(--brandOS-primary-500) rgb / rgba / hsl literals rgb(42, 165, 234) var(--color-primary) Inline style="" for visuals style="color: red" class="text-error" (dynamic data-driven values are exempt) Emoji in UI "✅ Saved" Custom alias vars --app-text-primary Use semantic tokens directly. Tailwind dark: variants dark:bg-gray-900 Drive via [data-theme='dark'] on . Default Tailwind palette bg-blue-500 bg-primary or --brandOS-primary-* Arbitrary color values bg-[#2aa5ea] bg-primary-500 for SVG icons (inline SVG) Per-app vector-graphics src/vector-graphics/ import { brandLogos } from logo.svg '@brandos/ui/assets' ================================================================ 3 · Theming ================================================================ Themes are controlled by attributes on : data-brand = "snyder" | "hackerman" | "controlbus" | "mcit" | "microinno" | "liquid" | "alexander" data-theme = "light" | "dark" data-palette = "vivid" | "muted" | "mono" (tile palette, home grid) Never inline theme logic per component. Swap tokens at the root attribute. Each tenant brand ships a complete token bundle through @brandos/tokens. Apps either: - Load the all-brands bundle: @brandos/tokens/css (snyder + hackerman + the five tenants) - Or load one brand directly: @brandos/tokens/css/{brand} The tenant brands above (controlbus, mcit, microinno, liquid, alexander) are also showcased as live profile pages at /brands/{slug} with full palette ramps, semantic slot mappings, typography specimens, and primitive checks. ================================================================ 4 · Reuse ladder (strict order) ================================================================ 1. Reuse — search brandOS/ui/src/components/ for an existing match. 2. Wrap — wrap a Shoelace or DaisyUI primitive and apply brand tokens. 3. Compose — write new only if steps 1 and 2 cannot satisfy the requirement. Open a PR against @brandos/ui to promote the new component. ================================================================ 5 · Voice & tone (for generated copy) ================================================================ Four pillars: - Professional · authority without condescension - Approachable · everyday language, contractions welcome, "you" and "we" - Confident · take a position, active voice, lead with the benefit - Clear · short sentences, specific numbers, no filler Rules: - Use active voice. - Keep sentences short — 25 words max. - Lead with the benefit, not the feature. - Address users as "you". - Be specific. Numbers beat adjectives. - Never shout in ALL CAPS for emphasis. - No emoji in UI, docs, or marketing. ================================================================ 6 · Accessibility baseline (every component ships with) ================================================================ - Correct semantic role (or ARIA when native HTML is insufficient). - Accessible name + current state exposed to assistive tech. - Keyboard map documented: Enter, Space, Escape, arrows, Home / End. - Contrast verified for default, hover, focus, disabled. - Focus ring uses --brandOS-focus-* tokens; never removed without an equivalent. - prefers-reduced-motion respected in every entrance animation. - Works zoomed to 400% and on a 320px-wide viewport. ================================================================ 7 · Site-level affordances (v1.4.3) ================================================================ - Cmd-K / Ctrl-K: keyboard-first search palette, fuzzy matches across every page title + section kicker from brandNav. - Tweaks panel (palette icon in the header): switches brand, theme, accent swatch, tile density, and uploads a custom logo. State persists per-browser via localStorage. - Every page ships a unique , meta description, canonical URL, and Open Graph card. /sitemap.xml enumerates all routes; /robots.txt is allow-all with a sitemap pointer. - Global focus-ring stylesheet applies to every interactive element — 2px outline, 2px offset, inset variant for tiles and inside-surface contexts. - Brand profile pages (/brands and /brands/{slug}) showcase each tenant from shared tokens — gallery, full 19-stop palette ramps, semantic slot cards, typography specimens in each brand's own font (Google Fonts on-demand; premium families like Gotham downloaded via `pnpm setup-fonts`), light + dark primitive check, prev/next nav. ================================================================ 8 · Where to read more ================================================================ - Source of truth: https://brand.snyder.tech - Short index: https://brand.snyder.tech/llms.txt - Sitemap: https://brand.snyder.tech/sitemap.xml - Tokens CSS (real file): https://brand.snyder.tech/downloads/tokens.css - Tokens JS (real module): https://brand.snyder.tech/downloads/tokens.js - AI Guardrails page: https://brand.snyder.tech/ai-guardrails - Best Practices: https://brand.snyder.tech/best-practices - [CDN Index](/cdn/): versioned CSS themes, utilities, and autoloader files ================================================================ 9 · Contact ================================================================ Breakage, token gaps, or new-pattern proposals — brand@snyder.tech Emergency brand misuse — legal@snyder.tech