Colors
The Fidus color system is built on trust, transparency, and brand identity. Our color palette reflects our privacy-first approach while maintaining accessibility and visual appeal.
Brand Colors
Our brand colors establish Fidus's identity and should be used consistently across all applications.
Primary (Gold)
--color-primary
Main brand color. Used for primary actions and key UI elements.
Black
--color-black
Secondary brand color. Used for text and contrast.
Trust Colors
Trust colors communicate privacy and data handling to users. They indicate where and how data is processed.
Local Processing
--color-trust-local
Green indicates data processed entirely on user's device.
Cloud Processing
--color-trust-cloud
Orange indicates data sent to Fidus cloud services.
Encrypted
--color-trust-encrypted
Blue indicates end-to-end encrypted communication.
Third Party
--color-trust-third-party
Red indicates data shared with third-party services.
Semantic Colors
Semantic colors convey meaning and state across the interface.
Success
--color-success
Indicates successful operations or positive states.
Warning
--color-warning
Indicates caution or potential issues.
Error
--color-error
Indicates errors or destructive actions.
Info
--color-info
Indicates informational messages.
Urgency Colors
Urgency colors help users prioritize tasks and notifications.
Urgent
--color-urgent
Immediate attention required.
Important
--color-important
High priority, attention needed soon.
Normal
--color-normal
Standard priority.
Low
--color-low
Low priority, can be addressed later.
Neutral Colors
Neutral colors form the foundation of the interface, providing backgrounds, borders, and text colors.
Background
--color-background
Main background color for pages.
Foreground
--color-foreground
Primary text color.
Muted
--color-muted
Secondary backgrounds and borders.
Muted Foreground
--color-muted-foreground
Secondary text color.
Border
--color-border
Default border color.
Usage Guidelines
Accessibility
- All color combinations meet WCAG 2.1 AA contrast requirements (4.5:1 for text)
- Never use color alone to convey information (add icons or text labels)
- Test color choices with common color vision deficiencies
Trust Colors
- Always show trust indicators when displaying user data
- Use green (local) as the default for privacy-first features
- Clearly explain what each trust color means on first use
- Consider adding a legend or tooltip for trust indicators
Dark Mode
- All colors have dark mode variants defined in globals.css
- Dark mode is automatically applied when user prefers dark color scheme
- Test all UI components in both light and dark modes