The visual rule book. Tokens, type, layout and behaviour, built so anything made on the brand’s behalf feels unmistakably Gavlar, whether it’s a slide, a social post, a proposal or a printed flyer.
This sits on top of the craft floor. The universal fundamentals, hierarchy, type, colour, space, composition, motion and copy, hold for every brand. This page is how those fundamentals get styled as Gavlar. Clear the craft floor first, then apply the brand.
Atmosphere
Gavlar is the warm room in a beige building. Editorial calm with a flicker of wit. Every output should feel like it was made by someone who cared, by hand, with a strategist in the room.
Three textures every output should carry some of:
- Warmth. Cream over white. Rounded edges over sharp ones. Generous whitespace that feels welcoming, not clinical.
- Curiosity. A type pairing you don’t expect. A composition that breaks the grid in one place. A line of copy that earns a small smile.
- Confidence. Restraint. We don’t shout, we don’t decorate. Yellow is reserved for the moments that matter.
Reference frequencies: Collins for editorial restraint, Magpie Studio for wit with discipline. When in doubt, ask whether either would put their name on it.
Colour
Tokens are semantic, not literal. A colour’s role tells you where it belongs; the hex is just the current dress.
- Cream is the everyday canvas. Default to it. Reach for white only when cream genuinely doesn’t serve.
- Black carries text on light, and flips to a premium dark surface for sections that need to break rhythm.
- Yellow is a moment, never a frame. One yellow element per composition. Never a border, never a large fill, never a text colour on a light surface.
Contextual behaviour. Web uses the full palette with generous cream and yellow as accent only. Social leans into higher contrast for thumb-stopping, black on cream or dark on yellow. Print pulls yellow coverage back (it goes vivid on uncoated stock) and uses a rich black, not 100%, so the page keeps its warmth.
Type
Shine brighter.
Three faces, three lanes:
- Tallica (Bold / SemiBold) — display and headlines. The Gavlar voice when it speaks.
- Fraunces (variable) — editorial and body. Warmth and considered emphasis. It’s what you’re reading now.
- Inter — UI only. Buttons, fields, interface labels. Never in display roles.
Pairing rules. Tallica with Fraunces is the signature combination, use both when the surface allows. Tallica alone works for short, punchy compositions. Fraunces alone leans editorial, for long-form and case studies. Never pair Inter with Tallica in a display role.
Layout
- Grid. Web uses a 12-column grid with generous gutters. Social uses 6 columns at 1:1. Print uses 6 columns for A4 with 25mm margins.
- Spacing. Multiples of 4px on screen, 4mm in print. Pick a rhythm and hold it across the surface.
- Whitespace is the most expensive thing on the page. It says this is considered. Use it generously, especially around hero moments. If it feels slightly too empty, it’s probably right.
- Break the grid, but only once. The grid is the default, used 95% of the time so the one deliberate break has somewhere to land. More than one break per surface reads as chaos, not confidence.
Depth
Gavlar is mostly flat. Depth comes from texture and contrast, not shadow.
- Grain texture on cream surfaces adds warmth without weight.
- Soft shadows only, used sparingly on cards. Never on type, never coloured.
- Contrast over elevation. To make something stand out, change its background or weight, not its z-axis.
No glassmorphism. No gradients. No drop shadows on text. No glow effects.
Motion
Static tells, motion connects. Motion is a memory device, not decoration.
- Movement is purposeful: it guides attention, reveals hierarchy, or adds a moment of warmth.
- Eases are soft and confident, never bouncy or mechanical. Slow enough to feel considered.
- A logo animation belongs on every brand. Micro-interactions delight and guide; they don’t distract.
- Respect reduced-motion preferences, always.
Imagery
Mixed, real people, late 20s to mid 40s, casual-smart, never stock-stiff. Photography is warm and natural with room to breathe.
Never use sunshine metaphors literally. No suns, no rays, no beams. The brightness comes from restraint, not illustration.
Do and don’t
Do default to cream, pair Tallica with Fraunces, leave generous whitespace, use grain for warmth, and keep yellow as a single moment.
Don’t use yellow for borders or fills, pair Inter with Tallica in display, add gradients or glow, decorate for its own sake, or default to centre-alignment. Earn centre by choosing it.