# Complispace.com.au Design System

> Corporate GRC authority anchored by high-contrast charcoal surfaces, geometric Gilroy headlines, and a dual-accent system of Ideagen Teal and Pink.

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

## TL;DR
Complispace utilizes a professional, high-trust visual language defined by deep charcoal (`#212d35`) backgrounds and a clean white (`#ffffff`) canvas. The system is built on the **Gilroy** typeface, using heavy 700 weights for geometric display headers and lighter 300-400 weights for long-form readability. Interaction is driven by two high-saturation primary accents: Ideagen Teal (`#22a3af`) for links and secondary actions, and Ideagen Pink (`#e30072`) for high-priority CTAs. Layouts favor generous vertical spacing and large-scale typography, often utilizing rounded containers (`50px` radius) to soften the corporate rigidity.

## Signature DNA
1. **The Charcoal Anchor** (Deep `#212d35` surfaces used for footers and hero overlays to establish immediate GRC authority, evidenced on the homepage and about pages.)
2. **Dual-Accent Navigation** (Strategic use of Teal `#22a3af` and Pink `#e30072` to differentiate between informational links and conversion-oriented actions.)
3. **Geometric Sans Display** (Gilroy at 700 weight, sized up to 95px, creates a bold, modern architectural feel that dominates the hero sections.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Primary canvas and text on dark surfaces | 71 | 1.0 | `--white` |
| `{colors.charcoal}` | `#212d35` | Footer background, primary dark surface | 20 | 1.0 | `--complinfp` |
| `{colors.black}` | `#000000` | Primary text on light surfaces | 8 | 1.0 | `--black` |
| `{colors.grey-light}` | `#efefef` | Section backgrounds, card foundations | 7 | 1.0 | `--grey40` |
| `{colors.grey-slate}` | `#6a716d` | Muted text and borders | 18 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.teal}` | `#22a3af` | Primary links, secondary buttons | 8 | 1.0 | `--ideagenteal` |
| `{colors.pink}` | `#e30072` | Primary CTA backgrounds | 7 | 1.0 | `--ideagenpink` |
| `{colors.blue-alt}` | `#0094cb` | Secondary accent text | 6 | 0.6 | Computed |
| `{colors.teal-light}` | `#45bbce` | Decorative accents (decorative_only) | 3 | 1.0 | `--ideagenlightteal` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{colors.error}` | `#f76262` | Validation and error states (`--red`) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Gilroy | 300, 400, 700 | Display & Heading | Spartan MB | Licensed |
| Open Sans | 400, 600 | Body & Navigation | Open Sans | Google Fonts |
| Montserrat | 700 | Secondary Display | Montserrat | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-mega}` | 95px | 104.5px | normal | 700 | Hero Title | `h1.brand.title` |
| `{type.display-lg}` | 48px | 62.4px | 0.5px | 700 | Section Header | `h1:nth-of-type(3)` |
| `{type.display-md}` | 45px | 49.5px | normal | 700 | Sub-hero Header | `span` |
| `{type.heading-sm}` | 23px | 25.3px | normal | 700 | Card Titles | `h4` |
| `{type.body-lg}` | 18px | 27px | normal | 400 | Hero Body | `div.o-hero` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default Body | `h6.w-100` |
| `{type.button}` | 16px | 27px | -0.4px | 700 | CTA Text | `p.button.-primary` |
| `{type.nav}` | 16px | 16px | normal | 600 | Menu Items | `a` |

### Principles
1. **Heavy Display Weight:** All major headings use 700 weight to maintain brand "gravity."
2. **Tight Button Tracking:** Primary buttons use `-0.4px` letter spacing to increase visual density.
3. **Hybrid Body System:** Open Sans is used for technical navigation and UI labels, while Gilroy 300/400 handles narrative prose.

## Spacing
**Base unit:** 8px (approximate)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 23 |
| `{space.sm}` | 12px | 29 |
| `{space.md}` | 17px | 8 |
| `{space.lg}` | 32px | 8 |
| `{space.xl}` | 57px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Footer, Hero bands | 146 occurrences |
| `{radius.md}` | 12px | Content Cards | Card component |
| `{radius.pill}` | 51px | Primary Buttons | Surface component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 79, 88, 0.1) 0px 4px 6px 0px` | Hoverable feature cards | Card component |

