A globe, four rising bars, and the name.
The mark reads as a globe built from ascending data columns — coverage and movement in one shape. The wordmark is Poppins SemiBold in title case, split across two colours: Area in cobalt, lytics in near-black. Never redraw it, and never set the name in live text where the lockup belongs.
The mark has no dark-ground version
The mark's bars are near-black, so it disappears on a dark panel. Set it on
a white or off-white chip, as above, or use the reversed full lockup instead.
favicon.svg does carry a prefers-color-scheme rule
that lifts the bars to #F5F7FA, but that responds to
the reader's browser theme — it does nothing for a mark you have placed on a
dark band yourself.
Keep clear space equal to the height of the globe on all four sides. Nothing — type, rule, image edge — enters it.
Below this the bars close up. Use the mark on its own instead.
Same rule: under it, the mark alone, never a squeezed lockup.
Two-tone on light grounds, solid white on dark or cobalt. There is no third version, and no all-green version.
Misuse
Don't recolour either half of the wordmark, don't set the lockup in green, don't add a drop shadow, outline, gradient or rotation, don't stretch it to fit a box, don't place the two-tone version on a dark or photographic ground, and don't rebuild the mark from the favicon at wordmark scale.
Three colours do the work. The rest are plumbing.
White is the ground, cobalt is the voice, green is the reward. Everything below those three exists to support them — darks to punctuate, slate and ink to recede, semantic colours to say what a number is doing. Click any swatch to copy its hex.
Foundation darks
Near-black bands, grounds and headings. Not navy, not charcoal-blue — a true neutral black so cobalt and green stay the only hues on the page.
Cobalt & green support
Tints and states. These are functional extensions of the two brand hues, never brand colours in their own right.
Neutral & surface
The quiet layer. Slate is a blue-grey, so it sits with cobalt instead of fighting it.
Text
Three weights of ink. Body copy is never pure black.
Semantic
Function, not brand. These say what a number is doing; they are not decoration and must not be restyled per deck.
§2.4 The single-green rule
#00C896 is the only brand green. It is used for fills,
large display type, marks and CTAs. It is bright, so anything sitting on it is
#171717 — never white.
Because it scores only 2.16:1 on white, green never carries body text on a
light ground. Use ink or cobalt there. The one exception is
#7FE6B3, which exists solely for small green type on
cobalt or near-black, where the accent itself drops below AA. It is not a brand
colour, never appears on white, and is never used as a fill.
Retired — do not use
These appear in pre-2026 files and in third-party templates that were built from them. Replace on sight. Gold and amber are avoided entirely: they read as a competitor.
#1E2A8A#212D62#212D61#131B40#F28F29#FB6E5B#E4553F#368BC9#5AAEDE#00734D#00966E#004225Every pairing, measured.
Ratios are computed against WCAG 2.2 — 4.5:1 for body text, 3:1 for large text and interface elements. Any pairing marked below AA is a layout decision, not a judgement call: change the combination rather than the colour.
| Pairing | Where it is used | Ratio | Verdict | |
|---|---|---|---|---|
| Aa | --ink on --white | Body copy on white | 17.74:1 | AA |
| Aa | --ink-soft on --white | Secondary copy on white | 10.31:1 | AA |
| Aa | --ink-muted on --white | Captions on white | 4.83:1 | AA |
| Aa | --slate on --white | Muted data on white | 5.49:1 | AA |
| Aa | --blue on --white | Links and buttons on white | 7.05:1 | AA |
| Aa | --accent on --white | Green type on white | 2.16:1 | Fails |
| Aa | --accent-hover on --white | Green hover type on white | 3.04:1 | Large text & UI only |
| Aa | --white on --blue | Reversed type on cobalt | 7.05:1 | AA |
| Aa | --accent on --blue | Green type on cobalt | 3.26:1 | Large text & UI only |
| Aa | --accent-light on --blue | Green-light type on cobalt | 4.65:1 | AA |
| Aa | --white on --dark | Reversed type on near-black | 17.93:1 | AA |
| Aa | --accent on --dark | Green type on near-black | 8.28:1 | AA |
| Aa | --verified-dark on --dark | Rising figures on near-black | 9.92:1 | AA |
| Aa | --down on --dark | Falling figures on near-black | 7.90:1 | AA |
| Aa | --on-accent on --accent | Label sitting on a green button | 8.28:1 | AA |
| Aa | --white on --accent | White label on a green button | 2.16:1 | Fails |
Poppins speaks. Inter labels. Mono counts.
Poppins carries voice — headlines, body, everything a reader reads as prose. Inter handles interface furniture where Poppins' wide geometry gets in the way. JetBrains Mono is reserved for anything that has to line up: figures, hex codes, dates, eyebrows.
Headings at 700 with tight tracking. Body at 300–400. Nothing above 800, nothing below 200.
Buttons, tabs, table headers, form labels, chips. Small sizes where legibility beats character.
Figures in tables, hex codes, dates, section eyebrows. Always with
tabular-nums where digits stack.
40–56px / -0.03em
26–38px / -0.025em
18–21px
17–18px / 1.7
15–16px / 1.7
11–12px / 0.16em
tabular-nums
The working parts.
Specimens, not suggestions. If a deck needs a button, a tag or a figure tile, it should look like one of these.
White, then a break, then white again.
Long documents alternate grounds so the eye gets a landmark. White is the default and should always be the majority; dark and cobalt bands are punctuation. Never run two coloured bands back to back.
Long enough to read as motion, short enough that nobody waits.
Cards and buttons rise on hover. Nothing scales; nothing rotates.
A slight overshoot. It is the one place the brand allows itself personality.
An auto-cycling stat, or a ticker, or a reveal. Not all three.
Say the number. Say where it came from.
The product is verified data, so the writing behaves the same way: a claim, then its evidence. Hedging reads as a company that does not trust its own database.
State the finding. "Sydney CBD net face rents rose 4.1% over the year." Not "data suggests rents may have risen".
Say where a number came from and when it was checked. The verification is the product; hiding it wastes the asset.
Write for the person doing the deal, not the person building the database. No "leveraging", no "solutions", no "unlocking".
A suburb, a date, a figure. Specificity is the tone.
The short version.
- Lead with white. Dark bands are punctuation, not the page.
- Let cobalt carry the brand and green carry the click. One green CTA per view.
- Put dark text on green —
#171717, never white. - Use green for the fact that something is verified, and let that be the reward.
- Keep numerals in the mono face wherever they line up in a column.
- Hold the type scale. Poppins 700 for headings, 300–400 for body.
- Don't set green type on white. It scores 2.16:1 and is unreadable at any size.
- Don't reach for gold or amber. That reads CoStar, and we are not CoStar.
- Don't reintroduce the navy. It is retired everywhere, including old templates.
- Don't invent a second green, a second blue or a lighter tint to fix contrast — the tint that exists is
--accent-light, and it is scoped to §2.4. - Don't stretch, rotate, recolour or add effects to the lockup.
- Don't stack more than two hues on one surface. White, one hue, ink.
Copy this, don't retype it.
The full custom-property set. Every value on this page is read from these files at build time, so if a token changes, the guide changes with it.
/* Arealytics brand tokens — white / cobalt / green */ :root { --white: #FFFFFF; --dark: #171717; --dark-deep: #0E0E0E; --dark-mid: #242424; --dark-soft: #3A3A3A; --blue: #2350C0; --blue-pale: #EAF1FB; --accent: #00C896; --accent-hover: #00A87D; --accent-light: #7FE6B3; --on-accent: #171717; --verified: #00C896; --verified-dark: #34D9A6; --down: #FF8A8A; --slate: #5E688A; --surface-alt: #F5F7FA; --border: #E5E7EB; --ink: #111827; --ink-soft: #374151; --ink-muted: #6B7280; --ff-sans: 'Poppins', -apple-system, sans-serif; --ff-ui: 'Inter', -apple-system, sans-serif; --ff-mono: 'JetBrains Mono', monospace; }
assets/brand-tokens.css
Importable custom-property sheet. The source of truth for every hex on this page.
docs/design-tokens.json
Machine-readable tokens with roles, usage notes and the retired list.
arealytics-logo.svg
Primary two-tone lockup. Paired with
arealytics-logo-white.svg for reversed use.
favicon.svg
Mark only, square. Ships alongside .ico, 192px, 512px and apple-touch rasters.
Take the files, not a screenshot.
Everything above, as artwork you can place. SVG is the master — use it wherever vector is accepted, because it stays sharp at any size and the colours stay exact. The PNGs are transparent; the number is the pixel width. Nothing here needs to be redrawn, recoloured or traced.
Both lockups in two colourways, the mark, every square social crop, the colour & type reference, and a plain-text summary of the rules.
Square crops for social
Social platforms crop to a square or a circle and reject SVG. These are pre-cropped with the right breathing room, on white and on near-black.
Sending these outside the company
The kit is fine to send to a client, a journalist, an agency or an event
organiser — that is what it is for. The logo may be used to refer to Arealytics
and its products, but not to imply endorsement, partnership or affiliation
without a written agreement. For a format that isn't here, or anything you are
unsure about, ask media@arealytics.com.au rather than improvising.