Tools
How Penpot makes design and developer collaboration seamless
Penpot bridges the design-development gap by eliminating the translation layer that creates friction in traditional workflows.
Laura Kalbag
Creating educational materials for Penpot. Designer, developer, author of Accessibility for Everyone, and co-founder of Small Technology Foundation.
Tutorial
Tutorial: Creating and using shadow tokens
Using shadows carefully and consistently in your UI design can make it feel polished. Shadow design tokens help you implement the consistency and quickly update your shadows across your design system.
Tutorial
Using design tokens for a proportional typographic scale
A proportional typographic scale is a hierarchy for font sizes that uses a consistent mathematical ratio. Design tokens are ideal for creating these scales.
Tutorial
Tutorial: Creating and applying typography design tokens
Typography design tokens are a way to save your text styles for reuse across your projects. The typography composite token combines multiple typography-related properties in one mega token.
Tutorial
Penpot deep dive: Color tokens vs asset colors
Color design tokens and asset colors are both ways you can store colors in Penpot for reuse. There are some key differences that might affect which you choose to use in your project.
Design
Design tokens for designers: A practical guide
Design tokens bring together design and development teams with a single, unified language for expressing color, fonts, sizing, and more.
Code
The developer’s guide to design tokens and CSS variables
Design tokens are a platform-agnostic representation of your design decisions, while CSS variables provide a way to implement these decisions in the browser.
Design
How to use component variants to scale your design system
This article explores how you can use component variants to simplify, scale, and future-proof your design system, helping you design more efficiently as your projects grow.
Code
CSS Grid vs. Flexbox: Choosing the right layout for you
Understanding what is Grid vs. Flexbox and how to use them can help you build cleaner layouts, write less code, and avoid frustrating design issues down the line.
Code
Understanding the z-index: A beginner’s CSS guide
What's z-index? Learn how to manipulate the z-index, why it matters, and how Penpot makes it easier to manage stacking without touching a line of CSS.
Design
Tutorial: Creating and using component variants in Penpot
Component variants are a way to create different variations of a component. Does your component need different sizes? Colors? Levels of elevation? Variants make it easy to define these properties, and choose between them when you’re using a component in your designs.
Design
Tutorial: 5 examples of component variants
Variants add an extra level of flexibility to your components, as well as providing better documentation and making designs even more developer-friendly.