# Nswlrs.com.au Design System

> A high-trust institutional interface balancing deep navy authority with functional electric blue actions on a clean, structured white canvas.

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

## TL;DR
Nswlrs.com.au utilizes a monochrome-led foundation anchored by a deep navy-black `#101525` for primary text and a stark white `#ffffff` canvas. Brand "voltage" is introduced through a high-contrast electric blue `#0069ff` used exclusively for primary actions, buttons, and interactive states. The system relies on a rigid 8px grid and generous 16px border radii for content cards, creating a modern, accessible, and structured data-heavy environment. Typography is handled entirely by **DM Sans**, using bold weights (700) to establish a clear information hierarchy across complex service categories.

## Signature DNA
1. **The Electric Action:** Primary interaction points (buttons, "Online Portal" links) use a high-saturation blue `#0069ff` against white or navy backgrounds to ensure zero ambiguity in user flow.
2. **Structured Softness:** Large-scale content containers use a 16px radius (`{radii.card}`), softening the institutional feel of the data-heavy layout without losing professional rigor.
3. **Navy Grounding:** Deep navy `#101525` replaces pure black for primary text, providing a softer but equally authoritative contrast ratio against the white canvas.

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.canvas}` | `#ffffff` | Page background, card surfaces, button text | 110 | 1.0 | `--background` |
| `{colors.ink}` | `#101525` | Primary body text, headings | 92 | 0.8 | Computed Style |
| `{colors.ink-strong}` | `#171717` | High-contrast foreground text | 5 | 1.0 | `--foreground` |
| `{colors.border}` | `#c3c7cd` | Card outlines, dividers | 24 | 0.8 | Computed Style |
| `{colors.surface-soft}` | `#ebecee` | Section backgrounds, badge fills | 4 | 0.6 | Computed Style |
| `{colors.slate}` | `#4f5059` | Secondary/Muted text | 12 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | `#0069ff` | Primary CTA background, active links | 6 | 0.6 | Computed Style |
| `{colors.primary-dark}` | `#0054cc` | Text links on light backgrounds | 5 | 0.6 | Computed Style |

### Semantic
*Not captured in source.*

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| DM Sans | 400, 600, 700 | All headings, body, and UI | DM Sans (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 36px | 40px | normal | 700 | Hero H1 | `h1.ui:text-4xl` |
| `{type.h2}` | 30px | 36px | normal | 700 | Section Titles | `h2.ui:text-3xl` |
| `{type.h5}` | 18px | 28px | normal | 700 | Card Titles | `h5.ui:font-bold` |
| `{type.body-lg}` | 18px | 28px | normal | 400 | Intro Paragraphs | `p.ui:text-lg` |
| `{type.body}` | 16px | 24px | normal | 400 | Default Body | `div.ui:block` |
| `{type.ui-semibold}` | 16px | 24px | normal | 600 | Button Labels | `button.ui:font-semibold` |
| `{type.body-sm}` | 14px | 20px | normal | 400 | Captions, small text | `p.ui:bg-lrs-colour-grey-100` |

### Principles
1. **Bold Hierarchy:** Headings always utilize weight 700 to anchor sections against dense body text.
2. **Standard Tracking:** Letter spacing remains "normal" across all scales to maintain legibility in legal/data contexts.
3. **Tight Display:** Large display type uses a tight 1.1x line-height ratio (36/40) for compact hero messaging.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 4px | 4 |
| `{space.sm}` | 8px | 8 |
| `{space.md}` | 16px | 50 |
| `{space.lg}` | 24px | 16 |
| `{space.xl}` | 48px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Full-width sections | `Surface` component |
| `{radius.sm}` | 4px | Form inputs | `radii.input` |
| `{radius.md}` | 8px | Small feature cards | `Card` (6 occurrences) |
| `{radius.lg}` | 16px | Standard content cards | `Card` (24 occurrences) |
| `{radius.pill}` | 9999px | CTA Buttons, Search | `Pill Button` |

## Elevation
*The system is primarily flat. No drop shadows were captured in validated evidence.*

## Components
### Tier 1: Foundational
#### Pill Button
**Role:** Primary site actions (Online Portal, Contact Us)
**Pages observed:** https://nswlrs.com.au
**Spec:** Background `#0069ff` or `rgba(0,0,0,0.4)` / Text `#ffffff` / Radius `9999px` / Padding `16px` / Type `{type.ui-semibold}`
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Feature Card
**Role:** Service navigation and "Latest Announcements"
**Pages observed:** https://nswlrs.com.au
**Spec:** Background `#ffffff` / Text `#101525` / Border `1px #c3c7cd` / Radius `16px` / Padding `16px`
**States observed:** Default: captured

#### External Link Card
**Role:** Helpful external links grid
**Pages observed:** https://nswlrs.com.au
**Spec:** Background `#ffffff` / Text `#0054cc` / Border `1px #c3c7cd` / Radius `8px` / Padding `16px`
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Hero Section
**Role:** Primary landing messaging
**Pages observed:** https://nswlrs.com.au
**Spec:** Background (Image/Dark) / Text `#ffffff` / Padding `48px` / Typography `{type.display}`
**States observed:** Default: captured

#### Info Surface
**Role:** Alternating content bands
**Pages observed:** https://nswlrs.com.au
**Spec:** Background `#e5f0ff` / Text `#101525` / Radius `0px` / Padding `48px`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1280px (approx) |
| Section Padding | 48px |
| Grid Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Hero padding reduces to 24px; Cards stack 1-up |
| Desktop | 1440px | 4-column card grids; Horizontal top-tier navigation |

## Imagery & decoration
The brand uses high-tech, motion-blurred photography for heroes (representing data flow) and clean, line-art icons for service categories. It avoids illustrative or "friendly" cartoon styles in favor of professional, abstract imagery.

## Do's
- Use `#0069ff` for all primary user actions.
- Apply `{radius.lg}` (16px) to all main content cards.
- Ensure headings use **DM Sans Bold (700)** for clear hierarchy.
- Use `#ebecee` as a subtle background for secondary information blocks.
- Maintain 48px vertical padding between major page sections.

## Don'ts
- **Wrong:** Using `#0069ff` for body text. **Right:** Use `#101525`. **Reason:** Accessibility and brand hierarchy; blue is for action.
- **Wrong:** Mixing border radii on the same card tier. **Right:** Stick to 16px for main cards.
- **Wrong:** Using pure black `#000000` for long-form body text. **Right:** Use `#101525`.
- **Wrong:** Labeling a sub-brand accent color as the parent primary. **Right:** Parent primary is `#171717` (achromatic).

## Quick start

```css
:root {
  --color-canvas: #ffffff;
  --color-ink: #101525;
  --color-primary: #0069ff;
  --color-border: #c3c7cd;
  --font-main: 'DM Sans', sans-serif;
  --radius-card: 16px;
  --radius-pill: 9999px;
}
```

## Agent prompt examples
- "Create a service card using a 1px #c3c7cd border, 16px border radius, and a DM Sans Bold 18px title in #101525."
- "Generate a primary CTA button as a pill shape with #0069ff background and white DM Sans 16px semibold text."
- "Design a section header with a 30px DM Sans Bold title and a 16px DM Sans regular subtext in #4f5059."

## Known gaps
- Hover and active states for secondary buttons were not explicitly captured in the data.
- Error and Success semantic tokens were not present on the analyzed pages.
- Detailed mobile navigation transitions were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://nswlrs.com.au | Desktop 1440px | 2026-06-06 |
| Homepage (Mobile) | https://nswlrs.com.au | Mobile 390px | 2026-06-06 |