First screen
The promise is the whole first screen.
“Turn Strategy Into Measurable Growth” sits centred on graphite with nothing beside it, followed directly by the clients’ logos. A visitor learns what WordReward does and who already trusts it before scrolling once.
- Headline
- 74px, weight 800
- Proof
- Client logos, first screen
- Actions
- 2, gold primary
Navigation
Four links. That’s the whole map.
Home, About, Services, Contact, and one gold button. Agencies love long menus. This one trusts the homepage to do the explaining and keeps the header as quiet as possible.
- Links
- 4
- Action
- Start a Project, gold pill
- Button height
- 44px
Typography
Editorial headlines, practical body.
Section titles use a high-contrast serif that gives the agency a publication-like voice. Body copy is Poppins, a geometric sans that stays readable on dark backgrounds. Short uppercase labels name each section.
- Body
- Poppins, 16px
- Headlines
- Serif, weight 800
- Reading width
- 51 to 74 characters
Color
Gold is under 1% of the page. That’s the point.
The site is almost entirely graphite. The only warm color is the gold of the buttons, so every action stands out without a single arrow or flashing badge pointing at it.
Graphite86%Night11%Slate2%Gold1%
- Graphite family
- 99%
- Gold
- 0.9% of the page
- Button contrast
- 7.1 : 1
Page structure
From what we do to how we work, in eight beats.
Services first, then the philosophy, the selected work, why WordReward, how the work happens, and a closing invitation. Agency pages often lead with the agency. This one leads with what the client gets.
- Sections
- 8
Calls to action
The same gold pill opens and closes the page.
Start a Project in the header and Start a project at the end are the same button, so the next step is never a stranger. A secondary outline button handles curious visitors who want the services first.
- Primary
- Start a Project
- Repeated
- Header and footer
- Shape
- Full pill, 999px
Mobile
Centred, stacked, nothing hidden.
On a phone the headline stays centred at 41px, and both actions stack full width. The client logos follow straight after, so the proof survives the small screen.
- Headline
- 41px
- Menu target
- 36 × 36px
- Actions
- Stacked, full width