FedEx Design System
Light · Generated 13/04/2026 · 14 colors · 41 type tokens · 28 spacing steps · 26 breakpoints · 7 motion tokens
v1.0.0
Color Palette
Background Colors
White
#FFFFFF · ×284
FedEx Purple
#4D148C · ×25
Off White
#FAFAFA · ×16
FedEx Orange
#FF6200 · ×3
Light Gray
#F2F2F2 · ×2
Text Colors
Dark Gray
#333333 · ×2899
Black
#000000 · ×872
FedEx Blue
#007AB7 · ×185
Alert Red
#DE002E · ×46
Mid Gray
#808080 · ×42
Gray 2
#777777 · ×4
Dark Gray 3
#646464 · ×4
Border Colors
Border Default
rgba(89,89,91,0.5) · ×14
Border Muted
#8E8E8E · ×2
Shadow Colors

No dedicated shadow color tokens detected.

Typography
Serif Font · --font-family-base
Times
The world on time — FedEx delivers packages to over 220 countries worldwide.
Light · 300 Regular · 400 Bold · 700
Brand Font · --font-family-2
FedExSans
Track your shipment, manage deliveries, and access all FedEx services in one place.
Light · 300 Regular · 400 Medium · 500 Bold · 700
The World On Time.
Display Hero · 44px · Bold · line-height: 66px · letter-spacing: −0.63px
Shipping Made Simple
Heading 1 · 40px · Bold · line-height: 52px
Reliable Overnight Delivery
Heading 2 · 30px · Bold · line-height: 39px
FedEx Express International
Heading 3 · 24px · Medium · line-height: 30px
Track, manage, and get updates on all your shipments. From door to door, FedEx handles the logistics so you can focus on your business.
Body Large · 16px · Regular · line-height: 24px
Estimated delivery by Thursday, April 17 · Standard overnight shipping applies
Body Default · 14px · Regular · line-height: 21px
TRACKING · EXPRESS · GROUND · FREIGHT
Caption / Label · 12px · Medium · line-height: 13.8px · letter-spacing: 1px
Line Heights
Tight
11.5px
Snug
13.8px
Normal
15.6px
Relaxed
18px
Loose
21px
Spacious
24px
Open
28.6px
Airy
30px
Heading
34.5px
Heading L
39px
Heading XL
52px
Display
66px
Letter Spacing
Tight Tracking
--letter-spacing-tight
−0.63px · display headlines
Normal Tracking
--letter-spacing-normal
−0.4px · body headings
WIDE TRACKING
--letter-spacing-widest
0.75px · uppercase labels
MAX TRACKING
--letter-spacing-ls-8
1.11px · micro copy, tags
Spacing
Spacing Scale
28 tokens — 4px → 81.5px
4
6
7
8
10
12.5
15
16
17
18
19
21
24
25
28
30
32
34
35
36
40
44
45
52
60
66.5
75
81.5
Borders
Border Radii
Small / Pill
--radius-sm · 40px
Half-Pill Left
--radius-md · 40px 0 0 40px
FedEx uses pill-shaped (40px) radius for buttons and inputs, and a distinctive half-pill pattern on search inputs — only rounding the left side to create the iconic FedEx search bar shape.
Border Widths
--border-width-hairline
1px · ×111
--border-width-thin
2px · ×48
Shadow / Elevation
Shadow Tokens
1 token detected
--shadow-sm
×1
rgba(0,0,0,0.5) 0px 5px 15px 0px · heavy drop shadow for overlays, modals, and sticky elements
Flat (Border Only)
—
Most elements rely on a 1px border instead of shadow for definition, keeping the design clean and minimal
Z-Index
TokenValueUsage
--z-1-20Deep background layers, decorative canvas elements
--z-2-1Behind base content, background decorations
--z-31Base content layer
--z-42Slightly elevated base elements
--z-510Sticky headers, navigation bar
--z-61000Dropdowns, popovers, tooltips
--z-71050Fixed overlays, sidebars
--z-811000Modals, dialogs, drawer panels
--z-99999999Top-most layer — chat widgets, critical alerts
Breakpoints
TokenValue
--breakpoint-xs320px
--breakpoint-sm350px
--breakpoint-md425px
--breakpoint-lg426px
--breakpoint-xl480px
--breakpoint-2xl499px
--breakpoint-3xl500px
--breakpoint-bp-8600px
--breakpoint-bp-9663px
TokenValue
--breakpoint-bp-10664px
--breakpoint-bp-11767px
--breakpoint-bp-12768px
--breakpoint-bp-13769px
--breakpoint-bp-14800px
--breakpoint-bp-15989px
--breakpoint-bp-16991px
--breakpoint-bp-17992px
--breakpoint-bp-18993px
TokenValue
--breakpoint-bp-191000px
--breakpoint-bp-201023px
--breakpoint-bp-211024px
--breakpoint-bp-221100px
--breakpoint-bp-231199px
--breakpoint-bp-241200px
--breakpoint-bp-251300px
--breakpoint-bp-261439px
Opacity
Opacity Tokens

