Housewrapped Branding Guidelines
This guide provides the official colour palette, typography, and spacing recommendations for use in documents, presentations, and external integrations.
Colours
Primary Brand Colour
Housewrapped Orange
#FFA500
Primary brand colour for headings, buttons, links, and key UI elements
Accent Palette
A range of orange tones from light backgrounds to dark contrast colours. Use lighter shades for backgrounds and highlights, darker shades for text emphasis.
Accent 1
#FEFDFB
Accent 2
#FFF8EA
Accent 3
#FFEECB
Accent 4
#FFE3B3
Accent 5
#FFD799
Accent 6
#FFC879
Accent 7
#F7B768
Accent 8
#E79E3B
Accent 9
#FFA500
Accent 10
#E8A03C
Accent 11
#AC6600
Accent 12
#4D3619
Neutral Palette
Gray scale colours for backgrounds, text, borders, and UI elements. Provides visual hierarchy and ensures readability.
Neutral 1
#FDFDFD
Neutral 2
#F9F9F9
Neutral 3
#F0F0F0
Neutral 4
#E8E8E8
Neutral 5
#E1E1E1
Neutral 6
#D9D9D9
Neutral 7
#CECECE
Neutral 8
#BBBBBB
Neutral 9
#8C8C8C
Neutral 10
#828282
Neutral 11
#626262
Neutral 12
#202020
Logos
Icon Logo
The Housewrapped icon mark featuring the "HW" design. Perfect for app icons, favicons, and compact spaces.
Small (64px)
Large (128px)
Full Logo
The complete Housewrapped wordmark. Use for headers, documents, and promotional materials where space permits.
Small (200px)
Large (400px)
Fonts & Spacing
Typography
Primary Font
Geist Sans
The main typeface used across all Housewrapped materials. Clean, modern, and highly readable.
Monospace Font
Geist Mono
Used for technical content, code snippets, and data displays where fixed-width characters aid readability.
Typography Hierarchy
Consistent text sizes and weights create clear visual hierarchy and improve readability.
Display / Hero Heading
text-5xl md:text-6xl lg:text-7xl font-black
48px / 60px / 72px
Quick Brown Fox
Heading 1
text-4xl md:text-5xl lg:text-6xl font-extrabold
36px / 48px / 60px
The Quick Brown Fox
Heading 2
text-3xl md:text-4xl font-bold
30px / 36px
The Quick Brown Fox Jumps Over
Heading 3
text-2xl md:text-3xl font-semibold
24px / 30px
The Quick Brown Fox Jumps Over The Lazy Dog
Heading 4
text-xl md:text-2xl font-semibold
20px / 24px
The Quick Brown Fox Jumps Over The Lazy Dog
Body Large
text-lg font-normal
18px
The quick brown fox jumps over the lazy dog. This is ideal for introductory paragraphs and lead text that needs emphasis.
Body Regular
text-base font-normal
16px
The quick brown fox jumps over the lazy dog. This is the standard body text size used for most content across the website and documents. It provides optimal readability at typical viewing distances.
Body Small
text-sm font-normal
14px
The quick brown fox jumps over the lazy dog. Use for supporting text, captions, labels, and secondary information that complements the main content.
Caption / Fine Print
text-xs font-normal
12px
The quick brown fox jumps over the lazy dog. Reserved for metadata, timestamps, legal text, and other fine print that requires minimal visual prominence.
Font Weight Usage
Note: Black (900) is reserved for super-sized text (48px+). Extrabold works best at 32px+. Light weight should only be used at 18px or larger for readability.
Spacing Guidelines
Consistent Whitespace
Maintain generous whitespace around content blocks. This improves readability and gives the design a clean, professional appearance.
Visual Hierarchy
Use larger spacing between major sections and smaller spacing between related elements. This creates clear visual groupings and guides the reader through content.
Document Margins
For printed documents and presentations, maintain comfortable margins on all sides. Avoid cramming content to the edges—allow the content to breathe.
Content Width
Keep line lengths readable by constraining content width. For body text, aim for 50-75 characters per line for optimal readability.
Dos & Don'ts
Follow these best practices to maintain brand consistency and visual quality across all materials.
Logo Usage
Do: Use official logo files
Always download and use the provided logo files. They're high quality and designed to look sharp at any size.
Don't: Stretch or distort logos
Never squeeze or stretch the logo. It should always keep its original shape and proportions.
Do: Give the logo breathing room
Leave adequate space around the logo. Don't crowd it with other elements—let it stand out.
Don't: Change logo colors
The logo colors are fixed. Don't change the orange or black, or add effects like shadows or gradients.
Color Usage
Do: Use Housewrapped Orange for key elements
The brand orange (#FFA500) should be used for buttons, important headings, and calls-to-action in your designs.
Don't: Use random orange shades
Don't use other orange colors you find elsewhere. Stick to the official Housewrapped Orange or the lighter/darker accent shades provided.
Do: Use the neutral grays provided
For backgrounds, borders, and text, use the grays from the neutral palette. They're specifically chosen to work well together.
Don't: Use too many colors at once
Keep it simple. Don't mix multiple orange shades in the same design. Pick 1-2 colors and stick with them.
Typography
Do: Create clear visual hierarchy
Use different text sizes to show importance. Main titles should be largest, subheadings smaller, and body text smallest.
Don't: Make all text the same size
Don't use similar sizes for titles and body text. Without clear size differences, your content becomes hard to scan.
Do: Use Geist Sans for consistency
Download and use Geist Sans as your main font across all Housewrapped materials—documents, presentations, and graphics.
Don't: Use the heaviest weight on small text
Black weight (the heaviest) is only for very large hero text. For regular headings, use bold or semibold instead.
Layout & Spacing
Do: Leave plenty of white space
Give your content room to breathe. Generous margins and padding make designs look professional and easy to read.
Don't: Cram everything together
Don't pack too much content into tight spaces. Crowded layouts are overwhelming and difficult to read.
Do: Keep line lengths readable
For documents and presentations, avoid very wide text blocks. Shorter lines are easier to read and follow.
Don't: Fill the entire page width
Don't stretch text all the way across wide pages. Long lines are tiring to read and look unprofessional.
Visual Examples
Correct Usage
Clean, well-spaced layout with proper color usage and adequate whitespace.
✓ Proper spacing, brand colors, clear hierarchy
Incorrect Usage
Cramped layout, poor spacing, incorrect logo usage, missing brand color.
✗ Cramped spacing, wrong colors, no visual hierarchy
Examples & Mockups
See the branding guidelines in action with these practical examples.
Web Card Example
Free Home Insulation
Save up to £400 annually on energy bills with government-funded ECO4 grants.
HousewrappedTypography in Content
Understanding ECO4 Grants
The ECO4 scheme helps eligible homeowners access free or subsidized energy efficiency improvements.
Who Qualifies?
If you receive certain benefits or have a low household income, you may be eligible for support through the ECO4 scheme.
Key Benefits Include:
- •Lower energy bills through improved insulation
- •Warmer, more comfortable home all year round
- •Reduced carbon footprint and environmental impact
Important: Applications are processed on a first-come, first-served basis. Check your eligibility today.
Color Palette in Use
Primary Button
bg-accent-9 + text-white
Secondary Button
border-accent-9 + text-accent-9
Alert/Notice
New Update
bg-accent-2 + border-accent-6
Process Steps Example
Based on the "How It All Works" page design pattern showing step-by-step processes.
The Application Process
Submit Application
Complete our simple online form with your property details.
Assessment
Our team reviews your eligibility and arranges a survey.
Installation
Professional installation by our accredited team.
Voice & Tone
Housewrapped speaks with a warm, conversational voice that makes energy efficiency feel approachable and achievable for everyone.
Voice Attributes
💬Conversational & Personable
Write as if speaking directly to a homeowner over tea—friendly, warm, and casual. Avoid corporate formality.
✏️Plainspoken & Jargon-Free
Use clear, everyday language. If technical terms are necessary, explain them simply and accessibly.
🤝Helpful & Empowering
Educate and enable action rather than sell or lecture. Make readers feel capable and supported.
✨Positive & Reassuring
Emphasize benefits—comfort, savings, environment—and frame improvements as achievable upgrades.
🏠Relatable & Grounded
Use analogies tied to home life and everyday experiences to make technical concepts easy to understand.
👥Accessible & Inclusive
Speak to a broad audience regardless of technical knowledge. Everyone should feel welcome and informed.
Writing Guidelines
Open with a friendly hook
Start with a nod to common homeowner frustrations or everyday experiences to build empathy and connection.
Example: "Ah, the great British weather, always keeping us on our toes, right?"
Use relatable analogies
Translate technical concepts into homeowner-friendly terms using everyday imagery.
Examples: "Like giving your home a warm hat" (loft insulation), "Patching holes in a bucket" (air leaks)
Keep it conversational
Use normal pronouns ("you", "we"), contractions, and short sentences. Write as you would speak.
Frame advice as suggestions
Use phrases like "You might consider...", "A simple step is...", "It can feel rewarding when..." rather than commands.
Emphasize encouragement
Remind readers that even small actions help, and improvements are within reach. Stay positive and motivating.
Example: "A gift to your wallet and to the planet"
Tone in Practice
Housewrapped Voice
"Winter's here, and you might notice those chilly spots around the house. Good news—a bit of loft insulation is like giving your home a warm hat. It keeps the heat where it belongs, saves you money, and you'll feel the difference on those frosty mornings."
Not Our Voice
"Our organization provides thermal efficiency solutions for residential properties. Loft insulation installation reduces heat transfer coefficient values and improves Energy Performance Certificate ratings. Contact our sales team to discuss implementation."
Preferred Language
✓ Use These Phrases
- •"You might consider..."
- •"It's like giving your home..."
- •"Good news is..."
- •"You'll feel the difference..."
- •"Here's how to..."
- •"We're here to help..."
✗ Avoid These Phrases
- •"Our organization provides..."
- •"Implementation of solutions..."
- •"Contact our sales team..."
- •"Thermal efficiency coefficient..."
- •"You must..." or "You need to..."
- •Corporate jargon and formality
Practical Writing Tips
Use relatable analogies: "Like giving your home a warm coat" (insulation), "Like patching holes in a bucket" (air leaks)
Keep sentences digestible: Short, punchy sentences with a conversational rhythm work best
Use contractions naturally: "You'll", "it's", "we're" feel more personal than formal alternatives
Focus on benefits: Lead with outcomes—comfort, savings, peace of mind—rather than technical specifications
Build empathy first: Acknowledge common challenges before jumping into solutions