Rose Studio
A refined rose accent, gentle neutral surfaces and considered typography make a brand-forward direction.
Eight semantic colors
Click any swatch to copy its exact HEX value.
Measured text contrast
Scores use WCAG 2.x relative luminance. Check all interactive states and surrounding content in your final product.
Preview it in context
Try this full theme on four realistic sample products. Switch between previews and desktop or mobile widths.
Make room
for better
ideas.
We shape distinctive brands and digital experiences with thoughtful design and a human point of view.
Creative by design — Est. 2026
01 03attention ↗
More meaning.
A visual language built for the things people actually use.
Where it works best
Studios, portfolios, case studies and creative showcases. A polished creative palette for portfolios and agencies. A useful design system makes the important actions stand out while supporting long passages, empty states, cards and navigation.
What to customize first
Keep dark text on bright surfaces; use rose mainly for the strongest actions. Start with brand-facing accents, then recheck action labels against their backgrounds and muted text against the canvas.
When to choose another direction
Highly technical, information-dense operational applications. Changing the color of every role usually creates more work than selecting an initially compatible foundation.
Implementation guide for Rose Studio
Map these values to the eight semantic roles rather than copying colors onto random elements. Use background for the page, surface for cards, text for primary copy, muted for secondary labels, border for dividers, primary for calls to action, secondary for supporting elements and accent only when attention is deserved. Test focus, hover, error and success states separately because this starter palette does not dictate those states.
:root {
--theme-background: #FFF6F8;
--theme-surface: #FFFFFF;
--theme-text: #251826;
--theme-muted: #7E6678;
--theme-primary: #D6617E;
--theme-secondary: #51B6C4;
--theme-accent: #F1B700;
--theme-border: #F0D9E1;
--theme-on-primary: #111827;
}