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.
Laura Kalbag
Creating educational content for Penpot. Designer, developer, author of Accessibility for Everyone, and co-founder of Small Technology Foundation.
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.
Code
The top 5 questions people have about CSS answered by Penpot
Having a basic knowledge of CSS can really benefit your skills in web and UI design. Let’s start with these answers for the top CSS questions asked by beginners today.
Beginners
How to optimize SVG files: A complete guide for beginners
SVG files use mathematical formulas to create graphics, allowing infinite scaling without losing quality, and making them perfect for high-res displays and responsive design.
Design
Why use Design Tokens? 7 practical reasons designers and developers swear by
From reducing human error to creating more harmony between teams, let’s explore the benefits of design tokens and why you might want to consider using them in your next project.
Code
How to embed custom fonts with @font-face in CSS
Learn how to use @font-face to embed custom fonts in your website. Includes practical examples, performance tips, browser compatibility, and common mistakes to avoid.
Design
UX accessibility: 8 best practices for more inclusive design
By focusing on accessibility in UX design from the very first sketch of your app or site, you can get everyone thinking about the best way to serve every user. Find out how!
Code
How to create an intuitive design token system
In this guide, we’ll walk through creating a token system that works intuitively for both designers and developers.