Download

Design systems, ready for your agent.

Browse real-world design system examples — brand-grade palette, typography, motion and voice your coding agent can snap any project to. Every system is open-source and runs with Claude, Codex, Cursor and more.

What is a design system?

A design system is a reusable set of brand foundations — color palette, typography, spacing, motion and voice — that keeps every screen consistent. In Open Design each design system is a plugin: snap a project to one and your coding agent inherits the palette, type, motion and voice automatically, so everything it generates stays on-brand.

Every system is a DESIGN.md file

Each design system here is a single DESIGN.md — a human- and agent-readable markdown spec that captures the brand’s visual theme, color roles, typography scale, and interaction language. It lives in your repo, versions in git, and travels with your project.

Point Claude Code, Cursor, or any coding agent at the file and every component, page, and asset it generates inherits the same identity. DESIGN.md is an open, Apache-2.0 format; Open Design is the open-source, local-first library and tooling built around it.

# Design System Inspired by Linear

> Category: Productivity
> Focused, low-chrome workspace. Inter, tight grid, restrained color.

## 1. Visual Theme & Atmosphere
A calm, dense product surface where typography and spacing
carry the hierarchy and color is used sparingly for intent.

## 2. Color Palette & Roles
### Primary
- **Ink** (`#0d0e10`): Primary text and dark surfaces.
- **Violet** (`#5e6ad2`): Action and focus accent.
- **Surface** (`#f4f5f8`): Light canvas for content blocks.
A DESIGN.md excerpt
  1. 01

    Pick a system

    Browse the library above and open any system to read its full DESIGN.md — palette, type, motion, and voice.

  2. 02

    Drop it in your project

    Save the DESIGN.md to your repo root. It’s plain markdown — no build step, no account, no export.

  3. 03

    Point your agent at it

    Tell Claude Code or Cursor to follow DESIGN.md, and every output stays consistent with the brand.

DESIGN.md is an open format (Apache-2.0). Open Design’s systems are free to read, fork, and contribute to on GitHub.

Frequently asked questions

  • What is a design system?

    A design system is a single source of truth for a brand’s visual language — palette, typography, spacing, motion, and tone — so every screen and asset feels like one coherent product.

  • What is a DESIGN.md file?

    DESIGN.md is an open, markdown-based format for describing a design system in a way both people and AI coding agents can read. It captures color roles, type scale, and interaction patterns as plain text you keep in your repo.

  • How do I use a DESIGN.md with Claude Code or Cursor?

    Save the file to your project root and tell your agent to follow it. Open Design can also snap a project to a system so every plugin output inherits the same identity automatically.

  • Are these design systems free?

    Yes. Every system here is open source and free to read, download, fork, and contribute to. Open Design itself is Apache-2.0 and local-first.

  • How many design systems are there?

    150 and counting, spanning consumer tech, editorial, and experimental styles. New systems land regularly, and you can contribute your own on GitHub.

  • Can I create my own DESIGN.md?

    Yes — author a DESIGN.md by hand, or let Open Design generate one from a reference site, then reuse it across every project and agent.