design-foundation
Design Foundation
Overview
A design foundation is the bedrock upon which all great products are built. It's not just a collection of colors and fonts—it's a system of decisions that enables your team to build consistently, quickly, and with intention.
This skill helps you create or formalize your design foundation, whether you're starting from scratch or documenting what already exists. It covers design tokens, component structure, design principles documentation, and the governance model for your system.
Core Methodology: Token-Based Design Systems
Modern design systems are built on the concept of design tokens—named entities that store design decisions. Rather than hardcoding colors or spacing values throughout your codebase, tokens centralize these decisions, making them easy to maintain, theme, and scale.
The Token Hierarchy
Design tokens are organized in layers, from most abstract to most concrete:
Layer 1: Global Tokens (The Foundation) These are your base design decisions—the raw materials of your system.
More from sanky369/vibe-building-skills
social-graphics
Generate platform-optimized social media graphics and posts. Use when creating content for Instagram, Twitter, LinkedIn, TikTok, or other social platforms.
357direct-response-copy
Write persuasive sales copy that converts using proven direct response principles. Use when writing landing pages, sales emails, ads, or any copy designed to drive action.
248tweet-writer
Write viral, persuasive, engaging tweets and threads. Uses web research to find viral examples in your niche, then models writing based on proven formulas and X algorithm optimization. Use when creating tweets, threads, or X content strategy.
205remotion-script-writer
Writes detailed video scripts for Remotion based on input requirements and codebase analysis
126product-video
Create animated product videos with reveals and animations. Use when creating product demos, promotional videos, or dynamic visual content.
108typography-system
Master typography design with font selection, type scales, hierarchy, readability, and accessibility. Create consistent, beautiful typography that works across all devices and contexts. Includes modular scales, fluid typography, variable fonts, and accessibility best practices.
103