Skip to main content

Style guide

The Digital Handover design system

Every colour, size and component the site is built from, in one place. Direction C, Heather: Orcadia Design’s typeface, inks and sands, with its own heather accent.

Tokens live in app/globals.css. Components live in components/. Where each Orcadia value came from is listed in brand/orcadia-sources.md. This page is hidden from search engines.

Colour

Orcadia’s inks and sands do most of the work. Heather is the one accent: the main button, links, the wordmark’s full stop and focus rings. Use it sparingly so it keeps its meaning.

Orcadia foundations

Copied from the Orcadia Design project. If the Orcadia brand changes, update these first.

  • Ink

    ink #132c36

    Headings, text on light, dark bands, secondary buttons

    From Orcadia app/globals.css

  • Slate

    slate #395662

    Body text

    From Orcadia app/globals.css

  • Muted

    muted #55676f

    Small print, hints, field borders

    From Orcadia app/globals.css

  • Sand

    sand #f5f3ee

    Page background

    From Orcadia app/globals.css

  • Stone

    stone #e8e5de

    Quiet bands

    From Orcadia app/globals.css

  • Mist

    mist #c9d3d6

    Body text on Ink

    From Orcadia app/globals.css

  • White

    white #ffffff

    Cards, fields, the report

Heather

The Digital Handover’s own accent. Deep heather and light heather are for dark bands.

  • Heather

    heather #6e3b63

    Primary buttons, links, focus ring, wordmark full stop

  • Deep heather

    heather-deep #4f2847

    Button hover, dark bands

  • Heather tint

    heather-tint #f1e7ee

    Soft panels, highlights

  • Light heather

    heather-light #d9b8cf

    Links, accents and focus ring on dark bands

Health check states

Only for health check results and form messages. Never use them for decoration.

  • All clear

    clear #1d6b3f

    All clear: icon and label

  • All clear tint

    clear-tint #e3f1e7

    All clear: chip background

  • Needs attention

    attention #6b4413

    Needs attention: icon and label

    From Orcadia components/freeCheck/FreeCheckTool.tsx

  • Needs attention tint

    attention-tint #fbeedc

    Needs attention: chip background

    From Orcadia components/freeCheck/FreeCheckTool.tsx

  • Urgent

    urgent #a1262f

    Urgent: icon and label. Form errors

  • Urgent tint

    urgent-tint #f9e1e2

    Urgent: chip background

  • Couldn’t check

    unknown #395662

    Couldn’t check: icon and label

    From Orcadia components/freeCheck/FreeCheckTool.tsx

  • Couldn’t check tint

    unknown-tint #e8e5de

    Couldn’t check: chip background

    From Orcadia components/freeCheck/FreeCheckTool.tsx

Orcadia accents (endorsement only)

These stay with Orcadia. They appear only inside the two orca flukes of the “from Orcadia Design” endorsement.

  • Orcadia blush

    orcadia-blush #e05a75

    Only in the Orcadia flukes of the endorsement

    From Orcadia app/globals.css

  • Orcadia teal

    orcadia-teal #28afb0

    Only in the Orcadia flukes of the endorsement

    From Orcadia app/globals.css

Contrast

