Hue Scale
Improving Deliverability and Accessibility through Design Engineering
DURATION
January 2025 - March 2026
ROLE
Product Designer / Solo Project
Tools
Figma, Claude
OVERVIEW
Hue Scale is a conceptual platform that helps designers analyse and benchmark colour systems used in digital products. Instead of simply showcasing UI screenshots, the platform structures colour usage into comparable roles and connects palettes to real interface contexts. By analysing multiple well-known apps, Hue Scale allows designers to quickly understand how different products structure colour hierarchy, interaction accents, and visual balance.
PROBLEMS
Lack of structured colour references for designers
Designers often analyse other products to understand how colour systems work in practice. However, most inspiration sources (e.g. screenshots, UI galleries) focus on visual examples rather than colour strategy, making it difficult to understand how colours are structured and applied across UI roles.
→ Opportunity: Create a structured way to explore colour systems beyond screenshots.
Difficult to understand colour usage in real UI contexts
Even when palettes are documented, it’s often unclear how colours actually appear in real screens and which UI elements they affect.
→ Opportunity: Connect colour roles directly to representative UI screens.
Key Design Decisions
Standardising colour roles across products
Different design systems describe colours using inconsistent naming conventions, which makes cross-product comparison difficult. To analyse colour usage consistently, I simplified colour systems into four UI hierarchy roles.
• Canvas — the base background of the interface
• Surface — containers such as cards, panels, and sheets
• Content — text, icons, and informational elements
• Accent / Action — interactive elements and highlights
This model reflects how colour hierarchy is experienced in real screens, rather than how colour definitions are organised behind the scenes.
Exploration Filters
To support benchmarking across different types of products, Hue Scale includes a filtering system that allows designers to explore apps by category, UI mode, colour strategy, and dominant colour.
This makes it easier to identify patterns within similar product types and compare how colour roles are used across different interfaces.
Quantifying colour presence with “Volume” levels
Four Volume levels are used: High, Medium, Low, and Very Low. They describe how strongly each colour role appears across an interface, enabling quick and readable comparisons across products.
Role Map
A table view that shows where each colour role is used across the interface at a glance. Primary and secondary values are listed separately to reveal subtle differences, even when colours appear visually similar.
Establishing a 4 representative screens rule
Each product page presents four representative screens selected to illustrate how colour roles are used in real interface contexts. The screens are chosen to cover the broadest range of situations where colour appears in the UI, showing how Canvas, Surface, Content, and Accent function across different interaction states.
Key Learnings
Dark-first products tend to minimise accent usage
Apps such as Spotify and Discord rely heavily on neutral surfaces, using accent colours more selectively for interaction states.
Finance products often prioritise contrast for clarity
Products like Revolut and Wise use strong contrast and functional accent colours to support financial data and key actions.
Lifestyle products use colour to shape tone and personality
Apps such as Headspace and Airbnb use warmer or more thematic colours to create a distinct mood and brand feel.
@ Jio Park, 2026