# Hindsightsoftware Design System

> Corporate precision meets agile clarity through deep navy foundations and high-contrast cyan accents.

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

## TL;DR
Hindsightsoftware utilizes a high-contrast "monochrome-plus" system where a deep navy (`#0a203a`) serves as the structural anchor for text and primary surfaces. This foundation is punctuated by a vibrant cyan accent (`#14bbef`) used for interactive highlights and secondary call-to-actions. The typography is exclusively **Proxima Nova**, ranging from light (300) for body and sub-headers to bold (700) for emphasis and navigation. Layouts are characterized by sharp geometry (`0px` radius) for containers, contrasted with extreme pill-shaped rounding (`100px`) for primary buttons.

## Signature DNA
1. **The Navy Anchor** (`#0a203a`): Used as the primary text color and the background for high-impact CTA sections, creating a professional, stable atmosphere.
2. **Cyan Voltage** (`#14bbef`): A high-saturation accent that breaks the navy/white rhythm, reserved for "Get a Demo" buttons and progress indicators.
3. **Proxima Nova Light (300)**: Large-scale sub-headers and body copy frequently utilize the 300 weight, providing a modern, airy feel that balances the heavy navy blocks.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.navy}` | `#0a203a` | Primary text, footer bg, primary button bg | 69 | 0.8 | Computed style |
| `{color.white}` | `#ffffff` | Page background, button text, card surface | 81 | 1.0 | `--bs-white` |
| `{color.dark}` | `#212529` | Secondary body text, pricing labels | 51 | 1.0 | `--bs-body-color` |
| `{color.gray.light}` | `#e3e4e8` | Surface backgrounds for subtle sections | 2 | 1.0 | `--bs-gray-300` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.cyan}` | `#14bbef` | Accent text, secondary CTA bg, icons | 22 | 0.8 | Computed style |
| `{color.teal}` | `#49b4aa` | Tertiary button backgrounds | 5 | 0.6 | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Proxima Nova | 300, 400, 500, 600, 700 | All headings, body, and UI | Montserrat | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 54px | 50px | -2px | 600 | Hero headlines | `h1.withIntro` |
| `{type.display.md}` | 48px | 50.4px | normal | 700 | Section headlines | `h1` |
| `{type.heading.lg}` | 34px | 36px | -1px | 500 | Feature titles | `h3` |
| `{type.heading.md}` | 28px | 33.6px | normal | 400 | Secondary headings | `h2` |
| `{type.heading.sm}` | 26px | 32px | normal | 300 | Intro paragraphs | `p:nth-of-type(1)` |
| `{type.body.lg}` | 18px | 22px | normal | 500 | Pricing headers | `p.priceColHeading` |
| `{type.body.md}` | 16px | 24px | 1.6px | 300 | Default body text | `section#behave-pro-hindsight` |
| `{type.body.sm}` | 13px | 14px | normal | 400 | Footer links | `li:nth-of-type(2)` |

### Principles
1. **Tight Display Tracking**: Large display type (54px) uses negative letter-spacing (-2px) to maintain visual density.
2. **Wide Body Tracking**: Light-weight body copy (300 weight) uses increased tracking (1.6px) to ensure legibility.
3. **Weight Contrast**: Headlines jump from 700 (bold) to 300 (light) in immediate succession to create clear hierarchy.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 5px | 18 |
| `{space.sm}` | 10px | 12 |
| `{space.md}` | 20px | 23 |
| `{space.lg}` | 35px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Cards, sections, standard buttons | 192 occurrences |
| `{radius.pill}` | 100px | Primary "Get a Demo" buttons | Pricing page |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All cards and buttons | Multiple pages |

## Components

### Tier 1: Foundational

#### Primary Navy Button
**Role:** Main call to action in light sections.
**Pages observed:** https://hindsightsoftware.com/pricing
**Spec:** Background: `#0a203a` | Text: `#ffffff` | Radius: `100px` | Padding: `10px 35px` | Type: `16px/700`
**States observed:** Default | Hover: Not captured

#### Cyan Accent Button
**Role:** High-visibility "Get a Demo" or "Install" actions.
**Pages observed:** https://hindsightsoftware.com/pricing
**Spec:** Background: `#14bbef` | Text: `#000000` | Radius: `50%` (circular) or `100px` | Padding: `1px 6px`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Pricing Card
**Role:** Displaying plan features and costs.
**Pages observed:** https://hindsightsoftware.com/pricing
**Spec:** Background: `#ffffff` | Text: `#212529` | Radius: `0px` | Border: `1px solid #e3e4e8`
**States observed:** Default | Hover: Not captured

#### Footer Block
**Role:** Site-wide navigation and contact info.
**Pages observed:** All pages
**Spec:** Background: `#0a203a` | Text: `#ffffff` | Typography: `13px/400` (links)
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Contact Banner
**Role:** Bottom-of-page conversion point.
**Pages observed:** https://hindsightsoftware.com
**Spec:** Background: `#14bbef` | Text: `#0a203a` | Typography: `34px/500` (heading)
**States observed:** Default | Hover: Not captured

#### Story Section
**Role:** Narrative content with light background.
**Pages observed:** https://hindsightsoftware.com/about
**Spec:** Background: `#e3e4e8` | Text: `#0a203a` | Typography: `26px/300` (intro)
**States observed:** Default | Hover: Not captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1140px |
| Section Padding (Vertical) | 80px - 100px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; h1 scales to ~32px |
| Desktop | 1440px | 12-column grid active; max-width container centered |

## Imagery & decoration
The brand uses large, clean line-art illustrations (e.g., the alarm clock on the homepage) in navy and cyan. It avoids photography in favor of these technical, "blueprint-style" graphics. Decorative elements include large cyan chevrons used as background watermarks.

## Do's
- Use `#0a203a` for all primary headings to maintain authority.
- Apply `1.6px` letter-spacing to Proxima Nova Light (300) when used for body text.
- Use `100px` pill radius for primary conversion buttons.
- Maintain `0px` sharp corners for all content cards and section containers.
- Use `#14bbef` sparingly as a "high-voltage" highlight color.

## Don'ts
- **Wrong:** Using `#14bbef` for long-form body text. **Right:** Use `#212529`. **Reason:** Legibility and contrast.
- **Wrong:** Applying rounded corners to pricing cards. **Right:** Keep radius at `0px`. **Reason:** Brand geometry is sharp.
- **Wrong:** Using `#0d6efd` (Bootstrap default blue) as the primary brand color. **Right:** Use `#0a203a`. **Reason:** The brand uses a custom navy, not the framework default.

## Quick start

```css
/* CSS Variables */
:root {
  --hindsight-navy: #0a203a;
  --hindsight-cyan: #14bbef;
  --hindsight-white: #ffffff;
  --hindsight-dark: #212529;
  --font-primary: 'proxima-nova', sans-serif;
}
```

## Known gaps
- Hover and Active states for buttons were not captured in the static analysis.
- Form input styling (text fields, checkboxes) was not present on the analyzed pages.
- Success/Error semantic colors were not observed in the UI.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://hindsightsoftware.com | 1440px | 2026-06-06 |
| Pricing | https://hindsightsoftware.com/pricing | 1440px | 2026-06-06 |
| About | https://hindsightsoftware.com/about | 390px | 2026-06-06 |