Color Palette
Brand Colors
Content Colors
Surface & UI Colors
Footer Colors
Rules
Do
- Use CSS custom properties for all colors
- Use
--primary-theme-colorfor section headings - Use
--secondary-theme-colorfor accent elements and CTAs - Use
--secondary-content-text-colorfor supporting body copy
Don't
- Hardcode hex values when a variable exists
- Use the accent red for large areas of fill
- Mix grays from outside the defined palette
Typography
The type system uses three families: Archivo for headings (weight 900, tight tracking), DM Sans for body text and UI, and DM Mono for labels and code. All loaded from Google Fonts. Font smoothing is set to antialiased globally.
Type Scale
Font Weight Scale
Rules
- Line-height Use 1.05-1.15 for headings, 1.6-1.65 for body text.
- Letter-spacing Tighten large headings (-0.025em to -0.035em). Use slight positive tracking (0.06-0.08em) only for uppercase labels.
- Heading color Section headings use
--primary-theme-color. Feature labels and card titles use--primary-content-text-color. - Text wrap Body paragraphs use
text-wrap: prettyfor better line breaks.
Elevation & Shadows
Three shadow tokens create a consistent depth hierarchy. Cards use --shadow-sm at rest and promote to --shadow-md on hover. Use --shadow-lg sparingly for highly elevated elements.
Rules
- Cards at rest Always use
--shadow-sm. - Cards on hover Promote to
--shadow-mdwith atranslateY(-3px)lift. - Elevated elements Use
--shadow-lgfor modals, dropdowns, or emphasis states. - Images App mockups use
0 8px 32px rgba(0,0,0,0.1). This is intentionally different from the card tokens. - Header Uses a minimal single-layer shadow:
0 1px 3px rgba(0,0,0,0.06).
Border Radius
A consistent radius scale keeps corners predictable. Match the radius to the element's size and role.
Spacing
Section Padding
Major content sections use 96px vertical padding as the standard. Inner content containers may use 64px or 88px when semantically nested.
| Context | Value | Usage |
|---|---|---|
| Major sections | 96px |
Guarantees, testimonials, features (bottom) |
| CTA inner | 88px |
Inner padding of CTA container |
| Pricing section | 64px |
Pricing section vertical padding |
| CTA outer | 56px |
Spacing around the CTA card |
| Hero top | 96px |
Top padding inside the hero banner |
Content Max Widths
| Context | Value |
|---|---|
| Feature sections, hero | 1100px |
| CTA container | 1300px |
| Page content (about, contact, etc.) | 1000px |
| Guarantees, testimonials | 780px - 960px |
| Footer | 720px |
Breakpoints
| Name | Max Width | Usage |
|---|---|---|
| Mobile | 480px |
Small phones, tight layouts |
| Tablet | 768px |
Primary responsive breakpoint. Stacks columns, adjusts font sizes. |
| Desktop | 769px+ |
Full layout with side-by-side features |
Buttons
All interactive buttons use the .fancy-button class. Buttons are flat, solid-color, and use weight 600 with 1rem font size. No gradients, no inset shadows.
Variants
Specifications
| Property | Default | Small |
|---|---|---|
| Height | 48px |
36px |
| Padding | 0 28px |
0 18px |
| Font size | 1rem |
0.875rem |
| Font weight | 600 |
600 |
| Border radius | 6px |
6px |
| Letter spacing | 0.01em |
0.01em |
Interaction States
- Hover Background darkens,
translateY(-1px)lift, subtle shadow appears. - Active Background darkens further, button snaps back to
translateY(0), shadow removed. - Focus Uses
:focus-visiblewith a2pxoutline offset by2px, matching the button's background color.
Color Tokens
| Token | Default (Red) | Blue Variant |
|---|---|---|
--button-background-color |
#c83d3d |
#3d5494 |
--button-hover-color |
#b03535 |
#334a82 |
--button-active-color |
#9c2e2e |
#2a3d6b |
Cards
Cards use a consistent pattern: white background, 12px border radius, --shadow-sm at rest, --shadow-md on hover with a translateY(-3px) lift. All transitions are 0.2s ease.
Example
Card Title
Cards use --shadow-sm at rest and promote to --shadow-md on hover. Try hovering this card.
Another Card
Padding is typically 24px. Card titles use weight 800 in --primary-theme-color.
Card Types in Use
| Card | Padding | Border | Notes |
|---|---|---|---|
| Mini-feature | 24px |
None (shadow only) | Max-width 280px. Icon + title + description. |
| Guarantee | 28px 24px |
1px solid --border-color |
Border plus shadow for emphasis. |
| Pricing plan | 28px 24px |
None (shadow only) | Hover promotes to --shadow-lg. |
Section Headings & Accents
Section Heading Pattern
Major content sections use a consistent heading treatment: weight 900, size 2rem, color --primary-theme-color, letter-spacing -0.025em, followed by a red accent bar.
Accent Bar
The accent bar is rendered via a ::after pseudo-element on section headings. It uses a fixed set of values across the entire site:
| Property | Value |
|---|---|
| Width | 48px |
| Height | 3px |
| Background | var(--secondary-theme-color) |
| Border radius | 2px |
| Margin top | 14px |
| Alignment | margin: 14px auto 0 (centered) |
Header Top Border
The site header uses a 3px solid top border in --secondary-theme-color. This red stripe is a signature brand element and appears on both the desktop header and mobile navigation drawer.
Feature List Borders
Feature list items use a left accent border: 3px solid rgba(49, 65, 104, 0.15) with 18px left padding. This is a muted version of the primary blue, adding structure without competing with the content.
Gradients
The site uses two gradient patterns. Both are directional linear gradients within the blue palette.
| Name | Value | Usage |
|---|---|---|
| Hero / Page Header | linear-gradient(160deg, #f0f3fa 0%, #d5dff0 40%, #b0c2e6 100%) |
Hero banner background, inner page heading containers |
| CTA | linear-gradient(135deg, #2a3758 0%, #314168 40%, #4a6aad 100%) |
Call-to-action container background (dark blue) |
Transitions & Motion
All transitions use 0.2s ease as the standard timing. The only exception is the mobile navigation drawer, which uses a cubic-bezier curve for a more physical feel.
| Element | Properties Transitioned | Timing |
|---|---|---|
| Buttons | background-color, transform, box-shadow |
0.2s ease |
| Cards (hover lift) | box-shadow, transform |
0.2s ease |
| Links | color |
0.2s ease |
| Nav underline | width |
0.2s ease |
| Form inputs | border-color, box-shadow |
0.2s ease |
| Mobile nav drawer | transform |
0.25s cubic-bezier(0.4, 0, 0.2, 1) |
Hover Lift Pattern
Interactive cards and elevated elements share a common hover pattern:
- Transform
translateY(-3px)for cards,translateY(-1px)for buttons. - Shadow Promote from
--shadow-smto--shadow-md. - Timing
0.2s easeon bothbox-shadowandtransform.
Form Elements
| Property | Value |
|---|---|
| Border | 1px solid var(--border-color) |
| Border radius | 8px |
| Padding | 12px 14px |
| Font size | 1rem |
| Font family | var(--base-font-family) |
| Focus border | var(--primary-button-color) |
| Focus ring | 0 0 0 3px rgba(61, 84, 148, 0.12) |
Labels use weight 500 at 0.95rem. Required field indicators use --secondary-theme-color.
Layout Patterns
Feature Rows
Feature sections alternate image/text direction on desktop using :nth-child(even) to create a zigzag reading pattern. On tablet and below, all features stack vertically with the image on top (using column-reverse so the description appears first in source order).
Wide Feature Grid
The "Build protocols worth following" section uses a full-width column layout with a 3-column grid for sub-features. Each grid item gets a --section-alt-bg background with 10px border-radius instead of left-border accents. On mobile, the grid collapses to a single column.
Homepage Flow
The homepage follows a deliberate rhythm of alternating backgrounds:
- Header White with red top border
- Hero Light blue gradient
- Features White
- Guarantees
--section-alt-bg(subtle blue-gray) - Testimonials White
- CTA Dark blue gradient card on white
- Footer Dark