Design System
A comprehensive guide to the FoxReach brand. Colors, typography, components, and guidelines for consistent, premium experiences.
Logo
The FoxReach mark represents building blocks: the foundation of every automation, AI solution, and system we create.
Variations
Icon
Favicons, app icons
Full
Primary usage
Wordmark
Text only
Stacked
Square formats
Download Assets
Color Applications
On Light
Primary usage
On Dark
Reversed
Clear Space & Sizing
Minimum Clear Space
Maintain clear space equal to the height of the icon mark on all sides.
Minimum Size
Never display the logo smaller than these minimum sizes.
Digital: 80px
Icon: 16px
Colors
A warm, sophisticated palette built on layered surfaces. Multiple tones create depth while maintaining a cohesive, premium feel.
Brand Colors
Surface Colors
Layer these surfaces to create visual hierarchy. Move from lighter to darker as content becomes more focused.
Text Colors
Semantic Colors
Dark Mode
Premium dark surfaces for low-light environments and alternative contexts.
Typography
Inter provides excellent readability and a modern, professional aesthetic across all applications.
Font Family
Primary
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%
Monospace
JetBrains Mono
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 </>{}[]
Type Scale
Display
60px
Build with confidence
H1
48px
Automation solutions
H2
36px
Enterprise-grade AI
H3
24px
Workflow automation
H4
20px
Data integration services
Body
16px
We help businesses transform operations through intelligent automation.
Small
14px
Supporting text and metadata for secondary information.
Caption
12px
LABELS AND CAPTIONS
Font Weights
Aa
Regular
400
Aa
Medium
500
Aa
Semibold
600
Aa
Bold
700
Components
Reusable UI elements that maintain consistency across all FoxReach products and communications.
Buttons
Primary
Secondary
Accent
Ghost & Link
Sizes
Icon Buttons
Form Elements
Text Inputs
This field is required
Other Controls
Cards
Basic Card
A simple card with a border and subtle background.
Interactive Card
Hover to see the interaction states.
Learn moreFeatured Card
For highlighting important content.
Badges & Tags
Alerts
Success
Your changes have been saved successfully.
Warning
Please review before proceeding.
Error
Something went wrong. Please try again.
Toggles & Switches
Pill Toggle
Standard Toggle
Progress & Stats
Progress Bars
Stats Display
$317,731
Revenue Generated
+42%
Growth Rate
98.5%
Uptime
2.4s
Avg Response
Avatars & Profiles
Avatar Sizes
Avatar Stack
Profile Card
Usama
Founder, FoxReach
Feature Lists
Included Features
Premium Features
Chat Bubbles
Conversation UI
Hi! How can I help you automate your workflow today?
2:34 PM
I need to connect my CRM with email automation.
2:35 PM
Layered Cards
Stacked Dashboard
Monthly Revenue
+12%$47,500
vs $42,300 last month
Tilted Stack
Active users
2,847
Testimonial Cards
We went from 2% reply rate to 8.4% in 30 days. Completely different business.
Azan
Anlyto
FoxReach made our outreach effortless. Best decision we made this year.
Muzammil
WinBid
Cold email finally works. Our pipeline has never been this full.
Zain
TAL
Pricing Cards
Starter
Perfect for small teams getting started with automation.
Professional
For growing teams that need advanced integrations.
Enterprise
Tailored solutions for large-scale operations.
Notification Toasts
Automation deployed
Your workflow is now active
New message
You have 3 unread notifications
Processing...
Please wait a moment
Icons
Custom iconography representing our core services and capabilities.
AI
Automation
Analytics
Network
Agent
Fast
Database
Code
Workflow
Dashboard
Integration
Launch
Icon Sizes
16px
20px
24px
32px
40px
Guidelines
Principles for representing the FoxReach brand consistently.
Voice & Tone
Professional
Clear, confident communication that demonstrates expertise without being condescending.
Technical
Comfortable with depth, but always explain complex concepts clearly.
Approachable
Warm and human. We're partners, not just service providers.
Values
Writing
Do Write
- “We help you automate your workflows”
- “Deploy your AI agent in hours, not months”
- “Built on enterprise-grade infrastructure”
Don't Write
- “Leverage synergies to optimize paradigm shifts”
- “Revolutionary game-changing solutions”
- “We're the Uber of AI automation”