Design Systems Overview

A design system in TF Design is a portable Markdown file (DESIGN.md), not a JSON theme file. It defines visual rules — colours, typography, component styles, layout principles — that the agent reads and applies when generating artifacts.

Design systems compose with all other modes. Once a design system is active, every subsequent Prototype, Deck, or Template run reads it as a system-prompt prefix and as a physical DESIGN.md file in the agent's working directory.

The 9-Section Schema

Every DESIGN.md follows a 9-section schema:

#	Section	Description
1	Visual Theme & Atmosphere	Overall mood, aesthetic direction, inspirations
2	Color Palette & Roles	Primary, secondary, accent, neutral, and semantic colours with usage rules
3	Typography Rules	Font families, sizes, weights, line heights, letter spacing for each text role
4	Component Stylings	Buttons, cards, inputs, modals, nav bars, and other recurring components
5	Layout Principles	Grid systems, spacing scales, container widths, alignment rules
6	Depth & Elevation	Shadows, borders, blur, and layering for visual hierarchy
7	Do's and Don'ts	Positive and negative guidance to keep output on-brand
8	Responsive Behavior	Breakpoints, mobile-first rules, and adaptation strategies
9	Agent Prompt Guide	Instructions the agent reads to interpret and apply the system

How Design Systems Work at Runtime

1. Resolution — the Desktop app looks for DESIGN.md in the active design-system folder, falling back to a user-configured path.
2. Injection — the prompt composer (composeSystemPrompt()) injects the design system as:
   • A system-prompt prefix (with token pruning for large systems).
   • A physical DESIGN.md file in the agent's working directory (skills Read it directly).
   • A {{ design_system }} template variable available to skill templates.
3. Application — switching the dropdown reloads the system. The next generation uses the new tokens.
4. Hot-reload — in development mode, the design system hot-reloads on file change.

What a Design System Folder Contains

design-systems/<slug>/
├── manifest.json              # Schema version and metadata
├── DESIGN.md                  # The 9-section design rules
├── tokens.css                 # CSS custom properties (optional)
├── components.html            # Sample component showcase (optional)
├── components.manifest.json   # Component manifest (optional)
├── assets/                    # Images, logos, icons
├── fonts/                     Custom font files
├── preview/                   # Preview screenshots
└── source/                    # Source materials (brand guide, URL, etc.)

Manifest Schema

The manifest.json uses the od-design-system-project/v1 schema:

{
  "schema": "od-design-system-project/v1",
  "name": "My Brand System",
  "slug": "my-brand-system",
  "category": "Productivity & SaaS",
  "tokens": "tokens.css",
  "designMd": "DESIGN.md",
  "components": "components.html",
  "preview": "preview/preview.png"
}

The picker groups systems by the > Category: metadata line in the DESIGN.md H1. The H1 title serves as the dropdown label.

Craft Rules

In addition to brand-specific design systems, TF Design applies universal craft rules — brand-agnostic quality standards that every project benefits from:

Craft Rule	Description
typography	Font pairing, hierarchy, and readability standards
color	Colour theory, contrast, and accessibility rules
anti-ai-slop	Patterns to avoid — aggressive purple gradients, generic emoji icons, rounded-card-with-left-border-accent, hand-drawn SVG humans, Inter as display face, invented metrics

Skills opt into craft rules via od.craft.requires: [typography, color, anti-ai-slop]. The prompt composer injects the concatenated craft body between the design system and the skill body — brand tokens win on conflict, craft rules cover the rest.

Setting an Active Design System

1. On the entry view, open the Design Systems tab.
2. Browse the catalog by category.
3. Click a system to preview its DESIGN.md, swatches, and component showcase.
4. Select it — it becomes the active system for all subsequent generations.

You can switch systems at any time. The change takes effect on the next generation.

Generating a Custom Design System

Use the Design System mode to create a custom DESIGN.md from:

• A screenshot of an existing interface.
• A brand-guide PDF with colours, fonts, and component guidelines.
• A URL — the agent fetches and analyses the page's visual language.
• A text brief describing your brand.

The agent follows a brand-spec extraction protocol: locate assets → download → grep for hex colours → write brand-spec.md → vocalise findings. It never guesses brand colours from memory.

See Creating Custom Design Systems for details.