The system behind
polished products.
Claudio is Flywire's design system. Tokens, components, and patterns — engineered once, used everywhere, so every product feels unmistakably ours.
The building blocks.
Every Claudio component starts here — typography, color, and the small visual primitives that compound into a coherent product. These are the constants every screen draws from.
Typography
A six-step heading scale and a set of UI text styles. Inter for everything, Roboto Mono for code. No display fonts, no decorative type — the system stays out of the way.
Explore typographyColor palette
A semantic token system mapped to shadcn slots, with Flywire brand primary at its center and a full WCAG-AA status set. No raw hex values in components — everything routes through a token.
Explore color paletteIconography
Claudio uses Lucide — open-source, consistent, and tuned to a 1.5px stroke at 24px. Icons inherit color from the surrounding text so they sit naturally next to labels and don't demand their own treatment.
Explore iconographySpacing
Every margin, padding, and gap comes from the same 4px-based scale. Components compose cleanly, layouts stay in rhythm, and there are no magic numbers to remember.
Explore spacing
Design & Development
perfectly aligned
Start building with Claudio.
Install components into your project or browse the catalog in Storybook. Claudio is shadcn-style — copy the code into your repo and own it from there.
Add components.
The shadcn CLI pulls components directly into your repo. Source code in your hands.
$ npx shadcn@latest add @claudio/button$ npx shadcn@latest add @claudio/card$ npx shadcn@latest add @claudio/input
Storybook.
54 components, every state and variant — try the real thing before you install it. Below is one composition; Storybook has the rest.