Winterfolk Website Branding and Styling Guide

Purpose

This guide defines the visual and writing standards for the Winterfolk website and related digital material.

The highest-priority standards are:

  • Fonts
  • H1–H5 headings
  • Paragraph text
  • Colours
  • Gold dividers
  • Hero sections
  • Buttons
  • Images
  • Page layout
  • Forms
  • Mobile presentation
  • Writing style

Reusable styling belongs in the main Winterfolk CSS. Individual page sections should contain clean HTML without separate font, size or text-colour instructions.

Brand Identity

Winterfolk should look professional, welcoming and connected to live roots music.

The design should feel:

  • Established
  • Community-based
  • Warm and natural
  • Easy to read
  • Professional without feeling corporate
  • Relevant to longtime supporters and younger audiences
  • Connected to real artists, audiences, venues and live music

Connecting Generations Through Music

Main Website Styling

Official Font System

Merriweather

Use Merriweather for:

  • H1 headings
  • H2 headings
  • H3 headings
  • Major page and section titles

Merriweather gives Winterfolk a well-established, editorial and historical appearance.

Montserrat

Use Montserrat for:

  • H4 headings
  • H5 headings
  • Navigation
  • Buttons
  • Form labels
  • Card headings
  • Short labels
  • Statistics
  • Calls to action

Montserrat provides a clean contrast with Merriweather.

Lato

Use Lato for:

  • Paragraphs
  • Lists
  • General website text
  • Descriptions
  • Captions
  • Contact information
  • Longer instructions

Lato is the main reading font.

Georgia

Use Georgia only for:

  • Featured quotations
  • Selected historical statements
  • Pull quotes

Georgia is not the regular heading or paragraph font.

Font Fallbacks

font-family: "Merriweather", Georgia, serif;
font-family: "Montserrat", Arial, sans-serif;
font-family: "Lato", Arial, sans-serif;

Brand Colour Palette

Main Colours

Colour Hex Code Main Use
Main Navy #0D2B45 H1, dark sections, footer and overlays
Deep Blue #14324A H2 headings and important text
Medium Blue #2D5D8A H3 headings and secondary accents
Winterfolk Blue #17375E Buttons, links, forms and major design elements
Sky Blue #A8D7F2 Light accents and selected backgrounds
Main Gold #E39B2D Buttons, accent headings and highlights
Divider Gold #C89B3C Standard horizontal dividers
Alternate Gold #D5A52F Quote borders and selected accents

Background and Neutral Colours

Colour Hex Code Main Use
White #FFFFFF Main backgrounds and text on dark areas
Soft White #F7FAFC Light section backgrounds
Light Blue #F5F9FC Alternate section backgrounds
Body Text #333333 Paragraphs and general text
Dark Text #1A1A1A Selected contact and form text
Medium Grey #555555 Table borders and secondary information
Blue-Grey Border #DCE6EE Cards, images and regular borders
Light Grey #C0C0C0 Shadows and minor details
Black #000000 Limited use in tables and email borders

Colour Rules

  • Navy and blue are the main Winterfolk colours.
  • Gold is an accent and should not dominate a page.
  • Use white or light backgrounds for longer reading sections.
  • Use white text on dark blue or navy backgrounds.
  • Maintain clear contrast between text and its background.
  • Do not use colour alone to communicate important information.

Heading Hierarchy

H1 — Main Page Title

Use H1 for the main page title or hero title. Each page should normally contain only one H1.

Hero H1

  • Font: Merriweather
  • Desktop size: 56px
  • Mobile size: 38px
  • Weight: 700
  • Line height: approximately 1.15
  • Colour: white
  • Alignment: centred
  • Subtle text shadow for readability

Content H1

  • Font: Merriweather
  • Desktop size: 46px–48px
  • Mobile size: approximately 36px
  • Weight: 700
  • Line height: approximately 1.15
  • Colour: Main Navy #0D2B45
  • Alignment: left

H2 — Major Section Heading

  • Font: Merriweather
  • Desktop size: 30px–32px
  • Mobile size: approximately 28px
  • Weight: 700
  • Line height: approximately 1.2
  • Colour: Deep Blue #14324A
  • Alignment: left
  • Placed below a gold divider

