Sleepless Tradesman
Brand Guidelines
The definitive guide to the Sleepless Tradesman visual identity, voice, and design system. For designers, developers, and partners.
Brand Essence
Sleepless Tradesman communicates three qualities simultaneously: professional reliability, trade authenticity, and intelligent technology.
Reliable
Dependable, trustworthy, consistent
Not this
Slow, conservative, boring
Professional
Polished, competent, business-ready
Not this
Corporate, stiff, unapproachable
Smart
Intelligent, efficient, forward-thinking
Not this
Gimmicky, over-automated, impersonal
Practical
Direct, no-nonsense, results-focused
Not this
Overly minimal, abstract, detached
Pioneering
Industry-first, ahead of the curve, trailblazing
Not this
Hype-driven, reckless, experimental
Brand Promise
“Talk to the AI like you’d talk to a colleague, and it handles the paperwork.”
Brand Positioning
“Most industries are still waiting for AI this good. Tradesmen got it first.”
Sleepless Tradesman positions tradespeople as ahead of the curve, not catching up. The same cutting-edge AI powering the most advanced technology companies is now in the hands of tradespeople — before estate agents, accountants, lawyers, or any other service industry.
Logo
The Sleepless Tradesman logo features an infinity symbol with crossed hammer and wrench — representing tireless, skilled work.
Full Logo — Light backgrounds
Icon Only — Small spaces, favicons
Full Logo — Dark backgrounds
Clear Space & Minimum Size
Maintain a clear zone equal to the logo icon height on all sides. Never crowd the logo with other elements.
Minimum sizes: Icon — 24×24px (screen) / 8mm (print). Full logo — 120px width (screen) / 30mm (print).
Colour Palette
A three-part palette: Steel Blue for trust and professionalism, Electric Cyan for AI intelligence, and Construction Orange for warm CTAs.
Steel Blue — Primary Brand
The foundation of the Tradesman identity. Evokes reliability, trust, and industrial strength.
Steel Blue
--primary
Slate Blue
--primary-light
Ice Blue
--primary-subtle
Electric Cyan — AI Accent
Represents AI intelligence and technology. Used for focus states, selection, and AI-specific badges.
Electric Cyan
--accent
Sky Cyan
--accent-light
Frost
--accent-subtle
Construction Orange — Warm CTA
High-visibility orange for calls to action. Inspired by construction site signage and safety equipment.
Construction Orange
--cta
Orange Light
Peach
--cta-subtle
Core Ink
Ink
--ink
Ink Light
--ink-light
Ink Muted
--ink-muted
Ink Faint
--ink-faint
Surfaces
Surface
--surface
Surface Raised
--surface-raised
Surface Sunken
--surface-sunken
Semantic Colours
Success
--success
Success Subtle
--success-subtle
Error
Error Subtle
Info
Info Subtle
Colour Application Rules
- Steel Blue is the brand colour — Used for headings, navigation active states, step indicators, document headers, and user identity elements.
- Construction Orange is for CTAs only — Reserve for primary action buttons, “Most Popular” badges, and featured pricing cards. Never use for body text.
- Electric Cyan is the AI signature — Focus rings, text selection, AI badges, and technology-specific highlights. Creates the “intelligent tech” feel.
- Semantic colours override accents — Status indicators (paid, overdue, error) always use semantic colours, never brand colours.
- WCAG AA minimum — All text must meet 4.5:1 contrast. Steel Blue on white passes for all text sizes. Orange on white requires 18px+ minimum.
Typography
Inter is the sole typeface. Selected for exceptional readability, extensive weight range, and optimised screen rendering.
AI-Powered Trade Assistant
Smart Quoting
Invoice Details
Describe any job and get instant step-by-step plans, material lists, and time estimates.
Create professional quotes with itemised line items and VAT calculations.
Last updated 3 hours ago
CATEGORIES
Weight Usage
Rules
- Never use more than 3 weights per page
- Body text is always Ink Light (#404040), not full Ink
- Captions are always UPPERCASE with 0.05em tracking
- No italics — use semibold or colour for emphasis
- Headings use negative tracking for a polished feel
Download Inter
Inter is available as a free, open-source font. Download the font files for use in design tools, presentations, and print materials.
Formats Included
OTF, TTF, WOFF2, Variable Font
Licence
SIL Open Font Licence 1.1
Required Weights
400, 500, 600, 700
Iconography
Three icon sets: Lucide React for UI, custom SVGs for features, and trade-specific icon packs for industry authenticity.
Feature Icons
Trade-Specific Icons
Five icon packs covering Builder, Carpentry, Electrician, Plumbing, and General Labour trades. Available in SVG, PNG, EPS, and PSD formats.
UI Icons (Lucide)
- Navigation: 20×20px, 1.5px stroke
- Inline with text: 16×16px, 1.5px stroke
- Always monochrome — current text colour or Steel Blue
- Never use emoji in production UI
Icon Containers
- 48×48px container with 12px border-radius
- Primary Subtle (#e8f0fe) background for trade icons
- Surface Sunken (#f5f5f5) background for feature icons
- Icon centred at 28×28px within container
Components
Core UI components with their variants, states, and usage guidelines.
Buttons
Primary
Default actions
Orange CTA
Landing CTAs
Secondary
Alt actions
Ghost
Tertiary
Brand Blue
Brand actions
Badges & Tags
All badges use pill shape (border-radius: 9999px), 13px font, Medium weight.
Cards
Static Card
Default border, subtle hover shadow. For information display.
Interactive Card
Lift + blue border on hover. For clickable items.
Featured Card
Orange border + tinted background. For highlighted tiers.
Status Indicators
Voice & Tone
Speak like a knowledgeable colleague — direct, helpful, and respectful. Never condescending. Never overly technical about the AI.
Feature description
Create quotes in seconds — just describe the job
Leverage our AI-powered NLP pipeline to generate documentation
Error message
We couldn't save that quote. Try again?
Error 500: Internal server exception in quote serialization
Onboarding
What trade are you in?
Please select your primary occupational category
Upsell
Need more messages? Upgrade to Starter
Unlock premium AI capabilities with our enterprise tier
Industry positioning
Tradesmen got the most advanced AI before any other industry
We are a leading B2B SaaS solution disrupting the trades vertical
The “Colleague” Test
Before publishing any copy, ask: “Would a tradesperson say this to a colleague?” If not, rewrite it. Avoid AI/tech jargon — say “assistant” not “model”, “memory” not “context window”, “learns your preferences” not “fine-tunes on user data”.
Document Branding
Client-facing documents (PDF quotes and invoices) carry the tradesperson's own branding, with Steel Blue accents from the design system.
Smith Electrical
14 High Street, London, SE1 2AB
QUOTE
#Q-0042
To
Mrs. J. Thompson
22 Oak Lane, Surrey, KT1 3PD
| Description | Qty | Rate | Total |
|---|---|---|---|
| Kitchen rewire — labour | 8 hrs | £55.00 | £440.00 |
| Consumer unit (Hager) | 1 | £185.00 | £185.00 |
| Cable & sundries | 1 | £95.00 | £95.00 |
Subtotal: £720.00
VAT (20%): £144.00
Total: £864.00
Spacing & Layout
A consistent spatial system based on a 4px base unit ensures visual harmony across all surfaces.
Spacing Scale
Containers
Long-form text, settings
Landing pages, features
Dashboard, data tables
Responsive Breakpoints
Mobile
< 640px
Single column, bottom nav
Tablet
640–1023px
Two columns, collapsible sidebar
Desktop
1024px+
Full layout, persistent sidebar
Motion & Animation
Purposeful, quick, and subtle. Animation serves function, never decoration. Tradespeople are busy — keep it snappy.
Hover
200\u2013300ms · cubic-bezier(0.4, 0, 0.2, 1)
Buttons lift 2px. Cards lift 4px with blue border. Subtle shadow appears.
Entrance
300\u2013400ms · ease
Page elements fade in and slide up 10px. Staggered for lists.
Loading
Skeleton screens
Animated gray placeholder blocks for content loading. Spinner for saving actions.
UX Principles
The product promises “easy to use” — these rules make that promise enforceable. Every screen, flow, and interaction should pass all five.
One Primary Action Per Screen
Every screen has one obvious next step. If you can’t point to it in under 2 seconds, simplify. Secondary actions are always visually subordinate.
Three-Tap Rule
Any core task — create a quote, send an invoice, message a client — must be completable in 3 taps or fewer from the dashboard.
Forgiveness Over Prevention
Let users undo rather than blocking with confirmation dialogs. “Quote unsent — Undo?” beats “Are you sure you want to send?”
Speak the Trade
Labels, placeholders, and empty states use trade language. “Add a line item” not “Create new entry”. “Day rate” not “Per diem compensation.”
The “Toolbelt” Test
Before shipping any feature, ask: “Is this as simple as reaching for the right tool on your belt?” If a tradesperson would need a manual to use it, it’s too complex. Strip it back.
Transformation Narrative
Sleepless Tradesman doesn’t just digitise paperwork — it transforms how tradespeople run their business. Every touchpoint should communicate this shift.
Before & After
Quoting
Typing quotes in Word for 30 minutes, guessing material costs, chasing for a response
Describe the job, get a professional quote in 60 seconds, track when clients view it
Client Communication
Chasing clients with phone calls and texts, losing message threads, no paper trail
Automated status updates and a professional client portal with full history
Customer Intake
Playing phone tag with customers, driving to sites for 10-minute assessments, losing leads because you couldn’t respond fast enough
Send a link — AI gathers every detail and photo you need. Customer submits on their own time. You quote when you’re ready.
Business Admin
Shoeboxes of receipts, spreadsheets at midnight, no idea if you’re actually profitable
AI categorises expenses and generates reports on demand — know your numbers instantly
Industry-First Narrative
Every piece of marketing, copy, and communication should reinforce one central truth: tradespeople are not behind on technology — they are ahead of it. While other professional service industries (estate agents, accountants, lawyers, consultants) are still evaluating whether to adopt AI, tradesmen are already using the most advanced version of it to run their businesses.
Social media
Most industries are still figuring out AI. Tradesmen are already using it to send quotes, plan jobs, and run their business.
App Store / website
The same cutting-edge AI used by the world’s most advanced tech companies, purpose-built for your trade.
Advertising
Estate agents don’t have this. Accountants don’t have this. Lawyers don’t have this. Tradesmen do.
Onboarding / in-app
You’re now using AI that most industries won’t see for years.
Remote Quote promotion
Send a link. AI does the site visit for you. You just send the quote.
Investor / press
We built the first AI that autonomously conducts customer intake — gathering job details, photos, and contact information — without human involvement.
Messaging Guidance
Run your business from one app
End-to-end digital transformation platform
Look more professional to your clients
Enhance your brand’s digital footprint
Spend evenings with family, not paperwork
Optimise your work-life balance metrics
You’re ahead of every other industry with this
Early adoption of emerging AI paradigms
Your AI handles customer enquiries while you’re on the tools
Automated lead qualification and intake pipeline optimisation
The “Pub Test”
When describing any feature or benefit, imagine a tradesperson telling a mate about it at the pub. If the sentence sounds like a press release, rewrite it. “It does my quotes for me” is perfect. “It streamlines my documentation workflow” is not.