Buttons
One primary action per view. Secondary buttons for the alternative. At least 48px tall. Links, except the booking button, which opens the booking pop-up (still no JavaScript; older browsers get a link).
Design system
How this site is designed
Every colour, type size and component on everybooking-mail.com, the reason for each choice, and the Dribbble work that inspired them.
Principles
Five decisions everything else follows.
Lead with the person
Visitors arrive asking who Kevin is. His name, face and track record come before any product.
One accent colour
Deep forest green does every job an accent does. Everything else is warm white and charcoal, so the one action stands out.
Proof, not promises
Named companies, real years and source links. No invented statistics, testimonials or logos.
One clear next step
Every page ends with the same next step, so visitors never have to guess what to do.
Fast and plain
Static pages, one small script, one font file and compressed images. Plain English throughout.
Inspiration
Ten Dribbble shots we studied
Each full-page design was reviewed for layout, type, colour and components. They're linked rather than shown here because they're their designers' own work.
01
Meridian – Executive Advisory & Business Consulting Website (opens Dribbble in a new tab)
by Relyn LLC
What we took: Forest-green pill buttons on warm off-white, small uppercase labels, and a clear next step at the end of each section.
02
Leadership Coach Landing Page Redesign (opens Dribbble in a new tab)
by Saiful Ahmed
What we took: Deep green saved for full-width bands at key moments instead of used everywhere.
03
Juli Baranik – Revenue Systems Strategist Website (opens Dribbble in a new tab)
by Agemandi
What we took: A warm, established-consultant feel, and services framed around what the client needs right now.
04
AC – Modern Brand Digital Consultant Personal Website (opens Dribbble in a new tab)
by LAIN UI/UX
What we took: The name as the hero, generous white space, and a large name in the footer.
05
Eleanor Voss – Business Coach Personal Brand Website (opens Dribbble in a new tab)
by Gayathri
What we took: One accent colour driving everything, a portrait frame with one oversized corner, numbered cards and a dark closing panel.
06
Author & Speaker Landing Page (opens Dribbble in a new tab)
What we took: A cut-out portrait paired with very large, confident type.
07
SC – Wealth Management Advisor Website About Page (opens Dribbble in a new tab)
by LAIN UI/UX
What we took: An about page that makes long experience feel human, told in clear chapters.
08
Freelance AI Consultant Personal Website Design (opens Dribbble in a new tab)
What we took: AI work presented as calm consulting on white with one deep-green band, not as a neon startup.
09
JH – Editorial Art Director Portfolio Personal Website (opens Dribbble in a new tab)
by LAIN UI/UX
What we took: A strict grid, hairline rules, and numbered lists for experience.
10
Personal brand website design (opens Dribbble in a new tab)
by Nizam
What we took: Operator-first messaging and a dark statement band for the core problem.
What we deliberately did not borrow: invented statistics, testimonials and client logos, stock-photo crowds, orange, gold or blue accents, heavy gradients and video heroes.
Colour
Warm neutrals and one deep forest green.
Every text colour pairing meets WCAG AA contrast: 4.5:1 or better, and 3:1 or better for large numbers. Ratios below are calculated from the live tokens.
paper
#f7f5f0
Page background everywhere
sand
#eeeae1
Alternate sections, portrait frames
surface
#ffffff
Cards, credential list, FAQ areas
line
#dedad0
Hairline borders and dividers
line-strong
#c9c3b6
Button outlines and the timeline rule
ink
#161a17
Headings and primary text
ink-soft
#3a403c
Body copy and lead paragraphs
ink-muted
#5c635e
Captions and secondary details
numeral
#6f8b7b
Large decorative numbers (01, 02, 03)
forest
#1e3d2f
The one accent: buttons, links, labels, focus rings
forest-hover
#162e23
Hover state for forest buttons
forest-deep
#10231a
Dark bands and the footer
moss
#e3ebe5
Check-mark circles, text selection
sage
#8fb09d
Labels and years on dark bands
on-dark
#f3f1ea
Text on dark bands
on-dark-muted
#b4c2b8
Secondary text on dark bands
| Sample | Text on background | Used for | Ratio |
|---|---|---|---|
| Aa | ink on paper | Headings | 16.1:1 AAA |
| Aa | ink-soft on paper | Body copy | 9.7:1 AAA |
| Aa | ink-muted on paper | Captions | 5.7:1 AA |
| Aa | ink-muted on sand | Captions on sand | 5.1:1 AA |
| Aa | numeral on sand | Large numbers (3:1 needed) | 3.1:1 AA large |
| Aa | forest on paper | Links and labels | 10.9:1 AAA |
| Aa | paper on forest | Primary button text | 10.9:1 AAA |
| Aa | forest on moss | Accent on tint | 9.8:1 AAA |
| Aa | on-dark on forest-deep | Text on dark bands | 14.5:1 AAA |
| Aa | on-dark-muted on forest-deep | Secondary text on dark | 8.9:1 AAA |
| Aa | sage on forest-deep | Labels on dark | 6.9:1 AA |
| Aa | on-dark-muted on forest | Secondary text in the call-to-action panel | 6.4:1 AA |
Typography
One typeface, Hanken Grotesk.
A warm, modern sans-serif that stays readable from a phone to a large monitor. One variable font file, self-hosted and preloaded, covers every weight. Sizes scale smoothly between small and large screens.
Display
text-display
clamp(3rem, 1.9rem + 4.9vw, 6rem)
Kevin Penner
Heading 1
text-h1
clamp(2.5rem, 1.85rem + 2.9vw, 4.25rem)
The customer is ready.
Heading 2
text-h2
clamp(2rem, 1.62rem + 1.7vw, 3.125rem)
What I help service businesses do
Heading 3
text-h3
clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem)
Stop quoting by hand
Lead
text-lead
clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem)
I've answered the inquiries and prepared the quotes.
Body
text-body
1.0625rem
Turn your real packages, pricing and rules into quotes that don't need someone to build each one by hand.
Small
text-small
0.9375rem
Pinawa, Manitoba, since 1999
Eyebrow
text-eyebrow
0.8125rem
Why listen to me
Layout and spacing
Generous space on a simple grid.
Content sits in a 1,152px container with 16px side margins on phones, 24px on tablets and 32px on laptops. Sections breathe with 64px, 80px or 112px above and below.
- 4px
- 8px
- 12px
- 16px
- 24px
- 32px
- 48px
- 64px
- 96px
- 112px
- Mobile first. Layouts start as one column and add columns from 768px and 1024px wide.
- Reading width. Paragraphs stop at about 70 characters per line.
- Touch targets. Every button and stand-alone link is at least 44px tall; main buttons are 48px.
- Rhythm. Light sections alternate with sand, and dark bands mark the moments that matter.
Shape and depth
Soft corners, hairlines and quiet shadows.
radius-chip
999px
radius-card
1.25rem
radius-panel
2rem
radius-portrait
9rem
shadow-card
Cards and floating labels
shadow-lift
The portrait frame
Components
The building blocks, live.
These are the same components the rest of the site uses, rendered here with sample content. None of them need JavaScript; the website box on the home page uses the site's one script to open the pop-up, and works without it.
Buttons on dark
Inside dark bands and the call-to-action panel.
Text links
Inline next steps. External links show an icon and open in a new tab.
Eyebrow and section heading
Opens every section: a short label, then a heading that says the point.
Why listen to me
I've been on both sides of the problem.
Chips
Short, scannable facts such as how a business sells its services.
- Day
- Night
- Time
- Time slot
- Job
Credential list
Verifiable background, each with a source link where one exists.
Founder
Powerland Computers
Founded in 1986 at 17, acquired by Xerox in 2022
Xerox announcement (opens in a new tab)Founder
Wilderness Edge Retreat & Conference Centre
Pinawa, Manitoba, since 1999
Visit Wilderness Edge (opens in a new tab)Founder
Everybooking
Founded in 2019
Visit Everybooking (opens in a new tab)Certified
1-Page Marketing System consultant
Certified by author Allan Dib
4.7 from 11,623 Amazon reviews of his book
See the book on Amazon (opens in a new tab)
Star rating
Someone else's public rating, always attributed and linked to its source. Never added to structured data as Kevin's own rating.
4.7 from 11,623 Amazon reviews of his book
Numbered cards
Parallel ideas or offers, numbered so they scan in order.
Respond immediately
Give customers a useful answer while their interest is still fresh.Stop quoting by hand
Real packages, pricing and rules turned into instant quotes.Keep your team focused
Staff time goes to conversations that need a person.
Who it's for
How customers sell, and the industry groups Everybooking serves.
In every kind of business that sells that way
- Events and venues
- Weddings and celebrations
- Stays, retreats and conference centres
- Recreation and attractions
- Sports and instruction
- Wellness, beauty and fitness
- Studios and creative spaces
- Home services and trades
- Moving and storage
- Transport and vehicles
- Marine and outdoors
- Pets and animals
Timeline
Milestones with real years, oldest first.
1986
Founded Powerland Computers at age 17.
1999
Founded Wilderness Edge Retreat & Conference Centre in Pinawa, Manitoba.
2001
Built our first venue booking system.
2008–2012
Rebuilt it around online inquiries and booking.
2019
Founded Everybooking.
2022
Powerland Computers, the company I founded, was acquired by Xerox.
2026
Opened my agency to help service businesses.
Process steps
How an engagement runs, in order.
Live demo
How inquiries and quotes work today.
Plan
What to fix first.
Build
Built and tested with real pricing.
Improve
Tuned with real inquiries.
Questions and answers
Native disclosure widgets: keyboard and screen-reader friendly with no JavaScript.
What kinds of businesses do you work with?
Businesses that sell their services by the day, night, time, time slot or job.
What happens on a live demo?
We find where customers wait between their first question and a confirmed booking.
Portrait frame
Kevin's colour cut-out on sand, with one oversized corner, served as AVIF or WebP at the size the screen needs.
Statement band
A dark band for the one idea a page must land.
The problem
The customer is ready. The quote isn't.
Header, footer and call-to-action panel
The header and footer frame every page; the panel below closes every page.
See the header at the top of this page, the call-to-action panel and footer below. The header keeps the main action visible while scrolling; the footer repeats it with contact details.
Accessibility and performance
Rules every page follows.
Accessibility
- Text contrast at WCAG AA or better; most pairs reach AAA.
- A visible 3px focus ring on every interactive element, and a skip-to-content link.
- One h1 per page, headings in order, and landmarks labelled.
- Buttons and stand-alone links at least 44px tall; main buttons 48px.
- Motion kept to small colour and icon changes, and removed for people who ask for reduced motion.
Performance
- Every page is pre-built static HTML served from Cloudflare's network.
- One small script, and only on the home page: the build removes the framework's browser code, and menus, questions, links and pop-ups work without any. The website box uses the script to open the pop-up with your website carried in; without it the box still works, in a new tab.
- One self-hosted variable font file, preloaded so text never jumps.
- The portrait ships as AVIF or WebP in 6 sizes; the browser downloads only the one it needs.
- Build files are cached for a year; images carry a content fingerprint in their names.
Voice
Plain English, first person, no hype.
Do
- Write the way Kevin talks to another operator.
- Use real names, real years and link the source.
- Say what happens next in one sentence.
Don't
- Invent statistics, testimonials or urgency.
- Lean on software jargon or AI buzzwords.
- Put more than one main action in one place. Pages lead with one: the home page with the free Instant Quote button, everywhere else with the live demo.
Let's look at how your inquiries turn into bookings.
A 30-minute live demo, set up from your own website, and a look at where your customers wait today, from the first question to the signed booking.