# BrandOS Design System

> Complete design token, layout, component, and CSS reference for By Default Studio's BrandOS platform. Use this as your authoritative guide for generating on-brand HTML and CSS.

Always use semantic tokens over primitives. Follow the layout hierarchy: section > .padding-global > container > block. Accessibility required on all components.

## Docs

- [Full Reference](https://bydefault.design/llms-full.txt): Complete design system — all tokens, components, patterns, and rules
- [LLM Documentation](https://bydefault.design/docs/llms.html): How to use these files with AI tools

## Foundations

- [Layout System](https://bydefault.design/llms-full.txt#layout-system): HTML page structure hierarchy
- [Design Tokens](https://bydefault.design/llms-full.txt#design-tokens): All CSS custom properties — color, typography, spacing, border
- [Color Usage](https://bydefault.design/llms-full.txt#color-usage): Semantic color tokens and usage rules
- [Typography](https://bydefault.design/llms-full.txt#typography): Font families, sizes, weights, and line heights
- [Spacing](https://bydefault.design/llms-full.txt#spacing): Spacing scale tokens and utility classes
- [Border System](https://bydefault.design/llms-full.txt#border-system): Composable border classes

## Components

- [Component Conventions](https://bydefault.design/llms-full.txt#component-conventions): Naming, tokens, accessibility, and build rules
- [Button](https://bydefault.design/llms-full.txt#button): Button component
- [Card](https://bydefault.design/llms-full.txt#card): Card component
- [Callout](https://bydefault.design/llms-full.txt#callout): Callout component
- [Form Elements](https://bydefault.design/llms-full.txt#form-elements): Form Elements component
- [Badge](https://bydefault.design/llms-full.txt#badge): Badge component
- [Tabs](https://bydefault.design/llms-full.txt#tabs): Tabs component
- [Toast](https://bydefault.design/llms-full.txt#toast): Toast component
- [Tooltip](https://bydefault.design/llms-full.txt#tooltip): Tooltip component
- [Disclosure](https://bydefault.design/llms-full.txt#disclosure): Disclosure component
- [Breadcrumb](https://bydefault.design/llms-full.txt#breadcrumb): Breadcrumb component
- [Progress Bar](https://bydefault.design/llms-full.txt#progress-bar): Progress Bar component
- [Dialog](https://bydefault.design/llms-full.txt#dialog): Dialog component
- [Dropdown](https://bydefault.design/llms-full.txt#dropdown): Dropdown component
- [Tag](https://bydefault.design/llms-full.txt#tag): Tag component
- [Code / Pre / Kbd](https://bydefault.design/llms-full.txt#code--pre--kbd): Code / Pre / Kbd component
- [Mark / Abbr / Figure](https://bydefault.design/llms-full.txt#mark--abbr--figure): Mark / Abbr / Figure component
- [Table](https://bydefault.design/llms-full.txt#table): Table component

## Optional

- [Icon System](https://bydefault.design/llms-full.txt#icon-system): Brand SVG icons only — no external libraries
- [CSS Conventions](https://bydefault.design/llms-full.txt#css-conventions): File organization and naming rules