# Cardinalpath Design System

> Corporate blue and high-contrast navy anchored by heavy Proxima Nova typography and sharp, functional geometry.

**Source:** https://cardinalpath.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Cardinalpath utilizes a high-contrast professional palette dominated by a primary corporate blue (#0274be) and a deep navy accent (#12295d). The system is built on a foundation of pure white (#ffffff) surfaces and light gray (#f1f1f1) section bands. Typography is exclusively Proxima Nova, leaning heavily on bold (700) weights for headlines and statistical callouts to establish data-driven authority. Components favor sharp or slightly softened corners (8px-12px) with very subtle, low-opacity shadows (5%) to maintain a flat, modern enterprise aesthetic.

## Signature DNA
1. **The Data Hero** (Bold Proxima Nova at 32px-36px paired with high-contrast navy text #05051e to emphasize metrics and growth outcomes).
2. **The Blue Accent Path** (Strategic use of #0274be for links, icons, and primary UI signals against a stark white canvas).
3. **Sharp Enterprise Geometry** (Predominantly 0px or 4px radii for inputs and primary containers, reserving 50px pills only for secondary "Manage Settings" interactions).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background and card surfaces | 36 | 1 | `css_variable:--ast-global-color-5` |
| `{color.ink.primary}` | `#3a3a3a` | Default body text and labels | 16 | 1 | `css_variable:--ast-global-color-1` |
| `{color.ink.muted}` | `#808080` | De-emphasized text and secondary descriptions | 117 | 0.8 | `computed_style` |
| `{color.surface.soft}` | `#f1f1f1` | Alternating section backgrounds | 1 | 1 | `css_variable:--ast-global-color-4` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.brand.primary}` | `#0274be` | Primary action color, links, and icon accents | 13 | 1 | `css_variable:--ast-global-color-0` |
| `{color.brand.navy}` | `#12295d` | Primary button backgrounds and dark hero text | 19 | 0.8 | `computed_style` |
| `{color.ink.deep}` | `#05051e` | High-contrast headlines | 36 | 0.8 | `computed_style` |
| `{color.brand.red}` | `#e61f14` | Secondary brand accent (decorative_only) | 8 | 0.6 | `computed_style` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.link.active}` | `#126afa` | Active navigation and border states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Proxima Nova | 400, 500, 600, 700 | All headlines, body, and UI | Montserrat | Licensed |
| Montserrat | 700 | Fallback/Secondary body | Montserrat | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.h1}` | 36px | 46.8px | normal | 700 | Main section heads | `h3` |
| `{type.stat}` | 32px | 59.4px | normal | 700 | Large metric values | `div.stat-value` |
| `{type.h2}` | 32px | 41.6px | normal | 700 | Secondary headings | `h2.section-heading` |
| `{type.h3}` | 22px | 28.6px | normal | 600 | Card titles | `h3.elementor-post__title` |
| `{type.body.lg}` | 20px | 32px | normal | 400 | Intro paragraphs | `p` |
| `{type.body}` | 16px | 29.7px | normal | 400 | Standard running text | `p:nth-of-type(1)` |
| `{type.label}` | 15px | 15px | normal | 600 | Button labels | `a.elementor-button` |
| `{type.caption}` | 11px | 20.4px | normal | 400 | Small annotations | `p` |

### Principles
1. **Weight as Hierarchy:** Use weight 700 for all data points and primary headings; weight 400 is reserved for descriptive prose.
2. **Tight Display Leading:** Headlines at 32px-36px use a tight 1.15-1.3x line height to maintain visual density.
3. **Navy for Authority:** Headlines should use `#05051e` or `#12295d` rather than pure black to maintain brand alignment.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 10px | 28 |
| `{space.sm}` | 16px | 19 |
| `{space.md}` | 20px | 29 |
| `{space.lg}` | 24px | 29 |
| `{space.xl}` | 50px | 10 |
| `{space.section}` | 100px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default containers and sharp buttons | `occurrences: 216` |
| `{radius.sm}` | 4px | Form inputs | `role: input` |
| `{radius.md}` | 10px | Standard content cards | `Card component` |
| `{radius.lg}` | 20px | Featured border containers | `Card (observed_once)` |
| `{radius.pill}` | 50px | Cookie management / secondary buttons | `role: panel` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Default state | `Surface` |
| `{shadow.card}` | `rgba(0, 0, 0, 0.05) 0px 1px 4px 0px` | Standard cards | `Card` |
| `{shadow.elevated}` | `rgba(0, 0, 0, 0.05) 0px 4px 10px 0px` | Hover/Featured cards | `Card` |
| `{shadow.overlay}` | `rgba(0, 0, 0, 0.15) 0px 0px 10px 0px` | Floating UI elements | `Card` |