## Components

### Tier 1: Foundational

#### Button Primary
**Role:** Main conversion action (e.g., "Request a demo")
**Pages observed:** Homepage, Pricing
**Spec:** Background `{colors.pink}` (#e30072) / Text `{colors.white}` (#ffffff) / Radius `{radius.pill}` (51px) / Typography `{type.button}`
**States observed:** Default | Hover: `{colors.ideagenpinkhover}` (#c80063) | Active: Not captured

#### Button Secondary
**Role:** Secondary navigation or "Learn More"
**Pages observed:** Homepage, About
**Spec:** Background `{colors.teal}` (#22a3af) / Text `{colors.white}` (#ffffff) / Radius `{radius.pill}` (51px)
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying industry-specific solutions
**Pages observed:** Homepage
**Spec:** Background `{colors.white}` (#ffffff) / Radius 12px / Shadow `{shadow.card}` / Padding 32px
**States observed:** Default | Hover: Shadow intensifies (inferred)

#### Resource Card
**Role:** Blog and report previews
**Pages observed:** Homepage
**Spec:** Background `{colors.grey-light}` (#efefef) / Radius 0px / Text `{colors.black}` (#000000)
**States observed:** Default

### Tier 3: Surface-specific

#### Global Footer
**Role:** Site-wide navigation anchor
**Pages observed:** All
**Spec:** Background `{colors.charcoal}` (#212d35) / Text `{colors.white}` (#ffffff) / Padding 57px (top)
**States observed:** Default

#### Utility Nav
**Role:** Top-tier brand links
**Pages observed:** Homepage, Pricing
**Spec:** Background `{colors.white}` (#ffffff) / Border-bottom 2px `{colors.blue-alt}` (#0094cb) / Padding 10px 15px

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px (approx) |
| Section Padding | 57px vertical |
| Grid | 12-column desktop |

## Imagery & decoration
The brand uses high-quality photography of people in professional settings (Education, Aged Care) to humanize the GRC software. Decorative elements include geometric "cube" clusters in brand colors and large-scale watermark quotes using the Gilroy typeface.

## Do's
- Use `#e30072` (Pink) for the single most important action on any page.
- Set all `h1` and `h2` headers in Gilroy 700.
- Ensure dark sections use the `#212d35` charcoal background for consistency.
- Apply a `51px` radius to all interactive buttons to maintain the "pill" aesthetic.
- Use `#22a3af` (Teal) for inline links and secondary navigation elements.

## Don'ts
- **Wrong:** Using `#0094cb` (Blue) for primary CTA backgrounds. **Right:** Use `#e30072`. **Reason:** Blue is a legacy accent, Pink is the Ideagen-era primary action color.
- Do not use sharp corners (0px radius) on buttons; these are reserved for section containers.
- Do not use Montserrat for body text; it is strictly for secondary display headers.
- Avoid using pure black `#000000` for large surface backgrounds; use Charcoal `#212d35`.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary-pink: #e30072;
  --color-primary-teal: #22a3af;
  --color-surface-charcoal: #212d35;
  --color-canvas-white: #ffffff;
  --font-display: 'Gilroy', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --radius-pill: 51px;
}
```

## Agent prompt examples
- "Generate a hero section with a charcoal `#212d35` background, a 95px Gilroy 700 headline in white, and a pill-shaped button in Ideagen Pink `#e30072`."
- "Create a 3-column resource grid using white cards with a 12px border radius and the `{shadow.card}` elevation."
- "Design a navigation bar with a 2px bottom border in `#0094cb` and menu items in Open Sans 600 weight."

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://complispace.com.au | 1440px | 2026-06-06 |
| Pricing | https://complispace.com.au/pricing | 1440px | 2026-06-06 |
| About | https://complispace.com.au/about | 1440px | 2026-06-06 |