SUPERFOAM DESIGN SYSTEM
Figma handoff style guide
Use this page as a visual source of truth when recreating Superfoam’s colors, typography, buttons, and form components in Figma.
01 / Color tokens
Primary
Primary/Superfoam Night
Primary/Superfoam Red
Primary/Safety
Primary/Stars
Primary/Paper
Primary/White
Neutrals
Neutrals/Grey-100
Neutrals/Grey-90
Neutrals/Grey-80
Neutrals/Grey-70
Neutrals/Grey-60
Neutrals/Grey-50
Neutrals/Grey-40
Neutrals/Grey-30
Neutrals/Grey-20
Neutrals/Grey-10
02 / Icons
Phosphor
Approximate Equals
Archive
Arrow Square Right
Arrows In Line Vertical
Barbell
Barn
Barricade
Building Apartment
Building Office
Buildings
Car
Castle Turret
Cheers
Circle
Circle Dashed
Circles Three Plus
Compass
Court Basketball
Cpu
Crosshair
Currency Dollar
Elevator
Equalizer
Face Mask
Factory
Farm
Film Reel
Fire
Golf
Gradient
Graph
Guitar
Heart Straight
Hospital
House Line
House Simple
Lightning
List
List Checks
Martini
Phone Call
Plant
Recycle
Shield Plus
Shipping Container
Speaker Hifi
Stack
Star
Storefront
Strategy
Tree
Warehouse
Waves
Wind
Wine
X
02 / Typography
H1
Display
96px / 112.0
H1
Heading 1
64px / 96.0
H2
Heading 2
32px / 100.0
H3
Heading 3
24px / 122.0
H4
Heading 4
20px / 142.0
H5
Heading 5
16px / 142.0
H6
Heading 6
16px / 1.4
P
Body-Lg
18px / 144.0
P
Body
16px / 152.0
P
Body-Sm
14px / 148.0
P
Body-Xs
13px / 158.0
P
EYEBROW
13px / 112.0
P
Copyright
11px / 158.0
03 / Buttons
04 / Forms and modules
Primary Contact Form
Use for estimate requests and campaign landing pages. Controls: headline lines, subheadline, and button label.
Newsletter
superfoam newsletter
Get Expert Insights on best practices, Energy Efficiency, and building performance.
No spam. Just useful insights to help builders and homeowners make more informed decisions.
Use for email signup modules. The subscribe action uses the form submit button system, not the marketing button.
Figma setup notes
Create color styles first, then text styles, then components. Keep two button systems: Primary Button for links and Primary Form Button for submit states. Match rounded geometry and the red / black / outline / white style options.