Vitaforge · Organic · Light/Dark
PublicBrand Semantic Usage Guide
Vitaforge
44-role semantic color system · WCAG AAA · v2.0.0
Score
Level
WCAG AAACompliance Summary
Score
100%
Excellent
WCAG Level
AAA
Compliance
Passed
12
of 12 rules
Errors
0
All clear
Role Overview Map
All 44 semantic color roles organized by functional category. Click any role to copy its hex value.
Brand / Interactive
Primary brand colors for interactive elements, CTAs, and brand identity
Surface / Layers
Background and elevation system for layered UI components
Text Hierarchy
Typography colors ensuring readability across all surfaces
Status / Semantic
Feedback colors for success, warning, error, and info states
Border / State
Border colors for component boundaries and interactive states
Surface Depth Visualization
Layered surface system showing elevation hierarchy from sunken to overlay.
Sunken
Inset areas, inputs
Base
Page background
Raised
Cards, panels
Overlay
Modals, dialogs
Sheet
Bottom sheets
| Surface | Swatch | Hex | On-Color | Contrast | Use Case |
|---|---|---|---|---|---|
| Sunken | #E5E5E6 | #000000 | 16.68:1 (AAA) | Inset areas, inputs | |
| Base | #FAFAFA | #000000 | 20.12:1 (AAA) | Page background | |
| Raised | #F5F5F5 | #000000 | 19.26:1 (AAA) | Cards, panels | |
| Overlay | #EDEDED | #000000 | 17.94:1 (AAA) | Modals, dialogs | |
| Sheet | #F0F0F0 | #000000 | 18.43:1 (AAA) | Bottom sheets |
Inverse
Dark/light mode flip
#1B1B1D
Backdrop Light
Light modal scrim
#FFFFFF
Backdrop Dark
Dark modal scrim
#000000
Scrim
Overlay dimming
#000000
Text Hierarchy
Typography color system ensuring readability across all surface levels.
Primary Heading Text
This is primary body text used for the main content. It should have excellent readability with a contrast ratio meeting WCAG AA or AAA standards.
Secondary text is used for supporting information, descriptions, and metadata. It has slightly reduced emphasis while remaining readable.
Disabled text indicates unavailable or inactive content.
Inverse text is used on dark backgrounds or inverse surface layers.
The quick brown fox jumps over the lazy dog
Primary
Headings and body text
This text provides additional context and supplementary information.
Secondary
Descriptions and supporting text
This action is currently unavailable.
Disabled
Inactive and placeholder text
⚠ Below WCAG AA threshold (4.5:1)
Inverted text for contrast surfaces
Inverse
Text on dark/inverse backgrounds
Interactive Roles
Brand colors for buttons, links, and interactive elements with their container variants.
Primary
Main brand interactive color for primary actions and brand identity
Button Preview
Container Variant
Primary container for subtle emphasis
✓ Use for
- • Primary CTA buttons
- • Active states
- • Brand highlights
- • Key links
✗ Avoid
- • Body text
- • Large backgrounds
- • Decorative elements
Contrast
Primary / OnPrimary: 6.63:1(Pass)
Container / OnContainer: 14.92:1
CSS Tokens
--color-brand-primary: #DA7272;
--color-on-brand-primary: #000000;
--color-brand-primarycontainer: #E5D6D6;
--color-on-brand-primarycontainer: #000000;
Secondary
Supporting brand color for secondary interactive elements
Button Preview
Container Variant
Secondary container for subtle emphasis
✓ Use for
- • Secondary buttons
- • Supporting actions
- • Alternative CTAs
✗ Avoid
- • Primary actions
- • Critical alerts
Contrast
Secondary / OnSecondary: 7.48:1(Pass)
Container / OnContainer: 15.23:1
CSS Tokens
--color-brand-secondary: #729CDA;
--color-on-brand-secondary: #000000;
--color-brand-secondarycontainer: #D6DCE5;
--color-on-brand-secondarycontainer: #000000;
Accent
Highlight color for emphasis, badges, and special elements
Button Preview
✓ Use for
- • Badges
- • Tags
- • Notifications
- • Feature highlights
✗ Avoid
- • Large surfaces
- • Body text
Contrast
Accent / OnAccent: 8.07:1(Pass)
CSS Tokens
--color-brand-accent: #30B675;
--color-on-brand-accent: #000000;
Status / Semantic Roles
Feedback colors for alerts, notifications, and status indicators.
Indicates successful operations and positive outcomes
Your changes have been saved successfully.
Main
#1DAF1D
Subtle
#E8EEE8
Container
#CBE1CB
On-Color
#141F14
Draws attention to important information requiring review
This action cannot be undone. Please review carefully.
Main
#E59306
Subtle
#EEEBE8
Container
#E2D9CA
On-Color
#1B160E
Indicates errors, destructive actions, or critical alerts
An error occurred. Please try again.
Main
#D52515
Subtle
#EEE8E8
Container
#E2CCCA
On-Color
#1F1514
Provides neutral informational feedback
Your session will expire in 5 minutes.
Main
#1C7FE3
Subtle
#E8EBEE
Container
#CAD6E2
On-Color
#14191F
Border & State Roles
Border colors for component boundaries, focus states, and validation indicators.
Default Input
Focused State
Error State
This field is required
Success State
✓ Looks good!
Card Border
Card content
With default border
Strong Divider
Item above
Item below
| Role | Preview | Hex | Contrast | Use Case |
|---|---|---|---|---|
| Default | #909094 | 3.05:1 | Standard component borders | |
| Strong | #5F5F62 | 6.36:1 | Emphasized dividers and separators | |
| Focus | #DA7272 | 6.63:1 | Keyboard focus indicator | |
| Error | #D52515 | 5.12:1 | Invalid state indicator | |
| Success | #1DAF1D | 7.20:1 | Valid state indicator | |
| Inverse | #1B1B1D | 17.20:1 | Borders on dark surfaces |
Validation Report
12 WCAG-based rules (R01–R12) covering contrast ratios for all semantic roles
Score
100.0%
Excellent
WCAG Level
AAA
Achieved
Total Rules
12
Evaluated
Passed
12
Rules
Rule Reference
Passed (12)
Brand contrast OK
Text primary AAA OK
Text secondary AA OK
Border default OK
Border focus OK
Surface elevation order OK
Semantic hue distance OK
Warning uses dark text OK
Container saturation OK
Disabled distinction OK
N/A in light mode
Primary/surface distinction OK
Compliance Statement
This color system has been validated against WCAG 2.1 Level AAA guidelines. All primary contrast requirements have been met or exceeded.
Design Token Export
Ready-to-use tokens in multiple formats for developers and design tools
CSS Variables
Standard CSS custom properties. Works in any modern browser. Import directly into your stylesheet.
Tailwind Config
Ready-to-use Tailwind CSS configuration. Extend your existing config with semantic color tokens.
W3C DTCG JSON
Design Token Community Group format. Compatible with Style Dictionary, Figma Tokens, and token pipelines.
Developer Reference
Semantic role to component mapping for consistent implementation
Button Primary
Main call-to-action button
Button Secondary
Secondary action button
Card
Content container with elevation
Modal / Dialog
Overlay dialog window
Alert Success
Success feedback message
Alert Error
Error feedback message
Input Field
Text input form field
Badge / Tag
Label or status indicator
Usage Guidelines
Do:
- ✓ Use semantic tokens instead of hex values
- ✓ Pair interactive colors with their "on" variants
- ✓ Use container variants for subtle backgrounds
- ✓ Apply surface tokens for elevation hierarchy
Don't:
- ✗ Hardcode color values in components
- ✗ Mix semantic and raw color tokens
- ✗ Use brand colors for large backgrounds
- ✗ Ignore contrast requirements for text