⚠️ Design system CSS not found. Check the path in cms/docs.config.js → designSystemPath, then re-run npm run docgen.

LLM Reference

Use the design system with AI tools

Tools / LLM Reference
Download .md file
Open .md in new tab

This design system follows the llms.txt standard, a proposed convention for providing structured information to large language models. Think of it like robots.txt, but for AI assistants instead of search engines.

We publish two reference files that give AI tools full context about every token, component, and pattern in BrandOS. When you share them with an AI, the code it generates follows the design system.


Reference Files

File Purpose
llms.txt Lightweight index with project summary and links to each section
llms-full.txt Complete reference with all tokens, components, patterns, and rules

Both files are auto-generated from the design system source files on every deploy, so they are always up-to-date.

  • Use llms.txt for quick context. It provides a summary of the design system with links to each section.
  • Use llms-full.txt for full code generation. It contains every token value, component pattern, and rule the AI needs.

How to Use with AI Tools

Claude Projects

Add the full reference URL to your project knowledge. Claude will use it as context when helping you build with BrandOS.

  1. Open your Claude project settings
  2. Under Project knowledge, add the URL:
https://bydefault.design/llms-full.txt

Claude Code

Reference the file by path if it's in your project, or paste the URL at the start of your conversation:

@https://bydefault.design/llms-full.txt

Cursor

Add the reference via Cursor Settings > Features > Docs:

  1. Go to Settings > Features > Docs
  2. Add a new doc with the URL: https://bydefault.design/llms-full.txt
  3. Reference it in chat using @Docs

You can also paste the file content directly into a conversation.

VS Code + Copilot

Download llms-full.txt to your project root, then reference it in Copilot Chat:

#file:llms-full.txt

Alternatively, open the file in a tab. Copilot will include open files as context.

ChatGPT

Paste the URL at the start of your conversation and ask ChatGPT to use it as the design system reference:

https://bydefault.design/llms-full.txt

If the tool cannot fetch URLs directly, download the file and upload it as an attachment.

Other AI Tools

Most AI tools accept context via URL, file upload, or pasted content. Check your tool's documentation for the best method. The llms-full.txt file is plain markdown. It works with any tool that accepts text input.


What's Inside

The full reference contains everything an AI needs to generate on-brand code:

  • Design tokens: every CSS custom property value (colors, typography, spacing, borders, radius, shadows)
  • Layout system: the complete page hierarchy and structural rules
  • Component patterns: HTML examples and usage rules for all components
  • Utility classes: spacing, gap, padding, border, and layout modifiers
  • Icon system: brand SVG icon guidelines and usage patterns
  • Dark mode tokens: automatic theme switching via data-theme="dark"
  • Accessibility requirements: keyboard navigation, ARIA labels, focus states
  • Motion: easing and duration tokens plus usage rules
  • Getting the system: package install, theme.css customization, and icon sprite usage
On this page
  • Reference Files
  • How to Use with AI Tools
  • What's Inside
Previous

Email Signature

Next Docs

JavaScript

Was this page helpful?

We use this feedback to improve our documentation.

Thanks for your feedback

Send feedback

© 2026 By Default