Smartfleet System Style Guide July 2017
Smartfleet System
UI Style Guide
Colour Palette
#4D4E53
- Page headings - Body text - Form text - Section heading icon
#C9CACB
- Lines / separators - Form field borders - Primary navigation text, active / hover
#394857
#ABB1B8
#4F2D7F
#9DB701
#FFA715
- Primary navigation background
#969EA7
#EDEDED
#2F3E4F
- Card / Tile heading
- Table header - Footer - Secondary action button, hover / active
#C0C5CA
#F8F7F7
- Primary navigation active section
#525F6D
- Secondary action button
- Alternate table row shading
- Primary navigation separators
- Primary navigation, inactive text
- Header icons - Text links
- Primary CTA button active / hover
- Warning, non-urgent
#2F3E4F
- Primary navigation active / hover accent
#C2D840
- Delete button
#009DA9
#007F89
- Warning, urgent
#D21F35
- Logo background - Primary CTA button inactive
- Delete button active / hover
Smartfleet System
UI Style Guide
Font Family Font family:
Roboto
Styles:
Regular
Medium
Aa
Roboto Regular
Aa
Roboto Medium
Typography
Page Heading Medium 40px Subheading Medium 24px Body Regular 18px Body Active Medium 18px Table Headers Medium 18px Tablular Data Regular 16px Caption / Alert / Tooltip
Regular 14px
Button Medium 18px Button (Card) Medium 16px
Text Links
Text link body: #4F2D7F
Text link header: #4F2D7F
Text link body hover: #4F2D7F
Text link header hover: #4F2D7F
Smartfleet System
UI Style Guide
UI Elements Buttons Primary CTA
Secondary action
ACTIVE
Delete
ACTIVE
Rounded corner 2px
ACTIVE
ACTIVE HOVER
HOVER
HOVER
Card/Tile action
Height 30px
Padding: 10px
Secondary card/tile action
ACTIVE
ACTIVE
HOVER
Rounded corner 2px
ACTIVE
HOVER
Height 22px
Padding: 6px
Forms
Title *
- Empty (#C9CACB)
Title *
- Selected (#A6A6A9)
Title *
Firstname Surname
- Typing (#A6A6A9 / #F8F7F7)
Title *
- Error (#D21F35)
Title is required
- Select -
- Select option (#4D4E53)
User Type
- Filter (#A6A6A9)
Customer Administrator FBT User

Odometer Log Officer
- Checkbox (#C9CACB / #C2D840)
- Radio button (#C9CACB / #A6A6A9)
APPLY
Smartfleet System
UI Style Guide
Drop Down
Switch
- Select User -
- Inactive (#969EA7)
Asset Management Community Assets
- Active (#C2D840)
Community Information and Advocacy Chief Executive Officer
Separators - Drop down
Environment Sustainability
- Table row, no alternate shading
Community Assets
- Table row, alternate shading
Planning and Economic Development
- Headings / content section
Modal Window
Modal Heading
Lists �
- Background (#FFFFFF)
Company Setting Company Account Cod Company States
- Heading (#969EA7) - Shadow (Offset 2px / Size 5px / 60% opacity / #000000)
Company Customise Fields Customer Policies New Vehicle Profiles Company Admin
Tooltip Lorem ipsum dolor Consectetur adipiscing elit. Integer porta euismod suscipit. Pellentesque id feugiat erat. - #000000 80% opacity
Lorem ipsum dolor sit amet Consectetur adipiscing elit. Integer porta euismod suscipit. Pellentesque id feugiat erat. Sed nunc ligula, vulputate. - #FFFFFF / #C9CACB
Smartfleet System
UI Style Guide
Icons
Support
My Profile
Log Out
Home
Company
Personnel
Fleet
Expenses
Infringement
Accident
Recommendation
Tenders
Vehicle Booking
FBT
Reports
Documents
Online Quote
Log
Top Level Side Navigation
Active / dropdown
Warning
Secondary Navigation
Help
View document
Upload