No opacity tokens defined in the FedEx design system. FedEx achieves transparency effects through rgba() color values (e.g., rgba(89, 89, 91, 0.5) for borders) rather than standalone opacity tokens.

Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-dark-gray--color-white12.63:1AAA
--color-dark-gray--color-dark-purple1.08:1Fail
--color-dark-gray--color-white-212.1:1AAA
--color-dark-gray--color-orange4.21:1AA Large
--color-dark-gray--color-light-gray11.29:1AAA
--color-black--color-white21:1AAA
--color-black--color-dark-purple1.79:1Fail
--color-black--color-white-220.12:1AAA
--color-black--color-orange7:1AAA
--color-black--color-light-gray18.76:1AAA
--color-cyan--color-white4.7:1AA
--color-cyan--color-dark-purple2.49:1Fail
--color-cyan--color-white-24.5:1AA
--color-cyan--color-orange1.57:1Fail
--color-cyan--color-light-gray4.2:1AA Large
--color-red--color-white5.07:1AA
--color-red--color-dark-purple2.31:1Fail
--color-red--color-white-24.85:1AA
--color-red--color-orange1.69:1Fail
--color-red--color-light-gray4.53:1AA
--color-mid-gray--color-white3.95:1AA Large
--color-mid-gray--color-dark-purple2.96:1Fail
--color-mid-gray--color-white-23.78:1AA Large
--color-mid-gray--color-orange1.32:1Fail
--color-mid-gray--color-light-gray3.53:1AA Large
CSS Variables Reference
Background Colors
White--color-white#FFFFFF
FedEx Purple--color-dark-purple#4D148C
Off White--color-white-2#FAFAFA
FedEx Orange--color-orange#FF6200
Light Gray--color-light-gray#F2F2F2
Text & Border Colors
Dark Gray--color-dark-gray#333333
Black--color-black#000000
FedEx Blue--color-cyan#007AB7
Alert Red--color-red#DE002E
Mid Gray--color-mid-gray#808080
Gray 2--color-mid-gray-2#777777
Dark Gray 3--color-dark-gray-3#646464
Border Default--color-dark-gray-2rgba(89,89,91,.5)
Border Muted--color-mid-gray-3#8E8E8E
Typography
Serif (Base)--font-family-baseTimes
Brand Font--font-family-2FedExSans
Light--font-weight-light300
Regular--font-weight-regular400
Medium--font-weight-medium500
Bold--font-weight-bold700
Micro--font-size-2xs10px
Caption--font-size-xs12px
Body Small--font-size-sm14px
Body--font-size-base16px
Body Large--font-size-lg19px
Heading S--font-size-3xl24px
Heading L--font-size-4xl30px
Heading XL--font-size-6xl40px
Display--font-size-44px44px
Tight Tracking--letter-spacing-tight−0.63px
Wide Tracking--letter-spacing-widest0.75px
Spacing, Motion & Borders
Space 1--space-14px
Space 4--space-48px
Space 10--space-1016px
Space 40--space-4024px
Space 256--space-25640px
Space 26--space-2660px
Space 29--space-2981.5px
Instant--duration-instant0.15s
Fast--duration-fast0.2s
Normal--duration-normal0.25s
Slow--duration-slow0.3s
Slower--duration-slower0.5s
Ease Linear--easing-linearlinear
Ease Out--easing-ease-outease-out
Hairline Border--border-width-hairline1px
Thin Border--border-width-thin2px
Radius Pill--radius-sm40px
Shadow--shadow-smrgba(0,0,0,.5) 0px 5px 15px