Code

Penpot

Penpot's new rendering system

One of the hardest challenges in building a design tool like Penpot is rendering performance. As designs grow in complexity, ensuring smooth performance becomes increasingly difficult.

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.

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.

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.

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.

Code

The 5 best CSS frameworks (and why you should maybe go without)

What are the benefits of common CSS frameworks? We give you some reasons why you might want to consider designing in pure CSS.

Code

6 CSS tips for mastering positioning and fonts

Creating a great design with CSS comes with a learning curve. However, a lot of what you’ll make focuses on knowing two design areas: positioning and fonts.

Code

What is CSS? A beginner’s guide

While learning CSS takes time, understanding how it works should be easy. In this guide, we’ll explain the basics of CSS to help you start your journey.

Code

What are design tokens? A complete guide

Design tokens create a single source of truth for design decisions, making your design system more maintainable, scalable, and consistent.

Penpot

Transform Your Designs Into Code With Penpot

Used for everything from mobile apps to e-commerce sites, the design-to-code approach has helped teams turn out fantastic work in less time.