Brand Guide
Part 1
Brand identity
The Happy Scaling logo, colors, and type, and how to use them. For our team, partners, press, podcast hosts, and print vendors.
1. Overview
This page is the official reference for the Happy Scaling brand. It shows how our logo, colors, and type should look anywhere our name appears, with files you’re free to download below. The second half documents the website’s design system for anyone building on happyscaling.com, including AI tools.
Who we are
Happy Scaling is an advisory firm for founder-led DTC brands and the B2B companies that serve them.
Our name
Always “Happy Scaling”: two words, both capitalized. Never “HappyScaling,” “Happy scaling,” or “HS” in public copy.
Website
happyscaling.com
Questions about the brand
Reach us through the contact page before using our logo in a way this guide doesn’t cover.
2. Logo
The logo pairs the rocket-and-S icon with the Happy Scaling wordmark. The Full Lockup is the default. Use another lockup only when the space calls for it.
Full Lockup
Default
Icon above the wordmark. Use it whenever there’s room.
Banner, Horizontal
Icon left, wordmark on one line. Website headers and other wide placements.
Banner, Horizontal Compact
A tighter horizontal version for small sizes like nav bars and social banners.
Banner, Stacked
Icon left, “Happy” and “Scaling” stacked. Email signatures, letterhead, slide footers.
Icon Only
Favicons, app icons, social profile photos, and anywhere square or tight.
3. Logo colors
There are six approved color versions. Choose by background: dark versions on light backgrounds, light versions on dark ones. Don’t create new color combinations.
Solid Peacock
The everyday version on light backgrounds: documents, light UI, business cards, and small sizes.
Duotone
Gradient icon from Peacock through green to Rich Yellow, with a Peacock wordmark. For marketing and hero placements on light backgrounds. The green midpoint is intentional: a straight Peacock-to-Yellow blend turns muddy.
Black
Flat single-ink art for screen printing, embroidery, engraving, and stamps on light materials.
Reversed, Solid Yellow
The default on dark backgrounds, including the Peacock sections of our website and dark merch.
Reversed, Ivory and Yellow
Ivory icon with a yellow wordmark. An alternate on dark backgrounds when you want less yellow.
White
Flat single-ink art for printing on dark materials.
4. Logo usage
A few rules keep the logo recognizable wherever it shows up.
Clear space
Leave empty space around the logo at least equal to the height of the “H” in the wordmark. For the Icon Only, use a quarter of the icon’s width. Keep text, edges, and other graphics out of that space.
Minimum size
Full Lockup: 120 px wide on screen, 1 in (25 mm) in print
Banners: 140 px wide on screen, 1.25 in (32 mm) in print
Icon Only: 24 px on screen, 0.25 in (6 mm) in print. Use the favicon files for 16–64 px.
Do
✓ Use the supplied files. Never redraw, trace, or retype the logo.
✓ Keep proportions locked when resizing.
✓ Make sure there’s strong contrast with the background.
✓ Use SVG for the web and print vendors, and PNG for slides, Canva, and social.
Don’t
✕ Stretch, squash, rotate, or crop the logo.
✕ Recolor it, or mix colors outside the six approved versions.
✕ Add shadows, outlines, glows, or other effects.
✕ Rearrange or resize the icon relative to the wordmark.
✕ Place it on busy photos without a solid backing.
✕ Use the 2022 logo, or any file with a blue dot on the rocket.
5. Brand colors
Peacock and Ivory carry the brand. Rich Yellow and Terracotta are accents, used sparingly. A rough balance is 60% Ivory and light neutrals, 30% Peacock, and 10% accents.
Peacock
HEX #0B4A42
RGB 11, 74, 66
CMYK 85, 0, 11, 71
Primary brand color. The logo, dark sections, and headlines on light backgrounds.
Deep Peacock
HEX #06302A
RGB 6, 48, 42
CMYK 88, 0, 12, 81
Darkest surface. The footer and dark page sections.
Ivory
HEX #F7F3E8
RGB 247, 243, 232
CMYK 0, 2, 6, 3
Primary background, and text on dark surfaces.
Rich Yellow
HEX #F2B705
RGB 242, 183, 5
CMYK 0, 24, 98, 5
Highlight accent. Emphasized words on dark backgrounds and the reversed logos.
Terracotta
HEX #C1502E
RGB 193, 80, 46
CMYK 0, 59, 76, 24
Action color. Primary buttons and calls to action only.
Ink
HEX #1C1C1A
RGB 28, 28, 26
CMYK 0, 0, 7, 89
Body text on light backgrounds.
CMYK values are calculated conversions. Ask your printer for a proof, or match to a Pantone swatch, before a large print run.
6. Typography
Two typefaces, both free from Google Fonts: Lora for headlines and Geist for everything else, plus Geist Mono for small labels.
Headlines
Lora
Scaling starts with the right partners.
Regular weight. Display text and headings H1 to H4.
Body and UI
Geist
Most brands earn exactly the traffic they deserve. The fix is usually in operations.
Regular, Medium (500), and SemiBold (600). Body copy, buttons, UI, and headings H5 and H6.
Labels
Geist Mono · Uppercase
SemiBold, uppercase, with slightly wide tracking. Small labels and technical details, like the color codes above.
Pair a Lora headline with Geist body text. Don’t set long paragraphs in Lora, and don’t use Geist Mono for headlines.
7. People
The partners behind Happy Scaling. Each profile has a full bio, a headshot download, and links.
Thomas McMahon
Co-founder & Managing Partner
Intelligent connector for DTC and B2B brands. Affiliate program expert, podcast host, and the better golfer.
Dominick Keenan
Co-founder & Operating Partner
Builds consultative sales teams for high-ticket services. Former VP of Sales who kept the ship steady through eight executive turnovers.
8. Downloads
Free to use when covering or partnering with Happy Scaling. Every file has a transparent background. Use SVG for the web and print vendors, and PNG (about 4000 px) for slides, Canva, and social.
The kit includes all 30 logo files in SVG, PDF, and PNG, the favicons, and a README on which version to use where.
Solid Peacock
Reversed, Solid Yellow
Reversed, Ivory and Yellow
Part 2
Website design system
How happyscaling.com is built in Framer. This half of the page is written for designers, developers, and AI tools working on the site.
The typography system is designed to create a clear visual hierarchy while maintaining consistency across all screens. From large display headings to subtle captions, each style is defined to guide attention, improve readability, and support structured content.
These are the color tokens used across the site. Always apply a token instead of typing a hex value, so light and dark sections stay consistent. Light sections use Surface 1 to 3 with Ink text; dark sections use Dark Surface 1 to 3 with the Ivory ink tokens.
Ink 1 · #1C1C1A
Ink 1 on dark · #F7F3E8
Accent 1 · Rich Yellow · #F2B705
Accent 2 · Terracotta · #C1502E
Dark Surface 1 · #06302A
Dark Surface 2 · #093C35
Dark Surface 3 · Peacock · #0B4A42
Surface 1 · Ivory · #F7F3E8
Surface 2 · #EFE9DA
Surface 3 · #E5DDCA
Buttons are designed to clearly communicate hierarchy and intent. Primary actions are visually prominent, while secondary and tertiary styles provide support without competing for attention.
Input components are built for clarity, feedback, and ease of use. Different states - default, active, and filled help users understand where they are in the interaction and what is expected.
13. Build notes
Rules for anyone, human or AI, designing or building pages on happyscaling.com. A plain-text copy of this guide (brand.md) lives in the team Drive with the logo files.
Layout
Every page uses the Main layout template, which carries the navigation and footer. Breakpoints are Desktop (1440+), Desktop Small (1024–1439), Tablet (810–1023), and Phone (under 810). Sections pad 200/48 px on desktop, 160/32 px on tablet, and 160/20 px on phone. Content maxes out at 1600 px wide, text columns at 916 px.
Color
Apply color tokens, never raw hex values. Light sections: Surface 1 to 3 with Ink 1 to 4 text. Dark sections: Dark Surface 1 to 3 with the Ivory ink tokens. Terracotta (Accent 2) is for primary buttons only. Rich Yellow (Accent 1) highlights words on dark backgrounds and fails contrast as text on Ivory.
Type
Use the text style presets, never one-off fonts. Lora for Display and H1 to H4, Geist for H5, H6, body, and UI, Geist Mono uppercase for small labels. One H1 per page. Headings are sentence case.
Components
Reuse existing components before building new ones: Button/Primary, Button/Secondary, Tag, Testimonials Card, Case Study Card, Blog Card, Logo Marquee, Navigation Bar, and Footer. Use one primary button per section.
Shape
12 px corner radius on cards and images. Fully rounded pills on buttons and navigation chips. Borders are 1 px in Ink 4.
Content
Partner names, bios, and headshots come from the People CMS collection. Pull from it rather than retyping. Logos come from the files on this page, never from screenshots.
The Happy Scaling Newsletter
Your next $1MM idea right to your inbox
We'll only send you stuff we'd want to read too
