A presentation at React Alicante 2025 in in Alicante, Spain by Kathleen McMahon
Kathleen wearing a teal rain jacket on a rainy day at the beach.
Sandy path to the beach on a sunny morning.
Random beach drift artwork at sunrise on the beach.
Holding up a clam shell filled with various other shells at sunset by the shoreline.
A trio of clam shells filled with a variety of other shells on the wet sand at sunset.
A tiny sand dollar on the beach, with my foot on the sand to indicate size (shell smaller than my big toe).
A large clam shell half buried in the wet sand at low tide, waves slowly approaching.
A clam shell filled with a group of sand dollars, resting on a wet seaweed-encrusted series of rocks.
Holding up the first sand dollar of the season, sadly broken, with my fingers. Thanks, greenhead fly, for biting me.
A group on sand dollars nestled in a large clam shell on a sand dune in the afternoon.
Did I mention how excited I was to find the sand dollar? And how sad I was that I broke it?
My cats, Otis and Thor, sitting on the windowsill next to some moon shells on a warm spring afternoon.
A person wearing an inflatable T-rex costume joyfully does a forward flip off a dock into an inflatable raft floating in a pond.
A person attempting to line up a group of 10 wiggly kittens in a line. She was not successful.
O’Reilly — LaunchDarkly — Northwestern Mutual — Electronic Arts
Yes, I’m still sad about that broken sand dollar. Yet it reminds me of the fragility of design systems.
Hard-coded export type ThemeValues = | “katMeow” | “katPurr” | “katSqueak”;
—
Dynamically-generated
// This file is auto-generated // Do not edit manually
export const THEME_VALUES = [ “katMeow”, “katPurr”, “katSqueak”, “katHiss” ] as const;
export type Theme = typeof THEME_VALUES[number];
Untyped margin: var(—space-lgge);
—
Typed margin: ${theme.space.lg};
❌ MVPs / chaotic tokens (start clean first)
Styled Components → Strong TypeScript support
Before color: #0044cc; margin: 12px;
—
After color: ${theme.color.blue.primary}; margin: ${theme.space.md};
—
No drift → compiler enforces alignment
Styling + typing aligned
Low-contrast colors
Low-contrast colors With Types Flagged
Card: predictable shape → Interface
interface CardProps { title: string; children: React.ReactNode }
—
Alert: variant logic → Type
type AlertProps = { variant: “error” |… }
• type is more general • Avoids declaration merging • Reduces decision fatigue
A tiny sand dollar on the beach, with my foot on the sand to indicate size (shell smaller than my big toe).
• Shared props: title, description (interface) • Variant props: svg or photo (type union) • Combined: BaseMediaCardProps & VariantMediaCardProps
• Dev adds both svg + photoUrl • Dev adds aria-label to a photo • Docs skipped → misuse slips in
type VariantMediaCardProps = | { mediaType:”svg”; svg:ReactNode; “aria-label”:string; photoUrl?:never; alt?:never } | { mediaType:”photo”; photoUrl:string; alt:string; svg?:never; “aria-label”?:never }
• Forbids invalid combinations • Enforces correct accessibility attributes
<Button as=”a”>Link</Button>
<Link variant=”button”>About</Link>A fish and fruit jello mold resting on a plate. Gross.
<Button as=”a”>Link</Button>
<Link variant=”button”>About</Link>Successfully makes a jello-fish reference in presentation.
An older man smiles at the camera. The caption indicates the man is actually 26 years old
<Button as=”a”>Link</Button>
❌<Button as=”a”>Link</Button>
❌ <Link variant=”button”>About</Link>
✅ <Button>Click me</Button>
✅ <Link StyledAsButton />
✅ <a className=“btn”>Learn more</a>
(say it with me)
• Runtime: QA → Jira → patch → deploy • Compile-time: red squiggle → fixed pre-commit • Guardrails stop drift earlier
• Publish once, every app consumes • No local drift • Everyone aligned with latest design system
• Tokens prevent drift • Props prevent misuse • Compile-time confidence scales
A clam shell filled with a group of sand dollars, resting on a wet seaweed-encrusted series of rocks.
Still. Sad about that broken sand dollar.
Otis, the sleek black cat of wonder, playfully interrupts the sand dollar arrangement on my table.
Building a design system feels like beachcombing: scattered components, mismatched tokens, mystery buttons. Each wave brings new drift. This talk shows how TypeScript enforces type-safe tokens, APIs, and patterns to transform chaos into a scalable, reliable system—curating a collection that withstands the tides of change. Walk away with strategies to harden your system against technical debt.
The following resources were mentioned during the presentation or are useful additional information.
