01 · Brand & Style Guide

Foundations

The visual language of Superteam Australia. Every token, scale, and rule defined as a variable. So light/dark, spacing, and colour stay consistent across every screen and component, and developers ship from a single source of truth.

Logo & Mark

The Superteam word-mark with the kangaroo identifier. Use the white version on dark surfaces, the dark version on light surfaces. Native SVG with true transparent background. Drop in at any size.

On Dark · Light Wordmark

On Light · Dark Wordmark

Colour

Brand palette led by gold and green over a clean neutral foundation. AU accents extend the palette for editorial moments. Every swatch below is bound to a primitive variable. Devs see the token name in Figma Inspect.

Primary · Brand

Gold#FECE00--brand-primary

Green#00833E--brand-secondary

Black#000000--neutral-1000

White#FFFFFF--neutral-0

Gold · Ramp

Gold 50#fffbea--gold-50

Gold 100#fff3c2--gold-100

Gold 200#ffe680--gold-200

Gold 300#ffd83d--gold-300

Gold 400#fece00--gold-400

Gold 500#e5b900--gold-500

Gold 600#b89400--gold-600

Gold 700#8a6f00--gold-700

Gold 800#5c4a00--gold-800

Gold 900#2e2500--gold-900

Green · Ramp

Green 50#e8f6ee--green-50

Green 100#c5e8d2--green-100

Green 200#8fd3a8--green-200

Green 300#4fb97a--green-300

Green 400#1b9a55--green-400

Green 500#00833e--green-500

Green 600#006b32--green-600

Green 700#005226--green-700

Green 800#003a1b--green-800

Green 900#00210f--green-900

Neutral · Ramp

White#ffffff--neutral-0

Neutral 50#fafafa--neutral-50

Neutral 100#f4f4f5--neutral-100

Neutral 150#ececee--neutral-150

Neutral 200#e4e4e7--neutral-200

Neutral 300#d4d4d8--neutral-300

Neutral 400#a1a1aa--neutral-400

Neutral 500#71717a--neutral-500

Neutral 600#52525b--neutral-600

Neutral 700#3f3f46--neutral-700

Neutral 800#27272a--neutral-800

Neutral 900#18181b--neutral-900

Neutral 950#0a0a0b--neutral-950

Black#000000--neutral-1000

AU · Earth & Ocean

Ochre#c97b3c--au-ochre

Reef#0098b5--au-reef

Eucalypt#6b8e5a--au-eucalypt

Sand#efe3cf--au-sand

Ironbark#2a2520--au-ironbark

Feedback · States

Success#00833e--feedback-success

Warning#f59e0b--feedback-warning

Error#dc2626--feedback-error

Info#2563eb--feedback-info

Semantic Tokens

These are the tokens you use in production. Each maps to a primitive in Light mode and another in Dark mode, so toggling the theme cascades through every component automatically.

Surface

surface/baseLight → neutral/white · Dark → neutral/950

surface/subtleLight → neutral/50 · Dark → neutral/900

surface/mutedLight → neutral/100 · Dark → neutral/800

surface/inverseLight → neutral/950 · Dark → neutral/white

surface/brandLight → gold/400 · Dark → gold/400

surface/brand-subtleLight → gold/50 · Dark → gold/900

surface/accentLight → green/500 · Dark → green/500

surface/accent-subtleLight → green/50 · Dark → green/900

Border

border/subtleLight → neutral/150 · Dark → neutral/800

border/defaultLight → neutral/200 · Dark → neutral/700

border/strongLight → neutral/300 · Dark → neutral/600

border/brandLight → gold/400 · Dark → gold/400

border/accentLight → green/500 · Dark → green/500

border/focusLight → gold/400 · Dark → gold/300

Text

text/primaryLight → neutral/950 · Dark → neutral/50

text/secondaryLight → neutral/600 · Dark → neutral/300

text/tertiaryLight → neutral/500 · Dark → neutral/400

text/disabledLight → neutral/400 · Dark → neutral/600

text/inverseLight → neutral/white · Dark → neutral/950

text/brandLight → gold/600 · Dark → gold/300

text/accentLight → green/500 · Dark → green/300

text/on-brandLight → neutral/950 · Dark → neutral/950

text/on-accentLight → neutral/white · Dark → neutral/white

text/linkLight → green/500 · Dark → green/300

Feedback & AU Accents

feedback/successLight → feedback/success · Dark → feedback/success

feedback/warningLight → feedback/warning · Dark → feedback/warning

feedback/errorLight → feedback/error · Dark → feedback/error

feedback/infoLight → feedback/info · Dark → feedback/info

au/ochreLight → au/ochre · Dark → au/ochre

au/reefLight → au/reef · Dark → au/reef

au/eucalyptLight → au/eucalypt · Dark → au/eucalypt

au/sandLight → au/sand · Dark → au/sand

au/ironbarkLight → au/ironbark · Dark → au/ironbark

Typography

Inter for everything. Display weights stay light for calm authority. Body weights stay regular for readability. Every step in the scale below also exists as a published text style. Use those in production for consistent line-heights and letter-spacing.

Display/2xl

128/132 · Light

.display-2xl

Building Solana in Australia

Display/xl

96/100 · Light

.display-xl

Building Solana in Australia

Display/lg

72/80 · Light

.display-lg

Building Solana in Australia

Display/md

56/64 · Light

.display-md

Building Solana in Australia

Heading/h1

48/56 · Semi Bold

.heading-h1

Programs & grants for builders

Heading/h2

36/44 · Semi Bold

.heading-h2

What we fund this quarter

Heading/h3

28/36 · Semi Bold

.heading-h3

Member spotlight

Heading/h4

22/30 · Semi Bold

.heading-h4

Upcoming events

Body/xl

20/32 · Regular

.body-xl

Superteam Australia is a community of builders, founders, and creators advancing the Solana ecosystem from the Pacific.

Body/lg

18/28 · Regular

.body-lg

Body text at large size — used for intros and lead paragraphs.

Body/md

16/26 · Regular

.body-md

Body text at default size — the standard for most reading.

Body/sm

14/22 · Regular

.body-sm

Smaller body — captions, secondary content, meta data.

Label/lg

14/20 · Medium

.label-lg

Form label · large

Label/md

13/18 · Medium

.label-md

Form label · medium

Label/sm

12/16 · Medium

.label-sm

Form label · small

Caption

11/14 · Medium

.caption

Caption · uppercase · used sparingly

Spacing

A 4-pixel base scale. Padding, margin, gap all from this list. Published as variables so you can bind component padding instead of hardcoding pixel values.

space-00px

space-px1px

space-half2px

space-14px

space-28px

space-312px

space-416px

space-520px

space-624px

space-832px

space-1040px

space-1248px

space-1664px

space-2080px

space-2496px

Radius

Subtle on every surface. The maximum radius is 10px — no exceptions. Rectangular shapes communicate precision and authority. Apply radius-sm to chips and badges, radius-md to inputs and small cards, and radius-lg or radius-xl to large surfaces.

radius-none0px

radius-xs2px

radius-sm4px

radius-md6px

radius-lg8px

radius-xl10px (max)

Elevation

Shadows are subtle. They guide attention without dominating the layout. Reserve heavier elevation for modals, popovers and hover states.

elev-none

elev-sm

elev-md

elev-lg

elev-xl