Arealytics — Brand & Design System

01 · Colour Palette

All colours are defined as CSS custom properties. The primary palette drives brand recognition; the neutral palette handles typography and UI surfaces.

Primary

Dark Blue--dark
#212D62

Dark Deep--dark-deep
#161D40

Dark Mid--dark-mid
#1C2750

Coral--coral
#00C896

Coral Hover--coral-hover
#00B083

Blue Scale

Blue--blue
#2E6FD6

Blue Light--blue-light
#77A1E4

Blue Pale--blue-pale
#EAF1FB

LinkedIn–
#0A66C2

Affiliates BG–
#E6FAF4

Neutrals

Ink--ink
#111827

Ink Soft--ink-soft
#374151

Ink Muted--ink-muted
#6B7280

Surface Alt--surface-alt
#F7F9FC

Border--border
#E5E7EB

02 · Typography

Primary

Poppins

Weights: 200, 300, 400, 500, 600, 700, 800

Monospace

JetBrains Mono

Weights: 400, 500 · Labels, eyebrows, data

H1 — Hero

clamp(2.4–4rem)
700 weight
−0.03em tracking

Australia's CRE.

H2 — Section

clamp(1.9–2.8rem)
700 weight
−0.028em tracking

Connected. Verified.

H3 — Card / Sub

1.05rem
600 weight
1.35 line-height

Property Universe — every commercial asset in Australia.

Lede / Intro

clamp(1–1.1rem)
300 weight
1.78 line-height

Built for every commercial real estate decision — investment, leasing, valuation, development, finance.

Body

0.9rem
300–400 weight
1.7 line-height

Arealytics data is compiled directly from title registries, council records, and direct market participants — not scraped from listing portals. Core records refresh weekly.

Small / Legal

0.78rem
400 weight
var(--ink-muted)

Eyebrow

0.68rem · Mono
500 weight
0.16em tracking · UC

Our Foundation · Data Intelligence

Mono / Data

0.82rem · JetBrains
500 weight

12.4% ▲ 0.3% · Sydney CBD Office Vacancy

03 · Buttons

Default size · border-radius: 6px

Speak with us today → Explore the data foundation Request a demo → Share on LinkedIn

Ghost variants (on dark background)

Speak with us today → Explore the data foundation

Size variants

Small → Default → Large →

04 · Badges & Chips

Article / content tags

Announcement Partnership Product Team Coming soon Always Active Required

Filter chips

All Newsroom Articles Reports Case Studies

05 · Cards

Article / newsroom card · border-radius: 12px

Announcement3 min read

Arealytics strengthens its national Field Research Team.

A fleet of branded vehicles and advanced drone technology deployed across five capital cities.

Partnership2 min read

New API integration brings Arealytics data into major CRE platforms.

Three leading commercial real estate software platforms have integrated our API.

Product3 min read

Introducing Submarket Alerts — real-time signals when your markets move.

Set thresholds on vacancy, rent, or yield and get alerted the moment a submarket crosses your trigger.

Partner / affiliate card

CTA band

Get started

Explore how we can help you.

Talk to our team about coverage, delivery options, and pricing for your use case.

Speak with us today → Explore the data foundation

06 · Form Elements

First name *

Work email *

Which best describes your role?

How can we help?

* Required fields

Submit →

Input states

07 · UI Components

Data ticker

Sydney CBD Office Vacancy12.4%▲ 0.3%

National Industrial Vacancy2.1%▼ 0.1%

Sydney Prime Office Rent$1,156/m²▲ 2.8%

National Sales Volume$4.8B▼ 6.2%

Social button & floating login tab

Login

Border radius scale

4px
Tags

6px
Buttons

8px
Inputs

12px
Cards

14px
CTA band

16px
Cover

999px
Social btn

08 · Spacing Scale

4px · Tag padding-block, micro gaps

8px · Button icon gap, small chip padding

12px · Nav gap, footer legal gap

16px · Card grid gap, col header margin-bottom

24px · Article grid gap, footer-top gap

32px · Footer cols gap

48px · Footer-top margin-bottom, section-sm

64px · Footer padding-block start

clamp(72–120px) · Full section padding-block

1200px · Max wrap width · clamp(20–48px) inline padding

09 · Shadow & Elevation

Flatborder: 1px solid var(--border)

Coral button0 4px 14px rgba(0,200,150,0.32)

Dropdown0 8px 24px rgba(33,45,97,0.12)

Card hover0 10px 32px rgba(33,45,97,0.1)