Laura Kalbag

Editing my transcripts. Yep, still a humbling experience.

This is going to make a lot of people’s day <3

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.

One of our newest features has completely stolen our hearts 💜 Composite typography tokens!

You asked for a tutorial… and here it is!
Creating and applying typography design tokens ✨

penpot.app/blog/tutoria...

Some CSS only contrast options until contrast-color() is Baseline widely available While we wait for contrast-color() to arrive in all browsers, these CSS-only approaches by Donnie D’Amato give us a practical way forward that we can use right now, along with lots of other knowledge...

While we wait for contrast-color() to arrive in all browsers, these CSS-only approaches by Donnie D’Amato give us a practical way forward that we can use right now, along with lots of other knowledge on how colour works in CSS.

piccalil.li/blog/some-cs...

I would want to be one of the nerds in this room.

How an accessibility designer adds keyboard shortcuts to a web app Keyboard shortcuts occupy a strange area for web design.

It is a lot more complicated to add keyboard shortcuts to your web app than you might initially think, featuring a big honkin' table. #a11ty ericwbailey.website/published/ho...

Hahaha. That makes sense if it’s not taking effort to transform the content for your design. I *always* overengineer everything. I have so many posts with 5+ sizes of each image 😭 I think it might be time to archive . laurakalbag . com

Love this. I’m thinking of refreshing mine and starting with the basics too. Would love to know your thoughts on keeping the whole archive of old posts and pages on your current site, or doing some kind of archive site to keep old URLs alive but giving you a clean break (and less of a headache!)

Intro to typography design tokens | Penpot Hands-on Demo Typography can determine the success of your design system because it defines the way users experience information and engage with your product. In this demo, Laura Kalbag—developer, designer, and ...

Live in one hour! I’ll be tackling typography design tokens in #Penpot.

Join me live for the inevitable chaos and any questions you have about design tokens and @penpot.app.

Peertube: peertube.kaleidos.net/w/svTNVRadRA...

YouTube: www.youtube.com/live/TTPfc9z...

Thank you! You know that means so much coming from you.

I’ll add the audiobook files to the site in the next few weeks. And I’m considering other platforms and formats that might make Accessibility For Everyone easier to access. Please let me know if you have a preference, I’m still not 100% sure where’s best to focus my time.

Even though the book is nearly nine years old, I get regular requests for where to buy it, and universities and colleges still include it on their reading lists.

Accessibility For Everyone by Laura Kalbag Read the book online for free.

My book, Accessibility For Everyone, is now free and online as a website.

accessibilityforeveryone.site

The book was first published by A Book Apart in 2017 but it holds up! It covers web accessibility for designers, developers, content folks, and really everyone who works in tech.

Published a new piece on my site explaining one of my big takeaways from Episode 066 with @laurakalbag.bsky.social. Such a fun convo!

Give it a read here:

The role of community in #designsystems (bit.ly/3NDh54m)

Ben Callahan and Yesenia-Perez-Cruz will co-host Episode 067 of The Question on Jan 29, 2026 discussing the topic of design systems that differentiate.

Episode 067 of The Question with co-host Yesenia Perez-Cruz is LIVE and ready for your input!

We're talking about #designsystems that differentiate.

Answer by Wednesday at Noon E to join the deep dive on Thursday at Noon E!

bit.ly/answerTheQue...

See you Thursday!!

I got a hangover just looking at this

It’s that time of year when educational institutions contact me as Accessibility For Everyone is on their reading lists. (Yay!) I’m *so close* to having the whole book online for free. But if you’re a student who needs a copy right now, please drop me a message and I’ll sort you out (for free)!

Penpot UI showing the tokens panel and a demo on the canvas for design tokens. Including levels of elevation and accent colours.

And, as a bonus, I created two templates for creating reusable colour palettes in Penpot:

Using design tokens: penpot.app/penpothub/li...
Using colour assets: penpot.app/penpothub/li...

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.

Time for more @penpot.app kits. This time for colours. If you’ve been confused about whether you should be using design tokens or colour assets in Penpot (or what are tokens and assets!) I wrote this deep dive tutorial for you.

penpot.app/blog/penpot-...

Dual pistols holstered, you swing across a chasm of technical debt, landing gracefully, brushing dust from a ⁠-webkit- relic

Dodging collapsing ⁠* html selectors, you look for browser support. "Half of these are cursed," you smirk.

Plunder your legacy code.

ReliCSS www.alwaystwisted.com/relicss/

New Hands-On Demo live🔴

@laurakalbag.bsky.social will introduce you to typography design tokens. She'll show how to create, apply, and name typography tokens in Penpot, and build a simple proportional typographic scale.

🗓️Wednesday, January 28th
🕒UTC 3-4 PM
▶️PeerTube, YouTube or LinkedIn

Empathy peddler ooff

BUBBLE EVERYTHING WHY

Question three for this episode reads, "In the world of the web, we have the W3C: “The World Wide Web Consortium develops standards and guidelines to help everyone build and enjoy a web based on the principles of accessibility, internationalization, privacy and security.” Do you believe we need a similar set of industry-wide design system standards?"

Hi there, system thinkers!

Just a few hours left to get your answers in for Ep 066 of The Question (the first one of 2026)!

@laurakalbag.bsky.social is joining as co-host to discuss "the #designsystem learning curve" and we need you to make it work!

Q3 is a doozy 😵‍💫

bit.ly/answerTheQue...

Using CSS grid for a sticky footer in Penpot. The viewport layout is one column with two rows. The first row for the main content is 1fr, filling the available space. It pushes the second row, which is auto height, fitting the height of its contents, to the bottom of the layout.

Very satisfying moment when I realised the CSS grid sticky footer technique works perfectly in Penpot.

The Question: Design system deep dives. Episode 066, The Design System Learning Curve. January 15, 2026. Hosted by Ben Callahan with co host Laura Kalbag.

Just one day left to get your answers in for The Question! I’m joining @bencallahan.com to explore the design system learning curve.

Do you work with design systems? Are you just starting out in design systems? We’d really love your input…

bit.ly/answerTheQue...

This week I’m joining @bencallahan.com for The Question, where we’ll be exploring the design system learning curve.

You can follow the link below to answer the questions for yourself, and join us on Thursday for the deep dive!

bencallahan.com/the-question

Please let me know what you think of this template! And if you have any requests or suggestions for future/alternative versions.

Typography design tokens starter kit, Version 1 December 2025. Featuring font family, font size, font weight, number, and typography type tokens.

New year, new @penpot.app template: Typography design tokens starter kit!

penpot.app/penpothub/li...

Including 29 tokens, documentation, tips for use, and set up for a proportional typographic scale. #penpot

ReliCSS: The front-end archaeologist's tool for navigating legacy CSS

www.alwaystwisted.com/relicss/

🙏🖤