SPOT · DESIGN SYSTEM · 2025
Design System

Built to
park faster.

Every token, component, and principle that powers the SPOT experience. Consistent. Accessible. Unmistakably green.

18
UI Icons
8
3D Icons
2
Typefaces
12
Spacing tokens
01 — Foundations
Color
#2BC053 is the single most important decision in this system. Every surface, state, and signal extends from it. One dominant green. No competing primaries. Clarity through restraint.
Spot Green
#2BC053 · Primary
Black
#0A0C0A · Background
Surface
#141A14 · Cards
Green ramp
#EAF3DE
#C0DD97
#97C459
#2BC053
#3B6D11
#27500A
#173404
Semantic colors
SUCCESS
#2BC053
ERROR
#EE4444
WARNING
#F5A623
INFO
#4A9DE8
SURFACE 2
#141A14
SURFACE 3
#1A221A
02 — Foundations
Type
Syne for display and headings — angular, high-energy, unmistakable at large sizes. DM Sans for body — clear, readable, neutral. DM Mono for all data, tokens, and metadata.
Display
Park smarter.
Syne 800
64px / -3%
Heading 1
Find your spot.
Syne 700
40px / -2.5%
Heading 2
Reserved just for you.
Syne 600
28px / -2%
Heading 3
Tanger Outlets · Row C
Syne 600
20px / 0%
Body Large
Guaranteed front-row parking at your favorite venues.
DM Sans 400
18px / 1.7
Body
Book in seconds. Walk straight in. Your spot is waiting.
DM Sans 400
15px / 1.7
Caption
booking confirmed · 11:47 pm · spot #4
DM Mono 400
12px / +6%
Label
Duration · Price · Availability
DM Mono 500
11px / +10%
03 — Assets
Icons
2px stroke weight. Square caps. Exaggerated roundness on corners. 24×24px base grid. Three sizes: 16 / 24 / 32px. Two styles: flat UI for interaction, volumetric 3D for delight moments.
Flat UI · outline · 24px
find spot
booking
duration
payment
confirmed
search
profile
vehicle
alerts
explore
premium
history
settings
navigate
home
add spot
info
message
3D Volumetric · high-impact moments · 80px
find spot
Map screen · Onboarding
booking
Confirmation · Empty state
confirmed
Success screen · Payment done
duration
Active session · Timer
04 — Components
UI Kit
Every interactive element follows the same rules: one primary action per screen, three CTA states always defined, green reserved for active and positive states only.
Buttons
Primary · Secondary · Ghost · Disabled
Sizes: sm (36px) · md (44px) · lg (52px)
Map markers
Tanger
available
Galleria
selected
CityCentre
unavailable
Fill: #2BC053 · #FFFFFF · #B4B2A9
Selected: scale(1.2) + white fill + green border
Form fields
✓ Spot available at this location
Duration must be at least 30 minutes
Notifications
Spot #4 confirmed. Walk straight in.
now
Booking failed. Card declined.
1m ago
30 min left on your session.
2m ago
Badges
Available Full Premium Inactive Confirmed Expired
05 — Foundations
Spacing
8pt grid. Every value is a multiple of 8. No exceptions. This is what makes the UI feel tight and intentional at any screen size — it's the invisible structure behind everything.
space-1
4px · 0.25rem
space-2
8px · 0.5rem
space-3
12px · 0.75rem
space-4
16px · 1rem
space-5
24px · 1.5rem
space-6
32px · 2rem
space-7
48px · 3rem
space-8
64px · 4rem
space-9
80px · 5rem
space-10
100px · 6.25rem
BORDER RADIUS
r-sm: 6px
r-md: 10px
r-lg: 16px
r-xl: 24px
r-full: 99px
STROKE
border-thin: 0.5px
border-base: 1px
border-thick: 1.5px
icon-stroke: 2px
marker-border: 2.5px
ICON SIZES
sm: 16×16
md: 24×24
lg: 32×32
3D: 64×64
3D hero: 80×80
ELEVATION
0: flat surface
1: cards
2: sheets
3: modals
4: tooltips
06 — Philosophy
Principles
Adapted from Uber's 2026 icon system rebuild. Four principles that govern every design decision — not just icons, but every component, flow, and token in this system.
01
Design to scale
What works across 5 screens today must remain legible and intentional at 500. Every decision is made with scale in mind — tokens over hardcoded values, systems over one-offs.
02
Design for clarity
Every shape, label, and color earns its place by making the next step obvious. Clarity is the highest form of craft. If a user has to think, we've already lost.
03
Design for access
Contrast ratios are a floor, not a ceiling. Dynamic Type, WCAG AA, and keyboard navigation are table stakes. Diverse needs are not edge cases — they are the spec.
04
Design with data
Instinct is a starting point. Every state, every copy variant, every CTA placement is a hypothesis. Ship it. Measure it. Let users tell us what clarity actually means.