Design

Design Systems

Keep your entire application consistent — control colors, typography, and components via design tokens and shared libraries.

Overview

Every project in Master has its own design system built on CSS variables and Tailwind tokens. Instead of hardcoded colors (text-white), you use semantic tokens (text-foreground, bg-primary).

You can find the design system in the files src/index.css a tailwind.config.ts.

Design tokens

Colors — primary, secondary, background, foreground, muted, accent
Typografie — font families, sizes, line-heights
Spacing & radius — consistent gaps and corners
Shadows and gradients — unified effects across the UI

Component libraries

Master uses shadcn/ui — a collection of accessible components built on top of Radix. All components are included in the project as source code.

Prompt examples

prompt

Change the primary color to #FF6B35 and rewrite the semantic tokens to maintain contrast.

prompt

Add a "premium" variant to the Button — a gradient from primary to accent, larger padding.