This is the working reference for anyone drawing new FNS screens, banners or franchisee material. Everything here is taken from the approved build — gold/index-green-secondary.html, Champagne Gold V1, Green Option B. Read the first section before you open a canvas: the rest of the system only makes sense once the division between gold and forest is fixed in your head.
The One Rule Final
One sentence governs every colour decision in FNS 3.0. If a choice is unclear, it is almost always because this rule is being broken somewhere on the artboard.
GOLD owns the small precise marks — numerals, ticks, bullets, stars, icons, the primary CTA, the highlight italic. It is applied sparingly, at small scale, and it is always the thing the eye is meant to land on.
GREEN owns the large quiet surfaces and the structural lines — panel grounds, card grounds, hairlines, the secondary button, the sub-headlines. It is the material, never the mark.
Why it holds
Gold at large area reads as decoration and cheapens fast; gold at small area reads as precision. Forest behaves the opposite way — it is a superb ground and a poor mark, because at mark scale it disappears against the dark page. The single exception is --forest-mark, the one green in the ramp cleared to carry type or hold an edge.
Splitting the two by size rather than by section is what makes the palette survive fourteen photographs and a franchisee adding a fifteenth.
The test
Point at any coloured element and ask: is this a mark or a ground? A mark is small, precise, and carries meaning on its own — a step number, a tick, a star, the button you want pressed. That is gold.
A ground is large, quiet, and exists so something else can sit on it — a panel, a card, a chip veil, a keyline, a divider. That is forest.
The step marker 3 is the whole system in one object: gold numeral, forest veil, forest keyline.
Colour
Two palettes, one page. Champagne Gold supplies the grounds, the text and the single accent; Forest is layered over it to supply structure. Use the token, never the raw value — every hex below is already declared as a CSS custom property.
Champagne Gold
Forest
The green layer is deliberately narrow: one hue (145°), one saturation (20%), three lightnesses. That constraint is the reason the greens never fight each other or the photography. Do not add a fourth green, and do not shift the hue or saturation to “warm it up” for a campaign.
This is the one token that changes meaning between the two palettes, and the single most common thing to get wrong when porting a component from an older Champagne Gold layout.
In this direction --line resolves to rgba(98,147,118,.24) — the forest structural hairline — not the gold one. Every structural rule, card edge and section divider is therefore green. --line-soft at rgba(231,221,209,.14) remains available as the neutral ivory hairline where green would read as a deliberate colour choice rather than structure.
Type
Three faces, each with exactly one job. They load from Google Fonts; the family string is in the Build tab. No other face is used in FNS 3.0.
Barlow Condensed — 400 / 500 / 600 / 700 — --head
Train with intent
Headlines, buttons, labels and tracked caps. It is the structural voice: condensed, uppercase, tight. If a piece of text is a heading, a button label or a tracked micro-label, it is Barlow Condensed — there is no second option.
Manrope — 300–700 — --text
Everything a member actually reads sits in Manrope: body copy, the navigation, form fields, interface text and every number a person has to parse.
Set body at 16px / 1.65. Manrope is also the interface face — nav, inputs, selects — which is why the nav does not shout at the headline above it.
Cormorant Garamond italic — --curve
the highlight word
The highlight word, and nothing else. It never sets a paragraph, a label, a button or a full headline. In the build the word is wrapped in <span class="gold">, which makes it gold as well as italic — so it is a mark, and the one-per-headline discipline is what keeps it precious.
Scale
| Role | Size | Line-height | Notes |
|---|---|---|---|
h1 | clamp(52px,6.2vw,96px) | .96 | Barlow Condensed. One per view. |
h2 | clamp(34px,3.8vw,56px) | 1.06 | Barlow Condensed. Section headline. |
h3 | clamp(26px,2.4vw,36px) | — | Colour --gold. |
.lead | clamp(17px,1.3vw,21px) | 1.5 | Manrope. The paragraph directly under a headline. |
| Body | 16px | 1.65 | Manrope. |
| Labels | 14px | — | .16em tracking, uppercase. |
| Buttons | 15px | — | .09em tracking, uppercase, padding 10px 21px. |
Hard floor: nothing renders below 14px at any viewport width. The headline sizes are clamped, not stepped, so they resolve continuously between the 1400px, 1080px, 980px and 720px breakpoints — do not add a mobile override that drops a label under the floor to make a line fit. Shorten the line instead.
Components
Five live objects carry most of the interface. Each one is an application of the one rule, so they can be read as a set rather than memorised individually.
| Component | Treatment | Where it is used |
|---|---|---|
.btn | Background --gold, label #181818, 1px --gold border. Hover --taupe. | The primary action — the one thing you want pressed on that screen. Gold, so it is a mark: one per view, never two side by side. |
.btn-ghost | Transparent, label and border --forest-mark. Hover: background --forest, label --ivory. | The lower-commitment action sitting beside the primary. Green, so it recedes without disappearing. |
.btn-ghost over photography | Additionally takes background rgba(24,24,24,.45). | Any ghost button placed on an image. The veil is what lets the ivory label and its keyline clear AA over bright regions of the photograph. |
.pill | --forest-veil ground, --forest-line keyline, --forest-mark label. | Standalone status or qualifier next to a headline. |
.tag | Identical treatment to .pill. | Grouped metadata — class types, disciplines, filters. Same object, two names: choose by role, not by look. |
.num | --forest-veil ground, --forest-line keyline, numeral in --gold. | Step markers in ordered sequences. The clearest statement of the rule in the system. |
Every green label and every green edge in that table is --forest-mark — the one green cleared to carry type or hold an edge, at 4.72:1 on the chip veil. No other green in the ramp may do either job, and no green of any kind takes a numeral, a tick, an icon or a primary CTA.
Forms
Inputs and selects: background rgba(24,24,24,.5), border rgba(231,221,209,.38), font-size 16px, focus border --gold. Two of those are non-negotiable for reasons that are not visual — the .38 ivory hairline is what clears the 3:1 WCAG 1.4.11 minimum for a control boundary, and 16px is what stops iOS Safari zooming the page on focus. Do not lighten the field border to a decorative hairline, and do not set field text at 14px.
Note that the field border is ivory, not green: the form is the one place a neutral edge beats a structural one, because the green keyline would read as a state.
Photography and overlays
Every photograph on the site carries a treatment. They are not interchangeable — the diagonal gradients are for sections where type sits at one end of the frame, the flat veils are for sections where type sits across the whole image. Match the section, do not improvise a new overlay.
| Section | Overlay | Type of treatment |
|---|---|---|
| Hero banner A Private Training Club FNS360 Experience | linear-gradient(45deg,#000 0%,rgba(0,0,0,.66) 100%) | Diagonal. Holds one dense corner for the headline and lets the image open up away from it. |
| Your First Class (apply) | linear-gradient(45deg,black,#00000080) | Diagonal, stronger at the origin — the form sits over the dense end. |
| The Results Speak Built for People Who | Flat rgba(24,24,24,.85) | Even veil. Type runs across the full frame, so the image is pushed all the way back. |
| Day One Performance Classes | Unchanged, 90–94% | Left as built. Do not re-grade these to match the others. |
.card over the diagonal | #181818b8 (72%) | Card ground stacked on top of a section gradient, so the card edge stays legible against a moving background. |
When you supply a new photograph, supply it graded for a dark ground: the overlays darken, they do not correct. Faces and equipment should sit in the upper mid-tones so they survive the 85% flat veil. The asset set is 16 images in gold/assets/ — hero.jpg, thirteen section photographs, plus logo.svg (vector, 143×59 viewBox) and awards.webp (403×200).
Do / Don’t
The short list. Everything here has already been decided once — these are the decisions that quietly get reversed when a new screen is drawn in isolation.
Do
- Let gold carry the marks — numerals, ticks, bullets, stars, icons, the primary CTA, the highlight italic.
- Build grounds from
--forest-deepat alpha so photography still reads through the panel. - Use
--forest-markfor any green that has to carry type or hold an edge — it is the only green cleared for either. - Keep the ramp at one hue, one saturation, three lightnesses.
- Give the highlight word Cormorant italic inside
<span class="gold">— one per headline. - Add
rgba(24,24,24,.45)behind a ghost button whenever it sits on an image. - Keep form fields at 16px with the
.38ivory border. - Reach for
--line-softwhen a green hairline would read as a colour decision rather than as structure.
Don’t
- Never use forest for a mark. No green numerals, ticks, bullets, stars or icons, and never a green primary CTA — those are gold, always.
- Never put green type on a green ground unless it is
--forest-mark. It is the only green in the ramp with the contrast to survive there. - Never go below 14px at any viewport width, including labels, captions and legal lines.
- Don’t add a fourth green, or shift the 145° hue or the 20% saturation for a campaign.
- Don’t inherit the gold
--linefrom an older Champagne Gold layout — this direction overrides it to green. - Don’t place a ghost button on bright photography without its veil; the keyline drops below AA.
- Don’t use gold across a large area — no gold panels, gold bands or gold card grounds. Gold is jewellery, not material.
- Don’t set Cormorant for body copy, buttons, labels or an entire headline.
- Don’t invent a new photographic overlay; use the one mapped to that section.
Known gaps that touch design
Stated plainly rather than softened. Neither affects the shipping look, but both change what you can promise a client.
- Images are JPEG, not WebP — the build machine had no WebP encoder. Converting would cut asset weight by roughly a third.
styleguide.htmlType section does not cover Noir.
Everything you need to build on FNS 3.0. Static HTML and CSS — no framework, no bundler, no component library, no build step. Read this tab, open the file, start editing.
Start here
Five things to know before you open an editor.
- FNS 3.0 is a static marketing site. No PHP, no database, no build step.
- The final site is
gold/index-green-secondary.html— Champagne Gold V1, Green Option B. That file is the source of truth for every value in this document. - Supporting files:
index.html(hub),design-system.html(this document),styleguide.html(colour and type reference),robots.txt. - Assets live in
gold/assets/— 16 images:logo.svg(vector, 143×59 viewBox),awards.webp(403×200),hero.jpgand 13 section photographs. - To preview: open the file in a browser, or serve the folder with any static local server. Fonts load from Google Fonts, so you need a connection for type to render correctly.
Tokens
The whole system in one declaration. Copy this block as-is — do not retype a hex by hand.
/* FNS 3.0 — Champagne Gold V1, Green Option B */
:root{
/* champagne gold */
--primary:#181818; /* page ground */
--ink-2:#1F1E1D; /* raised panel */
--ink-3:#262422; /* hairline lift */
--stone:#443A31; /* solid panels, community band */
--gold:#C8A96A; /* accent — every mark */
--taupe:#E7DDD1; /* light tint, primary button hover */
--ivory:#F7F4EF; /* headings, primary text */
--body:rgba(231,221,209,.72); /* body text */
--body-dim:rgba(231,221,209,.70); /* muted labels */
--line-soft:rgba(231,221,209,.14); /* neutral hairline */
/* forest — one hue (145deg), one saturation (20%), three lightnesses */
--forest:#273A2F; /* solid fills, secondary button hover */
--forest-deep:#1B2820; /* panel + card grounds, used at alpha */
--forest-mark:#629376; /* the ONLY green that carries type or holds an edge */
--forest-line:rgba(98,147,118,.42);/* drawn keyline — chips, tags, cards, nav divider */
--line:rgba(98,147,118,.24); /* structural hairline — OVERRIDES the gold --line */
--forest-panel:linear-gradient(180deg,rgba(27,40,32,.58),rgba(21,30,24,.72));
--forest-field:rgba(27,40,32,.34); /* field + testimonial card ground */
--forest-veil:rgba(39,58,47,.22); /* chip, tag, step-marker veil */
}Fonts
Three families, three variables. Nothing else loads.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Manrope:wght@300;400;500;600;700">:root{
--head:'Barlow Condensed',sans-serif; /* headlines, buttons, labels, tracked caps */
--text:'Manrope',sans-serif; /* body, nav, interface */
--curve:'Cormorant Garamond',serif; /* italic — the highlight word ONLY */
}The highlight word is wrapped in <span class="gold">.
Components
Gold is the primary action. Green is the secondary, and the ground the marks sit on.
Buttons
.btn{ /* primary — the jewellery */
background:var(--gold); color:#181818; border:1px solid var(--gold);
font-family:var(--head); font-size:15px; letter-spacing:.09em;
text-transform:uppercase; padding:10px 21px;
}
.btn:hover{ background:var(--taupe); }
.btn-ghost{ /* secondary — the material */
background:transparent; color:var(--forest-mark);
border:1px solid var(--forest-mark);
}
.btn-ghost:hover{ background:var(--forest); color:var(--ivory); }
/* over photography, .btn-ghost also takes this veil so the ivory */
/* label and its keyline clear AA against bright regions */
background:rgba(24,24,24,.45);Panel ground
/* forest ground at alpha, so photography reads through */
background:var(--forest-panel);
border:1px solid var(--line); /* green structural hairline */
/* step marker: green veil and keyline, gold numeral */
background:var(--forest-veil); border:1px solid var(--forest-line); color:var(--gold);Breakpoints
Four, and only four. Do not add a fifth — solve it inside the nearest existing step.
| Breakpoint | Media query |
|---|---|
| 1400px | @media (max-width:1400px) |
| 1080px | @media (max-width:1080px) |
| 980px | @media (max-width:980px) |
| 720px | @media (max-width:720px) |
Rules that will bite you
Five things reviewers send back most often.
- Inputs are 16px.
inputandselectusefont-size:16pxonrgba(24,24,24,.5)with argba(231,221,209,.38)border; focus border is--gold. 16px is also what stops iOS Safari zooming on focus, and the .38 ivory hairline is what clears the 3:1 WCAG 1.4.11 control minimum — do not lighten it. - 14px is a hard floor. Nothing renders below 14px at any viewport width. If a
clamp()can resolve under 14px, the clamp is wrong. - Forest is never a mark. Numerals, ticks, bullets, stars, icons, the primary CTA and the highlight italic are
--gold. The one exception is--forest-mark, the only green allowed to carry type or hold an edge. --lineis green in this direction. The forest ramp redeclares it asrgba(98,147,118,.24). If you want the neutral hairline, ask for--line-softby name.- Overlays are per-section, not global. Hero, A Private Training Club and FNS360 Experience take
linear-gradient(45deg,#000 0%,rgba(0,0,0,.66) 100%); Your First Class takeslinear-gradient(45deg,black,#00000080); The Results Speak and Built for People Who take flatrgba(24,24,24,.85); a.cardover the diagonal takes#181818b8. Copy the neighbouring section rather than inventing a value.
Gold owns the small precise marks. Green owns the large quiet surfaces and the structural lines.
If you are unsure which token to reach for, ask whether you are drawing the jewellery or the material it sits on.
Before you ship
Five open items, stated plainly.
- The application form is front-end only. It is not wired to any mail handler or CRM. Submissions go nowhere.
- Ten placeholder links still point at
href="#"— Coaches, Careers, Privacy, FAQ, Terms and the social links. - Every page carries a noindex tag and
robots.txtdisallows everything. Both must be removed at launch or the site stays invisible to search. - Images are JPEG, not WebP — the build machine had no WebP encoder. Converting would cut asset weight by roughly a third.
styleguide.htmlType section does not cover Noir.
A profile is the site cropped to a rectangle somebody else chose. The rectangles change — the discipline does not. Every piece of FNS social art is built on the same dark ground, carries the same three type families, and obeys the same division of labour: gold for the marks, forest for the surfaces. This tab gives you the exact upload sizes, the safe areas that survive every crop, and mockups you can hold a finished file up against.
The One Rule, cropped
Nothing about the system loosens because the canvas got smaller. If anything, the smaller the canvas, the harder the rule works — there is no room for a second idea.
On social, gold appears as the numeral, the short bar under a headline, the highlight italic and the primary call to action. Nothing else. A gold panel, a gold headline or a gold caption is a system error. The secondary call to action stays the forest ghost button.
Forest carries the weight: rgba(27,40,32,.58) → rgba(21,30,24,.72) as the panel
ground, rgba(98,147,118,.24) as the hairline, #629376 the only
green allowed to carry type or hold an edge.
What travels from the site
The grounds. Page ground #181818. Panels sit on the forest gradient, never
on a lighter neutral. Photography always takes an overlay before type lands on it.
The two overlays. The diagonal
linear-gradient(45deg,#000 0%,rgba(0,0,0,.66) 100%) for anything that behaves like the
hero banner — covers, stories, channel art. The flat rgba(24,24,24,.85) when the
photograph is only a texture behind a lot of copy.
The type. Barlow Condensed for headlines, tracked caps and buttons. Manrope for anything read as a
sentence. Cormorant Garamond italic in #C8A96A for one highlight word per canvas —
the same role the <span class="gold"> plays on the site. Tracked caps keep the
site's label tracking of .16em; buttons keep .09em.
The buttons. Primary is #C8A96A with #181818 type.
Secondary is the ghost in #629376, and over photography it takes
rgba(24,24,24,.45) behind it so the ivory label and its keyline clear AA against a
bright part of the image.
The components, live
These are the same components the site ships. Social art redraws them at raster sizes; it never redesigns them.
One honest note on type size: the site's hard floor of 14px is a rendering rule for live HTML, and every word of this document holds it. The type inside the frames below is a scale model of raster artwork, not interface text, so it renders smaller than the floor here on purpose. The measure that matters for an exported file is legibility in the smallest place the platform shows it — a channel banner on a phone, a post in a three-across grid. Judge every mockup at that size before you export.
Two assets. The cover is the only place in the whole system where the crop is more dangerous than the design.
A Private Training Club · By Application
Training Club
Reading the cover mockup
The cover is the one asset where the safe area is not a courtesy, it is the brief. Design it as a 640 × 312 poster with 90px of photograph glued to each end, and it will survive every surface Facebook renders it on.
The profile is a small square that will be scaled down hard next to a post. Logo, one gold mark, nothing else — no strapline, no address, no phone number. If it does not read at the size of a comment avatar it is too busy.
Both assets sit on the same ground as the site, so the profile square and the cover read as one object
when they stack on the page header. The logo file itself is logo.svg, vector on a 143 × 59 viewBox
— scale it up from vector artwork for a raster export, never from that file.
YouTube
Channel art is uploaded enormous and shown tiny. The 1546 × 423 all-devices safe area is the only part of the file guaranteed to be seen on a phone, a laptop and a television.
Coaching · Method · Results
Inside the method
Episode One
Thumbnail discipline
Three elements maximum. A numeral or tag, a two-to-four word headline, the logo. The moment a fourth thing arrives, the thumbnail stops working at sidebar size.
The numeral is the gold. A thumbnail that already carries a gold numeral does not also get a gold bar, a gold border or a gold word. One piece of jewellery.
Never put type in the bottom-right corner. The duration stamp lands there and covers it.
Test it at the width YouTube uses for a sidebar thumbnail before export. If the headline is unreadable there, cut a word rather than shrinking the type.
Three canvases, three jobs: the square that identifies, the square that argues, the tall one that interrupts.
Assess.
Programme.
Progress.
Every member starts on the floor with a coach, not on a form.
Your first class is by application.
ApplyEvery size in one place FINAL
Export at these pixel dimensions. Never upscale a smaller file to fit — make it again at native size.
| Platform | Asset | Upload size | Safe area / crop rule | Ground |
|---|---|---|---|---|
| Page cover | 820 × 312 |
Centre 640 × 312. Mobile re-crops to 640 × 360 |
hero.jpg + diagonal overlay | |
| Page profile | 320 × 320 |
Clear space inset on all four sides | Forest panel | |
| YouTube | Channel art | 2560 × 1440 |
All content inside centred 1546 × 423 |
hero.jpg + diagonal overlay |
| YouTube | Thumbnail | 1280 × 720 |
Nothing in the bottom-right corner | Forest panel + gold numeral |
| Profile picture | 320 × 320 |
Circle crop — corners are discarded | Forest panel | |
| Feed post | 1080 × 1080 |
Outer margin kept clear for the grid | Forest panel + gold numeral | |
| Story | 1080 × 1920 |
Type clear of the top and bottom interface zones | hero.jpg + diagonal overlay |
Five rules for whoever makes these
Hand this list to a franchisee, an agency or an intern with the palette and they can produce something that belongs.
1 — Give the logo its clear space
Clear space on all four sides is at least the height of the logo mark itself. No type, no keyline, no bright part of a photograph inside it. The dashed insets on the profile mockups above are drawn to that rule.
2 — Never set type in a crop zone
Facebook takes 90px from each side of the cover. YouTube throws away everything outside the centred 1546 × 423. Instagram cuts the corners off a square profile. Type placed in those regions is not “risky” — it is gone. Photograph and overlay live there; nothing else.
3 — Gold is for marks only
#C8A96A is the numeral, the short bar, the highlight italic and the primary button. It
is never a panel, never a headline, never body copy. Keep it to one mark and, at most, one highlight italic on
the same canvas. Structure and surface are forest: #273A2F filled,
rgba(98,147,118,.24) as a line, #629376 only where green has to
carry type or hold an edge.
4 — Every photograph takes its overlay first
Type never lands on bare photography. Cover, channel art and story take the diagonal
linear-gradient(45deg,#000 0%,rgba(0,0,0,.66) 100%). A photograph carrying a lot of copy
takes the flat rgba(24,24,24,.85). If a ghost button sits over an image it also takes
rgba(24,24,24,.45) behind it.
5 — One highlight word, one idea
Cormorant Garamond italic in gold appears at most once per canvas, on one word. Everything else is Barlow Condensed in uppercase or Manrope in a sentence. A canvas with two italics has two arguments and lands neither.
Do
- Build the Facebook cover as a 640 × 312 poster with photograph either side.
- Use the forest panel gradient as the ground for any post that is mostly type.
- Judge the thumbnail and the feed post at their smallest rendered size before exporting.
- Keep the tracked caps at the site's .16em — Barlow Condensed needs the air.
- Export at the native pixel size in the table above.
Don't
- Don't centre a headline across the full 820px of a cover — the ends will be cut.
- Don't fill a panel with gold or set a gold headline.
- Don't stack a gold numeral, a gold bar and a gold border on one canvas.
- Don't put type on an un-overlaid photograph.
- Don't upscale a 1080 asset to fill a 2560 channel banner.
- Every page currently carries a
noindextag and robots.txt carriesDisallow: /. Both must be removed at launch, or the link in every bio leads to a site search cannot find. - The application form is front-end only — it is not wired to any mail handler or CRM. Do not run an “Apply” story or bio CTA until it delivers somewhere.
- Ten links still point at
href="#"— Coaches, Careers, Privacy, FAQ, Terms and the social links. The social links in the site footer are among them, so the site does not yet point back at the profiles these assets are for. - Site photography ships as JPEG, not WebP — the build machine had no WebP encoder. Converting would cut asset weight by roughly a third. It changes nothing for social, since every platform re-encodes on upload, but export from the highest-quality source you have rather than from a copy pulled off the live site.
This tab is the franchisee kit. It tells you exactly what you are free to change in your local marketing, what is fixed, and how the palette behaves once it leaves the screen and hits paper. If you are briefing a local printer or a freelance designer, hand them this tab.
What you may change
The split is simple. Local facts are yours. The brand system is not. Everything in the left column can be edited in any piece without asking; everything in the right column is head office property and changing it puts the piece out of brand.
Gold is the jewellery — the numerals, ticks, bullets, stars, icons and the one primary button. Green is the material it sits on — panel grounds, card grounds, hairlines, the secondary button, the sub-headlines.
If you find yourself setting a headline in green, or filling a large area with gold, the piece has drifted. Swap them back.
You may change
- Your local address, and the way it is written.
- Your phone number, local email and booking link.
- Class names, times and the weekly timetable.
- Local photography — your own facility, your own members, shot to the rules in the Photography section below.
- Local offer copy and opening dates, set in the approved type styles.
- Which of the supplied templates you use, and how many you print.
You may not change
- The palette. No new colours, no tints outside the ramp, no recolouring gold or forest.
- The typefaces. Barlow Condensed, Manrope and Cormorant Garamond italic only — no local substitutes.
- The logo. No redrawing, no re-spacing, no adding your town inside the lockup.
- Promoting green to a mark.
--forest-markis the one green allowed to carry type or hold an edge; it never becomes the headline colour, the primary button, or the accent on numerals, ticks or icons. - The Cormorant italic. It is for the single highlight word only — never a whole line, never body copy.
- Stretching, rotating or adding effects to any supplied artwork.
If a piece you need is not in the kit, ask head office rather than building it locally. It is faster than having artwork rejected at proof stage.
Logo use
One lockup, one set of rules. Clear space is measured in the logo’s own cap height, so it scales with the mark and you never need a millimetre chart.
Clear space
Measure the cap height of the logo you have been supplied — the height of a capital letter in the wordmark. That measurement is one unit. Keep a clear margin of one unit on all four sides. Nothing enters that margin: no text, no photograph edge, no keyline, no other logo, no page trim.
Diagram only — the box stands in for the supplied lockup. The dashed line is the clear-space boundary, not a printed rule.
Minimum size
The logo is now vector — gold/assets/logo.svg, drawn on a 143 × 59 viewBox. It scales to any size without softening, on screen or in print. Set it by height and let the width follow; do not set both, or the lockup distorts. Below about 60 px wide the chain links start to close up, so use a wordmark-only treatment rather than shrinking the full lockup further.
- The print master is
logo-master.svg, supplied at the root of this package. It is the untouched vector artwork. - The copy in
assets/logo.svgis the same artwork with its traced outline simplified for web page weight. Either will print, but hand the printerlogo-master.svg.
Do
- Place the logo on
#181818, on a forest ground, or on a dark region of a photograph. - Keep the full unit of clear space, including against the trim edge.
- Use the master file supplied by head office for every printed piece.
- Let the logo sit quietly — it does not need a box, a glow or a keyline.
Do not
- Recolour it, including “just making it gold” or reversing it to green.
- Stretch, condense, rotate or outline it.
- Set it over a busy or bright part of a photograph without the overlay under it.
- Add your location, a tagline or a franchise number inside the lockup — put local detail elsewhere on the piece.
- Rebuild it by typing the name in Barlow Condensed. That is not the logo.
Print colour
Screen colour is RGB; print is CMYK. The values below are naive sRGB → CMYK conversions supplied so a layout looks approximately right on your monitor and so a printer has a starting point. They are not press-accurate.
- These are naive conversions for layout reference only. They carry no ICC profile and no press or stock assumption.
- Confirm every one of them with a physical press proof on your chosen stock before signing off a print run.
- Gold and forest are the two that will shift most. Check them on the proof first.
| Colour | Hex | Approx. CMYK | Print note |
|---|---|---|---|
| Page ground | #181818 | C60 M40 Y40 K100 | A common rich-black build — confirm it with your printer. Do not use 0/0/0/100 on large areas: flat black prints thin and grey next to gold. |
| Gold | #C8A96A | C0 M15 Y47 K22 | The accent. Small marks only. Ask the printer whether a metallic or spot alternative is worth proofing for premium pieces. |
| Forest | #273A2F | C33 M0 Y19 K77 | Solid fills and the secondary button. Heavy coverage — check it on the proof for mottling on uncoated stock. On screen, ivory on it is 11.05:1. |
| Forest mark | #629376 | C33 M0 Y20 K42 | The only green that carries type or holds an edge. On screen it reads 4.72:1 on the chip veil, 5.03:1 on the nav and 4.65:1 on the Promise panel. Keep type set in it reasonably large. |
| Ivory | #F7F4EF | C0 M1 Y3 K3 | Headings and primary text. On white stock, consider leaving it unprinted rather than laying down a near-white tint. |
| Taupe | #E7DDD1 | C0 M4 Y10 K9 | Light tint; also the primary button hover on screen. |
| Stone | #443A31 | C0 M15 Y28 K73 | Solid panels and the community band. |
The green ramp is deliberately one hue at 145° and one saturation at 20%, with three lightnesses — #273A2F, #1B2820 and #629376. Keep it that way in print — if a printer offers to “warm the green up”, decline.
The asset kit
What you receive, at what size. Sizes are trim size; bleed is the extra artwork that runs past the trim so nothing white shows after cutting. Set up documents at trim plus the bleed shown, and keep important text well inside the trim.
| Piece | Trim size | Bleed | Notes |
|---|---|---|---|
| A5 flyer | 148 × 210 mm | 3 mm all round | Portrait. Local timetable and address in the footer band. |
| A3 poster | 297 × 420 mm | 3 mm all round | Portrait. Window and in-club use. One message per poster. |
| Business card | 85 × 55 mm | 3 mm all round | Front carries the lockup; contact detail on the reverse or lower band. |
| Roll-up banner | 850 × 2000 mm | Per the hardware supplier’s template | Confirm the visible area and the cassette allowance with your banner supplier before artwork — the bottom strip is usually hidden. |
| Email signature | 600 px wide | — | Fixed width so it does not break in Outlook. Height varies with content. |
| Social pack | Sizes as listed on the Social tab | Do not re-crop to sizes of your own — use the Social tab as the single source for social dimensions. | |
Every piece is built on the same rules as the site: Barlow Condensed for headlines, buttons, labels and tracked caps; Manrope for body copy and interface; Cormorant Garamond italic for the one highlight word. Gold takes the marks, green takes the grounds and lines.
All three families are Google Fonts — the site loads them from there — so a local designer can install the exact weights at no cost. The site uses Barlow Condensed 400/500/600/700, Cormorant Garamond italic 400/500 and Manrope 300–700. Nothing on the site is set below 14px at any width; keep small print legible on paper for the same reason.
Two templates, shown
Scaled previews built in the live palette, so you can see where the gold is allowed to land. Copy is placeholder. These are reference renderings, not print artwork — work from the supplied template files at full size.
name@yourclub.example
Street, Town, Postcode
Business card front — 85 × 55 mm, 3 mm bleed, shown scaled
Forest-to-black ground. The gold box stands in for the supplied lockup — drop the master file in, do not typeset it. Beyond that the only gold on the card is the small mark ahead of the phone number. The outer keyline, the rotated corner detail and the short rule under the lockup are green structural lines; the tracked location label is the one piece of green type, set in --forest-mark. Name and role are Barlow Condensed, contact detail is Manrope.
Train like it matters
- Coach-led small group sessions
- Programme built around your assessment
- Nutrition support included
- Open 6am — 10pm, seven days
A5 flyer — 148 × 210 mm, 3 mm bleed, shown scaled
The photograph keeps the diagonal overlay — linear-gradient(45deg,#000 0%,rgba(0,0,0,.66) 100%) — so the headline stays readable whatever you shoot. The chip is --forest-mark type on the --forest-veil chip ground with a --forest-line keyline; the bullet diamonds and the single primary button are gold; the panel behind the copy is the forest panel gradient and the footer band is solid #273A2F with your local detail set in ivory on it.
Both templates carry the primary button only: solid --gold with #181818 type and a 1px gold border, 15px Barlow Condensed, .09em tracking, uppercase, 10px 21px padding. If a piece genuinely needs a second button it is .btn-ghost — transparent, type and border in --forest-mark. Sitting over photography it also takes background rgba(24,24,24,.45) so the label and its keyline clear AA against bright regions of the image.
Photography
The photography is doing as much brand work as the palette. Generic gym stock undoes it in one image.
- Real facility, real members. Shoot your own floor, your own coaches, your own people training. Never generic stock gym imagery — the barbell-and-chalk library reads as a budget gym and contradicts everything else on the page.
- Get permission. Written consent from anyone recognisable before the image goes into a flyer, a poster or a paid social post.
- Keep the overlay. Every photograph carrying type keeps its overlay so the headline stays readable — the diagonal
linear-gradient(45deg,#000 0%,rgba(0,0,0,.66) 100%)on hero and feature images, or the flatrgba(24,24,24,.85)used on the testimonial and audience sections. Never set ivory type straight onto an unmodified photograph. - Shoot dark and warm. Low, directional light suits the ground colours. Bright, evenly lit, white-walled images fight the palette and force the overlay to work too hard.
- Leave room for type. Compose with a quiet area — usually lower left or lower right — where the headline and button can sit inside the clear space.
- Full resolution, no filters. Send originals, not phone-app-filtered exports. No colour grading of your own; the overlay is the grade.
Before you point traffic at the site
Four things are still open on the live build. None of them is a marketing decision, but each one decides whether your local campaign lands anywhere. State them to anyone planning a launch.
- The application form on the site is front-end only. It is not wired to any mail handler or CRM, so nothing a visitor types reaches anyone. Until it is wired, put your own phone number, email or booking link on every printed piece — do not send a flyer audience to the form alone.
- Ten placeholder links still point at
href="#"— Coaches, Careers, Privacy, FAQ, Terms and the social icons. Do not print or post a URL that lands on one of them. - Every page carries a noindex tag and
robots.txtdisallows everything. Both must be removed at launch or the site stays invisible to search. Nothing spent on local SEO or organic reach counts until they are. - The site images are JPEG, not WebP — the build machine had no WebP encoder. Converting would cut asset weight by roughly a third. Either way they are page-sized: never use them for print.
Ask head office for
Four requests cover almost every local job. Send them together and you will not be waiting twice.
Master logo files
The vector master ships with this package as logo-master.svg, so most jobs are already covered. Ask head office only for the reversed and single-colour versions, or a format your printer specifically requires.
The photography library
Full-resolution originals of the approved images. Do not pull JPEGs off the website for print — they are sized for the page, not for paper.
A press proof sign-off
Anything printed in quantity, and anything where gold or forest carries the piece: get a physical proof approved before the run. The CMYK values in this tab are approximate.
Anything not in the kit
New format, new size, a piece you have not seen a template for, or copy you are unsure of. Ask before you brief a local designer.
Final This tab describes the approved Champagne Gold V1 — Green Option B direction. If a supplier shows you anything using a different palette or typeface, it is out of date.