Every text and background combination used in the system, checked against WCAG 2.2 AA: 4.5:1 for text, 3:1 for icons, field borders and focus rings. Calculated from the tokens each time the site is built. All 43 pass. The lowest text pair is 4.69:1.
Text and background colour combinations with their contrast ratios
SampleText or elementBackgroundUsed forRatioNeedsResult
inksandHeadings and text on the page13.14:14.5:1 Pass (AAA)
inkwhiteHeadings and text on cards14.57:14.5:1 Pass (AAA)
inkstoneText on quiet bands11.58:14.5:1 Pass (AAA)
inkheather-tintText on heather panels12.08:14.5:1 Pass (AAA)
slatesandBody text on the page7.06:14.5:1 Pass (AAA)
slatewhiteBody text on cards7.83:14.5:1 Pass (AAA)
slatestoneBody text on quiet bands6.23:14.5:1 Pass (AA)
slateheather-tintBody text on heather panels6.49:14.5:1 Pass (AA)
mutedsandSmall print on the page5.33:14.5:1 Pass (AA)
mutedwhiteHints and placeholders in fields5.91:14.5:1 Pass (AA)
mutedstoneSmall print on quiet bands4.69:14.5:1 Pass (AA)
mutedheather-tintSmall print on heather panels4.89:14.5:1 Pass (AA)
heathersandLinks and labels on the page7.67:14.5:1 Pass (AAA)
heatherwhiteLinks on cards8.51:14.5:1 Pass (AAA)
heatherstoneLinks on quiet bands6.76:14.5:1 Pass (AA)
heatherheather-tintLinks on heather panels7.05:14.5:1 Pass (AAA)
heather-deepsandLink hover on the page10.97:14.5:1 Pass (AAA)
whiteheatherPrimary button8.51:14.5:1 Pass (AAA)
whiteheather-deepPrimary button, hover12.16:14.5:1 Pass (AAA)
whiteinkSecondary button, hover14.57:14.5:1 Pass (AAA)
heather-deepwhitePrimary button on dark bands12.16:14.5:1 Pass (AAA)
whiteheather-deepHeadings on deep heather bands12.16:14.5:1 Pass (AAA)
heather-lightheather-deepBody text and links on deep heather6.78:14.5:1 Pass (AA)
whiteinkHeadings on Ink bands, footer14.57:14.5:1 Pass (AAA)
mistinkBody text on Ink9.56:14.5:1 Pass (AAA)
heather-lightinkLinks on Ink8.12:14.5:1 Pass (AAA)
clearclear-tintAll clear chip5.58:14.5:1 Pass (AA)
attentionattention-tintNeeds attention chip7.46:14.5:1 Pass (AAA)
urgenturgent-tintUrgent chip5.96:14.5:1 Pass (AA)
unknownunknown-tintCouldn’t check chip6.23:14.5:1 Pass (AA)
clearwhiteAll clear text on cards, field success message6.51:14.5:1 Pass (AA)
attentionwhiteNeeds attention text on cards8.53:14.5:1 Pass (AAA)
urgentwhiteUrgent text on cards, field error message7.41:14.5:1 Pass (AAA)
urgentsandField error message on the page6.68:14.5:1 Pass (AA)
unknownwhiteCouldn’t check text on cards7.83:14.5:1 Pass (AAA)
mutedwhiteField border5.91:13:1 Pass (AAA)
urgentwhiteField border, error7.41:13:1 Pass (AAA)
clearwhiteField border, success6.51:13:1 Pass (AAA)
heathersandFocus ring on the page7.67:13:1 Pass (AAA)
heatherwhiteFocus ring on cards8.51:13:1 Pass (AAA)
heather-lightheather-deepFocus ring on deep heather6.78:13:1 Pass (AAA)
heather-lightinkFocus ring on Ink8.12:13:1 Pass (AAA)
inksandSecondary button outline13.14:13:1 Pass (AAA)

To check again after changing a colour, run npm run check:tokens. It fails if any pair drops below AA.

Typography

One typeface, Outfit, as on the Orcadia site, self-hosted from app/fonts. Big headlines are set in Regular with tight spacing; smaller headings in Medium. Sizes grow smoothly from phone to desktop.

Sell the business, not the headaches

Style
Display
Class
text-display
Size
40 to 72px
Weight
Regular 400
Line height
1
Spacing
-0.035em
Use
Homepage and landing page headlines

Health check report

Style
Heading 1
Class
text-h1
Size
36 to 56px
Weight
Regular 400
Line height
1.05
Spacing
-0.03em
Use
Page titles

How the handover works

Style
Heading 2
Class
text-h2
Size
28 to 40px
Weight
Medium 500
Line height
1.1
Spacing
-0.02em
Use
Section headings

Domain name and website

