Understanding Design Systems

What is a Design System?

A design system is a comprehensive set of documentation, components, and guidelines that define how to design and build digital experiences. It ensures consistency, efficiency, and scalability across your entire product.

Core Components

makeui.dev extracts five key components from your design:

1. Color Palette

Colors define the visual identity of your brand. Every color serves a purpose.

Color Types

• Primary Colors: Main brand colors that dominate the design (limited use, usually 1-2)
• Accent Colors: Highlight important actions (CTAs, links, alerts)
• Neutral Colors: Backgrounds, borders, text (grayscale usually)
• Semantic Colors: Indicate states (success green, error red, warning yellow)

How It Works

When you submit references, makeui.dev identifies:

• Dominant colors in the design
• How frequently each color appears
• Where colors are applied (backgrounds, text, borders)
• Semantic meaning (primary, accent, success, error, etc.)

Example Output:

2. Typography

Typography is how text is styled and organized. It includes fonts, sizes, weights, and spacing.

Key Elements

• Font Family: The typeface used (e.g., SF Pro Display, Roboto)
• Font Size: Height of text (measured in pixels or rem)
• Font Weight: Thickness of text (100-900, where 400=normal, 700=bold)
• Line Height: Space between lines of text
• Letter Spacing: Space between characters

Type Scales

A good design system defines a hierarchy:

• H1 (Headlines): Largest, used for page titles (often 48-72px)
• H2-H3 (Subheadings): Medium size for sections (32-48px)
• Body: Regular text (14-18px)
• Caption: Small labels (10-12px)

Example Output:

3. Spacing & Layout

Spacing creates visual rhythm and improves readability. Professional designs use a grid system.

Spacing Scale

Most systems use an 8px base unit:

• 8px (1x)
• 16px (2x)
• 24px (3x)
• 32px (4x)
• 48px (6x)
• 64px (8x)

Why 8px?

• Divides evenly into common screen sizes (1920, 1440, 768)
• Easy to maintain consistency
• Scales well across device sizes
• Natural rhythm for human perception

Common Spacing Uses

• Margin: Space outside an element
• Padding: Space inside an element
• Gap: Space between items in a layout

4. Components

Components are reusable UI building blocks that make up your interface.

Common Components

• Button: Clickable action element
• Card: Container for related content
• Input: Text field for user data
• Toggle: Switch between two states
• Dropdown: Select from options
• Modal: Dialog box for important actions

Component Properties

For each component, makeui.dev identifies:

• Default styles (colors, typography, spacing)
• Variant states (hover, active, disabled, focus)
• Size variations (small, medium, large)
• Border radius and shadows
• Spacing within the component

5. Visual Hierarchy

Visual hierarchy guides the user's eye through the interface in order of importance.

Techniques Used

• Size: Larger = more important
• Color: Bold colors draw attention
• Weight: Bold text stands out
• Contrast: High contrast = more visible
• Position: Top-left is typically most noticed
• Whitespace: Isolation creates importance

How AI Extracts These Elements

When you upload references, makeui.dev:

1. Analyzes Images: Scans every pixel for colors, shapes, and text
2. Identifies Patterns: Finds repeating elements and styles
3. Recognizes Components: Groups similar UI elements together
4. Extracts Metadata: Gets font names, sizes, colors, spacing
5. Categorizes Semantics: Determines the purpose of each element
6. Generates Documentation: Creates structured output in multiple formats

Real-World Example

Input: Screenshot of a website

Output: Design System

Next Steps

• Best Practices - Learn how to create better references
• Creating Your First System - Step-by-step guide
• Troubleshooting - Common issues and solutions

Tip: The more consistent your reference designs are, the clearer the extracted system will be.