## Components

### Tier 1: Foundational

#### Primary Action Button
**Role:** Main CTA for "Learn More" or "Request Consultation"
**Pages observed:** cardinalpath.com, cardinalpath.com/about
**Spec:** Background `{color.brand.navy}` (#12295d) / Text `{color.canvas}` (#ffffff) / Radius 0px / Typography `{type.label}`
**States observed:** Default | Hover: Not captured

#### Standard Card
**Role:** Benefit and service descriptions
**Pages observed:** cardinalpath.com
**Spec:** Background `{color.canvas}` (#ffffff) / Text `{color.ink.muted}` (#808080) / Radius 10px / Padding 20px / Shadow `{shadow.card}`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Metric Block
**Role:** Displaying "Key Project Outcomes"
**Pages observed:** cardinalpath.com
**Spec:** Background `{color.canvas}` (#ffffff) / Text `{color.brand.primary}` (#0274be) / Radius 10px / Typography `{type.stat}`
**States observed:** Default | Hover: Not captured

#### Featured Border Container
**Role:** Highlighting client quotes or key insights
**Pages observed:** cardinalpath.com
**Spec:** Background transparent / Border 2px `{color.link.active}` (#126afa) / Radius 20px / Padding 0px
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Cookie Consent Pill
**Role:** Legal compliance footer
**Pages observed:** cardinalpath.com, cardinalpath.com/about
**Spec:** Background `{color.brand.navy}` (#12295d) / Text `{color.canvas}` (#ffffff) / Radius 50px / Padding 10px 20px
**States observed:** Default | Hover: Not captured

#### Social Icon Circle
**Role:** Footer social links
**Pages observed:** cardinalpath.com
**Spec:** Background transparent / Border 1px `{color.brand.primary}` (#0274be) / Radius 50% / Text `{color.brand.primary}` (#0274be)
**States observed:** Default | Hover: Not captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding | 100px (vertical) |
| Grid Gap | 24px |

## Do's
- Use **Proxima Nova Bold (700)** for all numerical data and statistics.
- Apply `#0274be` for all interactive text links and iconography.
- Maintain a **100px vertical gap** between major homepage sections.
- Use `#f1f1f1` for full-width background bands to break up long white pages.
- Ensure all primary buttons have a **sharp 0px corner radius**.

## Don'ts
- **Wrong:** Using `#0274be` for large blocks of body text. **Right:** Use `#3a3a3a`. **Reason:** Accessibility and readability on white backgrounds.
- **Wrong:** Applying rounded corners to primary CTA buttons. **Right:** Keep them sharp (0px). **Reason:** Brand consistency with the "Path" geometric motif.
- **Wrong:** Mixing serif fonts into the UI. **Right:** Stick to Proxima Nova. **Reason:** Cardinalpath is a strictly sans-serif brand.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --cp-blue-primary: #0274be;
  --cp-navy-deep: #12295d;
  --cp-ink-dark: #05051e;
  --cp-white: #ffffff;
  --cp-gray-soft: #f1f1f1;
  --cp-font-main: "Proxima Nova", sans-serif;
  --cp-radius-card: 10px;
  --cp-shadow-subtle: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
}
```

## Known gaps
- Hover and Active states for primary buttons were not captured in the initial crawl.
- Mobile-specific navigation menu transitions were not fully documented.
- Error and Success semantic states (forms) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://cardinalpath.com | 1440x900 | 2026-06-06 |
| About Page | https://cardinalpath.com/about | 1440x900 | 2026-06-06 |
| Mobile Home | https://cardinalpath.com | 390x844 | 2026-06-06 |