Style
Heading 3
Class
text-h3
Size
22 to 28px
Weight
Medium 500
Line height
1.2
Spacing
-0.01em
Use
Card and sub-section headings

Your domain name expires in 12 days

Style
Heading 4
Class
text-h4
Size
18 to 20px
Weight
Medium 500
Line height
1.35
Use
Small headings, result titles

We find every account your business relies on and hand it over cleanly to the new owner.

Style
Lead
Class
text-lead
Size
18 to 20px
Weight
Regular 400
Line height
1.6
Use
Intro paragraphs

When a business is sold, the website, domain, email and social media often belong to the wrong person, or to nobody at all.

Style
Body
Class
text-body
Size
16px
Weight
Regular 400
Line height
1.6
Use
All running text

Free and private. We only look at public records.

Style
Small print
Class
text-small
Size
14px
Weight
Regular 400
Line height
1.5
Use
Hints, captions, legal lines

Health check result

Style
Label
Class
text-label
Size
12px
Weight
Medium 500
Line height
16px
Spacing
0.08em, uppercase
Use
Short labels only (under about 30 characters)

Body text, links and small print

Body text is Slate on light backgrounds. Links are heather and underlined, and the underline thickens on hover. Bold words use Medium weight in Ink.

Small print is 14px in Muted, for hints, captions and legal lines. Never smaller than 12px, and 12px only for uppercase labels.

On a dark band

Advising on a sale?

On Deep heather, text is Light heather and links turn white on hover.

Long-form text (the prose-handover class)

What we need from you

Most of the work happens without you. We do need a few things, because only you can see inside your accounts. None of this means sharing passwords by email.

  • A list of anyone who looks after the website for you
  • Access to the email account the domain name is registered with
  • Half an hour on a call, at a time that suits you

If anything is unclear, ask Johanna.

Spacing and layout

A 4px step for everything inside components, and two named sizes for page rhythm. Pages are built mobile first: one column on phones, more from 1024px.

Spacing steps

Use Tailwind’s numbered classes: p-4 is 16px, gap-8 is 32px.

  • 14px
  • 28px
  • 312px
  • 416px
  • 624px
  • 832px
  • 1040px
  • 1248px
  • 1664px
  • 2080px

Named sizes

  • gutter16pxPage side gutter on phones (32px from 640px, 56px from 1024px)
  • section56 to 112pxSpace above and below each page section
  • container-page1240pxMaximum page width
  • container-reading672pxMaximum width for reading text

Corners and shadows

Small, consistent corners, taken from Orcadia. Shadows are soft and Ink-tinted; most cards need only the thin outline.

  • rounded-xs 4px

    Buttons, fields

    From Orcadia components/Button.tsx

  • rounded-sm 8px

    Small panels

    From Orcadia components/SiteFooter.tsx

  • rounded-md 12px

    Cards

    From Orcadia components/freeCheck/FreeCheckTool.tsx

  • rounded-lg 16px

    Large cards, the report

    From Orcadia components/freeCheck/FreeCheckTool.tsx

  • rounded-full Fully round

    Status chips, step numbers

  • shadow-cardResting cards
  • shadow-floatRaised cards, the health check resultFrom Orcadia app/globals.css
  • shadow-headerHeader once the page has scrolledFrom Orcadia components/SiteHeader.tsx

Breakpoints

Styles start at phone size and add changes as the screen gets wider. The same breakpoints as the Orcadia site.
  • base0pxPhones. All styles start here (mobile first)
  • sm640pxLarge phones, small tablets
  • md768pxTablets
  • lg1024pxLaptops: full menu appears
  • xl1280pxLarge screens

Wordmark

“the digital handover.” in Outfit Medium, lowercase, on two lines, with a heather full stop. Endorsed by Orcadia Design with its two orca flukes. Use the endorsed version wherever the brand introduces itself: footer, report, emails.

On Sand, with endorsement

The Digital HandoverfromOrcadia Design

On White

The Digital HandoverfromOrcadia Design