H3 — Subsection Heading

  • Font: Merriweather
  • Desktop size: 24px–26px
  • Mobile size: approximately 22px
  • Weight: 700
  • Line height: approximately 1.25
  • Colour: Medium Blue #2D5D8A
  • Alignment: left

H4 — Card or Information Heading

  • Font: Montserrat
  • Desktop size: approximately 22px
  • Mobile size: approximately 20px
  • Weight: 700
  • Line height: approximately 1.3
  • Colour: Main Navy #0D2B45
  • Alignment: left

Use H4 for cards, statistics, tab headings, venue names and smaller groups of information.

H5 — Minor or Accent Heading

  • Font: Montserrat
  • Standard size: approximately 18px
  • Weight: 700
  • Line height: approximately 1.35
  • Colour: Main Navy #0D2B45
  • Alignment: left

A special accent H5 may be 24px, uppercase and Main Gold #E39B2D. Do not use this treatment for long headings.

Heading Rules

  • Heading levels must reflect the organization of the content.
  • Do not select a heading only because of its size.
  • Avoid long passages written entirely in capital letters.
  • Use title case for short major headings.
  • Use sentence case for longer explanatory headings.
  • Do not repeat a heading in both a Divi module and an HTML module.

Paragraph and General Text Styling

  • Font: Lato
  • Size: 14px
  • Weight: 400
  • Line height: 1.25
  • Colour: #333333
  • Alignment: left
  • Bottom margin: approximately 10px

Paragraph Rules

  • Keep paragraphs reasonably short.
  • Do not stretch long paragraphs across the entire screen.
  • Do not centre long paragraphs.
  • Keep paragraph spacing consistent.
  • Indent all bulleted lists.
  • Use single spacing within bulleted lists.
  • Avoid manual line breaks used only to control layout.
  • Let the responsive design control line wrapping.

CSS and HTML Rules

  • Main styling belongs in the global Winterfolk CSS.
  • Individual section HTML should not assign fonts, font sizes or text colours.
  • Use clean H1–H5 and paragraph tags.
  • Use CSS classes for styles that appear more than once.
  • Use inline styling only for special cases, testing and email code.
  • Do not add HTML styling that conflicts with the global CSS.
  • Divi modules should not override global typography without a clear reason.

Gold Dividers

  • Width: 500px
  • Height: 3px
  • Colour: #C89B3C
  • Border: none
  • Clear space above and below
  • Placed at the top of a section
  • Positioned above the related heading
  • Left aligned with H1 and H2
  • Reduced to approximately 80% width on small screens

Hero Sections

  • Desktop height: 650px
  • Mobile height: approximately 500px
  • Full-width presentation
  • Background image set to cover
  • Main subject kept visible
  • Navy gradient overlay
  • White H1
  • Centred title
  • Subtle text shadow

Standard Hero CSS

