Design System Catalog

TF Design ships a built-in catalog of design systems. Each is a folder containing a DESIGN.md with the 9-section schema, optional CSS tokens, component showcases, and preview assets.

Categories

Category	Examples
AI & LLM	AI platforms, chatbot interfaces, model playgrounds
Developer Tools	IDEs, CI/CD dashboards, API explorers, code hosting
Productivity & SaaS	Project management, CRM, collaboration tools, docs
Backend & Data	Database UIs, monitoring dashboards, data pipelines
Design & Creative	Design tools, portfolio sites, creative agencies
Fintech & Crypto	Trading platforms, wallets, banking apps, DeFi
E-Commerce & Retail	Stores, marketplaces, product pages, checkout flows
Media & Consumer	Streaming, news, social platforms, content apps
Automotive	Car configurators, fleet dashboards, EV charging

Starter Design Systems

In addition to industry-specific systems, TF Design includes hand-authored starters:

Starter	Style	Description
default	Neutral Modern	Clean, neutral palette suitable as a blank canvas
warm-editorial	Warm Editorial	Warm tones, serif headlines, magazine-inspired layout
atelier-zero	Atelier Zero	Minimal monochrome with high-contrast accents
kami	Kami	Compact, efficient, inspired by minimalist productivity tools

Browsing the Catalog

1. Open the Design Systems tab on the entry view.
2. Systems are grouped by category — use the category headers to navigate.
3. Click any system to open the preview modal:
   • DESIGN.md view — read the full 9-section design rules.
   • Swatch grid — see the colour palette with hex values.
   • Component showcase — view sample components rendered from components.html.

Using a Catalog System

1. Select the system from the catalog.
2. It becomes the active design system for all subsequent generations.
3. Write your brief and generate — the agent reads the system as a prefix.
4. Switch systems at any time by selecting a different one from the dropdown.

Synchronising the Catalog

The design system catalog can be re-synced from upstream sources to pick up new additions or updates. Use Settings → Design Systems → Sync Catalog in the Desktop app to pull the latest systems from the configured sources and update the local catalog.

Adding Third-Party Design Systems

You can add design systems from external sources by placing them in the design-systems/ directory:

1. Create a folder with the system slug as the name.
2. Add a DESIGN.md with the 9-section schema.
3. Add a manifest.json with the od-design-system-project/v1 schema.
4. Optionally include tokens.css, components.html, and preview assets.

The system appears in the picker on the next load.