Design System
Documentation
A comprehensive reference for building interfaces with Apple's Human Interface Guidelines and Liquid Glass design language — adapted for web, React, SaaS, and dashboards.
Everything You Need to Build Like Apple
From foundational principles to live component demos — every aspect of the design system is documented and ready to use.
9 core principles derived from Apple's HIG — Clarity, Hierarchy, Depth, Feedback, Consistency, and more. The philosophical foundation of every decision.
Apple's revolutionary new visual language introduced with visionOS. Translucent surfaces, specular highlights, adaptive refraction — documented in full.
Adaptive color system supporting light and dark mode. Full semantic color palette, accent colors, semantic states, and glassmorphic tints with CSS variables.
Complete SF Pro type scale with 10 levels from Display (56px) to Caption (12px). Weights, leading, tracking, and responsive fluid sizing — all documented.
50+ production-ready components including Buttons, Cards, Modals, Inputs, Badges, Tabs, Lists, Toast notifications, Segmented Controls, and the full glass surface system.
Complete CSS custom property token system. Typography, spacing, radius, blur, motion, z-index, shadows, and color tokens — all defined on :root with dark mode variants.
Design System in Action
Every component is live — rendered exactly as it appears in production interfaces.
Liquid Glass
Translucent surfaces that respond to the content beneath them.
What's Documented
How to Use This System
design-system.css file defines all tokens on :root with automatic dark mode support via [data-theme="dark"]..card, .btn, .badge and their modifiers directly in HTML or map them to React components.var(--color-accent) instead of hard-coded values to maintain theme consistency.Browse the Full Documentation
Every page in the system — 21 documentation files covering every aspect of the Apple HIG Liquid Glass design language.
8pt grid system, space tokens, and layout containers for consistent, structured interfaces.
Tab bars, navigation bars, sidebars, breadcrumbs — every navigation pattern from the HIG.
Duration tokens, easing curves, spring physics, and the principles of purposeful animation.
Side-by-side correct and incorrect examples for every major design decision and pattern.
Interactive pre-launch checklist — accessibility, contrast, touch targets, motion, and HIG compliance.
Every CSS custom property defined, with values, usage, and the rationale behind each decision.
Start Building Apple-Like Interfaces
Every principle, component, and token you need — documented, demonstrated, and ready to ship.