Changelog

WORKWAY alignment release. The Canon Design System is now synchronized with WORKWAY's implementation, establishing a shared visual language across all CREATE SOMETHING properties and the WORKWAY vertical.

WORKWAY Alignment

• Added Infrastructure grid backgrounds (.bg-grid, .bg-grid-fade, .bg-grid-vignette)
• Added WORKWAY-aligned button system with glass effects
• Added Interactive state utilities (.interactive, .pressable, .hover-lift)
• Added Scroll reveal animations (.reveal, .reveal-delay-*)
• Added Dim siblings pattern (.dim-siblings-on-hover)
• Added Skeleton loading animations

Glass Design System

• Changed Glass utilities now match WORKWAY's Liquid Glass implementation
• Added Glass blur layer technique for button secondary variant

Notes

WORKWAY (the construction vertical) has advanced the shared Canon system with Tailwind v4, shadcn/ui components, and MagicUI animations. This release begins aligning CREATE SOMETHING properties (.agency first) with these updates. Properties .io, .space, and .ltd will be migrated incrementally.

Reference implementation: WORKWAY's workway-platform/apps/web/src/styles.css serves as the canonical source for new utility classes and patterns.

Initial release of the Canon Design System. Foundations, components, patterns, and comprehensive documentation.

Foundations

• Added Color tokens with WCAG AA compliance
• Added Typography scale using fluid sizing
• Added Spacing system based on golden ratio (φ = 1.618)
• Added Motion tokens with reduced-motion support

Components

• Added Button component with variants (primary, secondary, ghost, danger)
• Added Card component with header/footer slots
• Added TextField with validation states
• Added TextArea with auto-resize option
• Added Checkbox and Radio components
• Added Select dropdown
• Added Toggle switch
• Added Toast notifications
• Added Badge component
• Added Breadcrumb navigation
• Added Tabs component

Patterns

• Added FormLayout for form structure
• Added FormValidation with error summary
• Added MultiStepForm for wizard flows
• Added EmptyState for zero-data scenarios
• Added FirstTimeUser onboarding pattern
• Added LoadingSkeleton and LoadingOverlay
• Added InlineError and ErrorBoundary

Token Export

• Added CSS custom properties (tokens.css)
• Added SCSS variables (tokens.scss)
• Added W3C DTCG format (tokens.dtcg.json)
• Added Figma/Tokens Studio format (tokens.figma.json)

Documentation

• Added Interactive documentation site
• Added Component API reference pages
• Added Accessibility guidelines (WCAG 2.1 AA)
• Added Content writing guidelines
• Added Responsive design patterns
• Added Theming guide