# Dealersonline.co.za Design System

> A high-contrast utility interface anchoring professional automotive remarketing on a stark white canvas with electric blue accents.

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

## TL;DR
Dealersonline.co.za utilizes a functionalist "SaaS-industrial" aesthetic. The system is built on a pure white foundation (`#ffffff`) contrasted by a deep slate footer (`#1d2939`) and vibrant primary actions in Electric Blue (`#4b50ff`). Typography is strictly structured using **IBM Plex Sans** for technical authority and **Helvetica Neue** for interface utility. The layout relies on sharp geometry (0px radius for primary buttons and inputs) and generous vertical rhythm (up to 130px section gaps) to delineate complex automotive data and service flows.

## Signature DNA
1. **Sharp-Edge Utility** (The system almost entirely avoids rounded corners on primary controls, using `0px` radii for buttons and form inputs to project a precise, industrial feel across all pages.)
2. **Electric Blue Punctuation** (Primary actions and brand highlights use `#4b50ff`, providing a high-voltage contrast against the achromatic base of `#ffffff` and `#333333`.)
3. **Plex Authority** (The consistent use of IBM Plex Sans at weight 500/600 for headings provides a technical, engineered character appropriate for automotive remarketing.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.white}` | `#ffffff` | Page background, button text, surface | 37 | 1.0 | `--bs-white` |
| `{color.slate-900}` | `#1d2939` | Footer background, dark surface | 5 | 0.6 | Computed Style |
| `{color.gray-900}` | `#333333` | Primary body text, labels | 48 | 0.8 | Computed Style |
| `{color.gray-200}` | `#e4e7ec` | Borders, secondary text | 24 | 1.0 | `--bs-gray-200` |
| `{color.black}` | `#000000` | Headings, heavy borders | 18 | 1.0 | `--bs-black` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary}` | `#4b50ff` | Primary CTA background, active links | 12 | 0.8 | Computed Style |
| `{color.blue-gray}` | `#667085` | Subheadings, metadata text | 33 | 0.8 | Computed Style |
| `{color.deep-blue}` | `#0088cc` | Secondary text links | 12 | 0.8 | Computed Style |
| `{color.indigo}` | `#573eec` | Decorative surface backgrounds | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| **IBM Plex Sans** | 400, 500, 600, 700 | Headings, UI Labels | IBM Plex Sans (Google Fonts) | OFL |
| **Helvetica Neue** | 400, 500 | Body, Inputs, Buttons | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.h2}` | 33px | 41px | normal | 500 | Main section heads | `h2.pd_bottom_20` |
| `{type.h3}` | 30px | 38px | normal | 500 | Feature headings | `h3.pd_bottom_20` |
| `{type.h4}` | 22px | 29.6px | normal | 500 | Card titles | `h4.font_500` |
| `{type.h5}` | 19px | 26.8px | normal | 400 | Subheadings | `h5.gray_500` |
| `{type.body}` | 16px | 24px | normal | 400 | Running text | `p:nth-of-type(2)` |
| `{type.label}` | 16px | 24px | normal | 500 | Form labels | `label.form-label` |
| `{type.nav}` | 15px | 22.2px | normal | 400 | Navigation links | `a.nav-link` |
| `{type.button}` | 14px | 20px | normal | 500 | CTA text | `a.white_btn` |

### Principles
1. **Heading Weight Hierarchy:** Section headers strictly use weight 500 or 600; never 400.
2. **Technical Clarity:** IBM Plex Sans is reserved for information-dense areas (headings, labels) to maintain a "tool" feel.
3. **Achromatic Body:** Body text never uses the primary blue; it is strictly `#333333` or `#667085` for readability.

