# Hollandersolutions Design System

> Deep indigo foundations anchored by high-contrast amber actions and a rigid sans-serif hierarchy.

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

## TL;DR
Hollandersolutions utilizes a high-contrast "Monochrome Plus" system where a deep indigo (`#32255e`) and pure black (`#000000`) provide the structural weight against a clean white (`#ffffff`) canvas. The brand voltage is concentrated in a single functional accent: a vibrant amber (`#ffb132`) used exclusively for primary conversion points. Typography is strictly sans-serif, pairing **Montserrat** for navigation and subheadings with **Lato** for display and body text. The interface relies on sharp geometry (0px radii) for structural containers, reserving a soft 5px radius specifically for interactive components like buttons and inputs.

## Signature DNA
1. **The Indigo Anchor** (The use of `#32255e` for primary text and `#180a48` for heavy footer surfaces creates a professional, industrial depth found across all analyzed pages.)
2. **Amber Functionalism** (The specific use of `#ffb132` is strictly reserved for "Sign Up" and "About Our Products" CTAs, creating a high-visibility path to conversion against dark backgrounds.)
3. **Mixed Sans-Serif Hierarchy** (The intentional pairing of Montserrat's geometric clarity for UI labels with Lato's humanist legibility for long-form content.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, primary surface, text on dark | 185 | 1.0 | `--wp--preset--color--white` |
| `{color.black}` | `#000000` | Section backgrounds, primary text | 139 | 1.0 | `--wp--preset--color--black` |
| `{color.border}` | `#262626` | Default 1px component borders | 12 | 0.8 | Computed Style |
| `{color.gray.dark}` | `#474747` | Secondary body text | 8 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#ffb132` | Primary CTA background | 9 | 0.6 | Computed Style |
| `{color.indigo}` | `#32255e` | Primary brand text, button text on amber | 23 | 0.8 | Computed Style |
| `{color.indigo.deep}` | `#180a48` | Footer and heavy surface backgrounds | 3 | 0.6 | Computed Style |
| `{color.link}` | `#0000ee` | Inline text links (standard browser blue) | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 400, 700 | Navigation, Subheadings, UI Labels | Montserrat (Google Fonts) | SIL OFL |
| Lato | 400, 700 | Display, Body, Headlines | Lato (Google Fonts) | SIL OFL |
| Arial | 400 | Form Inputs (Fallback) | System Sans | Standard |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display}` | 48px | 75px | normal | 700 | Hero headlines | `h2.paralax-header.center` |
| `{text.h1}` | 32px | normal | normal | 700 | Navigation toggles | `a.toggle-nav.x` |
| `{text.h2}` | 24px | 32px | normal | 400 | Section headers | `h2.centered` |
| `{text.nav}` | 18px | normal | normal | 700 | Primary navigation | `nav.primary.black` |
| `{text.body.lg}` | 18px | 26px | normal | 400 | Large body links | `a` |
| `{text.body}` | 16px | normal | normal | 400 | Default body text | `header.ribbon.primary` |
| `{text.body.sm}` | 15px | 22px | normal | 400 | Footer/Secondary text | `div.layout.whole` |
| `{text.caption}` | 12px | 26px | normal | 400 | Credits and legal | `small.credits` |

### Principles
1. **Display weight is heavy.** Primary headlines always use Lato at 700 weight with generous line height (1.5x+).
2. **Navigation is geometric.** Montserrat is used for all menu items to ensure high legibility at 18px.
3. **High Contrast Text.** Text on dark surfaces (`#180a48`) must always be pure white (`#ffffff`).

