Brand guidelines
Logos, colours, typography, and assets for partners and marketing.
Brand guidelines
Tradeways
Built in Britain for Micro Builders and sole traders. Use this page for logos, colours, typography, and marketing-ready assets. Share the public link with partners and agencies.
Logos
Download official PNG lockups. Do not recolour, stretch, or add effects.
Logo — icon + wordmark (light backgrounds)
Primary logo for white and light surfaces.
- • Documents
- • Light UI headers
- • Partner co-branding on white
Logo — icon + wordmark (dark backgrounds)
Primary logo for navy and dark surfaces.
- • Email headers
- • Dark UI
- • Social cover images on navy
Icon only (light backgrounds)
Compact mark when space is limited.
- • Favicons context
- • App avatars on light UI
Icon only (dark backgrounds)
Compact mark for dark surfaces.
- • Collapsed sidebar
- • Dark app chrome
Wordmark only (light backgrounds)
Text-only lockup without the icon.
- • Footer wordmarks
- • Minimal layouts
Wordmark only (dark backgrounds)
Text-only lockup for dark backgrounds.
- • Email footers
- • Dark marketing panels
Hero icon background
Marketing hero graphic with brand icon treatment.
- • Landing pages
- • Campaign hero sections
Favicon & web clip
One browser favicon and one Apple touch icon for home-screen shortcuts.
Colour palette
Click a hex value to copy. Prefer CSS variables in product UI (`globals.css`).
Primary
Core Tradeways identity — steel and greenwave.
Primary UI accent, buttons on light surfaces
Brand green, CTAs, success accents, links
Shadcn primary on light theme
Interactive accent / dark-theme primary
Green tints
Soft greens for backgrounds, badges, and email CTA bands.
Soft backgrounds, email CTA bands
Highlight fills, subtle badges
Hover states, secondary accents
Strong accent green
Navy & shell
Workspace shell, email headers, and dark marketing panels.
Deepest background
Email headers, primary dark panels
Elevated dark surfaces
App header bar
Sidebar background
Main workspace canvas
Teal
Secondary palette for charts, tags, and status accents.
Teal base
Mid teal accent
Soft teal fill
Light teal tint
Deep purple
Brand secondary — use sparingly for emphasis.
Deep purple base
Mid purple accent
Soft purple fill
Light purple tint
Tangerine & sand
Warm accents for highlights and marketing callouts.
Tangerine accent
Mid warm accent
Soft warm fill
Sand background tint
Neutrals & body text
Text hierarchy for light surfaces and documents.
Primary body text
Secondary body text
Meta, captions, footer hints
Page canvas, email background
Cards, email body panels
Project status colours
Softened semantic colours for job and project states.
Not started / pending
In progress
On hold
Completed
Overdue
Cancelled
Typography
Primary — Poppins
App UI, navigation, cards, forms, tables, dashboards, marketing UI, and brand guidelines.
Stack: Poppins, system-ui, sans-serif
| Role | Size | Weight | Usage |
|---|---|---|---|
| Display / page welcome | 40–48px | 700–800 | Marketing heroes and major page intros. |
| Section title | 24–30px | 600–700 | Page sections and major panels. |
| Card / feature title | 16–18px | 600 | Cards, list headers, dialog titles. |
| Body | 14–16px | 400–500 | Default UI copy and email body text. |
| Meta / labels | 11–13px | 500–600 | Captions, badges, helper text, table headers. |
Voice & usage
Brand voice
- • Plain English — written for busy tradespeople, not corporate jargon.
- • Confident and practical — focus on outcomes on site and in the office.
- • British English spelling and UK market context.
- • Accessible by default — short sentences, clear headings, good contrast.
Logo rules
- • Always keep clear space around the logo equal to the height of the icon.
- • Use the dark-background logo on navy (#09111F) and dark UI shells.
- • Use the light-background logo on white and pale grey (#F3F4F5) surfaces.
- • Do not stretch, rotate, recolour, or add effects to logo files.
- • Minimum digital width for icon + wordmark: 120px.
Email & campaigns
- • Header background: ui.navy.900 (#09111F)
- • Accent / links / checkmarks: brand.green.500 (#57C87F)
- • CTA band: brand.green.050 (#E8F5EC) with navy button
- • Body text: #2A3945 on white
Contact: info@tradeways.co.uk