Design System Reference
NMO Module Design System
Visual design reference for the New Member Orientation module. Components are meant for use across 6 modules covering welcome, care navigation, benefits, membership management, healthy rewards, and course completion.
Color Palette
Dark Blue
#252d64
Headers, primary emphasis
Blue
#284faf
Links, focus states, CTAs
Green
#40ad48
Success states, accents
Orange
#ef670a
Primary buttons, actions
Page Background
#f5f8fc
Section backgrounds
Text Primary
#1f2937
Body text
Text Muted
#6b7280
Secondary text
Border Strong
#bfc6d2
Input fields
Error
#d93025
Error messages
Components
Design Principles
Border Radius Scale
- Small: 10px — Buttons, inputs
- Medium: 12-14px — Section boxes
- Large: 16-18px — Main containers
- Pill: 999px — Toggle buttons
Spacing System
- Container max-width: 900px
- Page padding: 22px desktop, 14px mobile
- Section gaps: 18px between sections
- Component padding: 18-24px
Elevation & Shadows
- Cards: 0 14px 38px rgba(31,41,55,0.11)
- Buttons: 0 5px 14px with hover lift
- Info boxes: 0 2px 8px subtle
- Hover: translateY(-1px) transform
Typography
- Font: Segoe UI, system-ui stack
- H1: 22-30px Bold
- Body: 16px Regular
- Labels: 15.5px Bold