Design System
The living reference for the AmeriBenefit Plan web design system. Rendered from the same tokens and components as the site itself. Source: Brand Guidelines v.01 2026.
Color palette
Blue
#0D076F · Pantone 2748 C--color-blue
Backgrounds, visuals, buttons, text, logo
Red
#EC1D25 · Pantone 1788 C--color-red
Backgrounds, visuals, buttons, text, logo
Dark Grey
#231F20 · Pantone Neutral Black C--color-dark
Backgrounds, text, logo
Light Blue
#F8FBFF · Pantone —--color-light
Backgrounds
White
#FFFFFF · Pantone —--color-white
Backgrounds, text, logo
Typography
Raleway (400/500/600) for headlines, titles, captions. Roboto (400/500) for subtitles and body. Line-height and letter-spacing follow the brand table on p.13 of the guidelines.
Buttons
Cards
Card title
Standard card with icon, used for benefits, steps and features.
Red icon variant
Use red icons sparingly — red highlights key brand moments.
“Quote card for member testimonials.”
Elevation & gradients
Shadows are blue-tinted (never pure black) to stay on brand. Gradients are gentle blends of the two brand primaries — blue leads, red accents.
--shadow-sm
--shadow-card
--shadow-card-hover
Motion
Content reveals on scroll with a fade and 28px rise. The hero card floats gently. All motion is disabled for users with “reduce motion” enabled.
Logo usage
Minimum digital size 16px height. Keep the safe zone (unit “X” from the symbol) clear of other elements. Never recolor outside approved pairings.
On white / light backgrounds
On blue / dark backgrounds