Design System
Searches Direct — UI & Component Library
Overview of color tokens, typography scales, buttons, badges, and card components.
01 — Brand & Identity
Core brand assets, logos and usage rules.
Primary Logo
The Searches Direct logo features the house/magnifying glass mark alongside the custom serif wordmark and strapline "Search reports for legal and property professionals".
Usage rules:
• Minimum clear space: equal to the height of the mark.
• Always use the high-resolution PNG on white or light blush surfaces.
02 — Colour Palette
Harmonious color tokens mapped across light and dark modes.
Brand Tokens
Crimson
#981737
Primary actions, headings, accents
Dark Crimson
#75122b
Hover states, section headings
Light Crimson
#c4223f
Link hovers, subtle highlights
Blush
#faf5f6
Alternating section backgrounds
Neutral Tokens
Charcoal
#1a1a1a
Body text, dark backgrounds
Gray 700
#374151
Secondary text, timeline events
Gray 500
#6b7280
Subtext, captions
Gray 400
#9ca3af
Placeholders, disabled states
Gray 200
#e5e7eb
Borders, dividers
Gray 100
#f3f4f6
Hover backgrounds
White
#ffffff
Page background, card surfaces
Status Tokens
Green 400
#4ade80
Success, search ready
Green 600
#16a34a
Success text
Amber 400
#fbbf24
Pending/processing
Red 600
#dc2626
Errors, warnings
03 — Typography
Instrument Sans (Headings) and Inter (Body).
Display
3.5rem · 700 · Instrument Sans
Delivering searches
H1
2.5rem · 600 · Instrument Sans
About Searches Direct
H2
1.875rem · 600 · Instrument Sans
Built on accuracy. Kept by trust.
H3
1.25rem · 600 · Instrument Sans
Why firms work with us
H4
0.875rem · 600 · Instrument Sans
OUR SERVICES
Body Lg
1.125rem · 400 · Inter
Specialist conveyancing searches for legal and property professionals across England and Wales.
Body
1rem · 400 · Inter
We handle the detail so your firm can focus on the transaction.
Body Sm
0.875rem · 400 · Inter
Search Code compliant on every instruction
Caption
0.75rem · 400 · Inter
© 2024 Searches Direct Ltd.
Label
0.6875rem · 600 · Instrument Sans
TURNAROUND · COVERAGE · STATUS
05 — Iconography
Lucide React stroke icon family used across features and services.