# Design Systems Surf

> Curated database of real-world design systems, component patterns, and foundational frameworks

Design Systems Surf is a directory and reference library comparing design systems from leading tech companies like Apple, Google, and Microsoft. It indexes thousands of real-world components, design tokens, and foundation rules alongside practical guides and frameworks for building AI-ready design workflows.

Website: https://designsystems.surf/

## What it is for

- Compare component patterns and anatomy across major tech companies
- Reference foundational tokens for color, typography, and spacing systems
- Prepare design system documentation and context for AI-assisted workflows
- Audit existing design systems against established industry benchmarks

## Features

- Directory indexing design systems from dozens of tech companies
- Cross-system component library comparing states, anatomy, and behavior
- Foundations database covering tokens, accessibility rules, and typography scales
- Step-by-step blueprints, frameworks, and practical guides
- AI context mapping frameworks and AI-ready roadmaps
- Curated directory of Figma libraries

## Pricing

Freemium. Free public directory and articles; Pro membership starts at $19/month for full product library access

## Details

- Type: Website
- Category: [Design](https://xiry.app/topics/design.md)
- Topic: [Design Systems](https://xiry.app/topics/design/design-systems.md)
- Open source: no
- Platforms: Web
- For: Product designers, design system engineers, and UI/UX leads
- Alternative to: Component Gallery, Adele
- Tags: design systems, ui components, design tokens, typography, inspiration, figma

## Why it was saved

- [@kalypsodesigns, 14 August 2025](https://www.instagram.com/p/DNVKKZrTXKV/): Provides direct inspiration and benchmark references for components and foundations across top-tier UI teams.

## Related

- [Awesome DESIGN.md](https://xiry.app/resources/awesome-design-md): Curated collection of plain-text design systems extracted from popular tech websites. (GitHub repo, Open source)
- [Minimal Product Design Cheatsheet](https://xiry.app/resources/minimal-product-design-cheatsheet): Quick typography, color palette, and iconography reference for clean product interfaces. (Tip, Free)
- [Modulor](https://xiry.app/resources/modulor): Open-source, token-driven design system and Figma UI kit by GR8 Tech. (Website, Open source)
- [Refero Styles](https://xiry.app/resources/refero-styles): AI-readable DESIGN.md style references extracted from popular websites. (Web app, Free)
- [Building Effective Agents: Workflow and Agent Patterns](https://xiry.app/resources/building-effective-agents-workflow-and-agent-patterns): Architectural framework categorizing LLM workflows and autonomous agent patterns (Framework, Free)
- [Checklist Design](https://xiry.app/resources/checklist-design): Curated UI and UX checklists for websites, apps, and user flows (Website, Free)

Updated 3 October 2026. Page: https://xiry.app/resources/design-systems-surf

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.