Skip to content

Brand system · v1.0

Wilco brand

How Wilco looks, sounds and moves. One system for the site, decks, proposals and social.

Idea

Build anything®. Quiet surfaces, loud type, real work. The brand steps back so the client’s product can lead.

The system borrows from editorial print: a paper canvas, oversized uppercase headlines, hairline rules and one image at a time. Colour comes from the work itself. Our only accent, Signal, appears in small doses: a dot, a highlight, a moment of attention.

Mark

Two interlocking blades: a forward step and a lift. Use the mark alone at small sizes and in the floating header, where it inverts the image beneath it. Keep clear space equal to the mark’s width. Never outline, recolour with Signal or set it on busy imagery without the difference blend.

Colour

Paper#EDEDEBCanvas for every page
Ink#0D0D0DType, rules, dark sections
Graphite#6B6B68Supporting text, labels
Line#D2D2CEHairline dividers
Panel#E3E3E0Media placeholders
Signal#4F00E1Accent. Under 2% of any layout
Signal soft#9A6BFFSignal on ink surfaces

Type

Display XXL · Switzer 500 · uppercase · −4.5%Build
Display XL · Switzer 500 · uppercaseSelected work
Statement · Switzer 500 · sentence caseMost companies need the right thing, built well.
Lead · Switzer 500We design, build and grow the things customers touch every day.
Body · General Sans 400 · 17/1.55Body copy is set in General Sans at a comfortable reading size, with lines kept under 62 characters.
Label · General Sans 500 · 12px · +6%Client profile · 01 · Johannesburg

Layout

  • HEROLabel, one oversized headline, a lead and facts on a single hairline row.
  • SPLITA sticky label on the left, the content on the right. The default for any section.
  • ROWSNumbered, full-width rows divided by hairlines for services and lists.
  • BANDOne full-bleed image or video at a time, never a collage.
  • CLOSEEvery page ends on ink: one question, one button, the full sitemap.

Motion

  • SCROLLLenis smooth wheel scrolling, lerp 0.12. Touch stays native.
  • REVEALBlocks rise 28px and fade in over 900ms on cubic-bezier(.2,.7,.2,1).
  • HOVERMedia scales to 1.03; arrows travel 3px up and right; underlines retract.
  • MARKThe 3D chrome mark turns slowly at 30fps and pauses off-screen.
  • STILLNESSEverything stops for prefers-reduced-motion.

Voice

01

Plain

Say what it is. “We build online stores” beats “we craft digital commerce experiences”.

02

Specific

Name the platform, the market and the number.

03

Confident

Short sentences. Active verbs. No hedging, no hype.

04

Honest

Only claim what we can show. Let the work make the case.