TransportSimple · Brand & UI
Design
Guide. 1.0
This page is the public design reference for TransportSimple. It describes the brand colors, typography, layout grid, components, and visual patterns used across our product and marketing site.
Built for designers, partners, and AI tools (e.g. presentations.ai) that need to generate brand-consistent collateral from TransportSimple's identity.
01
Colors
Primary Colors
Primary Purple
#595FAB
--primary
Primary CTAs, brand accents, headings emphasis
Background Light
#F2F4F7
--background
Page background, alternate sections
Secondary Colors
Secondary Blue
#0283E5
--secondary
Links, secondary emphasis, info states
Success Green
#07C060
--success
Success toasts, positive metrics, confirmations
Accent Amber
#FCB040
--accent
Warnings, highlights, scheduled service
Destructive Pink
#F4446B
--destructive
Errors, deletions, critical alerts
Font Colors
Foreground
#34393E
--foreground
Body text, headings
Muted Foreground
#5A6B7B
--muted-foreground
Captions, secondary text, labels
Muted
#BCC7D1
--muted
Disabled states, placeholders, dividers
Background Colors
Section Alt
#F2F4F7
--section-alt
Alternating section backgrounds
Card / White
#FFFFFF
--card
Cards, elevated surfaces, hero backgrounds
02
Typography
Primary Font
Noto Sans
A B C D E F G H I J K L M N
O P Q R S T U V W X Y Z
Use for headings (H2–H6), navigation, labels, and emphasis.
Secondary Font
Roboto
A B C D E F G H I J K L M N
O P Q R S T U V W X Y Z
Use for body copy, H1, tables, form inputs, and dense UI.
Type Scale
Add Employee
Roboto · 26px
Bold · LH 32px
Section Heading
Noto Sans · 20px
Bold · LH 28px
Subsection Title
Noto Sans · 16px
Bold · LH 24px
Body content for paragraphs and descriptions.
Roboto · 14px
Normal · LH 26px
Helper text & metadata
Roboto · 12px
Normal · LH 18px
03
Layout
Desktop Application Layout
- 1.Header
- 2.Main Navigation
- 3.Secondary Navigation
- 4.Content Area
* The content area is flexible and adapts to the screen size. Default container width: 1400px, centered with 2rem horizontal padding.
04
Grid System
Spacing Scale
12-Column Grid
12 columns · 16 px gutter · 1400 px max width
Border Radius
05
Form Elements
Inputs
Vehicle number is required.
Choice Elements
Badges
Primary Button — "Book a Demo"
Background #595FAB · Text white · Used for the primary conversion CTA across the site.
Secondary Button — "Talk to Sales"
Tertiary & Utility
07
Tables
Submission Log
| Date | Vehicle | Driver | Distance | Total Amount | Status |
|---|---|---|---|---|---|
| 16 Jun 2026 | MH-12-AB-1234 | Ramesh K. | 412 km | ₹ 18,250 | Completed |
| 14 Jun 2026 | MH-12-CD-5678 | Sunil P. | 286 km | ₹ 12,400 | In transit |
| 12 Jun 2026 | GJ-05-EF-9012 | Anil M. | 198 km | ₹ 8,750 | Scheduled |
| 10 Jun 2026 | RJ-14-GH-3456 | Vikas S. | 342 km | ₹ 14,900 | Cancelled |
Header row uses muted foreground (12 px uppercase). Rows alternate with subtle hover state. Status uses tinted color pills (10 % alpha of the status color).
08
Charts & Infographics
Cash Summary
Cash flow · last 12 weeks
₹ 24,82,450
Active vehicles
248
On-time rate
96.4%
Pending invoices
12
09
Iconography
Icons use the Lucide library. Default size 16–18 px, stroke width 1.8. Container icons sit on a tinted background of the parent accent color (10 % alpha) inside a rounded-lg square.
10
UI Elements
Toast Messages
Trip completed
Vehicle MH-12-AB-1234 reached destination on time.
Sync complete
All driver app data has been synced to the cloud.
Service due soon
Vehicle GJ-05-EF-9012 service is due in 320 km.
Upload failed
Inspection photo could not be uploaded. Try again.
Tooltips & Inline Help
Vehicle Registration Number
The registration number printed on the number plate.
Vehicle Registration Number
The registration number printed on the number plate.
Vehicle Registration Number
The registration number printed on the number plate.
11
Modals & Popups
Booking Confirmation
Booking Confirmation
Your booking is successfully created for trip ID #TS-2026-0418.
12
Illustration & Imagery
Marketing illustrations use a flat, friendly style with rounded corners, soft shadows, and the brand purple as the dominant accent. Photography prefers wide-angle fleet & operations imagery with a cool color tone, slightly muted saturation, and bg-black/65 overlays for hero backgrounds.
Voice & Tone
Confident, helpful, ROI-driven. Avoid jargon. Speak to operations leaders, not engineers.
CTA Standards
Primary CTA is always 'Book a Demo'. Secondary CTA is always 'Talk to Sales'. No variations.
Naming
Always 'TransportSimple' (one word, capital T and S). Never 'Transport Simple' or 'transportsimple'.
Machine-readable design tokens
{
"brand": "TransportSimple",
"version": "1.0",
"colors": {
"primary": [
{
"name": "Primary Purple",
"hex": "#595FAB",
"token": "--primary",
"usage": "Primary CTAs, brand accents, headings emphasis"
},
{
"name": "Background Light",
"hex": "#F2F4F7",
"token": "--background",
"usage": "Page background, alternate sections"
}
],
"secondary": [
{
"name": "Secondary Blue",
"hex": "#0283E5",
"token": "--secondary",
"usage": "Links, secondary emphasis, info states"
},
{
"name": "Success Green",
"hex": "#07C060",
"token": "--success",
"usage": "Success toasts, positive metrics, confirmations"
},
{
"name": "Accent Amber",
"hex": "#FCB040",
"token": "--accent",
"usage": "Warnings, highlights, scheduled service"
},
{
"name": "Destructive Pink",
"hex": "#F4446B",
"token": "--destructive",
"usage": "Errors, deletions, critical alerts"
}
],
"text": [
{
"name": "Foreground",
"hex": "#34393E",
"token": "--foreground",
"usage": "Body text, headings"
},
{
"name": "Muted Foreground",
"hex": "#5A6B7B",
"token": "--muted-foreground",
"usage": "Captions, secondary text, labels"
},
{
"name": "Muted",
"hex": "#BCC7D1",
"token": "--muted",
"usage": "Disabled states, placeholders, dividers"
}
],
"background": [
{
"name": "Section Alt",
"hex": "#F2F4F7",
"token": "--section-alt",
"usage": "Alternating section backgrounds"
},
{
"name": "Card / White",
"hex": "#FFFFFF",
"token": "--card",
"usage": "Cards, elevated surfaces, hero backgrounds"
}
]
},
"typography": {
"heading": {
"family": "Noto Sans",
"weights": [
400,
500,
600,
700,
800
]
},
"body": {
"family": "Roboto",
"weights": [
400,
500,
700
]
},
"scale": [
{
"tag": "H1",
"sample": "Add Employee",
"font": "Roboto",
"size": "26px",
"weight": "Bold",
"lineHeight": "32px"
},
{
"tag": "H2",
"sample": "Section Heading",
"font": "Noto Sans",
"size": "20px",
"weight": "Bold",
"lineHeight": "28px"
},
{
"tag": "H3",
"sample": "Subsection Title",
"font": "Noto Sans",
"size": "16px",
"weight": "Bold",
"lineHeight": "24px"
},
{
"tag": "Body",
"sample": "Body content for paragraphs and descriptions.",
"font": "Roboto",
"size": "14px",
"weight": "Normal",
"lineHeight": "26px"
},
{
"tag": "Caption",
"sample": "Helper text & metadata",
"font": "Roboto",
"size": "12px",
"weight": "Normal",
"lineHeight": "18px"
}
]
},
"layout": {
"containerMaxWidth": "1400px",
"containerPaddingX": "2rem",
"gridColumns": 12,
"gridGutter": "16px",
"borderRadius": {
"sm": "4px",
"md": "6px",
"lg": "8px",
"xl": "12px",
"2xl": "16px"
}
},
"spacing": [
{
"name": "xs",
"value": "4px",
"usage": "Inline gaps, icon spacing"
},
{
"name": "sm",
"value": "8px",
"usage": "Button padding, badge gaps"
},
{
"name": "md",
"value": "16px",
"usage": "Card padding, form rows"
},
{
"name": "lg",
"value": "24px",
"usage": "Section internal gaps"
},
{
"name": "xl",
"value": "40px",
"usage": "Section vertical rhythm"
},
{
"name": "2xl",
"value": "80px",
"usage": "Hero / page-level rhythm"
}
],
"cta": {
"primary": "Book a Demo",
"secondary": "Talk to Sales"
}
}