## Spacing
**Base unit:** 4px (derived)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 12 |
| `{space.sm}` | 12px | 36 |
| `{space.md}` | 14px | 44 |
| `{space.lg}` | 28px | 38 |
| `{space.section}` | 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Cards, Sections, Layout Containers | 291 occurrences |
| `{radius.sm}` | 2px | Product Cards | `Card` component |
| `{radius.md}` | 5px | Buttons, Text Inputs | `Rounded Button` component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.nav}` | `rgb(0, 0, 0) 0px -3px 10px 0px` | Sticky navigation bar | Navigation component |
| `{shadow.card}` | `rgb(128, 128, 128) 0px 0px 5px 0px` | Product feature cards | Card component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site-wide CTA
**Pages observed:** All
**Spec:** Background: `#ffb132` | Text: `#32255e` | Radius: `5px` | Padding: `14px 40px 18px` | Typography: Montserrat 700 (18px)
**States observed:** Default: Captured | Hover/Active: Not captured

#### Text Input
**Role:** Search and form fields
**Pages observed:** All
**Spec:** Background: `#ffffff` | Text: `#000000` | Border: `1px solid #000000` | Radius: `5px` | Padding: `8px`
**States observed:** Default: Captured | Focus: Not captured

### Tier 2: Patterns

#### Navigation Bar
**Role:** Global header
**Pages observed:** All
**Spec:** Background: `#ffffff` | Shadow: `0px -3px 10px #000000` | Typography: Montserrat 700 (18px) | Padding: `0px 22px`
**States observed:** Default: Captured

#### Footer
**Role:** Global site map and contact
**Pages observed:** All
**Spec:** Background: `#180a48` | Text: `#ffffff` | Typography: Lato 400 (16px) | Border-top: `1px solid #ffffff`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Product Card
**Role:** Feature grid items
**Pages observed:** Home, Pricing
**Spec:** Background: `transparent` | Border: `1px solid #262626` | Radius: `2px` | Shadow: `0px 0px 5px #808080`
**States observed:** Default: Captured

#### Dark Section Surface
**Role:** Content grouping
**Pages observed:** Home, Pricing
**Spec:** Background: `#000000` | Text: `#ffffff` | Padding: `28px` | Radius: `0px`
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1140px (estimated from desktop) |
| Section Padding | 100px (vertical) |
| Grid Gap | 28px |

## Do's
- Use `#ffb132` only for the most important conversion buttons.
- Apply `{radius.md}` (5px) to all interactive elements.
- Set display headlines in Lato 700 with at least 75px line height for 48px text.
- Ensure all footer content sits on the deep indigo `#180a48` background.
- Use Montserrat for all navigation labels to maintain geometric consistency.

## Don'ts
- **Wrong:** Using `#0693e3` (Vivid Cyan Blue) as a primary button color. **Right:** Use `#ffb132`. **Reason:** Cyan is a legacy WP token, not a brand primary.
- Do not use rounded corners on section containers; keep layout blocks at 0px.
- Do not use Arial for headings; it is reserved as a fallback for form inputs only.
- Avoid using pure black text on the deep indigo footer background.

## Similar brands
- Caterpillar (Industrial, yellow/black contrast)
- Stanley (Rugged, high-contrast utility)
- DeWalt (Functional amber/dark-mode palette)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #ffb132;
  --color-indigo: #32255e;
  --color-indigo-deep: #180a48;
  --color-white: #ffffff;
  --color-black: #000000;
  --font-display: 'Lato', sans-serif;
  --font-ui: 'Montserrat', sans-serif;
  --radius-interactive: 5px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #ffb132;
  --color-indigo: #32255e;
  --color-indigo-deep: #180a48;
  --font-display: "Lato";
  --font-ui: "Montserrat";
  --radius-md: 5px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Montserrat 700, background #ffb132, text #32255e, and a 5px border radius."
- "Create a section header using Lato 700 at 48px with a line height of 75px on a white background."
- "Design a footer component with a background of #180a48 and white text using Lato 400."

## Known gaps
- Hover and active states for buttons were not captured in the static evidence.
- Mobile-specific breakpoint transitions for the navigation menu were not fully detailed in the computed styles.
- Form validation error states were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://hollandersolutions.com | Desktop 1440 | 2026-06-06 |
| Pricing | https://hollandersolutions.com/pricing | Desktop 1440 | 2026-06-06 |
| About | https://hollandersolutions.com/about | Desktop 1440 | 2026-06-06 |