Design System architecture with Design TokensDawid Maroszek
Dawid constructed advanced components and complex design systems, optimizing workflow efficiency through the use of design tokens alongside developers.
What's included
Design System documentation
- Design Principles & Philosophy – foundational guidelines for consistency
- Design Token Strategy – how tokens are structured and applied
- Naming Conventions & Categorization (e.g., global vs. semantic tokens)
- Usage Guidelines – best practices for applying tokens in UI design
Design Tokens definition
- Color Tokens (e.g., primary, secondary, background, text, states)
- Typography Tokens (font sizes, weights, line heights, letter spacing)
- Spacing & Layout Tokens (margins, paddings, grids)
- Border & Radius Tokens
- Shadow & Elevation Tokens
- Motion Tokens (easing, duration, animations)
UI components & patterns
- Figma Component Library with reusable, consistent UI elements
- Button, Input, Card, Modal, and Other UI Components designed with tokens
- Responsive Behavior & Adaptive Layouts defined in Figma
- Component States & Variants (hover, focus, disabled, etc.)
Theming & scalability
- Light & Dark Mode Variants
- Brand Customization & Multi-brand Guidelines
- Scalability Considerations for Future Growth
Handoff & training
- Figma File Organization & Best Practices
- Design System Walkthrough Presentation
- Training Session for Designers on How to Use the System
Starting at$3,500
Duration4 weeks
Tags
Confluence
Figma
Miro
Notion
Slack
Design Systems Specialist
Design Token
Product Designer
Service provided by
Dawid Maroszek proGliwice, Poland
- 6
- Followers
Design System architecture with Design TokensDawid Maroszek
Starting at$3,500
Duration4 weeks
Tags
Confluence
Figma
Miro
Notion
Slack
Design Systems Specialist
Design Token
Product Designer
Dawid constructed advanced components and complex design systems, optimizing workflow efficiency through the use of design tokens alongside developers.
What's included
Design System documentation
- Design Principles & Philosophy – foundational guidelines for consistency
- Design Token Strategy – how tokens are structured and applied
- Naming Conventions & Categorization (e.g., global vs. semantic tokens)
- Usage Guidelines – best practices for applying tokens in UI design
Design Tokens definition
- Color Tokens (e.g., primary, secondary, background, text, states)
- Typography Tokens (font sizes, weights, line heights, letter spacing)
- Spacing & Layout Tokens (margins, paddings, grids)
- Border & Radius Tokens
- Shadow & Elevation Tokens
- Motion Tokens (easing, duration, animations)
UI components & patterns
- Figma Component Library with reusable, consistent UI elements
- Button, Input, Card, Modal, and Other UI Components designed with tokens
- Responsive Behavior & Adaptive Layouts defined in Figma
- Component States & Variants (hover, focus, disabled, etc.)
Theming & scalability
- Light & Dark Mode Variants
- Brand Customization & Multi-brand Guidelines
- Scalability Considerations for Future Growth
Handoff & training
- Figma File Organization & Best Practices
- Design System Walkthrough Presentation
- Training Session for Designers on How to Use the System
$3,500