## Spacing
**Base unit:** 4px (variable)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 26 |
| `{space.sm}` | 12px | 47 |
| `{space.md}` | 20px | 19 |
| `{space.lg}` | 24px | 28 |
| `{space.section}` | 130px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sharp}` | 0px | Buttons, Inputs, Cards | `components.Button.radius` |
| `{radius.md}` | 8px | Secondary "Rounded" buttons | `Rounded Button.radius` |
| `{radius.full}` | 50px | Large pill containers | `radii.role.panel` |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.flat}` | none | Primary UI elements | `components.Button.shadow` |
| `{shadow.low}` | `rgba(16, 24, 40, 0.05) 0px 1px 2px 0px` | Rounded buttons | `shadows[0]` |
| `{shadow.high}` | `rgba(0, 0, 0, 0.12) 0px 6px 32px 0px` | Modals/Overlays | `shadows[1]` |

## Components

### Tier 1: Foundational

#### Button (Primary)
**Role:** Primary page actions (Login, Sign In, More about us)
**Pages observed:** All
**Spec:** Background `{color.primary}` (#4b50ff) / Text `{color.white}` (#ffffff) / Radius `0px` / Padding `10px 18px` / Typography `{type.button}`
**States observed:** Default | Hover: captured

#### Text Input
**Role:** Lead capture and login forms
**Pages observed:** Home, Pricing
**Spec:** Background `{color.white}` (#ffffff) / Text `#555555` / Border `1px solid #cccccc` / Radius `0px` / Padding `12px 16px`
**States observed:** Default | Focus: captured

### Tier 2: Patterns

#### Rounded Button
**Role:** Secondary actions or specific "soft" CTAs (e.g., Buyer Registration)
**Pages observed:** Home
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.black}` (#000000) / Border `1px solid #d0d5dd` / Radius `8px` / Shadow `{shadow.low}`
**States observed:** Default | Hover: captured

#### Footer
**Role:** Global site closure
**Pages observed:** All
**Spec:** Background `{color.slate-900}` (#1d2939) / Text `{color.white}` (#ffffff) / Padding `0px 12px` / Typography `{type.body-sm}`
**States observed:** Default

### Tier 3: Surface-specific

#### Pricing Card
**Role:** Service tier display
**Pages observed:** Pricing
**Spec:** Background `{color.white}` (#ffffff) / Border `1px solid #e4e7ec` / Radius `0px` / Padding `31.6px 35px`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max Container Width | 1140px (Standard Bootstrap) |
| Section Padding (Vertical) | 80px to 130px |
| Column Gap | 24px |

## Imagery & decoration
- **High-Contrast Photography:** Uses long-exposure light trails and industrial automotive imagery (trucks, car inspections).
- **Iconography:** Uses sharp, geometric glyphs (e.g., the "double diamond" logo mark).
- **Avoids:** Soft gradients, rounded "bento" boxes, and playful illustrations.

## Do's
- Use `0px` border radius for all primary functional elements (buttons, inputs).
- Apply `IBM Plex Sans` weight 500 for all headings to maintain technical authority.
- Reserve `#4b50ff` for the single most important action on a screen.
- Use generous vertical spacing (`130px`) between major content sections.
- Maintain high contrast: `#333333` text on `#ffffff` backgrounds.

## Don'ts
- **Wrong:** Using a rounded button for a "Sign In" or "Submit" action. **Right:** Use the sharp-edged primary button. **Reason:** The brand identity is built on industrial precision.
- **Wrong:** Using `#0d6efd` (standard Bootstrap blue) as the primary color. **Right:** Use the brand-specific `#4b50ff`.
- **Wrong:** Mixing serif fonts into the display hierarchy. **Right:** Stick to the IBM Plex Sans / Helvetica Neue pairing.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #4b50ff;
  --color-surface: #ffffff;
  --color-footer: #1d2939;
  --color-text-main: #333333;
  --color-text-muted: #667085;
  --font-heading: 'IBM Plex Sans', sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --radius-sharp: 0px;
}
```

## Known gaps
- Hover and Active states for the "Rounded Button" were not fully captured in the computed style evidence.
- Mobile-specific navigation transitions were not analyzed.
- The specific icon library (SVG set) was not identified in the source.

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