.wf-hero {
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

Standard Navy Overlay

background:
  linear-gradient(
    to bottom,
    rgba(23, 55, 94, 0.30),
    rgba(13, 43, 69, 0.85)
  ),
  url("IMAGE-URL");

The photograph should remain visible. The overlay should make the text readable without making the entire image too dark.

Page Layout

  • Use full-width sections with contained content rows.
  • General row width should be approximately 1080px–1200px.
  • Use approximately 70px vertical padding for standard sections.
  • Use one, two or three columns according to the content.
  • Keep columns visually balanced.
  • Do not force several images into a narrow column.
  • Avoid building a long page entirely from centred, single-column sections.
  • Change layouts where appropriate on long pages.
  • Keep related text and images close together.
  • Stack columns on mobile devices.

Section Backgrounds

  • White #FFFFFF
  • Soft White #F7FAFC
  • Light Blue #F5F9FC
  • Sky Blue #A8D7F2
  • Winterfolk Blue #17375E
  • Main Navy #0D2B45
  • Photographs with navy overlays

Background Rules

  • Do not repeat the same background in several adjacent sections.
  • Alternate backgrounds to create clear page divisions.
  • Do not change backgrounds so frequently that the page looks patchy.
  • Use dark sections for emphasis.
  • Use light backgrounds for longer reading areas.
  • Use white text on navy and dark-blue sections.

Photography and Images

  • Use real Winterfolk artists, audiences and venues whenever possible.
  • Favour performance and audience photographs over posed photographs.
  • Use Toronto winter scenes where location is important.
  • Avoid Christmas and holiday imagery.
  • Avoid generic stock photographs when real festival images are available.
  • Avoid images that look obviously AI-generated.
  • Use fewer strong images instead of crowding a section.
  • Keep image proportions consistent within the same layout.
  • Use useful alternative text.

Image Styling

  • Standard corner radius: approximately 8px
  • Border: 1px solid #DCE6EE
  • Use a soft shadow where appropriate.
  • Avoid heavy outlines and dramatic shadows.

Official Logo

  • Use only the official Winterfolk logo.
  • Do not recreate it with another font.
  • Do not use an AI-generated replacement.
  • Do not stretch, squash, crop or distort it.
  • Do not change its colours.
  • Do not add unnecessary shadows or effects.
  • Maintain its original proportions.
  • Leave clear space around it.
  • Use a white or high-contrast version on dark backgrounds.
  • Do not place it directly over a busy photograph.
  • Align “XXV” carefully with the base of the logo.

Website Buttons

  • Font: Montserrat
  • Weight: 700
  • Gold background
  • Navy text
  • Approximately 10px rounded corners
  • Clear horizontal and vertical padding
  • Blue background with white text on hover

Button Wording

  • Buy Tickets
  • Apply to Perform
  • Volunteer
  • View the Schedule
  • Learn More

Do not use long sentences inside buttons.

Cards

  • A light background
  • A 1px blue-grey border
  • A restrained shadow
  • Consistent internal padding
  • Consistent height within a row
  • A Montserrat card heading
  • Left-aligned text
  • Approximately 8px–12px rounded corners

Use icons only when they help explain the information. Do not mix unrelated icon styles on the same page.

Featured Quotations

  • Font: Georgia
  • Size: approximately 22px
  • Weight: 700
  • Line height: 1.45
  • Colour: #123A5D
  • Left border: 4px solid #D5A52F
  • Left padding: 20px
  • Vertical margin: approximately 28px

Use this treatment sparingly.

Navigation

  • Montserrat font
  • Strong contrast
  • Clear spacing
  • Short menu labels
  • A visible hover state
  • A visible active-page state
  • Simple mobile navigation
  • A highlighted ticket or action button where appropriate

Important actions should be easy to find: Tickets, Schedule, Artists, Apply to Perform, Volunteer and Contact.

Footer

  • Official Winterfolk logo
  • Key navigation
  • Contact information
  • Social-media links
  • Copyright information
  • Non-profit information where appropriate
  • Sponsor recognition where appropriate

The footer should use Winterfolk colours and remain easy to read on mobile devices.

Special Components

Forms

  • Left-aligned labels and descriptions
  • Three columns on desktop where practical
  • One column on mobile
  • Dark-blue 1px field borders
  • White input backgrounds
  • Approximately 8px internal padding
  • Gold focus styling
  • Textareas with a minimum height of approximately 120px
  • Mobile stacking below approximately 768px

Form Submit Button

  • Winterfolk Blue background
  • White text
  • Gold border
  • Gold hover background
  • Navy or black hover text

Confirmation Emails

  • Maximum width of approximately 700px
  • Official Winterfolk logo at the top
  • Inline CSS for email compatibility
  • White and light-blue zebra-striped rows
  • Compact row heights
  • 1px black border where required
  • 12px rounded outer corners
  • Light grey drop shadow where supported
  • Clear contact information
  • Mobile-friendly table widths

Schedule Tables

  • Table centred on the page
  • Approximately 80% overall width
  • Time column approximately 10%
  • Stage columns approximately 22% each
  • Table text approximately 14px
  • Cell padding approximately 4px 6px
  • Border colour #555555
  • Horizontal scrolling on smaller screens

Contact Cards

  • Lato body text
  • Montserrat or established H3 role headings
  • Left-aligned content
  • Compact spacing
  • Approximately 12px grid gaps
  • No manual line breaks used to force alignment
  • Separate cards for separate contacts
  • Consistent card padding and height

Responsive and Accessible Design

Mobile Standards

  • Change multi-column layouts to one column.
  • Reduce heading sizes.
  • Reduce the hero height to approximately 500px.
  • Change the gold divider to approximately 80% width.
  • Make buttons large enough to tap.
  • Keep form fields full width.
  • Allow wide tables to scroll horizontally.
  • Check that hero text does not cover the main subject.
  • Keep regular text at 14px.

Accessibility

  • Maintain strong contrast between text and backgrounds.
  • Use a clear H1–H5 heading order.
  • Do not select headings only for their visual size.
  • Use meaningful alternative text for important images.
  • Do not embed important information only inside images.
  • Use proper labels for form fields.
  • Keep buttons and links large enough to operate easily.
  • Provide visible keyboard-focus indicators.
  • Do not communicate information through colour alone.
  • Use captions for important video content where available.
  • Clearly identify accessible seating and venue information.

Writing and Content

Brian Writing Style

  • Use plain, direct English.
  • Lead with the main point.
  • Keep sentences and paragraphs reasonably short.
  • Use few adjectives.
  • Use active language.
  • Include real facts, examples, names and numbers where useful.
  • Explain why something matters.
  • Be friendly and professional.
  • Show pride without boasting.
  • Avoid corporate jargon.
  • Avoid clichés.
  • Avoid exaggerated claims.
  • Avoid repeating the same point in different words.
  • Use warmth or mild humour when it fits.
  • Keep the focus on artists, audiences, community and live music.

The writing should sound like a real person speaking from experience. It should not sound like advertising copy or a formal press release unless a press release is specifically required.

Approved Names and Terminology

  • Winterfolk Blues & Roots Festival
  • Winterfolk Festival
  • Winterfolk XXV
  • Tranzac Club
  • The Annex
  • Connecting Generations Through Music
  • Emerging artists
  • Artist applications
  • Volunteers

Final Page Check

  • The official Winterfolk logo is used.
  • The logo has not been distorted or recoloured.
  • Merriweather is used for H1–H3.
  • Montserrat is used for H4–H5, navigation, labels and buttons.
  • Lato is used for paragraphs and general text.
  • Heading levels follow the content structure.
  • Paragraphs are left aligned and easy to read.
  • Colours follow the Winterfolk palette.
  • Gold is used as an accent.
  • The gold divider is 500px × 3px.
  • The divider is positioned above the heading.
  • The hero is 650px high on desktop.
  • The hero remains readable on mobile.
  • Section backgrounds provide enough variety.
  • Images are real, relevant and properly sized.
  • Columns are visually balanced.
  • Buttons follow the correct website or form style.
  • Forms stack properly on mobile.
  • Keyboard focus is visible.
  • Links use descriptive wording.
  • The page works on desktop, tablet and mobile.
  • The writing is clear, direct and recognizably Winterfolk.

Outstanding Items

  • Exact approved logo files
  • Minimum logo size
  • Exact logo clear-space measurement
  • Final footer design
  • Exact navigation measurements
  • Final sticky-header behaviour
  • Final social-media graphic templates
  • Final image-dimension chart for each page component

These remaining items do not change the main font, colour, heading, paragraph, divider, hero or layout standards in this guide.

Winterfolk XXV Rebranding Project Tracker

Done Area Task Status Notes
Brand Strategy Approve five brand words: Discovery, Community, Generations, Authentic, Inspiring Complete
Brand Strategy Approve tagline: Connecting Generations Through Music Complete
Brand Strategy Create updated mission statement Not Started
Logo Retain snowflake-as-guitar-body concept Complete
Logo Create XXV / 25th Year concept Complete
Logo Create final SVG master logo Not Started
Logo Create dark, light, monochrome, icon, favicon versions Not Started
Colours Lock final colour palette and HEX codes In Progress
Fonts Finalize web fonts and heading/body styles In Progress
Website Create Divi homepage wireframe In Progress
Website Build hero section Not Started
Website Build Discover New Voices section Not Started
Website Build Generations / Community sections Not Started
Website Build 25 Years timeline Not Started
Content Rewrite About / Mission / History pages Not Started
Content Create sponsor, volunteer, artist application pages Not Started
Social Media Create final FB event, FB group, Instagram, profile assets In Progress
Promotion Create launch announcement, press release, sponsor package Not Started

Overall Estimate at This Time

Area Estimated Completion Notes
Brand Identity 95%
Logo / Assets 75%
Website Planning 20%
Website Build 5%
Content Writing 10%
Social Media 20%
Overall Project 35%
Share This