Creating a Design System using Design Tokens With Amplify
summary
A practical walkthrough showing how Amplify UI becomes a reusable design system by encoding colors spacing and component states as design tokens as CSS custom properties that compile from a typed theme object, using Amplify UI components (Card Flex Grid Button) wired to a ThemeProvider with typed theme object and overridden via style props and responsive breakpoints. The demo builds a small app with cards and a sign in flow, uses TypeScript, follows the System UI Theme spec, and works end to end.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 1:03Design systems overview
- 2:26What are design tokens
- 4:56Introducing Amplify UI
- 7:48Component frameworks comparison
- 9:59Should you build your own
- 11:25Design token structure
- 13:33Theming with tokens
- 16:17Style props for overrides
- 17:44Responsive layouts
- 19:29Next steps and best practices
- 21:16Summary and resources
related talks
36mToken Driven UI Development
28mScalable CSS Architecture with Design Tokens
28mTheming with Design Tokens
51mDesign system and tokens
01h 00mDesign Token Architecture
18mOne design system to rule them all 1
56mChasing the holy grail Reusable Web Components and Design Tokens
21mDesign Systems 101: The Developer Approach to Better Frontends