uxd-systems

UXD Systems

Learn how the world’s leading design systems work.

uxd.systems is an independent interactive learning platform for exploring professional design systems. It combines structured system profiles, component and pattern studies, design-token lessons, accessibility guidance, comparisons, and hands-on labs.

Created by De’Andre Perry.

Included

• Utility-led homepage with global command search
• Filterable library of 16 source-backed public design systems
• Reusable, statically generated system profiles using a consistent 14-dimension model
• Flagship Apple HIG learning page with an interactive platform explorer and independent-resource notice
• Eight component references, including a live button variant and state explorer
• Source-backed Apple, Material, Carbon, and Fluent comparison model
• Design-token curriculum and interactive Token Lab with live contrast evaluation
• Learning paths, patterns, glossary, bookmarks, About, loading, and 404 states
• Semantic light and dark themes, responsive layouts, reduced-motion support, and local bookmarks
• Explicit labels separating official guidance, explanation, analysis, and comparison

Architecture

app/                  App Router routes, metadata, global tokens, responsive styles
components/           Reusable server and client UI components
data/                 Structured systems and search content
lib/site.ts           Product identity, production URL, and browser integration constants
lib/analytics.ts      Vendor-neutral product event hook
types/content.ts      Shared content contracts

Server Components render content-heavy pages. Client Components are limited to stateful interfaces: navigation and search, filters, bookmarks, comparison selectors, component states, and interactive labs.

Legacy browser-storage values are migrated to the new product keys so existing themes and bookmarks continue to work after the rebrand.

Run

npm install
npm run dev

Verify

npm run check

Official documentation remains the authority. System pages include direct primary-source links, a review scope, and a review date. Educational approximations are labeled and should not be used as implementation specifications.