Goodjob / Living design system

Good by design.

The same capable pair of hands, with a different energy. Cobalt blue, direct language and useful interactions make Goodjob a practical next step for small businesses.

This page uses the site’s production tokens and component styles. Change the source tokens to change the system.

01 / Identity

A shared family, its own voice.

Use “Goodjob” in running text. Preserve the supplied artwork and its proportions. Keep clear space of at least the wordmark’s cap height. The hand retains its gold colour; do not recolour it as a status indicator.

02 / Colour

Roles, not one-off choices.

canvas

--color-canvas
#ffffff

surface

--color-surface
#f0f3ff

ink

--color-ink
#191b22

muted

--color-muted
#5c6072

line

--color-line
#d7dceb

accent

--color-accent
#2448ff

on-accent

--color-on-accent
#ffffff

success

--color-success
#176243

danger

--color-danger
#a02639

Use accent for the hero, primary actions and focus. Use ink for text, muted for secondary information, and surface for grouped work. Success and danger always include a text explanation.

03 / Typography

Direct first. A little personality.

Inter / Body and headings

Make your next move a good one.

Inter is loaded from Google Fonts, with Arial and Helvetica fallbacks. Main text starts at 16px. Regular interface labels start at 14px.

Georgia / Expressive emphasis

A good idea, taking shape.

Georgia is a system font. Use it sparingly for hero emphasis and the document preview.

System monospace / Wayfinding

01 / FROM A THOUGHT TO A PLAN

Utility labels use the operating system’s monospace font. Small metadata is secondary, never the only place essential information appears.

04 / Actions and input

Clear choices. Visible feedback.

Build your brief ↗Meet John ↗

Your ideaBudgetA clear statement of what this choice means.

Something needs another look. Your answers are saved.

Your summary is ready to review.

05 / Builder patterns

Questions lead. The brief follows.

Big idea? Small frustration?

Make a better impressionDesign

Build something usefulDevelopment

Let’s work togetherSend it to John ↗A free enquiry, explicitly submitted.Take it from hereGet the full pack A$29A separate purchase. PDF + editable DOCX.

The working brief builder is the reference for current interaction behaviour, including the live document preview, step navigation and payment form.

06 / Spacing, layout and motion

One rhythm, across the site.

--text-small

.875rem

--text-body

1rem

--text-lead

clamp(1.125rem, 1.8vw, 1.45rem)

--text-display

clamp(3.5rem, 8.4vw, 8.5rem)

--space-1

.25rem

--space-2

.5rem

--space-3

.75rem

--space-4

1rem

--space-6

1.5rem

--space-8

2rem

--space-12

3rem

--space-16

4rem

--space-24

6rem

--layout-width

1400px

--layout-gutter

clamp(1.25rem, 5vw, 5rem)

--radius-control

.4rem

--radius-panel

.75rem

--motion-fast

160ms

--motion-slow

600ms

--motion-ease

cubic-bezier(.22, 1, .36, 1)

--motion-fast

0ms

--motion-slow

0ms

Keep the hero expressive and the working surface calm. Desktop pairs questions with a preview; mobile stacks them. Use the spacing scale rather than new arbitrary gaps. Motion supports orientation, stops for reduced-motion preferences, and never blocks an action.