Overview
Our color system is designed around our two primary audiences: People (patients seeking weight management support) and Clinics (healthcare providers partnering with Enara). Each audience has a dedicated primary color that shapes their experience.
For People
The consumer palette is vibrant, warm, and approachable, reflecting care, vitality, and a supportive environment. These colors evoke positivity and inspire confidence in personal health transformations.
For Clinics
The clinical palette is professional, modern, and trustworthy, emphasizing reliability and expertise. These colors resonate with healthcare professionals and convey Enara's dedication to clinical partnerships.
Audience-Based Color Selection
Color selection at Enara is context-driven. When designing interfaces or communications, the primary color is determined by the audience being served.
Wisteria
Represents growth and energy. Used for consumer-facing experiences. Wisteria's warm purple tones create a welcoming, motivational atmosphere that encourages individuals on their health journey.
--color-wisteria-100 #f4ecf8 --color-wisteria-200 #e9d9f1 --color-wisteria-300 #dfc7ea --color-wisteria-400 #d4b4e3 --color-wisteria-500 #c9a0dc --color-wisteria-600 #aa6ac7 --color-wisteria-700 #863da7 --color-wisteria-800 #59296f --color-wisteria-900 #2c1437 Brand Qualities
Moonstone
Reflects trust, professionalism, and innovation. Used for clinical platforms. Moonstone's teal tones convey expertise and reliability, essential for building trust with healthcare providers.
--color-moonstone-100 #d6edf3 --color-moonstone-200 #aedce7 --color-moonstone-300 #86cbdb --color-moonstone-400 #4ebacf --color-moonstone-500 #389fba --color-moonstone-600 #2d8699 --color-moonstone-700 #226473 --color-moonstone-800 #16434c --color-moonstone-900 #0b2126 Brand Qualities
System Colors
System colors communicate status and feedback across all contexts. These colors are consistent regardless of audience and should only be used for their intended purpose.
Success
Confirmations, completed actions, positive metrics
--color-green-600 #30a46c Warning
Cautions, pending states, attention needed
--color-yellow-700 #e0bb02 Danger
Errors, destructive actions, critical alerts
--color-red-600 #e5484d Neutrals
Neutral colors (Mauve scale) provide the foundation for text, backgrounds, and borders. They work harmoniously with both Wisteria and Moonstone palettes.
Usage
Use semantic color tokens in your CSS to ensure consistency and support for theming.
Semantic Tokens
/* Use semantic tokens for UI elements */
.button-primary {
background: var(--background-interactive-primary);
color: var(--foreground-interactive-white);
}
/* System feedback */
.alert-success {
background: var(--background-system-success);
color: var(--foreground-system-success);
border: 1px solid var(--border-system-success);
}
/* Text colors */
.heading {
color: var(--foreground-base);
}
.description {
color: var(--foreground-muted);
}Guidelines
Do
- Use semantic tokens over primitive colors
- Choose primary color based on audience context
- Ensure sufficient contrast for accessibility
- Use system colors only for their intended purpose
Don't
- Mix Wisteria and Moonstone as competing primaries
- Use success/warning/danger for decorative purposes
- Override semantic tokens with hardcoded values
- Use colors not defined in the token system