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.
Open Source
How to self-host Penpot: A technical implementation guide
Once you've decided to bring Penpot into your own infrastructure, the next step is making sure your instance runs smoothly, stays secure, and scales with your team. Learn how to self-host Penpot in your infrastructure.
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
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.
Tutorial
Design Tokens with Penpot
Design tokens are the smallest repeatable elements of your design that can be reused consistently across your Penpot projects and teams.
Tutorial
Design systems best practices with Penpot
If you want to create a design system using Penpot, I’ve got some tips, tricks, and best practices for you.
Tutorial
Tutorial: Creating Penpot color palettes and libraries
Learn how to use color and save reusable colors for your design system with Penpot’s color palette and shared libraries.
Tutorial
Tutorial: How to use components and shared libraries
Learn about components and how to use your team’s shared components for your design system in Penpot.
Tutorial
Tutorial: Create and share components in Penpot
Learn about creating components and libraries of shared components in Penpot for your team’s design system.
Tutorial
Tutorial: How to use icons from a shared icon library in Penpot
I recently shared a css.gg icons library template in the Penpot Libraries & Templates collection. Here’s how you can use icons from this (and other) shared libraries in Penpot.
Tutorial
Tutorial: How to navigate a Penpot file
You’ve been sent a Penpot file or downloaded a template from the Community. This tutorial will help you find your way around.