Design Systems
/
Creative Operations
/
Digital Design
Fabletics Design System
(
5
)
/ About the project
Fabletics produces a high volume of recurring creative across site, social, and CRM. The existing workflow made it difficult to consistently apply established brand standards or present multiple workstreams as one cohesive experience.
I architected and built a functional Figma system that translates the brand book into reusable components, variables, styles, and templates. It allows my team to build complete monthly prototypes—including combined views across campaigns, promotions, and celebrity collaborations—within a single shared environment.
The system gives every designer a common source of truth for typography, spacing, sizing, dimensions, and prototyping. Designers can now work simultaneously while presenting more cohesive work to executives and cross-functional partners, making collaboration and approvals significantly smoother.
/ Credits
Client:
Designer:
Fabletics
Johnny Schwartz
/ Year
2026
2026
Fabletics Design System
System at a Glance
3 variable collections · 28 text styles · 24 paint styles · 2 effect styles · 3 brands
3,237
Components
175
Component Sets
22,313
Live Instances
85
Color Variables
15
Spacing & Radius Tokens
28
Text Styles
24
Paint Styles
2
Effect Styles
Fabletics Design System
Color System Overview
System Density
85 color variables across 4 core ramps, 20 accent colors, and 28 semantic aliases. All tokens live in the Colors collection.
Semantic Aliases
BG-PRIMARY
Sand/300 main background
BG-INVERSE
Shadow/900 dark blocks
TEXT-PRIMARY
Shadow/900 contrast
CTA-FILL
Primary interactive
CTA-FILL-INVERSE
Inverse interactive
CTA-FILL-ALT
Sunshine/400 highlight
Sand (Neutral Warm)
50
#FAFAF8
100
#F5F4F0
200
#EEECE5
300
#E8E4DA
400
#D4CEB0
500
#BBB09C
600
#999078
700
#7A7360
800
#5C5848
900
#363530
Shadow (Neutral Cool)
50
#F5F5F4
100
#EBEBEB
200
#D2D2CE
300
#B3B3AF
400
#9E9E99
500
#888886
600
#626262
700
#3D3D3A
800
#282826
900
#181818
Sunshine (Brand Yellow)
50
#FEFFD6
100
#FDFFF0
200
#FCFFB0
300
#FAFF40
400
#F0FF00
500
#E0E000
600
#B8B800
700
#8A8E00
800
#5C6A00
900
#303800
Selected Campaign Accents
Orange
#F46852
Pistachio
#CBECAB
Lavender
#D1D0EE
Teal
#01B674
Crimson
#C82017
Forest
#4F5604
Burgundy
#8C2020
Navy
#132247
Blush
#F4C4BB
Seafoam
#C5EEE5
Mauve
#E1D0C8
Gold
#ECCB8A
Cyan
#00EDED
Periwinkle
#A3B4FF
Lime
#62FF20
Pink
#FF86F0
Amber
#F1CA30
Olive
#454502
Plum
#AA0FAD
Bronze
#BB8530
Fabletics Design System
Typography Specification
Core In-App UI Scale
Title
ExtraBold · 80px · 105%
TITLE STYLE
Heading 1
ExtraBold · 72px · 105%
HEADING 1 STYLE
Heading 2
ExtraBold · 55px · 110%
HEADING 2 STYLE
Heading 3
ExtraBold · 42px · 110%
HEADING 3 SPECIMEN
Heading 6
ExtraBold · 18px · 125%
HEADING 6 SYSTEM LABEL
Body 3
Medium · 18px · 130%
Body 3 interface label text specimen
Body 2
Medium · 16px · 130%
Body 2 interface label text specimen
Body 1
Medium · 11px · 130%
BODY 1 CAPTION AND SMALL DETAIL SCALE
Export & Compressed Scales
Export / Desktop
Heading XL
ExtraBold · 138px
Heading
ExtraBold · 105px
Eyebrow
Medium · 46px
Body
Medium · 42px
Export / Mobile
Heading
ExtraBold · 80px
Eyebrow
Medium · 45px
Body
Medium · 39px
Export / Shared & 1-Across
1-Across Heading
ExtraBold · 60px
1-Across Body
Medium · 40px
CTA
SemiBold · 37px
Pill / Eyebrow
Medium · 37px
Fabletics Design System
Export Typography Styles
Desktop Export Scale
All sizes reference Barlow Semi Condensed.
Heading XL
ExtraBold · 138px
HEADING XL STYLE
Heading
ExtraBold · 105px
HEADING SPECIMEN
Subheading
SemiBold · 72px
Subheading Style
Eyebrow
Medium · 46px
EYEBROW SPECIMEN TEXT
Body
Medium · 42px
Body style specimen text run here
Caption
Regular · 34px
CAPTION MINI SCALE DETAIL SPECIMEN
Mobile Export Scale
Proportionally compressed from desktop scale.
Heading
ExtraBold · 80px
HEADING STYLE
Subheading
SemiBold · 56px
Subheading Style
Eyebrow
Medium · 45px
EYEBROW SPECIMEN
Body
Medium · 39px
Body style interface text copy
Caption
Regular · 28px
CAPTION SYSTEM GHOST LABELS
Fabletics Design System
Spacing, Radius & Effects
Spacing Scale (Auto Layout Bindings)
2xs
4px
Tight inner padding
xs
8px
Small utility gaps
sm
12px
Compact block margins
md
16px
Standard component spacing
lg
24px
Section gutters & columns
xl
32px
Large layout boundaries
2xl
48px
Extreme section padding
3xl
64px
Major structural separations
Border Radius Scale
none
0px
sm
4px
md
8px
lg
18px
full
999px
Elevation & Effect Styles
Card Subtle
y: 2.1px · blur: 4.2px · opacity: 5% drop shadow. Optimized for baseline interface containers.
Card Medium
y: 1.05px · blur: 4.2px · opacity: 10% drop shadow. Deeper elevation reserved for hover/active actions.
Fabletics Design System
Carousel Template Engine
13 template formats × 9 content divisions · 89 total template frames · 3-layer architecture (Export → Carousel → Prototype)
Content Divisions
FLW TOM
16
Full coverage
FLM TOM
17
Full coverage
FLW Energy
8
Core formats
FLM Energy
8
Core formats
FLW Promos
8
Core formats
FLM Promos
8
Core formats
FLW Combined
8
Core formats
FLM Combined
8
Core formats
YITTY TOM
8
Core formats
L01
Export Containers
Full-resolution frames sized for final asset delivery. Each template format has a dedicated export container at production dimensions.
L02
Carousel Component Sets
Scaled-down instances of export containers with CHANGE_TO interactions wired between variants. These are the interactive building blocks designers swap between.
L03
Prototype Frames
Assembled high-fidelity flows representing complete user journeys. Tuned for frictionless stakeholder sign-off and live user testing.
22,313
Live Active Instances
Every instance mapped directly back to 175 unified component sets.
~40%
File Size Reduction
Consolidated duplicate components, removed orphaned layers.
3,200+
Redundancies removed
Eliminated duplicate proto frames and overlay elements.
175
Unified Component Sets
All instances trace back to a single source of truth.
Built to scale. Ready to publish.
August 2026 · Production Stable V2.4
Fabletics Design System
System at a Glance
3 variable collections · 28 text styles · 24 paint styles · 2 effect styles · 3 brands
3,237
Components
175
Sets
22,313
Instances
85
Colors
15
Tokens
28
Text Styles
24
Paints
2
Effects
Fabletics Design System
Color System Overview
System Density
85 color variables across 4 core ramps, 20 accent colors, and 28 semantic aliases. All tokens live in the Colors collection.
Semantic Aliases
BG-PRIMARY
Sand/300 main canvas
BG-INVERSE
Shadow/900 main dark
CTA-ALT
Sunshine brand yellow
ON-PRIMARY
Shadow/900 on light
Sand (Neutral Warm)
50
#FAFAF8
100
#F5F4F0
200
#EEECE5
300
#E8E4DA
400
#D4CEBD
500
#BBB09C
600
#99907A
700
#7A7360
800
#5C5648
900
#3D3930
Shadow (Neutral Cool)
50
#F5F5F4
100
#E8E8E6
200
#D1D1CE
300
#B3B3AF
400
#8E8E89
500
#6B6B66
600
#525250
700
#3D3D3A
800
#2B2C28
900
#1B1C19
Signaling (Brand Yellow)
50
#FEFFD6
100
#FDFFB3
200
#FCFF80
300
#FAFF4D
400
#F9FF0D
500
#E0E600
600
#B8BD00
700
#8A8E00
800
#5C5F00
900
#303F00
Fabletics Design System
Campaign Accent Colors
Orange
3 variants
Orange 50
#FFCA30
Orange 100
#FA682A
Orange 200
#C92117
Pistachio
3 variants
Pistachio 50
#DBECAB
Pistachio 100
#BCD1C0
Pistachio 200
#8A8E00
Lavender
3 variants
Lavender 50
#CFC9DE
Lavender 100
#A1A9FF
Lavender 200
#4F5594
Teal
3 variants
Teal 50
#D0EBE9
Teal 100
#03A7A4
Teal 200
#339247
Crimson
3 variants
Crimson 50
#E0C7D6
Crimson 100
#C92117
Crimson 200
#A75FA0
Navy
3 variants
Navy 50
#D0D8E8
Navy 100
#4A5594
Navy 200
#1B2247
Fabletics Design System
Typography Specification
Core In-App UI Scale
Title
ExtraBold · 60px
TITLE SPECIMEN
Heading 1
ExtraBold · 42px
HEADING 1 TEXT
Heading 2
ExtraBold · 28px
HEADING 2 TEXT
Heading 3
ExtraBold · 22px
HEADING 3 TEXT
Heading 6
ExtraBold · 16px
HEADING 6 SYSTEM LABEL
Body 1
Medium · 18px
Body 1 interface text
Body 2
Medium · 16px
Body 2 interface text
Body 3
Medium · 10px
BODY 3 CAPTION AND SMALL DETAIL SCALE
Export / Desktop
Heading XL
ExtraBold · 138px
Heading
ExtraBold · 105px
Eyebrow
Medium · 46px
Body
Medium · 42px
Export / Mobile
Heading
ExtraBold · 80px
Eyebrow
Medium · 45px
Body
Medium · 39px
Fabletics Design System
Spacing, Radius & Effects
Spacing Scale (Auto Layout Bindings)
2xs
4px
Tight inner padding
xs
8px
Small utility gaps
sm
12px
Compact block margins
md
16px
Standard component spac…
lg
24px
Section gutters & columns
Border Radius Scale
none
0px
sm
4px
md
8px
lg
16px
full
999px
Elevation & Effect Styles
CARD SUBTLE (shadowCardSubtle)
y: 2.1px · blur: 4.2px · drop shadow. Baseline interface container elevation.
CARD MEDIUM (shadowCardMedium)
y: 1.05px · blur: 4.2px · drop shadow. Deeper accentuation reserved for interactive elements.
Fabletics Design System
Export Typography Styles
Desktop Export Scale
Optimized for desktop canvas exports at 2880px width.
Heading XL
ExtraBold · 138px
HEADING XL STYLE
Heading
ExtraBold · 105px
HEADING SPECIMEN
Subheading
SemiBold · 72px
Subheading Style
Eyebrow
Medium · 46px
EYEBROW SPECIMEN TEXT
Body
Medium · 42px
Body style specimen text run here
Caption
Regular · 34px
CAPTION SCALE DETAIL SPECIMEN
Mobile Export Scale
Optimized for mobile canvas exports at 750px width.
Heading
ExtraBold · 80px
HEADING STYLE
Subheading
SemiBold · 56px
Subheading Style
Eyebrow
Medium · 45px
EYEBROW SPECIMEN
Body
Medium · 39px
Body style interface text copy
Caption
Regular · 28px
CAPTION SYSTEM GHOST LABELS
Fabletics Design System
Carousel Template Engine
13 template formats × 9 content divisions · 89 total template frames · 3-layer architecture (Export → Carousel → Prototype)
Content Divisions
FLW TOM
16
Full coverage
FLM TOM
17
Full coverage
FLW Energy
8
Core coverage
FLM Energy
8
Core coverage
FLW Promos
8
Core coverage
FLM Promos
8
Core coverage
YITTY TOM
8
Core coverage
3-Layer Architecture
L01
Export Containers
Full-res production frames at standard asset scale.
L02
Carousel Component Sets
Interactive variants with custom transition behaviors.
L03
Prototype Frames
Assembled high-fidelity user journeys for live validation.
Performance Metrics
22,313
Active Instances
~40%
Size Reduction
Built to Scale. Ready to Polish.
OTHER
PROJECTS
Get in touch