Industry
Automotive
Product
Design system
Canopy DS
Design System
Canopy are a Ford backed start up that work in the vehicle security space. I was hired by Canopy to take a proof of concept, and then expand it, test it, iterate it, and then deliver engineer ready designs, along with a new design system, built from the ground up. This is an overview of that design system.
Brand
1.1
Logos
1.2
Fonts
Space Grotesk
BOLD
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Space Grotesk
REGULAR
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Space Grotesk
LIGHT
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Inter
SEMI-BOLD
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Inter
REGULAR
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
1.3
Text styles
Header 6
Space Grotesk 54 / 72
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 5
Space Grotesk 42 / 58
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 4
Space Grotesk 32 / 46
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 3
Space Grotesk 24 / 36
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 2
Space Grotesk 20 / 30
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 1
Space Grotesk 16 / 24
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Body
Inter 14 / 22
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
1.4
Colour styles
FF5500
FF5500
FF5500
000000
FFFFFF
802B00
993300
B23C00
CC4400
FF5500
FF7733
FF9966
FFBB99
FFDDCC
FF5500
0099AA
0061AA
007AFF
002F6C
FF5500
884477
EEBB55
668822
# 002F6C
FF5500
252525
353535
454545
555555
656565
757575
858585
959595
FF5500
FF5500
A5A5A5
B5B5B5
C5C5C5
D5D5D5
E5E5E5
F5F5F5
FF5500
FF5500
FF5500
FF5500
FF155B
FF7733
7DA62B
FF5500
FF5500
1.5
Grid styles
376 iPhone Mini
Columns 12 / Width 14 / Guttering 16 / Alignment Centre
768 Tablet Portrait
Columns 12 / Width 42 / Guttering 24 / Alignment Centre
Columns 12 / Width 62 / Guttering 32 / Alignment Centre
Columns 12 / Width 88 / Guttering 40 / Alignment Centre
1160 Tablet Landscape / Small Desktop
1576 Medium Desktop
1.6
Effects
Drop shaddows
Small
S
Medium
M
Large
L
Atoms
2.1
Icons
Location
LIVE
Calendar
Calendar
Data
Sound
Settings
Layers
Alert
Alarm
Break in
Time
Share
Mouse hand
Filter
Loading 1
Loading 2
Folder
Share
Refresh
Truck
Van
Car
Power
Holiday
Loading GIF
Rotate 1
Rotate 2
Rotate 3
Finger
Technology
Tech Spec
US Flag
Basket
Orders
Horn
Lights
Edit
Tick
Preferences
Notifications
Video
Comment
Action item
Engineering
Maximise
Plus code
Resolved
Numbers
8
Installation
Order
Canopy
Apple
Tips
Info
Torch
Updates
TikTok
People
Drivers
Support
Account
Account
Image
Pause
Delete
Bluetooth
Camera
Directions
Door
People
Copy
Help
G Menu
Menu
Plus
Minus
Minimise
Home
Work
Search
Work phone
Open box
Cloud
Power unit
Cables
Measurement
ft
Siren
Shop
More
Data
4G LTE
4G
Engine
Telephone
Locate
Password
Cat
Payment
LED
External link
Set up
Motion
Save
iPhone
Sent
Track
Flag
Record
Cookie
Inbox
Timeline
Download
Chat
Coupon
Device
Team
Globe
2.2
Buttons
& Links
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
2.3
Bars, Sliders
& Switches
Progress bar
Slider
ON
OFF
OFF
ON
Switches
2.4
Selectors
29
29
29
29
0
29
29
Off
ON
Home address
Company name
Team Kingfisher
Pelican Team
Team Eagle
Pigeon
Home
Work
Person
Vehicle
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Person
Vehicle
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
2.5
Maps
Default
Satellite
Labels
Default
Satellite
Labels
Start
Sam’s Ford F150 Raptor
My location
Molecules
3.1
Tabs
Active
Inactive
Inactive
Active
Active
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Active
3.2
Menu bars
Greg Viercant
Personal
Greg Viercant
Personal
Greg Viercant
Personal
Greg Viercant
Personal
Log in
Log in
Log in
Log in
Log in
Log in
Log in
Log in
3.3
Form fields
john.smith@email
john.smith@email.com
john.smith@email.com
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
Password1!
john.smith@email
john.smith@email
john.smith@email
john.smith@email.com
john.smith@email.com
john.smith@email.com
john.smith@email.com
john.smith@email.com
john.smith@email.com
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
Password1!
Password
Password1!
Password
Password1!
3.4
Cards
Essentials
Includes
7 days of cloud stored events
ADT protection services
Device deterrents to prevent theft
$20 / month
My plan
Premium
Includes
30 days of cloud stored events
Full ADT monitoring services
Custom alerts and preferences
$30 / month
Upgrade
Real time intrusion notifications
Cloud based video storage
LIVE video streaming
Unlimited data
LTE internet connectivity
4G
$14.99
/ month
Always-on Service Plan
After your free trial your service plan will automatically renew at the above price.
Your free trial ends Jan 1, 2024
Active
Mastercard **** **** **** 1234
Payment
John Smith
123 Address line
City, State
Zip code
Shipping (3-5 days)
$FREE
$29 / month
$299
Premium Plan
Canopy Device
04 Jan 2023
0123456789
Date
Order number
3.5
Onboarding
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
More information can be found here:
https://canopy.security/abc123
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Read more
1
The Canopy Device
Lorem ipsum dolor is just dummy text from the printing and typesetting industry.
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
More information can be found here:
https://canopy.security/abc123
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Read more
1
The Canopy Device
Lorem ipsum dolor is just dummy text from the printing and typesetting industry.
Organisms
4.1
Headers
4:28
Order now
4:28
4:28
4.2
Footers
Location
LIVE
Activity
Location
LIVE
Activity
Location
LIVE
Activity
Location
LIVE
Activity
Next
Back
Next
Request emergency help
Cancel emergency help
4.3
Side menus
Overview
Log in
Tech Specs
Order now
Account
Support
Log out
Shop
Account
Support
Log out
Shop
Sagebrush Drive
Home
XPO Logistics
Work
TFI International
Work
Shop
Add a new space
Sagebrush Drive
Home
XPO Logistics
Work
Shop
Add a new space
Sagebrush Drive
Home
Shop
Add a new space
4.4
Filters
By type
By date
Filter
Cancel
Apply
MON
TUE
WED
THU
FRI
SAT
SUN
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
23
24
25
26
27
28
29
30
1
2
September 2022
By date
Cancel
Apply
Theft
Break in
Video
Audio
By type
Cancel
Apply
4.5
Windows
Threats detected
2
Threats resolved
2
Thefts
0
Ford Explorer
Miles driven today
16.8 miles
Time driven today
3h 48m
Christian Moran
Stats
LIVE
History
Ford Explorer
2020, Red
Christian Moran
2231 Dalzelle Street,
Detroit, MI 48216
Secure
Stats
LIVE
History
Ford Explorer
2020, Red
Detroit, MI
Just now
Detroit, MI
20 mins ago
Detroit, MI
10:52am
Detroit, MI
Yesterday
Detroit, MI
Tue, Dec 5
Detroit, MI
Mon, Dec 4
Stats
LIVE
History
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Download
Share
11:24
Activity detected
11:24
Alarm & lights initiated
11:24
Video recording
11:24
Notification sent
11:25
Threat resolved
Timeline
2231 Dalzelle Street, Detroit, MI
Christian Moran
4:20pm
Tuesday December 5th, 2023
4.6
Date & Time
Time
14:58
October 2022
MON
TUE
WED
THU
FRI
SAT
SUN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
12 Oct 2022
14:58
Time
14:58
October 2022
MON
TUE
WED
THU
FRI
SAT
SUN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
12 Oct 2022
14:58
14
13
15
12
12
17
16
58
57
59
56
56
01
00
Time
14:58
October 2022
12 Oct 2022
14:58
October
September
November
August
December
July
January
2022
2021
2023
2020
2024
2019
2025
Screens
5.1
Main
5.2
Supporting
Documentation
6.1
Arrows
Information goes here
Information goes here
6.2
Notes
New
Add message here, lorem ipsum dolor sit amet is dummy text.
Add name here
Comment
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Comment
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Comment
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Question
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Question
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Question
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Observation
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Observation
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Observation
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Action
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Action
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Action
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Notification
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Notification
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Notification
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Engineering
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Engineering
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Engineering
Industry
Automotive
Product
Design system
Canopy DS
Design System
Canopy are a Ford backed start up that work in the vehicle security space. I was hired by Canopy to take a proof of concept, and then expand it, test it, iterate it, and then deliver engineer ready designs, along with a new design system, built from the ground up. This is an overview of that design system.
Brand
1.1
Logos
1.2
Fonts
Space Grotesk
BOLD
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Space Grotesk
REGULAR
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Space Grotesk
LIGHT
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Inter
SEMI-BOLD
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Inter
REGULAR
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
1.3
Text styles
Header 6
Space Grotesk 54 / 72
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 5
Space Grotesk 42 / 58
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 4
Space Grotesk 32 / 46
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 3
Space Grotesk 24 / 36
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 2
Space Grotesk 20 / 30
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 1
Space Grotesk 16 / 24
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Body
Inter 14 / 22
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
1.4
Colour styles
Primary Orange
# FF5500
Primary Orange
# FF5500
Primary Orange
# FF5500
Black
# 000000
White
# FFFFFF
Dark 4
# 802B00
Dark 3
# 993300
Dark 2
# B23C00
Dark 1
# CC4400
Primary Orange
# FF5500
Light 2
# FF7733
Light 2
# FF9966
Light 3
# FFBB99
Light 4
# FFDDCC
Primary Orange
# FF5500
Canopy Blue
# 0099AA
ADT Blue
# 0061AA
iOS Blue
# 007AFF
Ford Blue
# 002F6C
Primary Orange
# FF5500
Purple
# 884477
Yellow
# EEBB55
Green
# 668822
Ford Blue
# 002F6C
Primary Orange
# FF5500
Grey 2
# 252525
Grey 3
# 353535
Grey 4
# 454545
Grey 5
# 555555
Grey 6
# 656565
Grey 7
# 757575
Grey 8
# 858585
Grey 9
# 959595
Primary Orange
# FF5500
Primary Orange
# FF5500
Grey A
# A5A5A5
Grey B
# B5B5B5
Grey C
# C5C5C5
Grey D
# D5D5D5
Grey E
# E5E5E5
Grey F
# F5F5F5
Primary Orange
# FF5500
Primary Orange
# FF5500
Primary Orange
# FF5500
Primary Orange
# FF5500
Red
# FF155B
Amber
# FF7733
Green
# 7DA62B
Primary Orange
# FF5500
Primary Orange
# FF5500
1.5
Grid styles
376 iPhone Mini
Columns 12 / Width 14 / Guttering 16 / Alignment Centre
768 Tablet Portrait
Columns 12 / Width 42 / Guttering 24 / Alignment Centre
Columns 12 / Width 62 / Guttering 32 / Alignment Centre
Columns 12 / Width 88 / Guttering 40 / Alignment Centre
1160 Tablet Landscape / Small Desktop
1576 Medium Desktop
1.6
Effects
Drop shaddows
Small
S
Medium
M
Large
L
Atoms
2.1
Icons
Location
LIVE
Calendar
Calendar
Data
Sound
Settings
Layers
Alert
Alarm
Break in
Time
Share
Mouse hand
Filter
Loading 1
Loading 2
Folder
Share
Refresh
Truck
Van
Car
Power
Holiday
Loading GIF
Rotate 1
Rotate 2
Rotate 3
Finger
Technology
Tech Spec
US Flag
Basket
Orders
Horn
Lights
Edit
Tick
Preferences
Notifications
Video
Comment
Action item
Engineering
Maximise
Plus code
Resolved
Numbers
8
Installation
Order
Canopy
Apple
Tips
Info
Torch
Updates
TikTok
People
Drivers
Support
Account
Account
Image
Pause
Delete
Bluetooth
Camera
Directions
Door
People
Copy
Help
G Menu
Menu
Plus
Minus
Minimise
Home
Work
Search
Work phone
Open box
Cloud
Power unit
Cables
Measurement
ft
Siren
Shop
More
Data
4G LTE
4G
Engine
Telephone
Locate
Password
Cat
Payment
LED
External link
Set up
Motion
Save
iPhone
Sent
Track
Flag
Record
Cookie
Inbox
Timeline
Download
Chat
Coupon
Device
Team
Globe
2.2
Buttons & Links
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
2.3
Bars, Sliders
& Switches
Progress bar
Slider
ON
OFF
OFF
ON
Switches
2.4
Selectors
29
29
29
29
0
29
29
Off
ON
Home address
Company name
Team Kingfisher
Pelican Team
Team Eagle
Pigeon
Home
Work
Person
Vehicle
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Person
Vehicle
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
2.5
Maps
Default
Satellite
Labels
Default
Satellite
Labels
Start
Sam’s Ford F150 Raptor
My location
Molecules
3.1
Tabs
Active
Inactive
Inactive
Active
Active
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Inactive
Active
3.2
Menu bars
Greg Viercant
Personal
Greg Viercant
Personal
Greg Viercant
Personal
Greg Viercant
Personal
Log in
Log in
Log in
Log in
Log in
Log in
Log in
Log in
3.3
Form fields
john.smith@email
john.smith@email.com
john.smith@email.com
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
Password1!
john.smith@email
john.smith@email
john.smith@email
john.smith@email.com
john.smith@email.com
john.smith@email.com
john.smith@email.com
john.smith@email.com
john.smith@email.com
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
Password1!
Password
Password1!
Password
Password1!
3.4
Cards
Essentials
Includes
7 days of cloud stored events
ADT protection services
Device deterrents to prevent theft
$20 / month
My plan
Premium
Includes
30 days of cloud stored events
Full ADT monitoring services
Custom alerts and preferences
$30 / month
Upgrade
Real time intrusion notifications
Cloud based video storage
LIVE video streaming
Unlimited data
LTE internet connectivity
4G
$14.99
/ month
Always-on Service Plan
After your free trial your service plan will automatically renew at the above price.
Your free trial ends Jan 1, 2024
Active
Mastercard **** **** **** 1234
Payment
John Smith
123 Address line
City, State
Zip code
Shipping (3-5 days)
$FREE
$29 / month
$299
Premium Plan
Canopy Device
04 Jan 2023
0123456789
Date
Order number
3.5
Onboarding
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
More information can be found here:
https://canopy.security/abc123
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Read more
1
The Canopy Device
Lorem ipsum dolor is just dummy text from the printing and typesetting industry.
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
More information can be found here:
https://canopy.security/abc123
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Read more
1
The Canopy Device
Lorem ipsum dolor is just dummy text from the printing and typesetting industry.
Organisms
4.1
Headers
4:28
Order now
4:28
4:28
4.2
Footers
Location
LIVE
Activity
Location
LIVE
Activity
Location
LIVE
Activity
Location
LIVE
Activity
Next
Back
Next
Emergency help
Emergency help
4.3
Side menus
Overview
Log in
Tech Specs
Order now
Account
Support
Log out
Shop
Account
Support
Log out
Shop
Sagebrush Drive
Home
XPO Logistics
Work
TFI International
Work
Shop
Add a new space
Sagebrush Drive
Home
XPO Logistics
Work
Shop
Add a new space
Sagebrush Drive
Home
Shop
Add a new space
4.4
Filters
By type
By date
Filter
Cancel
Apply
MON
TUE
WED
THU
FRI
SAT
SUN
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
23
24
25
26
27
28
29
30
1
2
September 2022
By date
Cancel
Apply
Theft
Break in
Video
Audio
By type
Cancel
Apply
4.5
Windows
Threats detected
2
Threats resolved
2
Thefts
0
Ford Explorer
Miles driven today
16.8 miles
Time driven today
3h 48m
Christian Moran
Stats
LIVE
History
Ford Explorer
2020, Red
Christian Moran
2231 Dalzelle Street, Detroit, MI 48216
Secure
Stats
LIVE
History
Ford Explorer
2020, Red
Detroit, MI 48216
Just now
Detroit, MI 48216
20 mins ago
Detroit, MI 48216
10:52am
Detroit, MI 48216
Yesterday
Detroit, MI 48216
Tue, Dec 5
Detroit, MI 48216
Mon, Dec 4
Stats
LIVE
History
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Download
Share
11:24
Activity detected
11:24
Alarm & lights initiated
11:24
Video recording
11:24
Notification sent
11:25
Threat resolved
Timeline
2231 Dalzelle Street, Detroit, MI 48216
Christian Moran
4:20pm
Tuesday December 5th, 2023
4.6
Date & Time
Time
14:58
October 2022
MON
TUE
WED
THU
FRI
SAT
SUN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
12 Oct 2022
14:58
Time
14:58
October 2022
MON
TUE
WED
THU
FRI
SAT
SUN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
12 Oct 2022
14:58
14
13
15
12
12
17
16
58
57
59
56
56
01
00
Time
14:58
October 2022
12 Oct 2022
14:58
October
September
November
August
December
July
January
2022
2021
2023
2020
2024
2019
2025
Screens
5.1
Main
5.2
Supporting
Documentation
6.1
Arrows
Information here
Information here
6.2
Notes
Add message here, lorem ipsum dolor sit amet is dummy text.
Add name here
Comment
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Comment
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Comment
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Question
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Question
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Question
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Observation
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Observation
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Observation
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Action
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Action
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Action
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Notification
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Notification
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Notification
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Engineering
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Engineering
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Engineering
Industry
Automotive
Product
Design system
Canopy DS
Design System
Canopy are a Ford backed start up that work in the vehicle security space. I was hired by Canopy to take a proof of concept, and then expand it, test it, iterate it, and then deliver engineer ready designs, along with a new design system, built from the ground up. This is an overview of that design system.
Brand
1.1
Logos
1.2
Fonts
Space Grotesk
BOLD
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Space Grotesk
REGULAR
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Space Grotesk
LIGHT
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Inter
SEMI-BOLD
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Inter
REGULAR
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
1.3
Text styles
Header 6
Space Grotesk 54 / 72
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 5
Space Grotesk 42 / 58
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 4
Space Grotesk 32 / 46
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 3
Space Grotesk 24 / 36
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 2
Space Grotesk 20 / 30
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 1
Space Grotesk 16 / 24
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Body
Inter 14 / 22
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
1.4
Colour styles
Primary Orange
# FF5500
Primary Orange
# FF5500
Primary Orange
# FF5500
Black
# 000000
White
# FFFFFF
Dark 4
# 802B00
Dark 3
# 993300
Dark 2
# B23C00
Dark 1
# CC4400
Primary Orange
# FF5500
Light 2
# FF7733
Light 2
# FF9966
Light 3
# FFBB99
Light 4
# FFDDCC
Primary Orange
# FF5500
Canopy Blue
# 0099AA
ADT Blue
# 0061AA
iOS Blue
# 007AFF
Ford Blue
# 002F6C
Primary Orange
# FF5500
Supporting Purple
# 884477
Supporting Yellow
# EEBB55
Supporting Green
# 668822
Ford Blue
# 002F6C
Primary Orange
# FF5500
Grey 2
# 252525
Grey 3
# 353535
Grey 4
# 454545
Grey 5
# 555555
Grey 6
# 656565
Grey 7
# 757575
Grey 8
# 858585
Grey 9
# 959595
Primary Orange
# FF5500
Primary Orange
# FF5500
Grey A
# A5A5A5
Grey B
# B5B5B5
Grey C
# C5C5C5
Grey D
# D5D5D5
Grey E
# E5E5E5
Grey F
# F5F5F5
Primary Orange
# FF5500
Primary Orange
# FF5500
Primary Orange
# FF5500
Primary Orange
# FF5500
Red
# FF155B
Amber
# FF7733
Green
# 7DA62B
Primary Orange
# FF5500
Primary Orange
# FF5500
1.5
Grid styles
376 iPhone Mini
Columns 12 / Width 14 / Guttering 16 / Alignment Centre
768 Tablet Portrait
Columns 12 / Width 42 / Guttering 24 / Alignment Centre
Columns 12 / Width 62 / Guttering 32 / Alignment Centre
Columns 12 / Width 88 / Guttering 40 / Alignment Centre
1160 Tablet Landscape / Small Desktop
1576 Medium Desktop
1.6
Effects
Drop shaddows
Small
S
Medium
M
Large
L
Atoms
2.1
Icons
Location
LIVE
Calendar
Calendar
Data
Sound
Settings
Layers
Alert
Alarm
Break in
Time
Share
Mouse hand
Filter
Loading 1
Loading 2
Folder
Share
Refresh
Truck
Van
Car
Power
Holiday
Loading GIF
Rotate 1
Rotate 2
Rotate 3
Finger
Technology
Tech Spec
US Flag
Basket
Orders
Horn
Lights
Edit
Tick
Preferences
Notifications
Video
Comment
Action item
Engineering
Maximise
Plus code
Resolved
Numbers
8
Installation
Order
Canopy
Apple
Tips
Info
Torch
Updates
TikTok
People
Drivers
Support
Account
Account
Image
Pause
Delete
Bluetooth
Camera
Directions
Door
People
Copy
Help
G Menu
Menu
Plus
Minus
Minimise
Home
Work
Search
Work phone
Open box
Cloud
Power unit
Cables
Measurement
ft
Siren
Shop
More
Data
4G LTE
4G
Engine
Telephone
Locate
Password
Cat
Payment
LED
External link
Set up
Motion
Save
iPhone
Sent
Track
Flag
Record
Cookie
Inbox
Timeline
Download
Chat
Coupon
Device
Team
Globe
2.2
Buttons & Links
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
2.3
Bars, Sliders & Switches
Progress bar
Slider
ON
OFF
OFF
ON
Switches
2.4
Selectors
29
29
29
29
0
29
29
Off
ON
Home address
Company name
Team Kingfisher
Pelican Team
Team Eagle
Pigeon
Home
Work
Person
Vehicle
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Person
Vehicle
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
2.5
Maps
Default
Satellite
Labels
Default
Satellite
Labels
Start
Sam’s Ford F150 Raptor
My location
Molecules
3.1
Tabs
Active
Inactive
Inactive
Active
Active
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Inactive
Active
3.2
Menu bars
Greg Viercant
Personal
Greg Viercant
Personal
Greg Viercant
Personal
Greg Viercant
Personal
Log in
Log in
Log in
Log in
Log in
Log in
Log in
Log in
3.3
Form fields
john.smith@email
john.smith@email.com
john.smith@email.com
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
Password1!
john.smith@email
john.smith@email
john.smith@email
john.smith@email.com
john.smith@email.com
john.smith@email.com
john.smith@email.com
john.smith@email.com
john.smith@email.com
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
Password1!
Password
Password1!
Password
Password1!
3.4
Cards
Essentials
Includes
7 days of cloud stored events
ADT protection services
Device deterrents to prevent theft
$20 / month
My plan
Premium
Includes
30 days of cloud stored events
Full ADT monitoring services
Custom alerts and preferences
$30 / month
Upgrade
Real time intrusion notifications
Cloud based video storage
LIVE video streaming
Unlimited data
LTE internet connectivity
4G
$14.99
/ month
Always-on Service Plan
After your free trial your service plan will automatically renew at the above price.
Your free trial ends Jan 1, 2024
Active
Mastercard **** **** **** 1234
Payment
John Smith
123 Address line
City, State
Zip code
Shipping (3-5 days)
$FREE
$29 / month
$299
Premium Plan
Canopy Device
04 Jan 2023
0123456789
Date
Order number
3.5
Onboarding
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
More information can be found here:
https://canopy.security/abc123
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Read more
1
The Canopy Device
Lorem ipsum dolor is just dummy text from the printing and typesetting industry.
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
More information can be found here:
https://canopy.security/abc123
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Read more
1
The Canopy Device
Lorem ipsum dolor is just dummy text from the printing and typesetting industry.
Organisms
4.1
Headers
4:28
4:28
4.2
Footers
Location
LIVE
Activity
Location
LIVE
Activity
Location
LIVE
Activity
Location
LIVE
Activity
Next
Back
Next
Request emergency help
Cancel emergency help
4.3
Side menus
Overview
Log in
Tech Specs
Order now
Account
Support
Log out
Shop
Account
Support
Log out
Shop
Sagebrush Drive
Home
XPO Logistics
Work
TFI International
Work
Shop
Add a new space
Sagebrush Drive
Home
XPO Logistics
Work
Shop
Add a new space
Sagebrush Drive
Home
Shop
Add a new space
4.4
Filters
By type
By date
Filter
Cancel
Apply
MON
TUE
WED
THU
FRI
SAT
SUN
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
23
24
25
26
27
28
29
30
1
2
September 2022
By date
Cancel
Apply
Theft
Break in
Video
Audio
By type
Cancel
Apply
4.5
Windows
Threats detected
2
Threats resolved
2
Thefts
0
Ford Explorer
Miles driven today
16.8 miles
Time driven today
3h 48m
Christian Moran
Stats
LIVE
History
Ford Explorer
2020, Red
Christian Moran
2231 Dalzelle Street, Detroit, MI 48216
Secure
Stats
LIVE
History
Ford Explorer
2020, Red
Detroit, MI 48216
Just now
Detroit, MI 48216
20 mins ago
Detroit, MI 48216
10:52am
Detroit, MI 48216
Yesterday
Detroit, MI 48216
Tue, Dec 5
Detroit, MI 48216
Mon, Dec 4
Stats
LIVE
History
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Download
Share
11:24
Activity detected
11:24
Alarm & lights initiated
11:24
Video recording
11:24
Notification sent
11:25
Threat resolved
Timeline
2231 Dalzelle Street, Detroit, MI 48216
Christian Moran
4:20pm
Tuesday December 5th, 2023
4.6
Date & Time
Time
14:58
October 2022
MON
TUE
WED
THU
FRI
SAT
SUN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
12 Oct 2022
14:58
Time
14:58
October 2022
MON
TUE
WED
THU
FRI
SAT
SUN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
12 Oct 2022
14:58
14
13
15
12
12
17
16
58
57
59
56
56
01
00
Time
14:58
October 2022
12 Oct 2022
14:58
October
September
November
August
December
July
January
2022
2021
2023
2020
2024
2019
2025
Screens
5.1
Main
5.2
Supporting
Documentation
6.1
Arrows
Information goes here
Information goes here
6.2
Notes
New
Add message here, lorem ipsum dolor sit amet is dummy text.
Add name here
Comment
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Comment
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Comment
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Question
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Question
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Question
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Observation
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Observation
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Observation
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Action
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Action
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Action
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Notification
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Notification
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Notification
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Engineering
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Engineering
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Engineering
Industry
Automotive
Product
Design system
Canopy DS
Design System
Canopy are a Ford backed start up that work in the vehicle security space. I was hired by Canopy to take a proof of concept, and then expand it, test it, iterate it, and then deliver engineer ready designs, along with a new design system, built from the ground up. This is an overview of that design system.
Brand
1.1
Logos
1.2
Fonts
Space Grotesk
BOLD
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Space Grotesk
REGULAR
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Space Grotesk
LIGHT
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Inter
SEMI-BOLD
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Inter
REGULAR
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
1.3
Text styles
Header 6
Space Grotesk 54 / 72
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 5
Space Grotesk 42 / 58
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 4
Space Grotesk 32 / 46
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 3
Space Grotesk 24 / 36
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 2
Space Grotesk 20 / 30
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 1
Space Grotesk 16 / 24
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Body
Inter 14 / 22
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
1.4
Colour styles
Primary Orange
# FF5500
Primary Orange
# FF5500
Primary Orange
# FF5500
Black
# 000000
White
# FFFFFF
Dark 4
# 802B00
Dark 3
# 993300
Dark 2
# B23C00
Dark 1
# CC4400
Primary Orange
# FF5500
Light 2
# FF7733
Light 2
# FF9966
Light 3
# FFBB99
Light 4
# FFDDCC
Primary Orange
# FF5500
Canopy Blue
# 0099AA
ADT Blue
# 0061AA
iOS Blue
# 007AFF
Ford Blue
# 002F6C
Primary Orange
# FF5500
Supporting Purple
# 884477
Supporting Yellow
# EEBB55
Supporting Green
# 668822
Ford Blue
# 002F6C
Primary Orange
# FF5500
Grey 2
# 252525
Grey 3
# 353535
Grey 4
# 454545
Grey 5
# 555555
Grey 6
# 656565
Grey 7
# 757575
Grey 8
# 858585
Grey 9
# 959595
Primary Orange
# FF5500
Primary Orange
# FF5500
Grey A
# A5A5A5
Grey B
# B5B5B5
Grey C
# C5C5C5
Grey D
# D5D5D5
Grey E
# E5E5E5
Grey F
# F5F5F5
Primary Orange
# FF5500
Primary Orange
# FF5500
Primary Orange
# FF5500
Primary Orange
# FF5500
Red
# FF155B
Amber
# FF7733
Green
# 7DA62B
Primary Orange
# FF5500
Primary Orange
# FF5500
1.5
Grid styles
376 iPhone Mini
Columns 12 / Width 14 / Guttering 16 / Alignment Centre
768 Tablet Portrait
Columns 12 / Width 42 / Guttering 24 / Alignment Centre
Columns 12 / Width 62 / Guttering 32 / Alignment Centre
Columns 12 / Width 88 / Guttering 40 / Alignment Centre
1160 Tablet Landscape / Small Desktop
1576 Medium Desktop
1.6
Effects
Drop shaddows
Small
S
Medium
M
Large
L
Atoms
2.1
Icons
Location
LIVE
Calendar
Calendar
Data
Sound
Settings
Layers
Alert
Alarm
Break in
Time
Share
Mouse hand
Filter
Loading 1
Loading 2
Folder
Share
Refresh
Truck
Van
Car
Power
Holiday
Loading GIF
Rotate 1
Rotate 2
Rotate 3
Finger
Technology
Tech Spec
US Flag
Basket
Orders
Horn
Lights
Edit
Tick
Preferences
Notifications
Video
Comment
Action item
Engineering
Maximise
Plus code
Resolved
Numbers
8
Installation
Order
Canopy
Apple
Tips
Info
Torch
Updates
TikTok
People
Drivers
Support
Account
Account
Image
Pause
Delete
Bluetooth
Camera
Directions
Door
People
Copy
Help
G Menu
Menu
Plus
Minus
Minimise
Home
Work
Search
Work phone
Open box
Cloud
Power unit
Cables
Measurement
ft
Siren
Shop
More
Data
4G LTE
4G
Engine
Telephone
Locate
Password
Cat
Payment
LED
External link
Set up
Motion
Save
iPhone
Sent
Track
Flag
Record
Cookie
Inbox
Timeline
Download
Chat
Coupon
Device
Team
Globe
2.2
Buttons & Links
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
2.3
Bars, Sliders & Switches
Progress bar
Slider
ON
OFF
OFF
ON
Switches
2.4
Selectors
29
29
29
29
0
29
29
Off
ON
Home address
Company name
Team Kingfisher
Pelican Team
Team Eagle
Pigeon
Home
Work
Person
Vehicle
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Person
Vehicle
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
2.5
Maps
Default
Satellite
Labels
Default
Satellite
Labels
Start
Sam’s Ford F150 Raptor
My location
Molecules
3.1
Tabs
Active
Inactive
Inactive
Active
Active
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Inactive
Active
3.2
Menu bars
Greg Viercant
Personal
Greg Viercant
Personal
Greg Viercant
Personal
Greg Viercant
Personal
Log in
Log in
Log in
Log in
Log in
Log in
Log in
Log in
3.3
Form fields
john.smith@email
john.smith@email.com
john.smith@email.com
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
Password1!
john.smith@email
john.smith@email
john.smith@email
john.smith@email.com
john.smith@email.com
john.smith@email.com
john.smith@email.com
john.smith@email.com
john.smith@email.com
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
Password1!
Password
Password1!
Password
Password1!
3.4
Cards
Essentials
Includes
7 days of cloud stored events
ADT protection services
Device deterrents to prevent theft
$20 / month
My plan
Premium
Includes
30 days of cloud stored events
Full ADT monitoring services
Custom alerts and preferences
$30 / month
Upgrade
Real time intrusion notifications
Cloud based video storage
LIVE video streaming
Unlimited data
LTE internet connectivity
4G
$14.99
/ month
Always-on Service Plan
After your free trial your service plan will automatically renew at the above price.
Your free trial ends Jan 1, 2024
Active
Mastercard **** **** **** 1234
Payment
John Smith
123 Address line
City, State
Zip code
Shipping (3-5 days)
$FREE
$29 / month
$299
Premium Plan
Canopy Device
04 Jan 2023
0123456789
Date
Order number
3.5
Onboarding
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
More information can be found here:
https://canopy.security/abc123
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Read more
1
The Canopy Device
Lorem ipsum dolor is just dummy text from the printing and typesetting industry.
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
More information can be found here:
https://canopy.security/abc123
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Read more
1
The Canopy Device
Lorem ipsum dolor is just dummy text from the printing and typesetting industry.
Organisms
4.1
Headers
4:28
Order now
4:28
4:28
4.2
Footers
Location
LIVE
Activity
Location
LIVE
Activity
Location
LIVE
Activity
Location
LIVE
Activity
Next
Back
Next
Request emergency help
Cancel emergency help
4.3
Side menus
Overview
Log in
Tech Specs
Order now
Account
Support
Log out
Shop
Account
Support
Log out
Shop
Sagebrush Drive
Home
XPO Logistics
Work
TFI International
Work
Shop
Add a new space
Sagebrush Drive
Home
XPO Logistics
Work
Shop
Add a new space
Sagebrush Drive
Home
Shop
Add a new space
4.4
Filters
By type
By date
Filter
Cancel
Apply
MON
TUE
WED
THU
FRI
SAT
SUN
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
23
24
25
26
27
28
29
30
1
2
September 2022
By date
Cancel
Apply
Theft
Break in
Video
Audio
By type
Cancel
Apply
4.5
Windows
Threats detected
2
Threats resolved
2
Thefts
0
Ford Explorer
Miles driven today
16.8 miles
Time driven today
3h 48m
Christian Moran
Stats
LIVE
History
Ford Explorer
2020, Red
Christian Moran
2231 Dalzelle Street, Detroit, MI 48216
Secure
Stats
LIVE
History
Ford Explorer
2020, Red
Detroit, MI 48216
Just now
Detroit, MI 48216
20 mins ago
Detroit, MI 48216
10:52am
Detroit, MI 48216
Yesterday
Detroit, MI 48216
Tue, Dec 5
Detroit, MI 48216
Mon, Dec 4
Stats
LIVE
History
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Download
Share
11:24
Activity detected
11:24
Alarm & lights initiated
11:24
Video recording
11:24
Notification sent
11:25
Threat resolved
Timeline
2231 Dalzelle Street, Detroit, MI 48216
Christian Moran
4:20pm
Tuesday December 5th, 2023
4.6
Date & Time
Time
14:58
October 2022
MON
TUE
WED
THU
FRI
SAT
SUN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
12 Oct 2022
14:58
Time
14:58
October 2022
MON
TUE
WED
THU
FRI
SAT
SUN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
12 Oct 2022
14:58
14
13
15
12
12
17
16
58
57
59
56
56
01
00
Time
14:58
October 2022
12 Oct 2022
14:58
October
September
November
August
December
July
January
2022
2021
2023
2020
2024
2019
2025
Screens
5.1
Main
5.2
Supporting
Documentation
6.1
Arrows
Information goes here
Information goes here
6.2
Notes
New
Add message here, lorem ipsum dolor sit amet is dummy text.
Add name here
Comment
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Comment
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Comment
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Question
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Question
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Question
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Observation
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Observation
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Observation
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Action
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Action
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Action
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Notification
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Notification
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Notification
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Engineering
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Engineering
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Engineering
Industry
Automotive
Product
Design system
Canopy DS
Design System
Canopy are a Ford backed start up that work in the vehicle security space. I was hired by Canopy to take a proof of concept, and then expand it, test it, iterate it, and then deliver engineer ready designs, along with a new design system, built from the ground up. This is an overview of that design system.
Brand
1.1
Logos
1.2
Fonts
Space Grotesk
BOLD
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Space Grotesk
REGULAR
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Space Grotesk
LIGHT
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Inter
SEMI-BOLD
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
Inter
REGULAR
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
1.3
Text styles
Header 7
Space Grotesk 68 / 88
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 6
Space Grotesk 54 / 72
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 5
Space Grotesk 42 / 58
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 4
Space Grotesk 32 / 46
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 3
Space Grotesk 24 / 36
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 2
Space Grotesk 20 / 30
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Header 1
Space Grotesk 16 / 24
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Body
Inter 14 / 22
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
1.4
Colour styles
Primary Orange
# FF5500
Primary Orange
# FF5500
Primary Orange
# FF5500
Black
# 000000
White
# FFFFFF
Dark 4
# 802B00
Dark 3
# 993300
Dark 2
# B23C00
Dark 1
# CC4400
Primary Orange
# FF5500
Light 2
# FF7733
Light 2
# FF9966
Light 3
# FFBB99
Light 4
# FFDDCC
Primary Orange
# FF5500
Canopy Blue
# 0099AA
ADT Blue
# 0061AA
iOS Blue
# 007AFF
Ford Blue
# 002F6C
Primary Orange
# FF5500
Supporting Purple
# 884477
Supporting Yellow
# EEBB55
Supporting Green
# 668822
Ford Blue
# 002F6C
Primary Orange
# FF5500
Grey 2
# 252525
Grey 3
# 353535
Grey 4
# 454545
Grey 5
# 555555
Grey 6
# 656565
Grey 7
# 757575
Grey 8
# 858585
Grey 9
# 959595
Primary Orange
# FF5500
Primary Orange
# FF5500
Grey A
# A5A5A5
Grey B
# B5B5B5
Grey C
# C5C5C5
Grey D
# D5D5D5
Grey E
# E5E5E5
Grey F
# F5F5F5
Primary Orange
# FF5500
Primary Orange
# FF5500
Primary Orange
# FF5500
Primary Orange
# FF5500
Red
# FF155B
Amber
# FF7733
Green
# 7DA62B
Primary Orange
# FF5500
Primary Orange
# FF5500
1.5
Grid styles
376 iPhone Mini
Columns 12 / Width 14 / Guttering 16 / Alignment Centre
768 Tablet Portrait
Columns 12 / Width 42 / Guttering 24 / Alignment Centre
Columns 12 / Width 62 / Guttering 32 / Alignment Centre
Columns 12 / Width 88 / Guttering 40 / Alignment Centre
1160 Tablet Landscape / Small Desktop
1576 Medium Desktop
1.6
Effects
Drop shaddows
Small
S
Medium
M
Large
L
Atoms
2.1
Icons
Location
LIVE
Calendar
Calendar
Data
Sound
Settings
Layers
Alert
Alarm
Break in
Time
Share
Mouse hand
Filter
Loading 1
Loading 2
Folder
Share
Refresh
Truck
Van
Car
Power
Holiday
Loading GIF
Rotate 1
Rotate 2
Rotate 3
Finger
Technology
Tech Spec
US Flag
Basket
Orders
Horn
Lights
Edit
Tick
Preferences
Notifications
Video
Comment
Action item
Engineering
Maximise
Plus code
Resolved
Numbers
8
Installation
Order
Canopy
Apple
Tips
Info
Torch
Updates
TikTok
People
Drivers
Support
Account
Account
Image
Pause
Delete
Bluetooth
Camera
Directions
Door
People
Copy
Help
G Menu
Menu
Plus
Minus
Minimise
Home
Work
Search
Work phone
Open box
Cloud
Power unit
Cables
Measurement
ft
Siren
Shop
More
Data
4G LTE
4G
Engine
Telephone
Locate
Password
Cat
Payment
LED
External link
Set up
Motion
Save
iPhone
Sent
Track
Flag
Record
Cookie
Inbox
Timeline
Download
Chat
Coupon
Device
Team
Globe
2.2
Buttons & Links
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary A
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Primary B
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary A
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Secondary B
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary A
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Tertiary B
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive A
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
Inactive B
2.3
Bars, Sliders & Switches
Progress bar
Slider
ON
OFF
OFF
ON
Switches
2.4
Selectors
29
29
29
29
0
29
29
Off
ON
Home address
Company name
Team Kingfisher
Pelican Team
Team Eagle
Pigeon
Home
Work
Person
Vehicle
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Name Surname
Job title
Person
Vehicle
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Ford Explorer
2020, Red
2.5
Maps
Default
Satellite
Labels
Default
Satellite
Labels
Start
Sam’s Ford F150 Raptor
My location
Molecules
3.1
Tabs
Active
Inactive
Inactive
Active
Active
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Inactive
Active
Active
Inactive
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Inactive
Active
Inactive
Inactive
Inactive
Inactive
Active
3.2
Menu bars
Greg Viercant
Personal
Greg Viercant
Personal
Greg Viercant
Personal
Greg Viercant
Personal
Log in
Log in
Log in
Log in
Log in
Log in
Log in
Log in
3.3
Form fields
john.smith@email.com
Password
• • • • • • • • • •
Password
• • • • • • • • • •
john.smith@email
john.smith@email.com
Password
Password1!
john.smith@email.com
john.smith@email.com
john.smith@email.com
john.smith@email
john.smith@email
john.smith@email
john.smith@email.com
john.smith@email.com
john.smith@email.com
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
• • • • • • • • • •
Password
Password1!
Password
Password1!
Password
Password1!
3.4
Cards
Essentials
Includes
7 days of cloud stored events
ADT protection services
Device deterrents to prevent theft
$20 / month
My plan
Premium
Includes
30 days of cloud stored events
Full ADT monitoring services
Custom alerts and preferences
$30 / month
Upgrade
Real time intrusion notifications
Cloud based video storage
LIVE video streaming
Unlimited data
LTE internet connectivity
4G
$14.99
/ month
Always-on Service Plan
After your free trial your service plan will automatically renew at the above price.
Your free trial ends Jan 1, 2024
Active
Mastercard **** **** **** 1234
Payment
John Smith
123 Address line
City, State
Zip code
Shipping (3-5 days)
$FREE
$29 / month
$299
Premium Plan
Canopy Device
04 Jan 2023
0123456789
Date
Order number
3.5
Onboarding
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
More information can be found here:
https://canopy.security/abc123
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Read more
1
The Canopy Device
Lorem ipsum dolor is just dummy text from the printing and typesetting industry.
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
More information can be found here:
https://canopy.security/abc123
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Lorem ipsum dolor sit amet is just dummy text from the printing and typesetting industry. It has been the industry standard dummy text since the fifteen hundreds, when somebody did something, and something else happened.
Read less
1
The Power Unit should be installed on a clean flat surface behind the front seats.
Read more
1
The Canopy Device
Lorem ipsum dolor is just dummy text from the printing and typesetting industry.
Organisms
4.1
Headers
4:28
Order now
4:28
4:28
4.2
Footers
Location
LIVE
Activity
Location
LIVE
Activity
Location
LIVE
Activity
Location
LIVE
Activity
Next
Back
Next
Request emergency help
Cancel emergency help
4.3
Side menus
Overview
Log in
Tech Specs
Order now
Account
Support
Log out
Shop
Account
Support
Log out
Shop
Sagebrush Drive
Home
XPO Logistics
Work
TFI International
Work
Shop
Add a new space
Sagebrush Drive
Home
XPO Logistics
Work
Shop
Add a new space
Sagebrush Drive
Home
Shop
Add a new space
4.4
Filters
By type
By date
Filter
Cancel
Apply
MON
TUE
WED
THU
FRI
SAT
SUN
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
23
24
25
26
27
28
29
30
1
2
September 2022
By date
Cancel
Apply
Theft
Break in
Video
Audio
By type
Cancel
Apply
4.5
Windows
Threats detected
2
Threats resolved
2
Thefts
0
Ford Explorer
Miles driven today
16.8 miles
Time driven today
3h 48m
Christian Moran
Stats
LIVE
History
Ford Explorer
2020, Red
Christian Moran
2231 Dalzelle Street, Detroit, MI 48216
Secure
Stats
LIVE
History
Ford Explorer
2020, Red
Detroit, MI 48216
Just now
Detroit, MI 48216
20 mins ago
Detroit, MI 48216
10:52am
Detroit, MI 48216
Yesterday
Detroit, MI 48216
Tue, Dec 5
Detroit, MI 48216
Mon, Dec 4
Stats
LIVE
History
Ford Explorer
2020, Red
Ford Explorer
2020, Red
Download
Share
11:24
Activity detected
11:24
Alarm & lights initiated
11:24
Video recording
11:24
Notification sent
11:25
Threat resolved
Timeline
2231 Dalzelle Street, Detroit, MI 48216
Christian Moran
4:20pm
Tuesday December 5th, 2023
4.6
Date & Time
Time
14:58
October 2022
MON
TUE
WED
THU
FRI
SAT
SUN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
12 Oct 2022
14:58
Time
14:58
October 2022
MON
TUE
WED
THU
FRI
SAT
SUN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
12 Oct 2022
14:58
14
13
15
12
12
17
16
58
57
59
56
56
01
00
Time
14:58
October 2022
12 Oct 2022
14:58
October
September
November
August
December
July
January
2022
2021
2023
2020
2024
2019
2025
Screens
5.1
Main
5.2
Supporting
Documentation
6.1
Arrows
Information goes here
Information goes here
6.2
Notes
New
Add message here, lorem ipsum dolor sit amet is dummy text.
Add name here
Comment
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Comment
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Comment
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Question
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Question
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Question
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Observation
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Observation
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Observation
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Action
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Action
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Action
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Notification
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Notification
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Notification
New
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Engineering
In progress
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Engineering
Complete
Add message here, lorem ipsum dolor sit amet is dummy text
Add name here
Engineering