Skip to content
Book a demo

Our brand, plain and simple.

The logo, colors, type and voice we use, with the files to download.

Blue, white and navy

Every color has a name, and components use the name, never a one-off hex.

Core

  • Ocean#0B5CD5

    --color-ocean

    Buttons, links and the italic accent word on white.

  • Navy#0A2342

    --color-block-navy

    The one dark block. Light text on it.

  • Ink#16181D

    --color-ink

    Headlines and body text.

  • Paper#FFFFFF

    --color-paper

    The page.

Support

  • Ocean deep#0848A8

    --color-ocean-deep

    Hover, and small blue text.

  • Ocean tint#E6F0FC

    --color-ocean-tint

    Soft blue behind chips and highlights.

  • Ink 2#5A606B

    --color-ink-2

    Secondary text.

  • Sand#F4F7FB

    --color-sand

    A cool off-white for cards and bands. The name stays; the warm sand is gone.

  • Line#E1E7EF

    --color-line

    Hairlines and dividers.

  • Line strong#7B8696

    --color-line-strong

    Borders that must be seen: inputs and outline buttons.

Color blocks

Full-width sections alternate between white and one of these. Text on every block passes WCAG AA.

  • Block navy#0A2342

    --color-block-navy

    Deep ocean. The one dark block.

  • Block sand#EAF2FD

    --color-block-sand

    A pale blue.

  • Block sky#DCE9FB

    --color-block-sky

    A light blue.

  • Block mist#F4F7FB

    --color-block-mist

    A cool pale gray-blue.

On navy

  • Ocean light#A9CCFF

    --color-ocean-light

    The action blue and the accent word on navy.

  • Ocean lighter#D3E5FF

    --color-ocean-lighter

    Hover on navy.

  • Navy raised#10305D

    --color-navy-raised

    Cards that sit on navy.

Signals

  • Green#12A150

    --color-green

    Ticks, yes marks and savings.

  • Red#E03E3E

    --color-red

    Errors and costs.

  • Amber soft#FFF1CC

    --color-amber-soft

    The partly mark in compare tables. Text on it is #8A5A00.

Logo only

No teal anywhere else on the site (owner, 2 Oct 2026). The logo keeps its own color.

  • Brand teal#11B8AE

    --color-brand-teal

    The mark, and nothing else.

Two typefaces, one voice

Instrument Serif for the big headlines. Figtree for everything else, in 400 and 600 only.

Instrument Serif

Display. H1 and H2 in regular, with the stressed words in italic. One weight.

Figtree

Everything else. 400 for reading, 600 for titles, buttons and labels.

  • H136 to 48 px

    Hand it over.

  • H224 to 32 px

    Quoted first.

  • H320 to 24 px, 600

    Every maker is tested.

  • Title18 to 22 px, 600

    Cards and panels

  • Lead18 px

    Offshore staff on your team, and design, video and web work quoted in hours.

  • Body16 to 18 px

    We test, level and manage skilled people who work with AI.

  • Small14 px

    Labels, notes and fine print.

Sizes grow smoothly from a 375 px phone to a 1440 px desktop. Small text stays at 14 px.

Space, shape and motion

An 8 px grid, round corners and one easing. Calm on purpose.

Spacing

  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
  • 64
  • 96
  • 128
--section-y
72 to 140 px
Padding above and below every section.
--gap-head
24 to 40 px
Between a section header and its content.
--gap-cards
24 to 40 px
Between cards and columns.
--gutter
20 to 48 px
Side padding. 20 px on a phone, 48 px at 1440.
container
1240 px
Content width. 768 px for FAQs and long text.

Radius and shadow

  • Card, 20 px

    --radius-card

    Cards and panels.

  • Tile, 28 px

    --radius-tile

    Large tiles and media.

  • Pill, 9999 px

    rounded-full

    Buttons and chips.

  • Card

    --shadow-card

  • Lift

    --shadow-lift

  • Pop

    --shadow-pop

Motion

Hover to see the easing. It is switched off for people who prefer less motion.
--ease-gh
cubic-bezier(0.22, 1, 0.36, 1)
The one easing for everything that enters.
--gh-rise
24px
How far an entrance rises.
--gh-in
600ms
How long a section entrance takes.
--gh-step
70ms
The gap between the columns of a group.
animate-*
360ms
Page-load entrances, capped at 360 ms. Nothing bobs or loops.

Plain. Short. Australian.

  • Straight.

    Price first, plain terms, and the catch said out loud. No hype, and no invented numbers, proof or names.

  • Calm.

    Short sentences and no hurry, like an ops manager who has done this before. Outcome first.

  • Proud of our people.

    Skilled professionals, with levels and tests. Low prices, never cheap people.

  • Hand it over.

    The signature line. It closes a page and signs off success states, near "You direct the work". It never opens a page or replaces the offer.

  • Six talent hubs, working your hours.

    The line for the talent hubs and the world map.

The italic accent

One headline, one italic phrase: its final one to three words, with the full stop or question mark inside the italic. H1 and H2 only. Ocean on white, light blue on navy.

People you can hand work to.

Quoted first, checked twice.

Australian English everywhere. American spelling on the US site.

For press and partners

Use the logo files above as supplied, and email us for press, partners or anything you can't find here.

hello@gethands.com.auAbout Get Hands