Citrus Lab
Soft neutrals mixed with green and amber energy support approachable consumer dashboards and utility products.
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
Utility apps, productivity tools and consumer SaaS. A bright productivity palette with a grounded UI feel. A useful design system makes the important actions stand out while supporting long passages, empty states, cards and navigation.
What to customize first
Mute the orange secondary for a more formal mood without losing the inviting foundation. Start with brand-facing accents, then recheck action labels against their backgrounds and muted text against the canvas.
When to choose another direction
Dense financial data and strongly formal enterprise interfaces. Changing the color of every role usually creates more work than selecting an initially compatible foundation.
Implementation guide for Citrus Lab
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: #FFF9EE;
--theme-surface: #FFFFFF;
--theme-text: #1B2318;
--theme-muted: #6B7460;
--theme-primary: #84C441;
--theme-secondary: #FF9640;
--theme-accent: #247BA0;
--theme-border: #DBE7CB;
--theme-on-primary: #111827;
}