Color
The FlexCare color system defines how color works across the marketing site and FlexCare 360. It is built from the FlexCare brand palette — Aubergine, Magenta, and Sand — and extended into a complete web-ready token system for product UI, marketing surfaces, light mode, dark mode, and accessible interaction states.
60 · 30 · 10
FlexCare's color balance follows a simple rule: Sand creates the calm foundation, Aubergine carries the brand, and Magenta adds emphasis. Holding this proportion across screens keeps the experience warm, polished, and unmistakably FlexCare.
Sand & neutrals
Canvas, surfaces, body text, and borders. This is the warm base that keeps the interface calm and readable.
Aubergine
The brand workhorse for navigation, headers, links, primary actions, and structural moments.
Magenta
Used sparingly for the highest-emphasis moments: the primary hero CTA, focus rings, and key highlights. Magenta should feel intentional, not decorative.
Primitives
Primitives are the raw color values that power the system. Brand colors and official tints sit alongside the darker shades, warm neutrals, and functional bases required for web interfaces. Semantic tokens reference these values; UI components should not use primitives directly.
Functional bases
Brand sage
Brand blue
Derived amber
Derived red
Roles & tiers
Semantic roles translate the raw palette into usable interface decisions. Each role includes a consistent tier set — main, dark, contrastText, container, onContainer, and onSurface — tuned separately for light and dark mode.
Primary
Aubergine is the FlexCare brand workhorse. Use it for default actions, app bars, navigation, headers, links, and structural emphasis.
#761850
#5E1340
#E6DBE4
#761850
#761850
#641444
#381E34
#C8A3B9
Accent
Magenta is the emphasis color. Use it for the single highest-emphasis CTA per view, focus rings, and selected moments that need extra attention.
#A52E67
#872654
#F6EAF0
#A52E67
#A52E67
#8C2758
#521734
#DBABC2
Neutral
Neutral supports structure without adding extra brand emphasis. Use it for secondary actions, quiet controls, chips, dividers, and interface chrome.
#6E635D
#524944
#F3EEE9
#524944
#6E635D
#5E544F
#322C29
#D2C8C0
Success
Success uses FlexCare's sage secondary color for confirmations, completed states, active status, and positive system feedback.
#567C6A
#476657
#E3EDE8
#537867
#567C6A
#49695A
#1E2C26
#A6C7B6
Warning
Warning uses a warm amber for cautionary states, approaching limits, incomplete requirements, and actions that need attention before continuing.
#C77E1A
#B37117
#FBEFD9
#9C6312
#C77E1A
#A96B16
#2E2410
#E6B976
Info
Info uses FlexCare's blue secondary color for neutral notices, tips, contextual guidance, and non-blocking system messages.
#4F6B97
#41587C
#E4EAF2
#4F6B97
#4F6B97
#435B80
#18222F
#A6BBD6
Error
Error uses a true red that stays visually distinct from Magenta. Use it only for failures, validation errors, destructive actions, and blocking system feedback.
#C0392B
#9D2F23
#FBE4E1
#C0392B
#C0392B
#A33025
#2E1512
#E8A59B
Background & surfaces
Four background tokens create the page hierarchy. Light mode uses Sand and white to keep the interface warm and open; dark mode uses warm near-black surfaces so the experience stays aligned with FlexCare rather than shifting into a cool gray product palette.
Text & outlines
Text and outline tokens keep the system accessible without losing the warmth of the FlexCare palette. Body copy uses a stronger warm neutral for readability; tertiary text is reserved for supporting or decorative copy; outlineStrong is used wherever a boundary must be perceivable.
Badges are measured against the page canvas. Divider and outline are intentionally quiet and should be used decoratively. Use outlineStrong when a border communicates a required boundary or interactive control. Disabled text is exempt from WCAG contrast requirements; its badge is informational.
State layers & focus
Interaction states use two patterns. Colored surfaces receive a translucent overlay of the role color so hue carries the signal. Neutral surfaces use opaque warm washes so luminance carries the signal without introducing a new hue.
Colored overlay
Use the component's role color at the following opacities.
0.10
0.12
0.16
0.16
Neutral washes
Use opaque neutral washes for default surfaces, cards, rows, chips, and quiet controls.
Light mode
Dark mode
Components in context
These examples show the semantic roles applied to real interface patterns. Everything here references the tokens defined above rather than one-off values — toggle the theme to confirm both modes hold up.
Buttons — every role × every variant
Hover steps filled buttons to their dark tier; tonal, outlined and text variants take the role-colored wash at 10% → 16% on press. Tab through for the 2px offset focus ring in the role color. Disabled is opaque and hueless.
Every button here is live — hover, press, or tab through to see each state in both themes.
Chips
Emphasis ladder, then severity statuses on the container tier.
Statuses stay tonal so they inform without shouting — filled severity is reserved for true alerts.
Inline text & links
Browse 2,400+ open assignments with transparent weekly pay.
Archived assignments are read-only
Forms
Borders use outlineStrong, focus draws the primary ring, errors switch the whole field to the error role. Checkboxes and radios outline in the primary color on hover and fill when selected.
Enter a valid email address
Find this on your state board profile
All fields and controls are live — tab or click through to see focus, error, and selection states.
Categorical palette
The categorical palette provides six muted hues for data visualization and category coding. These colors are drawn from the FlexCare secondary palette and should be used for charts, tags, and visual grouping — not as large copy backgrounds.
#E3EDE8
#E4EAF2
#F3E6DC
#EDE5E8
#E4E2EA
#F0EAE4
Build requirements
A couple of rules govern how this system is translated into the product build.
Components reference semantic role tokens only — primitives stay behind the roles and are never used directly in product UI. Light and dark are both authored here; neither mode is generated from the other at runtime.
Token paths should map one-to-one between design and code (e.g. palette.primary.container, palette.error.onContainer), and every text and boundary pairing targets WCAG 2.2 AA.