Senior Product Design · Design System · UI Components

Roast Duck
& Cranberries

Design system · gamification UI · components + tokens

A warm-toned design system study for learning platforms, engagement products, and progress-driven interfaces. The work demonstrates component thinking, visual hierarchy, responsive patterns, and reusable UI decisions.

Components48+

Variants120+

FormatFigma · HTML · CSS

BreakpointsMobile · Tablet · Desktop

AccessibilityWCAG 2.1 AA

CategoryGamification

Product Screens & Design Rationale

Component system · visual craft

▶ Launch PrototypeOpens interactive prototype in a new tab

Group 01

Product System Reference

This reference sheet shows the design language, component families, visual tokens, and UI patterns that make the system reusable across learning and engagement products.

Product Screen 01

Component Reference Sheet

Full design system reference showing component families, palette, UI states, responsive intent, and reusable visual patterns for progress-driven products.

Design rationale: The reference sheet demonstrates system-level craft: components, colors, layout rules, responsive patterns, and reusable UI structure in one product design language.

View Full Image ↗

Design SystemComponentsWCAGResponsive

Product Context & Leadership Signal

Design system · components · visual craft

Context

Designing reusable UI for engagement products

The system explores how color, components, hierarchy, and responsive UI patterns can support gamified learning or progress-driven applications without sacrificing clarity or accessibility.

Product Challenge

Create a system, not just screens

The challenge was to show product craft at the component level: reusable pieces, variants, responsive behavior, accessibility awareness, and a cohesive visual language.

Product Impact

Created a reusable visual system

Defined components, variants, palette, responsive behavior, and interaction patterns that could support multiple product surfaces.

User Impact

Supported progress-driven experiences

The system gives product teams UI tools for goals, rewards, lessons, profiles, navigation, and engagement feedback.

System Impact

Made craft scalable

Instead of one-off screens, the work demonstrates repeatable visual rules and component structure that can support future product buildout.

Leadership signal: This work demonstrates senior product craft through design-system thinking: tokens, components, responsive patterns, visual hierarchy, and accessibility. For Fluxon, it helps prove that the portfolio is not only strategy-heavy but also capable of polished, scalable interface design.

Design Strategy

Scale the visual language

The system turns a visual direction into reusable parts that can support multiple screens and user states.

Interaction Logic

Support progress and engagement

The components are built around learning, gamification, and feedback loops.

Craft Signal

Show polish at the system level

Color, spacing, component rhythm, and accessibility claims are presented as product design decisions, not decoration.

Roast Duck& Cranberries