Foundation Stack
Design System
Build an AI-ready foundation system without starting from scratch
Use a structured foundation stack to define tokens, rules, docs, AI context, accessibility notes, and developer handoff across core system layers
Trusted by Designers from
One stack for the foundation layer behind your interface
Structure the core decisions your product relies on before they turn into local rules, hardcoded values, and unclear handoff
Build the complete foundation layer and save compared to buying each product separately
$1,192
$699
Save $493
–41%
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
Use Foundation Stack when core system decisions need structure
Whether you are starting from scratch, cleaning up foundations, preparing handoff, or delivering client-ready system work
Start from scratch with a foundation system
When you are building a new product or design system, foundation decisions can turn into disconnected values quickly. Foundation Stack gives you a structured model from day one: tokens, rules, documentation, AI context, accessibility notes, and developer handoff
Outcome
You start with a foundation layer that is ready to customize instead of inventing every rule from zero
Clean up messy foundation decisions
Prepare handoff without guesswork
Use AI with system context
Deliver client-ready foundation work
Based on analysis of 100+ design systems. Patterns translated into a reusable foundation stack
Since 2023, Design Systems Surf has cataloged mature design systems across foundations, components, documentation, and implementation patterns.
Foundation Stack turns that research into reusable foundation structures for tokens, rules, AI context, accessibility guidance, and developer handoff
Trusted by designers working on design systems
Feedback from people building, auditing, documenting, and maintaining design systems
10k+
Designers across 175+ countries follow Design Systems Surf for design system examples, patterns, and practical resources
What to know before you start
Clear answers about what Motion Foundation includes, how it can be customized, and how it fits into real design system work
Is this just a Figma template?
No. The Figma files are one part of the package. Foundation Stack also includes AI context .md, NotebookLM source .md, setup guidance, AI prompts, accessibility .md, and dev handoff .md files for each included Foundation product.
The Figma files give you the working foundation systems. The Markdown files support different AI workflows: customization, knowledge exploration, accessibility review, documentation, and developer handoff.
What is included?
Can I customize it?
Will this fit my brand?
Can I use it with an existing design system?
Do I need to use AI?
Are the Markdown files standalone guides?
What does the NotebookLM source do?
What does the accessibility file do?
What does the dev handoff file do?
Does this include components?
Who is this for?
Is this for beginners or advanced teams?
How is this different from building it myself?
Will developers be able to use it?
Can I use this for client work?
What is not included?
Still have questions?
Reach out at hey@designsystems.surf
