Brand guide

The Courtelier identity.

Editorial-first, considered, restrained. This page documents the visual system for anyone designing, advertising or producing content with us.

01

Logo

The wordmark is set in Red Hat Display Black with tightened tracking. It is the only mark we use in long form. Use the currentColor SVG so it adapts to its context.

Typeface
Red Hat Display Black (900)
Tracking
-0.025em
Min size
96 px wide on screen, 24 mm wide in print
Clear space
Equal to half the cap height on all four sides

Download SVG Favicon SVG

Don't

  • Don't stretch, skew or rotate the wordmark
  • Don't apply a drop shadow, glow, gradient fill or outline
  • Don't place over busy photography without sufficient contrast
  • Don't pair with a tagline lockup other than the official "The padel magazine"

02

Colour

Seven core values. Use ink and bg for nearly everything; reach for accent only when calling attention to category labels, links and primary actions. Light mode is canonical; dark mode is a derived inversion.

Ink

#1A1A1A

--color-ink

Primary type, masthead, footer, all editorial copy.

Ink soft

#4A4A47

--color-ink-soft

Body text where contrast against ink is needed.

Ink mute

#8A8A85

--color-ink-mute

Eyebrows, meta, captions, dates.

Accent

#C8923A

--color-accent

Category labels, links, primary CTA hover, hairline accents. Use sparingly.

Bg

#FFFFFF

--color-bg

Page background. Pure white for maximum text contrast.

Bg sunken

#F7F4EE

--color-bg-sunken

Cards, ad zones, form panels, newsletter strip. Subtle warm tint for hierarchy.

Line

#E8E2D6

--color-line

Hairlines, dividers, card borders.

03

Typography

Two typefaces, both from Google Fonts, both with font-display: swap. Red Hat Display is reserved for headlines, the masthead and eyebrows. DM Sans handles everything else. Body copy uses a 1.7 line-height for editorial comfort.

Display 1 (hero)

Family
Red Hat Display 700
Size
clamp(2rem, 3vw + 1.4rem, 3.5rem)
Tracking
-0.025em
A magazine for people who play.

Display 2

Family
Red Hat Display 700
Size
clamp(1.75rem, 2.5vw + 1rem, 2.5rem)
Tracking
-0.025em
Inside the new Premier Padel circuit

Display 3

Family
Red Hat Display 700
Size
clamp(1.5rem, 2vw + 1rem, 2rem)
Tracking
-0.025em
Why Spain still rules

Display 4

Family
Red Hat Display 500
Size
clamp(1.25rem, 1.5vw + 0.85rem, 1.5rem)
Tracking
-0.025em
The art of the bandeja

Body

Family
DM Sans 400, line-height 1.7
Size
clamp(1rem, 1vw + 0.75rem, 1.125rem)
Tracking
0
Watch any professional match for ten minutes and you will see it: the player retreating from the net under a deep lob, racquet held high, contact made just above shoulder level.

Eyebrow

Family
DM Sans 500, uppercase
Size
clamp(0.75rem, 1.2vw + 0.4rem, 0.8125rem)
Tracking
0.12em
FEATURES · 7 MIN READ

04

Voice

How Courtelier sounds, in nine words and a sentence each.

  • Considered, not breathless.

    Padel is exciting; we don't need to perform that excitement. The reader is intelligent and returns repeatedly. We earn their attention by being worth coming back to.

  • Specific, not generic.

    "Bullpadel Hack 03 Junior" beats "an entry-level racquet". A word count beats "lengthy". A name beats "a top player". Specificity is what gives the writing authority.

  • Restrained, not promotional.

    We do not write copy that reads like marketing. Even on the advertise page. Our voice is editorial first; commerce sits in clearly-marked rooms within it.

  • British editorial.

    UK English (organisation, colour, recognise). Single quotation marks for dialogue. Em dashes with hair spaces. Numbers under ten in words; over ten in figures.

05

Photography

Hero imagery is photojournalistic. Natural light where possible, the action mid-motion, never staged. Avoid stock-feel imagery (clean backgrounds, frozen mid-air poses with motion-blur added in post). When commissioning, ask for the shot before or after the obvious money frame.

  • Avoid heavy filters, vignettes or oversaturated colour grading
  • Avoid screenshots from broadcast feeds (low resolution, watermark issues)
  • Avoid AI-generated imagery without explicit editorial labelling
  • Always credit the photographer in the caption

06

Spacing

An 8-point base scale. Every margin, padding and gap in the system is one of these values, no exceptions.

  • --s-1

    4px · 0.25rem

  • --s-2

    8px · 0.5rem

  • --s-3

    12px · 0.75rem

  • --s-4

    16px · 1rem

  • --s-5

    24px · 1.5rem

  • --s-6

    32px · 2rem

  • --s-7

    48px · 3rem

  • --s-8

    64px · 4rem

  • --s-9

    96px · 6rem

07

Get the assets

Logo files and a colour palette for design tools. For larger asset packs (display ads, sponsored content templates), get in touch.

  • Wordmark. SVG

    Outlined paths, currentColor fill, scales to any size. Use as the primary logo.

    Download wordmark.svg

  • Favicon. SVG

    "C" monogram on charcoal with amber accent. For browser tabs and small contexts.

    Download favicon.svg

  • OG image. PNG

    1200×630 social-share preview. Includes wordmark, tagline and brand colour.

    Download og-image.png