pudgeFoundation
The foundation defines the design system's rules — the visual language that all 93 components share. Start here to understand how pudge-ui works.
Design Tokens
Color palette, spacing scale, typography, border radius, motion easing, and shadow values.
Materials
Six canonical material recipes: brushed metal, chrome, rubber, glossy polycarbonate, glass, phosphor screen.
Depth Model
Three-plane shadow system, raised/recessed elements, press interactions, and glow effects.
Philosophy
Core design principles: physical analog commitment, warm neutrals, material honesty.
Naming Conventions
CSS class naming patterns, state classes, material variants, and size modifiers.
Layout
Grid system, spacing rules, and page structure patterns.
Theme
Dark and light mode token sets and switching mechanism.
Canvas
Canvas rendering patterns for animated and procedural components.
Accessibility
WCAG compliance, ARIA patterns, keyboard navigation, and screen reader support.
