Client: Dose Agency: Capi Product Service: Visual Design · Creative Direction Timeline: 2025

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.

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.

Design System: Builds a scalable design foundation that brings consistency, speeds up collaboration, and makes every product update more efficient.

Website UI: Designs intuitive, visually engaging interfaces that help users navigate effortlessly and stay engaged throughout their journey.

Development & Handover: Transforms approved designs into responsive, production-ready websites and delivers a structured handoff for seamless maintenance and future updates.

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.