# Solv.com.au Design System

> Professional corporate utility meets high-trust healthcare aesthetics through deep teal anchors and mint-green highlights.

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

## TL;DR
Solv.com.au utilizes a high-contrast "monochrome-plus" system where a foundational white canvas (#ffffff) is structured by deep slate-teal (#465660) and dark charcoal (#313e48) typography. The brand's primary action color is a saturated teal (#206072), used for heavy pill-shaped CTAs. Visual energy is introduced via a vibrant mint green (#3cce92) and a bright corporate blue (#097abf), which appear as typographic highlights and decorative background elements. Typography is strictly hierarchical, pairing the heavy, geometric **novel-display** for headlines (up to 56px) with the highly legible **Inter** for all functional UI and body copy.

## Signature DNA
1. **The "Solved" Highlight** (Mint green `#3cce92` is applied to the final word of major headlines to create a visual "result" anchor, observed on the homepage and pricing pages).
2. **Heavy Teal Pills** (Primary actions use `#206072` with a `27px` or `50px` radius, creating a soft but authoritative physical presence).
3. **Novel-Display 900** (The use of ultra-heavy weights for display type creates a sense of stability and institutional trust).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, button text | 44 | 1.0 | `--wp--preset--color--white` |
| `{color.slate-teal}` | `#465660` | Primary body text, footer text | 137 | 0.8 | Computed style |
| `{color.charcoal}` | `#313e48` | Secondary text, dark surfaces | 79 | 0.8 | Computed style |
| `{color.border-light}` | `#dadddf` | Card outlines, section dividers | 18 | 0.8 | Computed style |
| `{color.canvas-soft}` | `#f8f8f8` | Subtle section backgrounds | 3 | 0.6 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#206072` | Primary buttons, borders | 18 | 0.8 | Computed style |
| `{color.mint}` | `#3cce92` | Typographic highlights, icons | 12 | 0.8 | Computed style |
| `{color.blue}` | `#097abf` | Links, secondary highlights | 26 | 0.8 | Computed style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| `novel-display` | 700, 900 | Headlines, Display | Montserrat | Proprietary |
| `Inter` | 400, 700, 900 | Body, UI, Quotes | Inter (Google) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-lg}` | 56px | 68px | normal | 900 | Hero H1 | `h1` |
| `{type.display-md}` | 48px | 56px | normal | 900 | Section H2 | `h2` |
| `{type.heading-lg}` | 32px | 39px | normal | 900 | Sub-section H3 | `h3` |
| `{type.heading-md}` | 24px | 30px | normal | 900 | Card titles | `h4` |
| `{type.heading-sm}` | 20px | 28px | normal | 900 | Small labels | `h5` |
| `{type.quote}` | 20px | 32.5px | normal | 400 | Testimonials | `blockquote.quote-card__quote` |
| `{type.body-lg}` | 18px | 26px | normal | 700 | Large body/Buttons | `a.btn.btn-sm-block` |
| `{type.body-md}` | 16px | 26px | normal | 400 | Standard body | `section.banner-grid` |
| `{type.body-sm}` | 14px | 22px | normal | 400 | Legal/Small text | `p.ts-14` |

### Principles
1. **Ultra-Heavy Display:** Headlines never drop below 700 weight; 900 is preferred for H1-H3.
2. **Generous Line Height:** Body text maintains a 1.625x ratio (16px/26px) for high readability.
3. **Color Contrast:** Text consistently maintains a minimum 7.6:1 ratio against white backgrounds.

## Spacing
**Base unit:** 10px (observed dominant increment)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 10px | 31 |
| `{space.sm}` | 20px | 24 |
| `{space.md}` | 30px | 31 |
| `{space.lg}` | 50px | 6 |
| `{space.xl}` | 100px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Layout containers | 198 occurrences |
| `{radius.sm}` | 10px | Content cards | Observed on pricing cards |
| `{radius.pill}` | 27px | Standard buttons | Rounded Button component |
| `{radius.max}` | 50px | Large UI elements | Observed on feature panels |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `flat` | none | Default state | Most cards use borders |
| `{shadow.card}` | `rgba(0, 0, 0, 0.1) 0px 0px 15px 0px` | Hover/Featured cards | Observed on 10 elements |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main call to action
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#206072` / Text: `#ffffff` / Border: 2px `#206072` / Radius: `27px` / Padding: `18px 31px` / Typography: `18px 700`
**States observed:** Default: Captured | Hover: Not captured

