welcome.
how the thirty percent site is built: the grid, the type, the logo and orb.
Thirty Percent · Digital · Version 1.0
Digital design guidelines.
notice. read this first.
- Everything here is measured from the live site. When the site changes, this page changes with it.
- This page isn’t linked from the site. Share the link only with people who need it.
00 · Rules
Principles
Six rules. When two disagree, the higher one wins.
1 Black and white first
Pages are black or white. Any other color has to earn its place.
2 Type does the work
Large, tight Helvetica Now in a handful of sizes.
3 Square and hairline
No rounded corners and 1px lines. Circles are only for Orb and status dots.
4 Slow and smooth
Things ease in over 0.6 to 1.6 seconds. Nothing snaps or bounces.
5 One ask at a time
One main action per screen. Orb asks once and doesn’t nag.
6 Only what’s true
No made-up numbers, proof, scarcity or urgency.
01 · Logos
Identity
The three approved logos from the brand file. Use the files as supplied. Don’t redraw or retype them.
Clear space and size
Leave space around every logo equal to half the height of the mark.
Minimum sizes
Mark 24px. Wordmark 86px wide, as in the mobile header. Lockup 120px wide. Smaller than that and the detail closes up.
Header on the site: 190px desktop, 120px mobileColor
Black on white or white on black. No other colors, no gradients, no orange. On photos, use white over a dark, calm area.
Do not
Changes that weaken the logo.
Always scale proportionally.
The mark sits upright.
Black and white backgrounds only. Orange is not a logo color.
No shadow, glow, outline or blur.
02 · Layout system
The dot grid
The dots on our black pages mark where rows and columns meet. They’re the layout, drawn on the screen.
Move across the grid
- A dot is where a column line crosses a row line.
- Columns run top to bottom through the dots. Rows run left to right.
- Line content up so its edges land on dots. Every corner of the card sits on one.
How it is built
Measured from the live code.
Pitch
180px between dots, across and down, on screens 1024px and wider. 122px across and 128px down on smaller ones.
1440 wide = 8 columnsCentered
The grid is centered on the screen, with one dot at the exact middle.
Quiet, on top
The dots are 1px and sit on the top layer so they stay visible. They clear away under forms, video and anything marked to stay clean.
Moves on desktop
With a mouse, dots near the cursor grow and drift away a little, and a click sends a ripple. On touch screens and with reduced motion they stay still.
Spacing in rows
Gaps between blocks are whole rows where possible: 180, 360, 540px. Inside a block, use the 8px scale.
Widths in columns
Cards and images span whole columns. A half column is fine for a gutter, not for a block edge.
System and design
The grid is where a systems way of working meets layout.
Structure before the page
Hospitality is run as a system: principles, then repeatable structure, then freedom inside it. The grid is that order applied to a page. It’s decided before anything is placed.
The same rows and columns
The same pitch on every page means any section can move and still line up. New pages are assembled, not improvised.
Identity built into structure
“Hospitality designed. Culture engineered.” The grid is both: a look you recognise at a glance and a rule the layout has to follow.
03 · Fundamentals
Foundations
Measured across the home page, the Rewiring Hospitality LP, the event page and the product page.
Color
Text colors are white at different opacities on black.
Page background
Alternate surface
Text, primary button
Light surface
LP call to action
Typography
Helvetica Now. Tracking is a percentage of font size.
HN Var 500 · 109–115px
Tracking −5.8% · Hero headlines
HN Var 500 · 75–81px
Tracking −5 to −5.5% · Section titles
HN Var 500 · 59px
Tracking −3.5% · Sub-section titles
HN Var 400 · 40–42px
Tracking −2.2 to −3% · Card titles
HN Var 400 · 26px
Tracking −2% · Lead paragraphs
HN Var 400 · 14–16px
Tracking +3.8 to +4.6% · Paragraphs
HN Var 500–700 · 10–12px upper
Tracking +5 to +14% · Eyebrows, tags
HN Var 400 · 10–11px upper
Tracking +20 to +24% · Legal, meta
Layout and spacing
Measured on the live site at 1440px.
Container
1440px max. Side gutter 56px on desktop, 16px on mobile.
Dot grid
1px white dots every 180px, fixed behind content. Content sits in hairline boxes, never solid blocks that hide the dots.
Corners and borders
0px radius. 1px borders: white at 28–30% on black, black on white.
Spacing
8px base: 8, 16, 24, 40, 64, 96, 120.
Alignment
Text is left aligned and shares one left edge. Logos, Orb and specimens are centered in their stage. Welcome screens are left aligned.
Section rhythm
120 to 200px between sections, with a hairline above each one and under each header.
Imagery
Black and white portraits, full bleed. Never blurred or filled behind. Text never sits over a face.
Motion
Tokens used across Orb, the gate and the event page.
ease
cubic-bezier(.22, .61, .36, 1). No overshoot or spring on UI.
duration-fast
0.2–0.4s. Hover, focus, small state changes.
duration-base
0.6–0.9s. Reveals, slides, button fades.
duration-slow
1.4–1.6s. Dissolves and exits, always with a light blur.
type-speed
46–95ms per character, with 240ms pauses on punctuation.
reduced-motion
Respected everywhere: no animation, instant text, no rotation.
04 · Devices
Responsive and performance
Mobile is designed on its own, not shrunk down from desktop. These are the breakpoints the theme uses.
Breakpoints
Tablet 750px and desktop 990px across most of the theme. Landing pages add 700px for phones and 1100px for wide layouts. Set them where the layout breaks, not at device sizes.
Mobile first
Build the single column first, then add to it. Titles get bigger on mobile, with the date and place smaller beneath.
Fluid type
Headlines use clamp() so the size changes smoothly. Respect the user’s font-size setting; don’t lock text in px.
Touch targets
24×24px at the very least (WCAG 2.2 AA). Aim for 44px or more; primary buttons are 60px. Keep main actions within thumb reach.
Fixed UI
Anything pinned to the screen must never cover focused content, and has to respect the iOS bottom safe area.
Performance budget
Core Web Vitals at the 75th percentile: LCP 2.5s or less, INP 200ms or less, CLS 0.1 or less. Keep font families few, compress hero media, and animate only transform and opacity.
05 · Interface
Components
The buttons and Orb below are live. Hover, press and click them.
Buttons
Five variants, measured on the live site. Square and flat, with one focus indicator.
Primary
White fill, black text, 0 radius, 20 / 30 padding, 60px tall. One per view.
PDP, event page, LPSecondary
Transparent, white text, 1px white at 30%, 63px tall. For second choices.
Not yet, BackLP call to action
Orange #FF5900, black text, 60–68px tall. Rewiring Hospitality LP bar only.
ReservedCompact
White, text #333, 1px #1F1F1F, radius 2, 37px tall. System dialogs only.
Cookie, utilityLoading, then done
Click it. The label changes, a spinner runs, then a plain confirmation appears.
Never a silent waitDisabled
38% opacity and not focusable. An enabled button that explains what’s missing is usually better.
Use sparinglyStates
Pick a state to see it on the primary button. Hover never carries anything essential.
Focus
Use :focus-visible so keyboard users get a clear indicator and mouse clicks don’t. One quiet line inside the button. No outer ring or offset outline.
Error
Say what went wrong in words, beside the field, and how to fix it. Color alone isn’t enough.
Empty and success
Empty states say what belongs there and what to do next. Success confirms in plain words, then fades away.
Forms and consent
Keep them short and clear.
- Labels sit above the field. Placeholders are examples, never labels.
- Mark optional fields. Ask only for what is needed.
- Check a field when the person leaves it, keep what they typed, and put the message beside it.
- Consent is an unticked checkbox with the exact wording. Never pre-ticked, never bundled.
- Use the right input type and autocomplete so phone and email open the right keyboard.
- Embedded third-party forms sit in a white box with a hairline outline.
- Confirmations say what happens next and who will be in touch.
- Errors in text: “Enter a mobile number with area code,” not “Invalid input.”
Orb
Orb shows up when we need someone to do one thing: confirm a ticket, plan a trip, finish a form.
State · Idle
Idle. A glass circle. The highlight turns slowly and the shape never changes.
- Speak: the text types in letter by letter and the bars follow.
- Think: Orb turns blue and the bars run steadily while it works; nothing is typed.
- Ask: the question types, then buttons appear. Yes finishes it and Orb fades away for good. Not yet sends them to the task.
Rules
Always a perfect circle. Soft highlight top left, pearl rim, dark crescent at the bottom, and only the highlight turns. Orange at rest, blue while it thinks. The bars only move while it speaks or thinks. Buttons appear after the line ends.
Exit
It fades out over 1.6 seconds with a light blur. Once the task is done, Orb doesn’t come back. “Not yet” never closes the page or nags.
Navigation
The header and unlisted pages.
Header
Fixed and black, with the wordmark centered and the menu on the left. It fades away when you scroll down and comes back when you scroll up, ignoring bounces under 14px.
Unlisted pages
Pages that aren’t for the public have no menu link, are marked noindex, and are reached by URL only. This page is one.
Guided moments
One question at a time, and always a way to say not yet.
06 · Inclusion
Accessibility
We aim for WCAG 2.2 level AA, and use the stricter AAA habits where they’re cheap.
Contrast
Text 4.5:1 (3:1 for large text). Interface parts and focus indicators 3:1. White on black passes. Keep essential copy at full white and use 62% and below only for supporting text.
Target size
24×24px minimum (AA), 44px recommended (AAA). Primary buttons are 60px.
Focus
Visible, never removed, and not hidden behind pinned UI such as the header or a floating Orb (2.4.11). A 2px indicator meets the AAA size rule.
Motion
No flashing, and nothing that can’t be paused. Animation triggered by interaction can be turned off. We honor reduced motion everywhere: instant text, no rotation, no bloom.
Forms and errors
Errors are described in words and name the field (3.3.1), with a suggested fix when we know it (3.3.3). Never color alone.
Structure
One h1 per page and headings in order. Buttons are buttons and links are links. Images have alt text. Orb is decorative, so hide it from screen readers and keep its text readable.
07 · Upkeep
Keeping it current
A guideline nobody updates stops being true.
Source of truth
Everything here is measured from the live site. When the site changes, update this page in the same change.
Proposing changes
Show the problem, the new rule and where it applies. Try it on one page before it becomes a rule.
Versions
Version 1.0. Record each change with a date and a one-line reason.