# Runninghill.co.za Design System

> High-contrast industrial software aesthetic defined by oversized numeric indices, a stark charcoal and white foundation, and high-energy safety-orange and lime-sulfur accents.

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

## TL;DR
Runninghill employs a "monochrome-plus-voltage" system where a deep charcoal base (`#27353a`) and white canvas (`#ffffff`) are punctuated by aggressive functional accents. The identity is anchored by **nieuHaas**, a clean neo-grotesque used at massive scales (up to 90px) for section numbering and hero display. Primary actions utilize a high-visibility lime-sulfur (`#cfd70a`) or safety-orange (`#f23300`), often in pill-shaped or heavily rounded geometries. Layouts are strictly modular, using generous vertical rhythm (60px gaps) and high-contrast bands to separate service, stack, and editorial content.

## Signature DNA
1. **Oversized Numeric Indexing** (Large 90px and 65px `nieuHaas` numbers used to anchor service lists and feature sections, creating a technical, step-by-step documentation feel. Seen on homepage services and technology stack sections.)
2. **High-Voltage Functional Accents** (The use of `#cfd70a` and `#f23300` as "active" surfaces against charcoal backgrounds, signaling high-priority interactive zones like "Get a Free Consultation" or "Learn More" buttons.)
3. **Achromatic Banding** (Alternating full-width sections of pure white `#ffffff` and deep charcoal `#27353a` to create clear cognitive breaks between content types.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.ink}` | `#000000` | Primary text, brand wordmark | 111 | 0.8 | computed_style |
| `{colors.canvas}` | `#ffffff` | Primary background, button text | 65 | 1.0 | css_variable:--tw-ring-offset-color |
| `{colors.charcoal}` | `#27353a` | Secondary background, primary button bg | 6 | 1.0 | css_variable:--secondary |
| `{colors.border}` | `#e5e7eb` | Subtle dividers and card outlines | 6 | 0.6 | computed_style |
| `{colors.surface-soft}`| `#f7f7f7` | Subtle section backgrounds | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | `#f23300` | Safety orange: secondary CTAs, service numbers | 13 | 1.0 | css_variable:--primary |
| `{colors.accent}` | `#cfd70a` | Lime sulfur: primary hero CTA, decorative icons | 15 | 1.0 | css_variable:--accent |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.error}` | `#dc2626` | Error text, destructive alerts | 3 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| nieuHaas | 400, 500, 600, 700 | Primary Display, Heading, Body | Inter | Custom/Licensed |
| system-ui | 400, 500 | Fallback, Error states | Sans-serif | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{typography.display-mega}` | 90px | normal | normal | 400 | Section numbers | `div.ourservices-number` |
| `{typography.display-xl}` | 80px | 80px | normal | 700 | Hero emphasis | `span.font-bold` |
| `{typography.display-lg}` | 65px | 97.5px | normal | 400 | Feature indices | `span.feature-information-index` |
| `{typography.display-md}` | 50px | 75px | normal | 600 | Section headers | `h2.text-black` |
| `{typography.heading-md}` | 28px | normal | normal | 500 | Interactive links | `a.hover:underline` |
| `{typography.heading-sm}` | 24px | 32px | normal | 400 | Navigation items | `nav.hidden.md:flex` |
| `{typography.body-lg}` | 20px | 28px | normal | 400 | Sub-headers | `span` |
| `{typography.body-md}` | 16px | 24px | normal | 400 | Default body text | `a` |
| `{typography.caption}` | 12px | 16px | normal | 700 | Badges, small labels | `div.h-[50px].inline-flex` |

### Principles
1. **Numeric Dominance:** Numbers are rendered 2-3x larger than the text they describe to act as visual anchors.
2. **Tight Display Leading:** Large display type (80px) uses 1:1 line-height (80px) for maximum density.
3. **Weight as Hierarchy:** Bold (700) is reserved for hero moments; semi-bold (600) for section titles; medium (500) for UI labels.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{spacing.xs}` | 8px | 32 |
| `{spacing.base}` | 16px | 31 |
| `{spacing.lg}` | 30px | 14 |
| `{spacing.xl}` | 40px | 4 |
| `{spacing.section}` | 60px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section bands, sharp containers | 141 occurrences |
| `{radius.md}` | 12px | Form controls, small cards | 24 occurrences |
| `{radius.lg}` | 50px | Large rounded buttons | 4 occurrences |
| `{radius.pill}` | 9999px | CTA buttons, badges | 13 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.deep}` | `0 25px 50px -12px rgba(0, 0, 0, 0.25)` | Floating cards, modals | 24 occurrences |
| `{shadow.soft}` | `0 10px 15px -3px rgba(0, 0, 0, 0.1)` | Hover states, blog cards | 3 occurrences |

## Components

### Tier 1: Foundational

#### Primary CTA (Pill)
**Role:** Main conversion actions (e.g., "Get a Free Consultation")
**Pages observed:** Homepage, About
**Spec:** Background `{colors.accent}` (#cfd70a) / Text `{colors.ink}` (#000000) / Radius `{radius.pill}` / Padding 8px 16px / Typography `{typography.body-md}`
**States observed:** Default | Hover: captured

#### Secondary CTA (Rounded)
**Role:** Navigation and secondary actions (e.g., "Our Work", "View Careers")
**Pages observed:** Homepage, Careers
**Spec:** Background `{colors.charcoal}` (#27353a) / Text `{colors.canvas}` (#ffffff) / Radius 100px / Padding 8px 16px / Typography `{typography.body-md}`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Service Card
**Role:** Displaying core capabilities in a grid
**Pages observed:** Homepage
**Spec:** Background `{colors.canvas}` (#ffffff) / Text `{colors.ink}` (#000000) / Border 1px `{colors.border}` (#e5e7eb) / Radius `{radius.none}`
**States observed:** Default

#### Blog Card
**Role:** Editorial content previews
**Pages observed:** Homepage, Blog
**Spec:** Background `{colors.canvas}` (#ffffff) / Shadow `{shadow.soft}` / Radius `{radius.md}` (12px) / Typography `{typography.body-sm}` (14px) for dates.

### Tier 3: Surface-specific

#### Orange Badge
**Role:** Inline labels or "Learn More" buttons
**Pages observed:** Homepage
**Spec:** Background `{colors.primary}` (#f23300) / Text `{colors.canvas}` (#ffffff) / Radius `{radius.pill}` / Padding 8px 16px / Typography `{typography.caption}` (12px / 700)

#### Charcoal Surface Section
**Role:** High-contrast content bands (Technology Stack)
**Pages observed:** Homepage
**Spec:** Background `{colors.charcoal}` (#27353a) / Text `{colors.canvas}` (#ffffff) / Padding 30px 30px 60px

## Layout
| Property | Value |
|---|---|
| Max content width | 1280px |
| Section padding | 60px vertical |
| Grid columns | 12-column desktop |
| Gutter | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | <768px | Navigation collapses to hamburger; 90px display type scales down; grid columns stack 1-up. |
| Desktop | 1024px+ | Horizontal navigation visible; 3-up service grids. |

## Do's
- Use **nieuHaas** at 90px for section numbering to establish hierarchy.
- Apply `{colors.accent}` (#cfd70a) only to the single most important CTA on a page.
- Alternate between white and charcoal background bands to separate content phases.
- Use `{radius.pill}` for all interactive buttons to contrast against sharp `{radius.none}` layout containers.
- Maintain a 60px vertical gap between major content sections.

## Don'ts
- **Wrong:** Using `#cfd70a` for body text. **Right:** Use `#000000`. **Reason:** Accessibility and brand legibility.
- **Wrong:** Applying shadows to every card. **Right:** Use shadows only for editorial (blog) or floating elements.
- **Wrong:** Mixing multiple font families. **Right:** Stick to `nieuHaas` for all brand-critical type.
- **Wrong:** Using small font sizes for section headers. **Right:** Use at least 50px semi-bold.

## Similar brands
- Stripe (for modular banding)
- Vercel (for high-contrast monochrome UI)
- IBM (for technical numeric indexing)

## Quick start

### CSS Custom Properties
```css
:root {
  --primary: #f23300;
  --secondary: #27353a;
  --accent: #cfd70a;
  --ink: #000000;
  --canvas: #ffffff;
  --border: #e5e7eb;
  --radius-pill: 9999px;
  --radius-control: 12px;
  --shadow-deep: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #f23300;
  --color-secondary: #27353a;
  --color-accent: #cfd70a;
  --font-display: "nieuHaas", sans-serif;
  --shadow-deep: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
```

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://runninghill.co.za | 1440px | 2026-06-06 |
| Pricing | https://runninghill.co.za/pricing | 1440px | 2026-06-06 |
| About | https://runninghill.co.za/about | 1440px | 2026-06-06 |