Skip to content

Wurkhouse Brand Identity
and communications standard

BrandGuidelines

We deliver next level brand guidelines for the modern era. This ensures your brand is getting a more consistent brand experience, with a progressive and AI-driven approach.

Start exploring
01 / Our Values

Four core values that shape us.

01

Be Positive

We believe that with a positive attitude,anything is achievable. Enjoy and celebrate the good times. Be brave and learn from your mistakes. In life, a smile goes a long way.

02

Above and beyond

Our team makes the difference. We go above and beyond for our clients, being dependable, flexible, and supportive. By collaborating and sharing ideas, we tackle any challenge together.

03

Own your journey

We believe in ourselves and our team to shape our future. Lead by example, be ambitious, and stay curious. Always seek opportunities in every challenge.

04

Why so serious

We believe that being professional and having fun aren’t mutually exclusive. We encourage a little curiosity and mischief, and never take ourselves too seriously.

03 / Colour

Our main colour set

The colours that define our brand. They are used across all our communications, from digital to print, and help create a consistent and recognizable visual identity.

Primary

Dark Grey

25%

Mainly used for text and reverse backgrounds

Secondary

Blue

15%

Accent colour

Tertiary

Red

15%

Accent colour

Highlight

Teal

15%

Accent colour

Black

Black

5%

Mainly used for high contrast text and borders

White

Page

90%

Mainly used for backgrounds and neutral elements

Proportion in a typical layout
25%
15%
15%
15%
5%
90%
Accessibility

Contrast is not optional.

Every pairing below is calculated live against WCAG 2.2. Pick any cell in the matrix to preview it. Body text needs AA (4.5:1). Large display type can drop to 3:1.

Aa

The quick prism refracts the lazy light.

0.0:1AA BodyAA LargeAAA
Text colour ↓ on background →
Dark GreyBlueRedTealBlackPage
Dark Grey
Blue
Red
Teal
Black
Page

AAbody safeLlarge text only✕never for text

Gradients

Step into the light.

Gradients are a key part of our visual identity. They add depth, dimension and movement to our designs, and help create a sense of energy and dynamism. Use them sparingly, and always in the approved colour combinations.

04 / Typography

More than just words

Our typography system defines how typefaces, font weights, sizes and spacing are used across all brand communications. Use the specified fonts and styles consistently, maintaining clear visual hierarchy, legibility and spacing to ensure a cohesive and recognisable brand identity across every application.

Displaywght 400

Aa

Poppins

Headlines, big numbers, moments of personality. Tight tracking, generous size.

Textwght 400

Aa

Lora

Everything you read for more than three seconds. Interfaces, paragraphs, captions.

Utilitywght 400

Aa

Verdana

Code, data, labels and metadata. Always uppercase when used as a label.

A simple idea, a simple message, a simple solution.

Scale

A ratio you can feel.

  • text-6xl

    128px / 0.9 / -0.04em / 700

    Utilities.

  • text-5xl

    80px / 0.95 / -0.035em / 650

    for controlling

  • text-4xl

    48px / 1.05 / -0.025em / 600

    for controlling

  • text-3xl

    32px / 1.15 / -0.015em / 600

    the font size of an element.

  • text-2xl

    20px / 1.5 / -0.005em / 400

    the font size of an element.

  • text-xl

    16px / 1.6 / 0em / 400

    the font size of an element.

  • text-lg

    12px / 1.4 / 0.08em / 500

    the font size of an element.

APoppinsU+0041
Usage

Dos and don’ts.

Normal tracking

✓ Do Track display should always be normal.

Loose & airy

✕ Don’t Letter-space lowercase display type or set it light and loose.

Body copy stays left-aligned with a measure of 45–75 characters. It is easy to scan, calm to read and leaves room for the layout to breathe.

✓ Do Left-align body copy. Keep line length comfortable.

Centred paragraphs in display type with colour and italics make every single line harder to read than it needs to be.

✕ Don’t Use display type, centring or accent colour for paragraphs.
05 / Form & 3D

Materials that hold light.

In motion and 3D, the mark becomes a physical object. Five approved materials cover every channel. Drag to orbit, pick a material and an accent, then export a ready-to-use render.

Loading 3D stage…
Live render · drag to orbit
Use: Hero & launch

Material

Accent light

Auto-rotate
  1. 01

    Texturing

    Keep textures light and simple.

  2. 02

    Scaling

    Keep the scale simple and consistent.

  3. 03

    Background

    Keep renders on dark gradients so the light has somewhere to go.

  4. 04

    3D Motion

    Keep to max of 15° per second.

06 / Motion

Nothing snaps. Everything settles.

Three curves cover every interaction we make. Hover or tap a card to play it, then copy the curve straight into code.

Refract

Entrances, page transitions, large surfaces.

900ms

Settle

State changes, toggles, moving between positions.

600ms

Spark

Micro-interactions, success moments, delight.

500ms

100ms

Instant

Hover colour, focus rings

250ms

Quick

Buttons, toggles, tooltips

500ms

Moderate

Cards, panels, menus

900ms+

Deliberate

Page loads, hero reveals

07 / Voice

Our brand voice

Our brand voice defines how we communicate across all channels and touchpoints. Use consistent language, tone and messaging that reflect our brand personality, keeping communication clear, engaging and purposeful.

You are all set. Let’s build something clear.

On brand
CorporateClear & warmChaotic

Words we use

  • Clear
  • Build
  • Light
  • Together
  • Precise
  • Simple

Words we avoid

  • Synergy
  • Disrupt
  • Leverage
  • Revolutionary
  • Utilise
  • Best-in-class
08 / Downloads

Everything, in one place.

Logo pack

Every lockup,
every colourway.

4 lockups × 6 colourways, generated as SVG straight from the source.

Design tokens

Colour, type & motion