Skip to content
Get a free speed check

Brand kit

The Unstackers logo, mark, colours, type and voice. The colours and sizes are read from the site's own stylesheet, so they always match the live site.

Mark

Two blocks step apart and settle onto one clean line. A 16-unit grid, so it holds at 16px.

  • 64px, animated once

  • 64px

  • 32px

  • 16px

  • unstackers.com

    Favicon

Colour

Ink, white and one go green. Green marks the logo, checks and status dots. It is never a text colour: on the light page it reaches 3.19:1, and text needs 4.5:1.

Light

:root, .light

  • --background

    Page

    oklch(0.993 0.002 95)

    #fdfdfb

  • --foreground

    Body text and headings

    oklch(0.185 0.006 265)

    #111315

  • --card

    Cards and panels

    oklch(1 0 0)

    #ffffff

  • --card-foreground

    Text on cards

    oklch(0.185 0.006 265)

    #111315

  • --popover

    Menus and popovers

    oklch(1 0 0)

    #ffffff

  • --popover-foreground

    Text in menus

    oklch(0.185 0.006 265)

    #111315

  • --primary

    Main button

    oklch(0.185 0.006 265)

    #111315

  • --primary-foreground

    Text on the main button

    oklch(0.985 0.002 95)

    #fafaf9

  • --secondary

    Soft buttons and badges

    oklch(0.955 0.003 95)

    #f1f0ee

  • --secondary-foreground

    Text on soft buttons

    oklch(0.185 0.006 265)

    #111315

  • --muted

    Wells and quiet fills

    oklch(0.965 0.003 95)

    #f4f3f1

  • --muted-foreground

    Secondary text and field edges

    oklch(0.47 0.008 265)

    #595b5f

  • --accent

    Hover fills

    oklch(0.955 0.02 150)

    #e7f4e9

  • --accent-foreground

    Text on hover fills

    oklch(0.3 0.06 150)

    #14361d

  • --destructive

    Errors

    oklch(0.577 0.215 27)

    #dc2627

  • --border

    Lines and dividers

    oklch(0.185 0.006 265 / 10%)

    #1113151a

  • --input

    Outline button and badge edges

    oklch(0.185 0.006 265 / 15%)

    #11131526

  • --ring

    Focus ring

    oklch(0.61 0.16 150)

    #1a9d4b

  • --brand

    Mark, checks and dots

    oklch(0.63 0.17 150)

    #0fa44d

  • --brand-foreground

    Text on brand green

    oklch(0.185 0.006 265)

    #111315

Dark

.dark

  • --background

    Page

    oklch(0.165 0.005 265)

    #0d0e11

  • --foreground

    Body text and headings

    oklch(0.97 0.003 95)

    #f6f5f3

  • --card

    Cards and panels

    oklch(0.205 0.006 265)

    #16171a

  • --card-foreground

    Text on cards

    oklch(0.97 0.003 95)

    #f6f5f3

  • --popover

    Menus and popovers

    oklch(0.205 0.006 265)

    #16171a

  • --popover-foreground

    Text in menus

    oklch(0.97 0.003 95)

    #f6f5f3

  • --primary

    Main button

    oklch(0.97 0.003 95)

    #f6f5f3

  • --primary-foreground

    Text on the main button

    oklch(0.185 0.006 265)

    #111315

  • --secondary

    Soft buttons and badges

    oklch(0.25 0.006 265)

    #202225

  • --secondary-foreground

    Text on soft buttons

    oklch(0.97 0.003 95)

    #f6f5f3

  • --muted

    Wells and quiet fills

    oklch(0.23 0.006 265)

    #1b1d20

  • --muted-foreground

    Secondary text and field edges

    oklch(0.7 0.008 265)

    #9c9ea4

  • --accent

    Hover fills

    oklch(0.28 0.04 150)

    #1a2e1e

  • --accent-foreground

    Text on hover fills

    oklch(0.9 0.08 150)

    #b9eec2

  • --destructive

    Errors

    oklch(0.704 0.191 22.216)

    #ff6467

  • --border

    Lines and dividers

    oklch(1 0 0 / 10%)

    #ffffff1a

  • --input

    Outline button and badge edges

    oklch(1 0 0 / 15%)

    #ffffff26

  • --ring

    Focus ring

    oklch(0.74 0.17 150)

    #47c86e

  • --brand

    Mark, checks and dots

    oklch(0.76 0.18 150)

    #44d070

  • --brand-foreground

    Text on brand green

    oklch(0.185 0.006 265)

    #111315

