Build, improve, and maintain your

Build, improve, and maintain your design system

For every stage of design system work, from first decisions to ongoing improvements

Trusted by designers from

Practical products, tools, and references for your design system

Typography System 101

Why AI doesn’t understand your design system

How to create a design system in Figma

5 building blocks of great design systems

Learn from real design systems, foundations, and components to make stronger decisions

Everything you need for ongoing design system work

Subscription gives you access to the complete product library, ongoing updates, and new premium resources as they are released

Mon

30

+1

One new resource every month

New premium resources included

Included in Pro · From $19/month

FOUNDATION

Color Foundation

Build a color system with semantic roles, tokens, and accessible usage rules

FOUNDATION

Color Foundation

Build a color system with semantic roles, tokens, and accessible usage rules

STRATEGY

Design System Goals

Define why your design system exists, what should change, and the priorities guiding it

STRATEGY

Design System Goals

Define why your design system exists, what should change, and the priorities guiding it

FOUNDATION

Typography Foundation

Create a consistent type system with scales, roles, tokens, and implementation rules

FOUNDATION

Typography Foundation

Create a consistent type system with scales, roles, tokens, and implementation rules

Explore how leading design systems structure foundations and components

Design systems

Explore design systems to compare structure, docs, components, patterns, and the decisions behind each system

1,000+ sources

Directories

Compare typography, color, spacing, tokens, and other foundations to see how different systems structure their core decisions

1,000+ sources

Directories

Compare typography, color, spacing, tokens, and other foundations to see how different systems structure their core decisions

2,500+ sources

Components

Browse component patterns to compare anatomy, states, behavior, usage, and implementation across different design systems

2,500+ sources

Components

Browse component patterns to compare anatomy, states, behavior, usage, and implementation across different design systems

Helping designers turn scattered work into stronger systems

Design Systems Surf helped us move from scattered decisions to a clearer system structure. It gave us a practical way to think through tokens, docs, and handoff without getting stuck

Dmitry Rypinsky

Product Designer

It gave me a clearer picture of where AI can save time in design-system work while leaving the important decisions and quality checks with the team

Danial Shirali

Product Designer

It's been quite helpful to wrangle all of these seemingly disparate systems into a singular lens and understand how to get started

Dallas Kwok

Lead Designer

Design Systems Surf has helped me conceptualize a framework to move from idea to a usable brand design system. It has taken my prototypes to the next level

Michelle Exantus

UX Researcher

PRO

Get everything you need to move your design system forward

Practical products, references, and tools for design systems

Practical products, references, and tools for design systems

Use your preferred LLM
to explore DSS

Use your preferred LLM to explore DSS

Follow our updates
on social

Follow our updates on social

designsystems.surf · created by Ilya Greben