# Haasonline Design System

> High-contrast technical utility anchored by a signature teal voltage and a rigid monochrome foundation.

**Source:** [https://haasonline.com](https://haasonline.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Haasonline utilizes a high-contrast monochrome palette of deep blacks (#111111) and cool grays (#eeeeee) to establish a professional, data-driven atmosphere. The system’s primary visual energy is concentrated in a single chromatic accent: a vibrant teal (#21baac) used for progress bars, primary CTAs, and key links. Typography is strictly Source Sans Pro, ranging from heavy 800-weight display headers to light 300-weight body leads, maintaining a clean, sans-serif technicality throughout. Layouts are characterized by generous 100px vertical section padding and a sharp, mostly square-edged geometry, with subtle 3px to 8px radii reserved for interactive controls.

## Signature DNA
1. **Teal Voltage** (#21baac used as a high-signal accent against #111111 backgrounds or #ffffff surfaces to denote primary actions and progress. Observed on Homepage and Pricing.)
2. **Monochrome Sectioning** (Alternating bands of #eeeeee, #ffffff, and #111111 to create a rhythmic, high-contrast content flow. Observed across all analyzed pages.)
3. **Source Sans Pro Hierarchy** (A rigid typographic system using weights 300 through 800 to differentiate technical data from marketing claims. Observed across all pages.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.bg.dark}` | `#111111` | Primary dark surface, hero backgrounds, footer | 166 | 0.8 | Computed Style |
| `{color.bg.light}` | `#eeeeee` | Secondary section background, borders | 120 | 0.8 | Computed Style |
| `{color.bg.pure}` | `#ffffff` | Primary content surface, card backgrounds | 71 | 0.8 | Computed Style |
| `{color.text.primary}` | `#444444` | Default body text | 177 | 0.8 | Computed Style |
| `{color.text.muted}` | `#666666` | Secondary labels, footer links | 19 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#21baac` | Primary CTA bg, progress bars, active links | 200 | 1.0 | `--progress-bar-color` |
| `{color.primary.dark}` | `#127f75` | Hover states, emphasized teal text | 45 | 0.8 | Computed Style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| Source Sans Pro | 300, 400, 500, 600, 700, 800 | All display, heading, and body roles | Source Sans 3 | SIL Open Font License |
| dashicons | 400 | UI Icons (stars, checks) | Font Awesome | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 60px | 60px | normal | 600 | Page Hero H1 | `h1` |
| `{type.display.lg}` | 50px | 50px | normal | 600 | Pricing Currency | `span.usd-prefix` |
| `{type.heading.lg}` | 35px | 40px | normal | 600 | Section Headers | `h2` |
| `{type.heading.md}` | 30px | 35px | normal | 600 | Feature Titles | `h3` |
| `{type.heading.sm}` | 25px | 25px | normal | 600 | CTA Buttons | `a.button-big` |
| `{type.body.lg}` | 18px | 27px | normal | 400 | Pricing Toggles | `button#term-monthly` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default Body | `section#hero` |
| `{type.body.sm}` | 14px | 21px | normal | 400 | Footer / Captions | `a` |

### Principles
1. **Weight-driven Emphasis:** Uses weight 800 for extreme emphasis in display areas and weight 300 for lighter introductory paragraphs.
2. **Tight Display Leading:** Large display sizes (60px) use 1:1 line-height (60px) for a compact, impactful look.
3. **Standard Body Tracking:** All text uses `normal` letter spacing; no custom tracking is applied to the Source Sans Pro implementation.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 5px | 165 |
| `{space.sm}` | 10px | 89 |
| `{space.md}` | 20px | 104 |
| `{space.lg}` | 40px | 98 |
| `{space.xl}` | 80px | 28 |
| `{space.section}` | 100px | 14 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, sharp cards | 778 occurrences |
| `{radius.sm}` | 3px | Primary buttons, input fields | Pricing CTA buttons |
| `{radius.md}` | 8px | Feature cards, social proof blocks | Homepage cards |
| `{radius.lg}` | 10px | Pricing tier containers | Pricing plan cards |

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

## Components
### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** Homepage, Pricing
**Spec:** Background `{color.primary}` (#21baac) / Text `{color.foundation.white}` (#ffffff) / Radius 3px / Padding 10px 20px / Typography `{type.heading.sm}` (25px / 600)
**States observed:** Default | Hover | Active: Captured

#### Outline Button
**Role:** Secondary action
**Pages observed:** Pricing
**Spec:** Background transparent / Text `{color.primary}` (#21baac) / Border 1px `{color.primary}` (#21baac) / Radius 3px / Padding 10px 20px
**States observed:** Default | Hover: Captured

### Tier 2: Patterns

#### Pricing Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background transparent / Border 1px #dddddd / Radius 10px / Padding 4px / Text #444444
**States observed:** Default: Captured

#### Feature Card
**Role:** Product benefit display
**Pages observed:** Homepage
**Spec:** Background #ffffff / Radius 8px / Padding 30px / Text #444444
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Dark Surface Section
**Role:** High-impact content band
**Pages observed:** Homepage, Pricing, About
**Spec:** Background #111111 / Text #ffffff / Padding 100px 0px
**States observed:** Default: Captured

#### Light Surface Section
**Role:** Secondary content band
**Pages observed:** Homepage, Pricing, About
**Spec:** Background #eeeeee / Text #444444 / Padding 100px 0px
**States observed:** Default: Captured

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1200px |
| Section Vertical Padding | 100px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero H1 scales to 40px; Section padding reduces to 40px. |

## Imagery & decoration
Haasonline uses clean, technical product screenshots and vector icons (dashicons). It avoids photography of people, preferring abstract data visualizations or UI-centric graphics to reinforce the "automated" and "technical" nature of the product.

## Do's
- Use `#21baac` for all primary interactive elements.
- Maintain a minimum of `100px` vertical padding between major content sections.
- Pair `Source Sans Pro` weight 600 for headings with weight 400 for body text.
- Use `#111111` for hero backgrounds to ensure high contrast with teal CTAs.
- Apply a `3px` border radius to buttons to maintain a technical, precise feel.

## Don'ts
- Do not use rounded corners larger than `10px` for any UI element.
- Do not use `#21baac` for large background areas; it is an accent color only.
- Do not use serif fonts; the brand is strictly sans-serif.
- Do not place dark text (#444444) on dark backgrounds (#111111).
- Do not use the sub-brand accent color (if any existed) as the primary site-wide CTA color.

## Similar brands
- Binance (Technical utility, dark mode focus)
- TradingView (Data-heavy, monochrome with high-signal accents)
- Kraken (Clean, sans-serif technical interface)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #21baac;
  --color-primary-dark: #127f75;
  --color-bg-dark: #111111;
  --color-bg-light: #eeeeee;
  --color-text-main: #444444;
  --font-family: 'Source Sans Pro', sans-serif;
  --radius-button: 3px;
  --section-padding: 100px;
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "brand": { "primary": { "value": "#21baac" } },
    "surface": {
      "dark": { "value": "#111111" },
      "light": { "value": "#eeeeee" }
    }
  }
}
```

## Agent prompt examples
- "Create a feature section with a #111111 background, Source Sans Pro 600 headings in white, and a primary teal button (#21baac) with a 3px radius."
- "Design a pricing card using a 10px border radius, #ffffff background, and 1px #eeeeee border, featuring a teal outline button."
- "Generate a technical data table using Source Sans Pro 400 at 14px, with #444444 text on a #ffffff surface."

## Known gaps
- Hover states for all secondary links were not fully captured in the automated crawl.
- Success and Error semantic tokens were not present on the analyzed marketing pages.
- Mobile-specific transition animations were not recorded.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://haasonline.com | 1440px | 2026-06-06 |
| Pricing | https://haasonline.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://haasonline.com | 390px | 2026-06-06 |