Color Tokens
Intention, Attention, State and Blend
Instead of using values directly from the first layer (scales), we assign them semantic roles based on their purpose in the interface. This approach allows us to maintain consistency and adaptability across different themes and contexts—design language.
The actual colors used in products may vary based on themes, branding, and specific use cases.
Intent
Intent defines the purpose of an element within the interface, guiding users' understanding of its function. By categorizing colors based on intent, we create a clear dictionary that helps designers and developers choose appropriate colors for various UI elements.
- Instead of asking "What color should this button be?",
- we ask "What is the intent of this button?"
Neutral
Neutral intents are used for attention-neutral elements to create a balanced and harmonious interface.
Examples: Chrome, panels, text content, cards to structure content and provide content hierarchy.
- Neutral Intent
Controls
Used for interactive elements that users can engage with.
Examples: Checkboxes, radio, buttons, links to indicate interactivity.
- Controls Intent in React Native
- Confirm Intent (legacy in Web Admin)
- Shoptet Premium Buttons
Statuses
Status intents use specific colors to communicate meaning and remain consistent throughout the product.
Examples: Alerts, toasts, badges, progress bars to indicate system status.
- Informative Intent
- Positive Intent
- Warning Intent
- Critical Intent
Branding
Branding intents are used to apply brand-specific colors to elements within the interface.
Examples: Brand colors used in logos, illustrations to reinforce brand identity.
- Shoptet Blue Brand
- Shoptet Green Brand
- Shoptet Orange Brand
- Shoptet Premium Primary
- Shoptet Premium Secondary
Attention
Attention helps guide users' focus to important elements and actions within the interface. Attention is always relative to the surrounding context.
- Instead of asking "What color should this button be?",
- we ask "What level of attention should this button draw?"
Base Attention
Base attention tokens are used for elements that should blend into the background and not draw any focus.
Low Attention
Low attention tokens are used for elements that should be present but not distract from primary actions.
Medium Attention
Medium attention tokens are used for elements that need to be noticeable but not overpowering.
High Attention
High attention tokens are used for elements that require immediate user focus and action.
Strong Attention
Strong attention tokens are used for elements that must stand out prominently in the interface.
Full Attention
Full attention tokens are used for elements that need to contrast sharply, often in dark mode or high-contrast scenarios.
State
States define how elements respond to user actions, such as hover, active states. These tokens ensure that interactive elements provide clear feedback to users.
- Instead of asking "What color should this button be?",
- we ask "What state is this button in?"
Default State
Default state represents the default state of an element when it is not being interacted with.
Hovered State
Hover state indicates that an element is being pointed at or focused for potential action.
Pressed State
Pressed state indicates that an element is being clicked or tapped for immediate action.
Selected State
Selected state indicates that an element is chosen, dragged or otherwise permanently active.
The decision on how to indicate that the element is not interactive, the disabled state can be represented by applying various design techniques such as:
- lower attention levels (e.g., "base" or "low");
- different intents, e.g. Neutral Intent;
- using blending tokens to reduce prominence.
Blend
Blending tokens define how colors mix with background beneath to create visual effects. These tokens help achieve subtle steps of attention relative to the surrounding interface.
- Instead of asking "What color should this button be?",
- we ask "How should this button blend with its background?"
Solid Blend
Color is displayed at full opacity without blending.
Low Blend
Color is slightly blended with the background to create a mild effect.
Medium Blend
Color is blended moderately with the background to reduce prominence.
High Blend
Color is heavily blended with the background for a subtle effect.
Strong Blend
Color is almost fully blended with the background, minimizing its visibility.
Full Blend
Color is completely blended with the background, effectively making it invisible.
Up Next
Combining these aspects allows us to create a flexible and adaptive color system that enhances user experience while maintaining visual consistency across our products.
Background Color Tokens
Background color tokens define unified structure of backgrounds.
Foreground Color Tokens
Content color tokens define colors for text, icons, and other foreground elements.
Border Color Tokens
Border color tokens define the colors used for borders and dividers.
The raw color values are defined in the Scales layer specific to the application design system and are not directly exposed here on purpose. Instead, we focus on the semantic roles first that these colors play in the interface. Later we will adapt these roles to different products and themes.
In case you need to define intent colors not covered by the predefined set, refer to the Defining Intents section.