#### Rounded Button (Outline)
**Role:** Secondary action
**Pages observed:** Homepage, Pricing
**Spec:** Background: `transparent` / Text: `#206072` / Border: 2px `#206072` / Radius: `27px` / Padding: `18px 31px` / Typography: `18px 700`
**States observed:** Default: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying platform benefits
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` / Text: `#465660` / Border: 1px `#dadddf` / Radius: `10px` / Padding: `30px`
**States observed:** Default: Captured

#### Quote Card
**Role:** Social proof/Testimonials
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#ffffff` / Text: `#465660` / Shadow: `0px 0px 15px rgba(0,0,0,0.1)` / Radius: `10px` / Padding: `30px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Pricing Banner
**Role:** Hero section for pricing page
**Pages observed:** Pricing
**Spec:** Background: `rgb(230, 242, 249)` / Text: `#465660` / Padding: `100px 0px`
**States observed:** Default: Captured

#### Stat Block
**Role:** Highlighting market data
**Pages observed:** Homepage, Pricing
**Spec:** Typography: `56px 700 novel-display` / Text: `#097abf` / Border-bottom: 4px `#3cce92` (mint accent)
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px (estimated from desktop screenshots) |
| Section Gap | 100px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1440px | Multi-column grids (3-up or 4-up) |
| Mobile | 390px | Single column stacking, 100% width buttons |

## Imagery & decoration
- **Geometric Overlays:** Uses large, soft-colored circles (mint and blue) behind photography.
- **Brand Dots:** Small solid circles in `#3cce92` and `#097abf` used as bullet points or decorative accents.
- **Logos:** Grayscale partner logos in a scrolling marquee.

## Do's
- Use `#3cce92` (Mint) exclusively for the final word in a headline to signal "completion" or "solution."
- Apply `27px` border-radius to all interactive buttons.
- Ensure all body copy uses `Inter` at `16px` with `#465660` for optimal readability.
- Use `#206072` (Teal) for primary "Request Demo" actions.
- Maintain `100px` vertical spacing between major homepage sections.

## Don'ts
- Do not use `novel-display` for body copy; it is reserved for headings and stats.
- Do not use `#000000` for text; use `#465660` or `#313e48`.
- Avoid sharp corners on cards; always use at least a `10px` radius.
- Do not use the mint green `#3cce92` for primary button backgrounds; it is an accent/highlight color only.
- Do not use shadows on every card; reserve `rgba(0, 0, 0, 0.1) 0px 0px 15px 0px` for featured or hovered content.

## Similar brands
- HealthDirect (Australia)
- SafetyCulture
- Employment Hero
- Medibank

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #206072;
  --color-mint: #3cce92;
  --color-blue: #097abf;
  --color-slate: #465660;
  --color-charcoal: #313e48;
  --font-display: 'novel-display', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-pill: 27px;
  --radius-card: 10px;
}
```

## Agent prompt examples
- "Create a pricing card using a 1px #dadddf border, 10px border radius, and a primary teal pill button #206072."
- "Generate a hero section with a 56px Novel-Display headline where the last word is highlighted in #3cce92."
- "Design a stat block with 56px #097abf text and a 4px solid #3cce92 underline."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style data.
- Mobile navigation menu transition was not sampled.
- Form input validation states (error/success) were not present on analyzed pages.

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