Design System

This design system is the shared operating layer for my-lab. It turns product intent, design decisions, and React implementation into one repeatable workflow.

Build Stages

Current State Analysis
Foundation
Design Token
Core Components
Documentation
Code Library
Project Adoption
Operation Rules

Primary Surfaces

Surface	Role
Astro Docs	Published collaboration and decision records
Storybook	Component review, variants, states, accessibility checks
`packages/ui`	React component and token implementation
`vault/public/design-system`	Source documentation for public publishing

Version Target

The current target is v0.2: usable foundation, token, and shadcn component catalog standards. Production maturity starts at v1.0 after adoption checks and release governance are proven on real screens.

Current Component Catalog

The current catalog includes the requested shadcn component set under Design System/shadcn/Components in Storybook.

Key review targets:

Sidebar: app shell with header, grouped navigation, nested menu, footer, and inset content
Navigation Menu: 2-depth navigation with trigger panels and direct links
Menubar: four-menu desktop command surface with shortcuts, checkbox, radio, and submenu examples
Field: accessible grouped form section with validation and mixed controls

Detailed catalog document: [[shadcn Component Catalog]]

KRDS Adoption

KRDS work is tracked as planning docs in Astro and verified through Storybook.

Storybook review paths:

KRDS/Foundation/Tokens
KRDS/Overview/Adoption Matrix
KRDS/Components/Button
KRDS/Components/Form Controls
KRDS/Components/Surfaces
KRDS/Components/Overlays