On Deep heather

The Digital HandoverfromOrcadia Design

On Ink

The Digital HandoverfromOrcadia Design

Sizes: small (header), medium (footer, report), large (covers)

The Digital HandoverThe Digital HandoverThe Digital HandoverfromOrcadia Design

Endorsement on its own, for emails and documents

fromOrcadia Design

Buttons

Orcadia’s button shape: 48px tall, 4px corners, label left and arrow right. One heather primary button per section; everything else is secondary. Buttons do things or go places, so they always start with a verb.

Primary and secondary

Small (header) and without arrow

Loading and disabled

Full width (phones)

Book a call

On Deep heather

On Ink

Use <ButtonLink href> to go to a page and <Button> to do something on this one. Press Tab to see the focus ring.

Form fields

Every field has a visible label. Hints sit under the label. Mark the optional fields, not the required ones. Errors say what went wrong and how to fix it, with an icon as well as red.

Default, with a hint

So we know who to ask for.

Optional

Only if you’d rather we called.

Error

Error: Enter an email address in the right format, like jo@harbourbakery.co.uk

Success

Thanks, that looks right.

Disabled

Taken from your health check.

Select

Text area

Rough timings are fine. We treat everything in confidence.

Checkbox, and checkbox with error

Error: Tick the box to agree to the privacy notice

Domain input

