Official brand colors for the Trade Clok platform. Share this page with your app development team for consistent implementation across all surfaces — web, mobile, and print.
These 8 colors make up 95% of all UI surfaces. Click any value to copy it.
Trade Red
Primary Brand Color
Hero banners, primary CTA backgrounds, badge background, logo badge fill. The dominant brand color — use boldly.
Cream
Primary Text on Red
All text on red backgrounds, logo lettering, tagline banner fill. Never use on white — only on red.
Charcoal
Body Text
All body copy, headings on white backgrounds, nav links, footer text. The primary readable text color.
Signal Yellow
CTA Accent
Primary CTA buttons (Sign Up Free, Start Free Trial), highlight badges. Use sparingly — only for the most important action on the page.
Light Gray
Section Background
Alternating section backgrounds, card fills, feature grid backgrounds. Creates visual rhythm without using color.
Mid Gray
Borders & Dividers
Card borders, section dividers, input borders, table lines. Subtle structure without visual weight.
Muted Text
Secondary Text
Subheadings, captions, placeholder text, supporting copy. Never use for primary readable content.
White
Base Background
Page background, card surfaces, navbar background, modal backgrounds. The dominant surface color of the entire UI.
Used on industry-specific pages and white-label configurations. These supplement — never replace — the primary palette.
Construction Blue
Contractors & Plumbing/HVAC
Accent color for contractor and plumbing/HVAC trade pages. Use for icons, highlights, and trade-specific UI elements.
Landscape Green
Landscaping & Painters
Accent color for landscaping and painting trade pages. Use for icons, highlights, and trade-specific UI elements.
RED IS FOR HEROES AND CTAS ONLY
Trade Red (#8B1A1A) appears only in the hero banner at the top and the final CTA strip at the bottom. All middle content sections stay white or light gray.
YELLOW IS FOR ONE ACTION PER PAGE
Signal Yellow (#F5C518) is reserved exclusively for the primary CTA button. Never use it for decorative elements, backgrounds, or secondary actions.
NEVER PUT CREAM ON WHITE
Cream (#F5EDD6) is only legible on red backgrounds. On white, it disappears. Use Charcoal (#2A2118) for all text on white surfaces.
MAINTAIN CONTRAST RATIOS
All text must meet WCAG AA minimum (4.5:1 contrast ratio). Charcoal on White = 16:1. Cream on Trade Red = 7.2:1. Yellow CTA text must always be Charcoal.
LOGO COLORS ARE FIXED
The mascot logo uses exactly Trade Red, Cream, and Charcoal. Never recolor the logo or place it on a colored background other than white or Trade Red.
TRADE ACCENTS ARE SUPPLEMENTAL
Construction Blue and Landscape Green only appear on their respective trade pages. They should never appear on the main homepage or in the primary navigation.
| ROLE | FONT | WEIGHT |
|---|---|---|
| Display / Headlines | Oswald | 700 Bold |
| Body Copy | Lato | 400 Regular / 700 Bold |
| Tagline / Humor Copy | Playfair Display | 400 Italic |
| Monospace / Data | System Monospace | 400 |
Trade Red
#8B1A1A
Cream
#F5EDD6
Charcoal
#2A2118
Signal Yellow
#F5C518
Light Gray
#F7F5F2
Mid Gray
#E5E0D8
Muted Text
#7A6E62
White
#FFFFFF
Construction Blue
#1A4A8B
Landscape Green
#1A6B2E