Brand style guide with 4 composable themes. Light + dark mode. WCAG AA+ contrast.
Raw color values defined as Webflow Color variables. These are referenced by the theme system.
Each theme overrides 5 semantic variables. Apply via utility class (u-mode-*) on any section wrapper.
| Variable | Base | Accent | Always Dark | Contrast |
|---|---|---|---|---|
| Background | Linen / Charcoal | Cream / Dark Gray | Charcoal | White / Charcoal |
| Text | Charcoal / Linen | Charcoal / Linen | Linen / Stone | Charcoal / White |
| Accent | Ocean / Ocean Lt | Ocean / Ocean Lt | Ocean Light | Ocean / Ocean Lt |
| Border | Mid Gray / Mid Gray | Accent / Accent | Mid Gray | Mid Gray / Mid Gray |
| Accent Dark | Ocean Dp / Seafoam | Ocean Dp / Seafoam | Seafoam | Ocean Dp / Seafoam |
| Format: Light value / Dark value. Always Dark uses static values (no light-dark switch). | ||||
Sample sections from the SITS site rendered in each theme. Switch between themes and light/dark to preview how content looks.
Skip the endless research. In under 5 minutes, get a custom list of expert-picked car seats matched to your child, car, lifestyle, and budget.
Built by Internationally Certified Child Passenger Safety Technicians
Other car seat finders use algorithms. We use experience.
Built by real CPSTs who work hands-on with every seat. Not AI-generated recommendations.
New seats added and reviewed as soon as they launch. Our database stays current so you don't have to.
Every recommendation is earned, not bought. Our opinions are 100% our own.
Real-world fit for real cars, kids, and families. We've felt how the harness tightens and seen how it fits.
"It saved me hours of research and gave me perfect seat matches in minutes. I'm telling every mom I know about this!"
Get a custom list of expert-recommended car seats matched to your child, car, and budget.
Take the Free QuizHeadings: Apercu Trial 500 | Body: Apercu Trial 300 | Single font family throughout.
| Element | Size (min/max) | Line Height | Weight |
|---|---|---|---|
| h1 | 2.25rem / 3.5rem | 1.15 | 500 |
| h2 | 1.75rem / 2.5rem | 1.2 | 500 |
| h3 | 1.375rem / 1.875rem | 1.25 | 500 |
| h4 | 1.0625rem / 1.25rem | 1.3 | 500 |
| Paragraph LG | 1.0625rem / 1.25rem | 1.75 | 300 |
| Paragraph Body | 0.9375rem / 1.0625rem | 1.7 | 300 |
| Eyebrow | 0.75rem | 1.4 | 500 uppercase |
| Button | 0.9rem | 1 | 500 |
| Component | Property | Value |
|---|---|---|
| Button | Border radius | 8px |
| Button | Padding | 0.85rem 1.75rem |
| Card | Border radius | 12px |
| Card | Shadow | 0 2px 12px rgba(0,0,0,0.06) |
| Card | Border | none (shadow only) |
| Section | Padding (vertical) | clamp(2.5rem, 5vw, 4rem) |
Warm neutrals: All grays pull toward brown, not blue. Matches the maternal, earthy brand aesthetic.
Accent swaps between modes: Ocean (#3c4d49) in light, Ocean Light (#9db5b0) in dark. The green hue needs this swap to maintain AA+ contrast in both modes.
Always Dark is static: Uses the same accent, border, and accent-dark values regardless of system dark mode. Only background and text shift slightly between modes.
Accent mode uses accent as border: The border variable references the accent color instead of a neutral, giving highlighted sections a branded edge.
No visible card borders: Cards use shadow only. Rounded corners with visible borders read as generic.