Style guide

Every token and component on this page renders from the live stylesheet, so it always matches what ships.

Colour

Neutral, warm-tinted, carries the rose undertone

  • neutral-50
    #fffdfd
  • neutral-100
    #faf5f5
  • neutral-200
    #e8e2e2
  • neutral-300
    #cdc7c7
  • neutral-400
    #ada7a7
  • neutral-500
    #8c8585
  • neutral-600
    #6b6565
  • neutral-700
    #4f4949
  • neutral-800
    #393333
  • neutral-900
    #2b2525
  • neutral-950
    #262020

Rust, the single accent

  • rust-50
    #fff4f4
  • rust-100
    #f9e1e1
  • rust-200
    #debaba
  • rust-300
    #bb8d8f
  • rust-500
    #96585c
  • rust-700
    #653d3f

System, functional feedback only

  • success-50 · bg
    #ecfcec
  • success-500 · border
    #49854c
  • success-700 · text
    #1d5e23
  • warning-50 · bg
    #fef6e9
  • warning-500 · border
    #956c1a
  • warning-700 · text
    #654914
  • error-50 · bg
    #fff4f3
  • error-500 · border
    #c0463e
  • error-700 · text
    #81322c

Typography

Stelvio Grotesk. Regular for reading, Medium for headings, buttons and labels. Sizes are fluid, the figure shown is the desktop maximum.

Display, hero headline, 40 to 72px, medium

Websites for hospitality

Statement heading and step numbers, 36 to 56px, medium

From your side of the bar

Section heading and stat value, 28 to 40px, medium

Overview

Row heading, 24 to 36px, medium

Hospitality groups

Lead and quote, 20 to 24px, regular

Sites that bring the bookings in and hand you the keys.

Body, 20px, regular

Over a decade building for the web inside hospitality, from agency to in-house to freelance.

Card copy and secondary lists, 18px, regular

One custom design system for pubs and hostels across London.

Supporting text, 16px, regular

Director, The Anchor Inn

Small print, 14px, regular

Last updated 23 July 2026

Section label, 20px, medium

Selected projects

Components

Stat

  • +140% PubLove site traffic

Row link

Numbered step

  1. Discovery

    A call to understand the business and what the site has to do.

Tick list

  • No plugins to update
  • Backed up continuously, restored in one click

Hairline list

  • Content updates
  • New pages and sections
  • UI and UX improvements
  • Technical SEO and redirects

Quote

“It has without question led to an increase in both table and room bookings.”
Matthew MulletDirector, The Anchor Inn

Dropdown

Can my team update the site themselves?

Yes. Menus, events, offers and opening hours are all editable in-house.

Project card

Forms and feedback

Text inputs

Choices, resting, selected and multi-select

System states

SuccessYour message has been sent.

WarningCheck the highlighted fields.

ErrorThis email address is not valid.

Inline form error

Something went wrong sending that. Email me instead at hello@bypaul.io and I will pick it up.

Rhythm and motion

One vertical beat site-wide, every section carries clamp(4.5rem, 10vw, 8rem) above itself. One ease, cubic-bezier(0.33, 1, 0.68, 1), at 0.3s for feedback, 0.45s for hover movement and 0.9s for reveals, with a 0.09s stagger.