Type

Geist for headings and text, and the system mono for labels and code. Headings are semibold and set tight.

Geist

One variable font, weights 400 to 700, under the SIL Open Font License. It sets every heading and paragraph.

System mono

The device's own monospace font, for labels and code. It adds nothing to download.

  • display

    font-display text-display

    Kept fast.

  • title

    font-display text-title

    One plan keeps it fast.

  • heading

    font-display text-heading

    Care

  • lead

    text-lead

    We take the tech off your plate.

  • body

    text-base/7

    More calls and forms from the visitors you already get.

  • label

    font-mono text-xs/5 tracking-wide uppercase

    Monthly report

Shape

Small, crisp corners. Every step comes from one radius, --radius: 0.375rem.

  • rounded-sm

    calc(var(--radius) - 4px)

  • rounded-md

    calc(var(--radius) - 2px)

  • rounded-lg

    var(--radius)

  • rounded-xl

    calc(var(--radius) + 4px)

Components

The parts the site is built from, in both themes. Form fields take the secondary text colour for their edge, so the edge is easy to see.

Light

Badges and kind labels

CareMonth to monthDemo build, not a clientPilot projectClient

Card

Care
Your site, kept fast and looked after.

Hosting, updates and speed fixes every month, with a plain-English report.

Field

Report card

Monthly report

Your site this month

Speed check
Passed
Updates
Applied
Uptime
No outages
Backups
Saved

Check list

  • Speed checks, and fixes when speed slips
  • Hosting, backups and updates
  • A plain-English report every month

Dark

Badges and kind labels

CareMonth to monthDemo build, not a clientPilot projectClient

Card

Care
Your site, kept fast and looked after.

Hosting, updates and speed fixes every month, with a plain-English report.

Field

Report card

Monthly report

Your site this month

Speed check
Passed
Updates
Applied
Uptime
No outages
Backups
Saved

Check list

  • Speed checks, and fixes when speed slips
  • Hosting, backups and updates
  • A plain-English report every month

Voice

Five rules for everything Unstackers writes.

  1. 01

    Use the owner's nouns: website, Google listing, calls, forms.

    Say
    More calls and forms.
    Not
    More conversions.

  2. 02

    Show receipts, not adjectives.

    Say
    Shows in under 2.5 seconds on a phone.
    Not
    Blazing fast.

  3. 03

    Say what is not included.

    Say
    App Care covers no new features.

  4. 04

    One idea per sentence. No hype.

    Say
    Care is month to month. It is billed in advance.

  5. 05

    Never promise a percentage or a search position.

    Say
    We promise speed, not a position.

About Unstackers

Three lengths, ready to paste into a profile or a directory listing.

25 words

Unstackers rebuilds slow WordPress sites so they show in under 2.5 seconds on a phone, then keeps them fast every month. Clients own their sites.

50 words

Unstackers takes the tech off a small business owner's plate. It rebuilds slow WordPress sites so they show in under 2.5 seconds on a phone, and monthly Care keeps them fast, backed up and up to date. It builds small apps for home-services businesses. Clients own their site and data.

100 words

Unstackers takes the tech off a small business owner's plate. It rebuilds slow WordPress page-builder sites at a fixed price, so the main pages show in under 2.5 seconds on a phone. If they don't within 28 days of launch, the fixes are free. After launch, Care covers hosting, updates, backups and a plain-English report every month. When speed slips, Unstackers fixes it. For home-services businesses, it also builds small apps that send leads to the CRM, sync their job software or email the owner a weekly report. Clients own their domain, business accounts, site and data from day one.