Build better foundations, systematically.

Systematically Foundations is an open-source meta-framework that helps you create parametric foundations for your design system — including typography, layout, and color.

✅ What this is:

• A JSON-first setup that connects Figma and code
• A flexible framework to build your design system foundations — starting with typography, layout, and color — using parametric logic
• A set of templates [Design Tokens + Figma variables & Styles + CSS] you can actually customise, iterate and build upon.
• A mindset shift — from fiddling with values to defining intent

❌ What this is not:

• Not just another visual UI kit
• Not tied to any rigid methodology or mental model
• Not a black box — everything is transparent and editable
• Not stuck with resolved values — parametric logic stays alive for fast iteration and improvement