Internal Resource

Brand Kit

The complete visual language, tone, and component system for Trade Creative Agency.

Logo & Wordmark

TRADE CREATIVE
Primary — Dark BG
TRADE CREATIVE
Reversed — Light BG
TC
Icon Mark
Usage rule: Always pair the gold vertical bar with the wordmark. Minimum clear space = the height of the bar on all sides. Never use the wordmark on a mid-grey background.

Colour Palette

Primary Gold
#F5C518

CTAs, highlights, accents

hsl(47, 96%, 53%)
Background
#0D0D0D

Page background

hsl(0, 0%, 5%)
Card
#141414

Cards, elevated surfaces

hsl(0, 0%, 8%)
Border
#292929

Dividers, outlines

hsl(0, 0%, 16%)
Muted
#1F1F1F

Subtle backgrounds

hsl(0, 0%, 12%)
Muted Text
#8C8C8C

Secondary text

hsl(0, 0%, 55%)
Foreground
#FAFAFA

Primary text

hsl(0, 0%, 98%)

Typography

Typeface: Inter Tight
Google Fonts — All weights used: 300–900
Display / Hero

BUILD AUSTRALIA.

Section Heading

Proven Results

Sub Heading

Social Media Management

Eyebrow / Label

PREMIUM CREATIVE AGENCY

Body Text

We manage your content across Facebook, Instagram, and Google Business Profile. Consistent, professional, and built to drive enquiries.

Caption / Meta

SYD — AUS — EST. 2024

UI Patterns & Components

Secondary CTA
Eyebrow Row
Section Label
KPI Badge
+300% Visibility
Icon Box
Accent Bar
TRADE CREATIVE

Spacing & Layout

Section Padding (desktop)py-40 / px-10160px / 40px
Section Padding (mobile)py-20 / px-680px / 24px
Card Padding (desktop)p-1248px
Card Padding (mobile)p-624px
Grid Gap1px (bg-border)1px border gap
Component Gapgap-6 / gap-424px / 16px
Grid System

12-column grid with max-w-7xl container. Internal sections use lg:grid-cols-2 or lg:grid-cols-12 with 1px bg-border gaps for tension-line aesthetic.

Tension Lines

Horizontal and vertical 1px lines in border colour act as structural dividers. Never use rounded corners on primary layout blocks — sharp edges only.

Voice & Tone

Use industry-grade language — "engineered", "infrastructure", "dominance"

Use soft or vague language — "nice", "great", "awesome"

Use ALL CAPS for labels, eyebrows, and navigation

Mix case inconsistently across similar UI elements

Lead with the outcome: "+300% visibility"

Lead with the feature: "we post regularly"

Address the tradie directly and confidently

Use passive or corporate language

Photography & Imagery

Job-Site Authenticity

Real sites, real workers. No stock-photo handshakes. Blue-hour or golden-hour lighting preferred for drama.

High Contrast

Dark shadows, bright highlights. Images should complement the near-black background without washing out.

Treatment on Hover

Images are revealed at 5–10% opacity on card hover — never shown at full opacity in background contexts.

© 2024 Trade Creative Agency — Brand Kit v1.0Internal Use Only