Color palette
SCWBEC's navy-and-pink palette, drawn directly from scwbec.org. Every text/background pairing on this site clears WCAG AA contrast.
primary-700
#005d92
Contrast: 6.4:1
Primary navy — links, headings, primary actions
primary-900
#003e6b
Contrast: 9.9:1
Hero navy, footer, dark sections
primary-50
#eef9fe
Contrast: bg-only
Pale-blue background tint
accent-500
#e3197a
Contrast: 4.5:1*
Pink (fill only — white text on it)
accent-700
#a8125c
Contrast: 7.3:1
Pink for text on white (AA)
tertiary-500
#00b3ca
Contrast: decorative
Teal — small accents, dashboard tiles
success-700
#1f6f43
Contrast: 5.0:1
Verified-member badge, success states
ink-strong
#0f172a
Contrast: 16.4:1
Body headlines
ink
#1f2937
Contrast: 12.3:1
Default body text
ink-muted
#475569
Contrast: 7.5:1
Secondary text, captions
Typography
Inter Variable across the board. One sans family keeps the editorial chrome calm so the content carries the energy.
Buttons
Five variants × three sizes. Primary navy for main actions; pink accent for sponsorship + AI surfaces; ghost/outline for secondary; semantic colors for success/warning/danger.
Sizes
Variants
With icons
Badges & chips
For certifications, event status, sponsorship tier, and inline metadata.
Eyebrow labels
Tiny uppercase labels that sit above a headline — used on every hub page and card variant.
Membership
Default (primary)
Sponsorship
Accent (pink)
Live Pilot
Neutral (on dark)
Cards
Four padding sizes; hoverable variant for clickable cards; href prop renders as a link.
Default card
Padding: md (1.25rem). White surface with subtle border. Used for member detail tiles, content blocks, info banners.
Hoverable card
Adds a slight elevation + border color change on hover. Used for the home page featured-member grid and event list cards.
Tinted card
Light-blue surface for info/notice banners — RFP §3.3 compliance notes, award eligibility rules, board-meeting reminders.
Avatars
Initials-based fallback for members who haven't uploaded a photo. Color is deterministic from the name hash so the same member always gets the same swatch.
sm · 32px
md · 40px
lg · 48px
xl · 64px
Form fields
Text, email, password, tel, search inputs. Label-aligned, required-marker auto-renders, hint text optional.
SMS verification at signup
Icons
Lucide icon set throughout — open-source, consistent stroke width, accessible naming. No emoji, no mixed icon families.
Live component patterns
The patterns that compose every page — header, mega-menu, footer, breadcrumbs, share buttons, accessibility widget, AI assistant, member portal chrome — are all visible on the rest of the live site. This page demonstrates them in isolation; the rest of SCWBEC.org demonstrates them in context.
Home hero + sponsorship CTA
Video hero, glass CTA panel, pink sponsorship band
Member directory + filters
1,652 members, NAICS / certification / county filters
Member portal sign-in
Sign in with any email + password demo
Events calendar + register modal
Paid + free + comp-for-sponsors event flows
Sponsorship tier grid
8 real annual tiers + meeting/event sponsor card
Site Health dashboard
Live audits, member counts, upcoming events
Accessibility
Every component on this page passes axe-core's WCAG 2.2 AA rule set with zero violations. Every color combination clears 4.5:1 contrast (most clear 7:1 AAA). The site-wide accessibility panel — text size, contrast, underline links, reduce motion, hide images — opens from the Accessibility page or the footer's Display preferences link.