Brand kit with light + dark mode support. All color pairings meet WCAG AA or AAA contrast standards.
Brand
Accent
Neutral
Extended Palette (from existing SITS brand)
Every text/background combination verified for WCAG AA (4.5:1 normal text) or AAA (7:1).
Light Mode
Dark Mode
Headings: Apercu Trial Medium (500) | Body: Apercu Trial Light (300)
Clean, geometric sans-serif with warmth. The light weight keeps body text open and breathable; medium weight gives headings authority without heaviness. Matches the existing SITS site typography.
Paragraph LG — Feel confident, not confused. Our Certified CPST-created tools and guides give you clear, expert-backed answers.
Paragraph Body — Whether you're staring at a wall of car seats for the first time or figuring out when to switch, Safe in the Seat is here to help.
Paragraph SM — Credentials, captions, disclaimers, and metadata text.
Buttons
Card
Your quick reference guide to every major car seat transition — what to know after you buy your seat.
Dark Section
Our Certified CPST-created tools, guides, and 1:1 support give you clear, expert-backed answers so you can stop second-guessing.
Warm Accent Section
Discover the best car seats for your child, car, and budget in under 5 minutes.
Values to enter in the Webflow Variable Collections panel. Light and Dark indicate mode-specific values.
| MAST Variable | Light Mode | Dark Mode |
|---|---|---|
| Primary | ||
| Brand | #3c4d49 | #9db5b0 |
| Dark Brand | #2a3634 | #c8d3cc |
| Secondary | ||
| Blue | #5a7ab0 | #8ea6d1 |
| Yellow | #c47a3c | #fac4a6 |
| Neutral | ||
| White | #ffffff | #f7f5f2 |
| Light Gray | #f7f5f2 | #2a2826 |
| Mid Gray 1 | #c8c3be | #4a4543 |
| Mid Gray 2 | #6d6560 | #9b9490 |
| Dark Gray | #3d3835 | #c8c3be |
| Black | #1a1917 | #1a1917 |
| Typography | ||
| Primary Font | Apercu Trial | |
| Heading Weight | 500 (Medium) | |
| Body Weight | 300 (Light) | |
| h1 size min / max | 2.25 / 3.5 | |
| h1 line-height | 1.15 | |
| h2 size min / max | 1.75 / 2.5 | |
| h3 size min / max | 1.375 / 1.875 | |
| body line-height | 1.7 | |
| Components | ||
| Button radius | 8px | |
| Button weight | 500 | |
| Card radius | 12px | |
| Card shadow | 0 2px 12px rgba(0,0,0,0.06) | |
Warm neutrals: All grays pull toward brown (#6d6560) not blue or green. Matches the maternal, earthy Instagram aesthetic.
No pure black or white: Charcoal (#1a1917) and Linen (#f7f5f2) reduce harsh contrast while still exceeding AAA. Feels softer.
Accent colors shift between modes: Pastels (Sky #8ea6d1, Blush #fac4a6) are the "real" brand colors and shine on dark. Darkened variants (Sky Dark, Sienna) maintain the same hue for light mode AA compliance.
Ocean green is the anchor: #3c4d49 is their most distinctive, ownable color. It passes AAA on white without modification — rare for a brand color.
No visible card borders: Cards use shadow only. Rounded corners with visible borders read as generic/templated.
Single font family: Apercu Trial for everything. Headings use weight 500 (Medium), body uses 300 (Light). Upload all four OTF files (light, light italic, medium, medium italic) in Webflow Project Settings.