Design Systems Reference

Design systems, decoded.
Build with confidence.

Apple HIG, Material Design, and Fluent in one system-aware workspace. Switch themes and watch every token update.

Apple Human Interface Guidelines

Material Design 3

Fluent Design System

Primary token

Type 16/24

Radius 12

Spacing 8

3 Design Systems

500+ Colors

One-Click Copy

System PreviewLive

Apple HIG

Tokens synced

Primary action

16px

Button

Chip

Motion

Radius

Spacing

Switch systems below to see every element transform.

Scroll

Why DesignRef

The design-system workspace you wish you had

A focused, system-aware reference for teams who care about consistency and craft.

System-first clarity

Tokens, components, and guidelines organized for quick, confident decisions.

Live theming

Switch systems and watch colors, typography, and motion update instantly.

Built for teams

One source of truth that bridges designers and developers with shared language.

Interactive Demo

Experience the transformation

Switch between design systems and watch the UI adapt in real-time

System Console

Active system controls

Choose a system

Design System

Appearance

Live tokens

Primary

var(--color-primary)

PrimarySurface

ModeLight

Currently: Apple HIG

Changes apply instantly across the UI

Design Systems

Complete specifications

Everything you need from the world's leading design languages

3 live systems

System

Apple Human Interface Guidelines

Design guidelines for creating intuitive, consistent experiences across Apple platforms including iOS, iPadOS, macOS, watchOS, tvOS, and visionOS.

iOSiPadOSmacOS+3

System

Material Design 3

Material Design is a design system built and supported by Google designers and developers. Material 3 (M3) is the latest version featuring dynamic color, updated components, and adaptive design.

AndroidWebFlutter+1

System

Fluent Design System

Fluent is Microsoft's design system for creating experiences that seamlessly fit into a broad range of Microsoft products. Fluent 2 is the latest evolution featuring improved depth, motion, and accessibility.

Windows 11WebiOS+2

Select a system to explore tokens, components, and guidelines.

Features

Everything at your fingertips

Powerful tools for designers and developers — curated, searchable, and system-aware.

Color PalettesTypographySpacingCompareOne-Click Copy

Color Palettes

Complete color systems with HEX, RGB, and HSL values. Light and dark themes with semantic tokens.

Typography

Full type scales with weights, sizes, and line heights.

Spacing

Spacing tokens and sizing guidelines.

Compare

Side-by-side comparison of up to 4 systems.

One-Click Copy

Copy any value instantly to clipboard.

Updated weekly40+ component specs3 system baselines

Quick Reference

Need specs fast?

Condensed cheat sheets for rapid design decisions and cross-team alignment.

Preview

Primary token#3A8CFF

16 / 24

Radius 12

Quick navigation

PressK

Design systems, decoded.Build with confidence.

Apple HIG

The design-system workspace you wish you had

System-first clarity

Live theming

Built for teams

Experience the transformation

Active system controls

Complete specifications

Apple Human Interface Guidelines

Material Design 3

Fluent Design System

Everything at your fingertips

Color Palettes

Typography

Spacing

Compare

One-Click Copy

Need specs fast?

Design systems, decoded.Build with confidence.

Apple HIG

The design-system workspace you wish you had

System-first clarity

Live theming

Built for teams

Experience the transformation

Active system controls

Complete specifications

Apple Human Interface Guidelines

Material Design 3

Fluent Design System

Everything at your fingertips

Color Palettes

Typography

Spacing

Compare

One-Click Copy

Need specs fast?

Design systems, decoded.
Build with confidence.

Design systems, decoded.
Build with confidence.