Brand Kit

Identity system, colour palette, typography, components and design principles for Netr.

02 — Colour Palette

Primary Green
#117D44
oklch(0.55 0.15 153)
Primary · Buttons · Active states
Deep Ink
#141424
oklch(0.14 0.025 265)
Dark mode BG · Headings
Signal Red
#DC2626
oklch(0.577 0.245 27)
Destructive · Errors · Alerts
Sky
#0284C7
Amber
#D97706
Background
#FAFAF8
Border
#E5E5E2
Role accent colours

These colours are used exclusively for role badges and categorisation. They are functional, not brand-level colours.

Colour Rules

Green anchors
every screen.

  • Primary green for interactive elements: buttons, links, active states
  • Role accent colours (sky, amber, violet, etc.) for badges and categorisation only
  • Limit to one accent colour per component alongside green
  • White text on Green and Dark backgrounds
  • Dark text on light surfaces — never green text on amber
White on GreenAA
White on InkAAA
Ink on BackgroundAAA
Green on Green-lightAA
Green on Dark CardAA

03 — Typography

Primary Typeface
Aa Bb Cc
Outfit · 300 – 800
Headings · Body · Buttons · UI
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
0123456789!?.,
Type Scale
Display Netr 3.5rem / 800
Heading 1 Not another group 2.25rem / 800
Heading 2 Verified Profiles 1.5rem / 700
Body Organised, private and actually useful. 1rem / 400
Caption 3 unread messages 0.875rem / 400
Secondary Typeface — IBM Plex Mono
LABELS / BADGES / TIMESTAMPS / DATA
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 !?.,@#%

Use sentence case for UI.
Reserve title case for marketing.

Min body text: 14px for UI, 16px for marketing — Line height: 1.5× body, 1.1× headings — Never stretch or condense either face.

04 — Visual System

Primary Typeface
Aa Bb Cc
Outfit ExtraBold
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
0123456789
Colour Story
#117D44
#141424
#DC2626
#0284C7
#D97706
UI Philosophy

Clean surfaces. Purposeful interactions.
Built for professionals in a hurry.

#
🔒
Dark Mode

Full dark mode support.
oklch-based colour system.

Deep blue-ink backgrounds with carefully tuned contrast.
Every token maps to both light and dark variants via CSS custom properties.

Voice & Tone

Trusted. Sharp. Grounded.

05 · Voice & Tone

Three words anchor everything we write: Trusted, Sharp, Grounded. A fourth principle, Peer-voiced, governs who the writer is. Imagine a senior broker who's seen ten cycles writing every line. That's the voice.

Trusted
Confidence without bombast

We're built on verification, not hype. Speak with the certainty of someone who knows their stuff, but never oversell. If the honest answer is "it depends," say that.

Sharp
Specific over generic

Real broker language is the brand. Comm refi, clawback, serviceability, PD day. If a passing outsider only half-follows the copy, we're doing it right. Generic SaaS phrases are the enemy.

Grounded
Present-tense, practical

We help with today's deal, not tomorrow's transformation. "Solve this deal" not "transform your business." Plain Australian English, no aspiration, no slogans. The product does the work.

Peer-voiced
Written by someone who's been there

Dry warmth. Dry humour only when it earns its keep. Never cute, never corporate. We write to a colleague, not at a user. If a line sounds like marketing wrote it, rewrite it.

06 · Microcopy

Voice lives in the small moments. Greetings, empty states, errors, success messages. These are the lines that decide whether the product feels written for brokers or written at them.

Sign-in greeting
Avoid Welcome back!
Better Welcome back. 3 new replies in #scenarios-vic since you logged in.
404 page
Avoid Page not found.
Better Looks like that one fell through. Let's get you back to the network.
Send error
Avoid Unable to send message.
Better Message didn't go through. Check your connection, we'll hold your draft.
Empty channel
Avoid No messages yet.
Better No one's posted in here yet. Be the first to drop a scenario.
Post created
Avoid Post created successfully.
Better Posted. We'll ping you when someone replies.
Profile completion
Avoid Complete your profile (44%).
Better Brokers with photos get 3x more replies. You're four fields away.

07 · Design Principles

01
Speed over ceremony

Brokers check this between client calls. Every interaction should feel instant. Reduce steps, eliminate friction.

02
Professional but approachable

Rounded corners and clear hierarchy make it feel friendly. Clean layouts and muted tones keep it professional. Both matter.

03
Identity at a glance

Role badges, state indicators, and verified markers let you know who you're talking to before reading a word.

04
Privacy by default

No ads, no tracking, no data harvesting. The design should reinforce this — no dark patterns, no growth hacks, no nagging.

05
Dark mode is equal

Dark mode isn't an afterthought — it's a first-class citizen. Every component, every colour, every shadow works in both modes.

08 · What Netr is not

What we don't do is part of what we are. Brokers aren't a habit-loop audience and we don't pretend they are. These five anti-patterns keep the product honest.

Not Netr
No streaks or login flames

Brokers come back for work, not to feed a counter. Their next deal is the only streak that matters. We won't guilt anyone into showing up.

Not Netr
No mascots or characters

We speak as a peer, not through a cartoon. The brand voice is the personality. If we ever feel the urge to draw an animal, we delete the file.

Not Netr
No XP, points, or levels

Reputation here is earned in real conversations with real peers. We won't reduce credibility to a number that goes up. Badges, when used, name a real status, not a score.

Not Netr
No engineered FOMO

No "don't miss out!" No infinite scroll designed to trap. No notifications crafted to manufacture anxiety. We respect that the reader has a job and clients waiting.

Not Netr
No corporate veneer

No stock-photo handshakes. No "leverage your network." No purple gradients pretending to be innovation. This was built for brokers, not adapted from a generic template.

09 · UI Components

Buttons

Status Badges

Active Needs Review In Progress New Admin Verified

Role Badges

Broker Lender Accountant Lawyer Planner Agent

Content Card

# residential-nsw · 42 members
Commercial refis and mixed-use deals

Input Fields

Full name
Company

Chat Message Preview

# residential-nsw
SB
Sarah B. Broker
Anyone had luck with commercial refis through Macquarie lately?
MK
Mark K. Lender
Yeah, DM me the details and I'll run it past credit.
Message #residential-nsw...

10 · Motion & Animation Tokens

Standard Ease
cubic-bezier(0.16, 1, 0.3, 1) · 0.6s
Cards · panels · focus transitions
Smooth Ease
cubic-bezier(0.2, 0.8, 0.2, 1) · 0.7s
Channel switching · navigation slides
Quick Ease
ease · 0.2–0.3s
Hover states · border colour changes
Fade In Up
translateY(24px) + opacity · 0.6s ease-out
Section reveal · scroll-triggered · staggered
Ambient Float
translateY 0 ↔ -8px · 4s ease-in-out infinite
Hero preview card · landing page only

11 · Spacing & Radius

4pt / 8pt Spacing Grid
space-1
4px — tight inline gaps
space-2
8px — icon & badge spacing
space-3
16px — component padding
space-4
24px — card padding
space-5
32px — between components
space-6
48px — between sections
space-7
64px — page margins
Border Radius Tokens

Generous radius creates approachability. Each token maps to a component type. Base radius: 0.75rem (12px).

8px
r-sm
Badges
12px
r-md
Inputs / Cards
16px
r-lg
Buttons / panels
24px
r-xl
Panels / Modals
999px
r-pill
Nav pills / Tags
Brand Identity System v1.0
2026