Laura Kalbag

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.

Design

The best image format for every use case: A complete guide to using JPG, PNG, and more

Each image file type was created for a good reason, but it may not be the right reason for you. Because images can have different purposes, you’ll need to know your ultimate purpose in using an image before selecting the right type.

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.

Design

Intro to Design Tokens

Design tokens are tiny reusable building blocks. You can use them to keep colors, spacing and other styles consistent across your design, and combine them to create design systems.

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.

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.

Design

Accessible Design Checklist

Improve your design’s accessibility with this quick reference checklist and Penpot plugin.

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.

Code

How to create interactive image hover effects with CSS

Learn how to create effective hover effects in different ways and how they help designers provide a better user experience

Code

How to use CSS and media query breakpoints to create responsive layouts

Responsive layouts “respond” to the size and resolution of the device they are presented on, and underpinning these layouts are CSS media query breakpoints.

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.