The Beachcomber's Guide to Type-Safe Design Systems — Kathleen McMahon — React Alicante 2025
What is Beachcombing?
Treasure hunting on the beach
Design Systems = (perfectly) Fragile treasures
Bienvenidos!
The Beachcomber's Guide to Type-Safe Design Systems — Kathleen McMahon — React Alicante 2025
@resource11 Bluesky | Mastodon | Twitter | Instagram | GitHub
Kathleen McMahon — Engineer • Designer • Speaker
Design Systems are ALWAYS the hotness
Design systems are like herding kittens
Drift & Fragile Sand Dollars
Drift & Fragile Sand Dollars
Tokens are Design Decisions
Typed Tokens Catch Bugs Early
Typed Tokens Catch Bugs Early
When to Invest in Typed Tokens
Type Safety depends on Tooling
Type Safety depends on Tooling
From Fragile to Typed
From Fragile to Typed
Tokens workflow — One source of truth, many outputs
Tokens workflow — One source of truth, many outputs
Typed Tokens Catch
Typed Tokens Catch
Interfaces vs. Types
Interfaces → shapes (extendable, generic)
Types → Options (exclusive, variant-driven)
Card & Alert in practice
Card & Alert in practice
Why some teams ban interface
📏 Linting Rules: Type Only
⚖ Intent matters Interfaces for shape, Types for options
Blending Interface + Types: MediaCard
Drift Appears When APIs get fuzzy
Guardrails Using never to Forbid Props
Guardrails Using never to Forbid Props
Anti-Pattern
🚫 Good grief… No!
🚫 Good grief… No!
Disguises intent
Breaks material honesty
Being a developer is not stressing at all: Kathleen — every day
⚠ Polymorphic components Flexibility or fragility?
NO! No, no, no…
Do this. Please.
A button should be a button
A link should be a link
A button should be a button
A link should be a link
🟦 Compile time beats runtime
Sharing types is scalable
🐚 Wrap-up
🐚 Beachcomb your design system.
Thank you.
Gracias.
@resource11 Twitter | Instagram | GitHub