One brand.
All the details.
The central reference for the current website. Explore the elements, try their interactions and use them consistently across new pages.
Confident colour.
Core colours for the TW interface. Use navy text on pale blue, yellow and white. Blue buttons always use white text, including hover states.
Project artwork can use client-specific colours. These are separate from the core TW interface palette.
Two fonts. One voice.
Good ideas.
Made real.
Headings, body copy and client names. Mix medium-weight headings with a lighter accent, using sentence case or purposeful capitals.
Curious minds.
Connected ideas.
Section labels, navigation details, button labels and small supporting information.
Good ideas. Made real.
Built to work together.
Connected thinking.
A clear way forward.
The next step.
A useful detail.
Lead paragraph. A senior, integrated team connecting strategy, creativity, technology, performance and communications.
Body paragraph. Different organisations, audiences and ambitions. We begin by understanding what matters, then bring the right disciplines together around the brief.
Strong emphasis, italic emphasis, and an inline link to our team.
Small supporting copy. Keep it readable and give it enough breathing room.
Section label / 01- A clear starting point
- A connected team
- A practical way forward
- Understand the brief
- Explore the possibilities
- Agree the next step
Good work starts with a proper conversation.
Make the next step clear.
Hover or focus each example. Blue fills change to navy, white labels stay white. Underlines build from left to right beneath the label only. The header CTA uses a fill change without an underline.
Use a visible focus outline for keyboard navigation. Keep primary and secondary actions distinct.
A simpler conversation.
The short enquiry form used on service and sector pages. Name, email and a project outline are required. Organisation is optional. This guide demonstrates the controls without sending an enquiry.
View the full contact page form ↗Familiar elements.
Connected expertise.
A calm surface for information, with navy headings and supporting text.
Explore our services ↗A little energy.
A purposeful highlight for an introduction, a key thought or a next step.
Meet the team ↗How should FAQs behave?
Use an accessible disclosure with a clear question, comfortable spacing and readable body copy. This example opens with a click or keyboard.
What happens next
01
We read your enquiry.
02
We have a proper chat.
03
We recommend a way forward.
The details that connect it.
Layout
- Consistent page margins and generous section spacing.
- Left-aligned headings with a clear typographic hierarchy.
- Rounded panels and lozenge buttons.
- Two-column project grids on desktop, one column on mobile.
Interaction
- Consistent button fills and text-width underlines.
- Visible keyboard focus on interactive elements.
- TW logo hover animation in the live header.
- The blue menu capsule opens the main navigation.
- Reduced-motion preferences are respected.
Use the header, menu capsule and footer on this page as the live examples. The form is a demonstration; no data is sent.