Hello Diary
Design system · v0.1

Light-hearted, trustworthy, in good taste.

The tokens and components behind every Hello Diary screen: the marketing site, booking pages, admin and chat widget. Everything here is rendered from packages/ui.

Brand

Hello Diary
Hello Diary

Colour

Sky

The Hello Diary light blue. sky-400 is the brand and primary colour.

  • 50

    #f0f8ff

  • 100

    #e0f0fe

  • 200

    #bae2fd

  • 300

    #8dd0fb

  • 400

    #56b6f5

  • 500

    #2f9ae6

  • 600

    #1f7dc7

  • 700

    #1b64a1

  • 800

    #1b5385

  • 900

    #1c466e

  • 950

    #142c47

Sand

Warm neutrals for text, surfaces and borders. Never cold grey.

  • 0

    #ffffff

  • 50

    #fbfaf8

  • 100

    #f5f3ef

  • 200

    #e9e5de

  • 300

    #d6d0c6

  • 400

    #aea595

  • 500

    #857c6d

  • 600

    #686052

  • 700

    #554e43

  • 800

    #3b362f

  • 900

    #27241f

  • 950

    #171512

Sunshine

Small moments of joy: highlights, the smile, the odd badge.

  • 100

    #fff4d1

  • 300

    #ffd66b

  • 700

    #8a4b07

Mint

Success and confirmation.

  • 100

    #dcf5ea

  • 500

    #2bb383

  • 700

    #177a55

Coral

Errors and destructive actions.

  • 100

    #fde4df

  • 400

    #ff8a73

  • 700

    #b8322b

Text pairings and contrast

Type

Bricolage Grotesque for headings: characterful and warm. Figtree for everything else: friendly and very legible at small sizes. Both self-hosted.

Components

Buttons

Badges

Booked onlineComing soonAttendedDeposit dueNo-showDraft

Form fields

That email doesn't look quite right.

Cards

New patient check-up

45 minutes · Gartside Street

A full examination, X-rays if needed, and a plan you can take away.

Deposit £20

Your diary, next 14 days

Updated a minute ago

92%

9 gaps filled this week by Hello Diary.

Select, date, radio and checkbox

Which site?

Reminders

Dialog, sheet, toast and tooltip

Try each one. Esc closes, and focus returns to the button.

    Tabs

    42 bookings, 31 from ads. 9 gaps filled by Hello Diary.

    Sample figures for the catalogue only.

    Table and avatars

    Today at Gartside Street (sample patients)
    PatientTimeTreatmentSourceStatus
    ASAlex Smith09:30New patient check-upGoogle AdsAttended
    PPPriya Patel11:15Hygiene appointmentBooking pageDeposit due
    SJSam Jones14:00Whitening consultationMeta AdsBooked online

    Loading and empty states

    Loading free times

    No free times this week

    Try next week, or join the waitlist and we'll text you if a time opens up.

    Clinic accents

    Each clinic can bring its own colour to its booking page. clinicAccentStyle() swaps the primary and picks dark ink or white for text, whichever reads better. Colours that can't reach AA either way are flagged in admin.

    Voice

    Like a good receptionist: warm, clear and brief. Say what happens next. Use UK spelling, plain words and sentence case.