OpenStreamLog in
Design system

One palette, one type scale, one way to compose a page.

A colour per market: blue is NBN, yellow is energy, neutral is chrome, ink is contrast, and a single blue for every action. Everything on this page is the live component, so if it looks right here it looks right on the site.

OpenStream

Colour

Bands carry meaning by section, never by status. The action blue is the only saturated colour, used for the one thing to do on a surface and for savings figures. In dark mode every pastel becomes a shade of slate or deep blue; nothing warm, nothing brown. Toggle the theme in the header to see it.

NBN
Every broadband surface: the funnel, the plans, the hand-off.
var(--pastel-nbn)
Energy
Every electricity and gas surface, so the market is readable before a word is.
var(--pastel-energy)
Neutral
Chrome that belongs to neither market: header, footer, chips, alerts, quiet panels.
var(--pastel-neutral)
Ink
Contrast blocks and the current step.
var(--ink)
Action
Blue, white text. Buttons, the current progress segment, focus rings, the logo sweep. --brand
Positive
Save $29.10/mo
Savings and confirmations in text. Same hue as the action colour. .text-positive
Negative
86% of plan speed
Status only, in data tables. Never decoration. .text-negative

Type

Geist for everything, bold and tight for headings, regular for copy, tabular figures for numbers. Eight roles cover every page.

Display
40 / 52 / 64px · 700, -0.035em
One per page: the hero headline.
Headline for a band
32 / 40px · 700, -0.03em
Band titles and page titles.
Card title
20px · 700, -0.02em
Card and section titles.
Subtitle for an option
17px · 600, -0.01em
Option names, labels that lead.
The lede carries the one sentence under a headline.
17 / 19px · 400, muted
The sentence under a headline.
Body copy explains one thing per sentence and never shouts.
15px · 400
Paragraphs and form copy.
Price read from the provider's site on 2026-10-14.
13px · 400, muted
Sources, dates, footnotes.
Eyebrow label
11px · 600, caps, +0.12em
Section tags above a headline.
Big number
$1,180
over three years
Small number
455
priced plans
Tabular numbers
$65.00 · $69.90 · $85.90
Figures align in columns with .num.

Composition

A page is a stack of bands. A band holds a headline, a lede and either one floating card or a grid of them. Cards never sit directly on white; white sits inside a band.

Spacing
--gap-stack
12px
between lines inside a card
--gap-block
20px
between cards in a grid
--gap-section
20px
between bands on a page
--pad-card
20px / 28px
inside a floating card
--pad-band
40px / 56px / 72px
inside a band, by breakpoint
Radius and elevation
band 28
card 24
pill
circle
One shadow, on floating cards only. Borders are hairlines inside cards, never around them.
Layouts
Hero
band · headline + lede · one float
Results
band · headline · grid of 3 floats · capture
Listing
header · sidebar rail · hero band · table

Components

Each one in its real state. Primary actions are blue pills; secondary are white pills on a band or outlined inside a card.

Actions
Primary Secondary
One blue action per surface. A second action is always white or outlined.
Progress
Step 3 of 3
  1. Where
  2. What you pay
  3. Best switches
  1. Where
  2. What you pay
  3. 3Best switches
  • ✓Jan
  • ✓Feb
  • Mar
  • Apr
  • May
  • Jun
Inputs and badges
Our pick$69.90 for 12 mointro ends 4 Nov Alerts on
Option card
Cheapest first yearOur pick
Kogan Internet NBN 500
$69.90/mo for 12 mo, then $85.90
Save $29.10/mo · $349 first year · $664 over 3 years
Switch

Refinement: the four details

What makes a surface read as made rather than assembled is not more decoration, it is four quiet decisions, and each one is a token so no page can arrive at its own version. The card on the right uses all four; nothing on it is a one-off style.

  1. Two shadows, not one.
    A 1px contact shadow sits the card on something; a wide, soft ambient one lets light around it. One shadow alone reads as a sticker. --shadow-contact + --shadow-ambient, composed into --shadow-card.
  2. Tinted, never black.
    Both layers are mixed from the page's own ink. Pure black over a tinted ground reads as dirt.
  3. One hairline inside a card.
    --hairline is 7% ink, lighter than --border, which stays the edge of a control. A rule as dark as a border turns a card into a table.
  4. Rules reach the edges.
    .card-rule-bleed, .card-head and .card-foot run their hairline the full width, which is what turns padding into three zones. The card still has no border: its edge is its shadow.
NBN 100 is $79 a month at its cheapest today.
Head, body and foot, divided by one hairline each. The body carries the weight; the bands are chrome.
Read from the provider's page4 Nov 2026, 9:05 am
The panel behind the card is .ground: a 3% tint of ink. A white card on a white page is a border, not a card - the tint is what makes it raised, and 3% is the whole effect.

Rules that settle arguments.

  1. Bands mean sections, not status.
    Sun welcomes, sky informs and confirms, cloud groups. A red band never exists.
  2. One blue per surface.
    If two things are blue and clickable, one of them is wrong.
  3. White floats on colour.
    Cards sit on bands. A white card on a white page is a border, not a card.
  4. Numbers are the hero.
    Big, bold, tabular, with the unit small beside them and the source in a caption.
  5. Every number cites.
    Date and source sit next to the value, in caption, never hidden.
  6. Honest empty states.
    A dash, a pending pill, or a sentence saying why. Never a guess.

Open pricing means Australians can be better informed, and save more.

Most comparison sites show a fraction of the market: the providers that pay to be listed. OpenStream tracks every NBN brand on NBN Co's register, 149 NBN brands on the register, with 431 priced NBN plans re-read every hour. Nothing is promoted, every price links to the page it came from, and the whole dataset is free to download.

  • 149
    NBN brands on the register
  • 431
    priced NBN plans
  • 0
    promoted rows
  • 100%
    of prices cite their source