Dose design system

Client: Dose Agency: Capi Product Type: Design System / UI Framework Role: Lead UI/UX Designer Tools: Figma, Auto Layout 5.0, Variables, Tokens

Dose is a digital product brand that needed a cohesive design system to unify its interface across multiple products. Before partnering with Capi Product, their team faced growing inconsistency between web and app experiences, which slowed down iteration and developer handoff.

Build a scalable design system that reflects Dose’s brand identity.

Standardize UI components and visual styles for efficiency.

Improve collaboration between design and development teams.

Visual inconsistency: Colors, typography, and layouts varied across screens.

Limited scalability: Components were recreated manually in each project.

Inefficient developer handoff: No clear rules for states or behavior.

Manual updates: Lack of design tokens or variable-based system.

(a) Foundation Setup

Defined Design Tokens for color, typography, spacing, and grid.

Applied semantic naming conventions for easier maintenance.

Used Figma Variables to control light/dark modes and states dynamically.

(b) Component Architecture

Built over 150+ responsive components using Auto Layout 5.0 and Variants.

Structured components with reusable states: default, hover, focus, disabled, loading.

Optimized for flexibility across desktop and mobile.

(c) Documentation & Guidelines

Created detailed usage documentation in Figma and Notion.

Added visual examples and Do/Don’t patterns for better onboarding.

Ensured accessibility and visual harmony throughout the interface.

(d) Design–Development Handoff

Integrated token-based workflow for developers.

Allowed one-click updates through Figma Variables API, syncing color and spacing tokens automatically.

✅ A unified visual system applied across Dose’s digital platforms. ✅ Reduced design–dev handoff time by 40%. ✅ Improved brand consistency and usability across all interfaces. ✅ Built a scalable foundation for future products and features.

The Dose Design System has become the core of Dose’s design language — empowering both designers and developers to move faster while maintaining brand quality.

“This project allowed us to translate Dose’s bold digital identity into a structured, flexible, and scalable design system — turning design consistency into a real business advantage.”

Figma Library (Dose Design System v1.0)

Documentation (Figma + Notion)

System preview on Contra