Design tokens
Overview
Learn more about what are design tokens and how we use them.
Colors
Bring attention to core elements and actions on the screen.
Border radius
Apply common corner radius style to your elements.
Size
Apply minimum, maximum or fixed width and height to elements.
Spacing
Specify distance for margin, padding or gap between multiple elements.
Motion
Specify animation properties like transition type, duration, bezier curves and others.
Shadows
Increase the difference in visual hierarchy between various elements.
Typography
Visualize our brand's voice, and use it to communicate with our audiences.
Design
Accessibility
Design for everyone.
Iconography
Use image to communicate with our users.
Responsive layouts
Design for all devices and display sizes
Density
Provide alternative high or low density spacing layouts.
Figma best practices
Tips, tricks and guidelines that make handoffs easier and keep your design files clean.
Content
The copy process
Voice and Tone
Bringing our vision to life.
Grammar
We use US English, not British English.
Glossary
Get to know the language we use to communicate with each other and our customers.
Content patterns
Learn how we interact with our customers and help them navigate Productboard smoothly.