Logos
Primary wordmark
The two-colour mark. Charcoal on any cream or light surface, white on charcoal. The ampersand and Five stay orange in both. These two cover almost every use.
Single colour
For one-colour print, embroidery, engraving, and any surface where the orange would not hold. The SVG uses currentColor, so inline it and set the colour in CSS. Only ever charcoal, white, or a single brand colour.
On brand surfaces
The full palette check. Orange and tan grounds take the single-colour mark, never the two-tone one, because the orange detail disappears into the background.
Clear space
Keep clear space on all four sides equal to the cap height of the F. Nothing enters that zone: no type, no rules, no image edges, no other logos.
The dimmed F is the first F of the wordmark. Its cap height sets the gap on all four sides. The dashed line is the outer boundary, the solid line the wordmark bounding box.
Minimum size
The ampersand carries fine hairlines that break up below these sizes. When you cannot meet the minimum, do not shrink the mark further, use the name set as plain type instead.
Brand mark
A twelve-sided ring with a wedge cut from the top, drawn at 60 × 60. It stands in for the wordmark wherever the space is square or too small for the full lockup: avatars, favicons, app icons, stamps on imagery. Three variants cover every background.
Primary is the default and the only one carrying orange. Secondary is the charcoal ring with an off-white wedge, for print and for orange and tan grounds where a second colour would clash. Tertiary is the fully reversed version for charcoal and photography. The wedge always points to the top, never rotate it to fill a corner.
Favicon
The mark at browser scale, generated from the Primary vector. Modern browsers take the SVG; the ICO covers older ones and stops the browser falling back to whatever it has cached for the domain. The PNG is the Apple touch icon, which must be opaque because iOS composites black behind transparency.
Usage
Do
- Use the two-colour mark wherever the background allows it
- Drop to single colour on orange, tan, photography and one-colour print
- Hold clear space equal to the cap height of the F on all sides
- Use SVG on screen, and scale proportionally only
- Write the name as Fifty Five and Five in body copy, never 55&5
Don't
- Recolour either half outside charcoal, white and orange
- Stretch, skew, rotate, or rebuild the mark by typing it out
- Add shadows, outlines, gradients or containers
- Place the two-colour mark on orange or on busy photography
- Set it below 120px wide on screen