Brand Style Guide | Finlay

Brand style guide

Black and Gold, Built to Last

Finlay started in Wellington, and the brand still carries that city's colours: black and gold. Today I'm an Auckland-based developer working with businesses across New Zealand and Australia. This guide keeps every page, proposal and file looking like the same studio.

Download the logoSee the colours

Logo

The F/NLAY. Wordmark

The logo is the F/NLAY. wordmark in two official colourways: black and gold. It is never redrawn, never set in type and never paired with a different gold. The gold in the 2011 master files is PANTONE 109 C (CMYK 0, 10, 100, 0), which is #FFE600 on screen.

Finlay black wordmark on white
Black on white
Finlay gold wordmark on ink
Gold on ink
Finlay gold wordmark on white
Gold on white (logo only)
Finlay black wordmark on gold
Black on gold

Clear Space and Size

Keep clear space equal to the height of the letter F on all sides, about 18% of the wordmark's width.

Finlay wordmark with clear space equal to the height of the F

Minimum 120px wide on screen, 25mm in print. Aspect ratio 5.23:1.

Downloads

Trimmed web exports with transparent backgrounds. Use the SVG wherever you can.

  • Black wordmark#000000SVGPNG
  • Gold wordmark#FFE600 · PANTONE 109 CSVGPNG

Need print artwork (EPS or PDF, process or spot colour)? Email hello@finlay.co.nz.

Do

  • Use the official wordmark in black or gold, as SVG or PNG, on white, paper, ink or gold.
  • Keep clear space of at least the height of the letter F on all sides.
  • Keep it at least 120px wide on screen and 25mm in print.
  • On photographs, sit the logo on a solid ink or white plate.

Don't

  • Recolour it green, teal or a different yellow, or stretch, outline, rotate or add shadows.
  • Type "FINLAY" in Poppins as a stand-in for the wordmark.
  • Use gold as a text colour on white or paper.
  • Lock the mark up with a personal name. The business is Finlay.

Colour

Palette

Aim for roughly 60% paper or white, 25% ink and 15% gold. Gold is an accent and a background, never a text colour on a light field.

Gold#FFE600 · 255, 230, 0PANTONE 109 C · C0 M10 Y100 K0. Buttons, underlines, highlights, logo.
Ink#1B1B1B · 27, 27, 27Headings, dark panels, secondary buttons.
Logo black#000000 · 0, 0, 0Process black (100K). The black wordmark only.
Muted#555555 · 85, 85, 85Leads, captions, eyebrows.
Paper#F6F6F6 · 246, 246, 246Page background and hero field.
White#FFFFFF · 255, 255, 255Cards, header bar, form surfaces.

Logo Colour Specs

RoleSpotCMYKRGB / Hex
GoldPANTONE 109 C0, 10, 100, 0255, 230, 0 · #FFE600
Logo blackProcess Black0, 0, 0, 1000, 0, 0 · #000000
Ink (UI)––27, 27, 27 · #1B1B1B

Accessible Pairings

PairingPreviewRatioWCAG
Ink on goldAa14.9:1AAA
Ink on paperAa14.7:1AAA
Gold on inkAa13.6:1AAA
White on inkAa17.2:1AAA
Muted on whiteAa7.5:1AAA
Gold on whiteAa1.3:1Fail
White on goldAa1.3:1Fail

Always set ink text on gold. Gold on white and white on gold fail contrast, so gold on white is for the logo only.

Typography

Poppins for Headings, Inter for Everything Else

Headings are Poppins in title case, never all caps. The only uppercase style is the small Inter eyebrow with wide tracking. Body text is Inter 18px with 1.65 line height.

H1 · 800Get a Ballpark Website Quote
H2 · 700From Enquiry to Launch
H3 · 600Tell Me About Your Project
EyebrowWebsite quote
Body 18I'm an Auckland-based developer working with businesses across New Zealand and Australia.
Caption 1418+ years building websites

Components

Buttons, Cards and Panels

Buttons

Primary is gold with ink text. Secondary is ink with white text. Same radius, padding and type.

Start my quoteView my work

10px radius · 14px 28px padding · Inter 15/600

WordPress

A Project Card

White surface, 14px corners, soft shadow. Image on top, title and a short line beneath.

Visit site

Dark Panel

Use ink blocks for closing calls to action. A gold button on ink always works.

Start a project

Layout

Spacing and Grid

  • Content width 1200px, with 28px side padding (18px on small screens).
  • Section padding 70px on desktop, 48px on mobile.
  • Cards 14px radius. Buttons 10px radius.
  • Header is a solid white bar with dark Inter navigation on every page.
  • Heroes sit on paper with one title-case H1, a short first-person lead and a gold button.

Imagery and voice

Real Work, First Person

  • Use live site screenshots and client logos rather than stock photos.
  • Icons, if used, are simple and monochrome on gold or ink.
  • Write short, plain sentences in the first person (I and me). The business is Finlay.
  • Location copy is Auckland, New Zealand, working with clients across New Zealand and Australia.