🧱 JSON Patterns
Practical JSON structure examples for building and scaling your design system foundations
Build, Structure, and Communicate with Clarity
Every design system starts with a solid JSON foundation. Inked Colibri uses flat, human-readable JSON patterns for variables and styles — making it easy to create, export, and collaborate with AI when building your system.
Share Context with AI
Use the context below with ChatGPT, DeepSeek, or Gemini before discussing or generating custom JSON schemes. It ensures both you and the AI use the same format, terminology, and structure.
JSON Patterns Overview
Below is a quick overview of recommended base JSON patterns you can use to set up your design project or design system.
Each represents a layer of structure — from sizing logic to typography and layout spacing.
Size Variables
Foundation Level
Base Size Structure
Start with Tesla (3/6/9) scaling or share with AI to replace with Material Design Fibonacci or other metrics. Defines consistent numeric tokens for spacing, typography, and layout — the foundation for your Figma variable setup.
Typography Variables
Structure and Hierarchy
Typography Set
Links text properties (font size, line height, letter spacing, font family) to your size variables. Serves as the foundation for text style generation inside Figma.
Layout Variables
Experimental Setup
Layout and Spacing
Controls padding, gaps, and margins across components. Keeps layout logic consistent and modular for responsive design patterns. Use as-is or modify to match your team's structure.
At a Glance
Together, these JSON patterns define the foundation of your design system workflow:
- Start with scalable size variables.
- Layer typography logic on top.
- Add layout spacing for structure and rhythm.
These examples are just the beginning — more boilerplates and ready-to-use JSON templates will be added soon to help you accelerate your setup and experiment with AI-assisted workflows.