The start of the health check. It accepts anything people paste (https://, www., a page address, even an email address) and tidies it into a domain, explaining any problem in plain words. Try it: the check below is pretend and takes two seconds.

Live demo

Free and private. We only look at public records, and it takes about a minute.

Error: an email address was entered

Free and private. We only look at public records, and it takes about a minute.

Error: That looks like an email address. Enter just the part after the @.

Did you mean ?

Loading

Free and private. We only look at public records, and it takes about a minute.

Looking up harbourbakery.co.uk. This takes about a minute.

On Deep heather

Free and private. We only look at public records, and it takes about a minute.

Health check states

Four states. Each has its own icon shape, a written label and a colour, so the result is clear to colour-blind readers, on a black and white printout, and to screen readers. Always list the most serious first.
  • Urgent

    Will cause a problem soon, or could hold up the sale. Fix before completion.

    Icon: octagon with !. Colour: urgent on urgent-tint.

  • Needs attention

    Not an emergency, but worth sorting before the handover. Buyers’ advisers may ask about it.

    Icon: triangle with !. Colour: attention on attention-tint.

  • All clear

    Checked and in order. Nothing to do.

    Icon: circle with a tick. Colour: clear on clear-tint.

  • Couldn’t check

    We can’t see this from outside, or the check didn’t finish. We’ll go through it with you.

    Icon: dashed circle with ?. Colour: unknown on unknown-tint.

Badge sizes and the tally

Small chips for keys and tight spaces.

UrgentNeeds attentionAll clearCouldn’t check
  • 1Urgent
  • 1Needs attention
  • 1All clear
  • 1Couldn’t check

A single result

Title says what we found; detail says why it matters; “What to do” is optional.

  • Urgent

    Your domain name expires in 12 days

    If it lapses, your website and email stop working.

    What to do: Renew it now, and agree with the buyer who will hold it after the sale.

The result card

Health check result

harbourbakery.co.uk

Checked on 4 November 2026

1 urgent item and 1 thing to look at before the sale. We couldn’t check 1 thing from outside, so we’ll go through it with you.

  • 1Urgent
  • 1Needs attention
  • 1All clear
  • 1Couldn’t check
  • Urgent

    Your domain name expires in 12 days

    If it lapses, your website and email stop working.

    What to do: Renew it now, and agree with the buyer who will hold it after the sale.

  • Needs attention

    Email protection is only partly set up

    One of three settings that stop other people sending email in your name is missing. Buyers’ advisers often ask about it.

    What to do: A quick fix. We can do it for you, or show your web person what to change.

  • All clear

    Website security certificate is valid

    Your site loads securely and the certificate renews automatically.
  • Couldn’t check

    Who controls your social media accounts

    We can’t see this from outside. We’ll go through it with you on a short call.
Book a handover callSee the full report

Cards

White cards with a thin outline on Sand. Raise a card with a shadow only when it is the main thing on the screen, like a result.

Flat

Discreet

We work quietly, often before staff or customers know about the sale.

Soft shadow

Thorough

Every account listed, checked and signed off by both sides.

Raised

Human

One person from start to finish: Johanna, at Orcadia Design in Orkney.

Highlight

From £495

A full handover for most small businesses. Sample price for layout only.

Guide

What happens to your domain name when you sell

The domain is the key to the website and email. Here is how to move it safely.

For advisers

Referring a client

How we work alongside solicitors and brokers, and what you’ll hear back.

“The website was the last thing on our minds during the sale. Johanna made sure it wasn’t the thing that held up completion.”

Sample quote, for layout only

Section layouts

Pages are a stack of <Section> bands. Each band picks a tone; dark tones switch links and focus rings to light heather automatically. Inside, <Container> sets the width and gutters.

Section tones

sand (default), white, stone, heather-tint, heather-deep and ink.

sand

A heading

Body text and a link.

white

A heading

Body text and a link.

stone

A heading

Body text and a link.

heather-tint

A heading

Body text and a link.

heather-deep

A heading

Body text and a link.

ink

A heading

Body text and a link.

Section heading: label, title and intro

How it works

Three steps to a clean handover

Most handovers take two to four weeks, alongside the legal work.

Split: two columns from 1024px, stacked on phones

Selling soon?

Start early. Some fixes, like moving a domain registered to a former employee, can take weeks.

Free

Start with a health check

See what needs doing before you talk to buyers.

Steps

  1. Step 1: Health check

    We look at your domain, website and email from the outside and tell you plainly what needs doing.

  2. Step 2: Untangle

    We find every account, who controls it, what it costs and when it renews.

  3. Step 3: Handover

    We move everything to the new owner and give both sides a signed-off record.

Steps on a dark band

  1. Step 1: Refer

    Send us your client’s name and the expected completion date.

  2. Step 2: Report back

    You get the same plain-English report as your client.

Callout band, to close a page

Advising on a sale?

Solicitors and brokers can refer a client in two minutes. We report back to you as well as them.

Refer a client

Header and footer

Both are live on this page: the header at the top, the footer at the bottom.

Header

  • Wordmark, menu and one “Book a call” button.
  • Stays at the top while scrolling and gains a soft shadow.
  • Below 1024px the menu folds into a menu button. Escape closes it.
  • The current page is underlined in heather and announced to screen readers.
  • A “Skip to main content” link appears on the first Tab press.

Footer

  • Deep heather band with the endorsed wordmark.
  • Links in Light heather (6.78:1), white on hover.
  • Contact details, then the trading name line and legal links.
  • The email address is a placeholder until the mailbox exists.

Print and PDF

The client report is a normal web page with a print style. Choosing Print, then Save as PDF, gives a clean A4 document.
  • A4 pages with 15 to 18mm margins and page numbers in the footer.
  • No site header, menu, footer or buttons (anything marked no-print).
  • Shadows and tinted panels become thin outlines; status chips keep their colours.
  • Results, cards and headings never split across two pages.
  • Text sizes step down slightly so a typical report fits on two or three pages.
Open the sample report

Writing

The words are part of the design. People reading this are in the middle of selling their business and may be anxious.

Do

  • Write in British English, plainly, as Johanna would say it.
  • Say what we found, why it matters and what to do.
  • Use the four state labels exactly: Urgent, Needs attention, All clear, Couldn’t check.
  • Use commas, colons or full stops to join ideas.

Don’t

  • Use em dashes or en dashes. Write “2 to 4 weeks”, not a dash.
  • Use technical words (DNS, DMARC) without explaining them.
  • Alarm people. Urgent means “do this first”, not “panic”.
  • Use colour alone to say anything.