Relay, Figma design system

A Figma file for Relay, a made-up shared inbox product. It's the kind of file a dev team can build from: everything named, everything tied to variables, nothing detached.

Colors, type, spacing and radius live in variables. There's a light set and a dark set, 50 colors each, named like the CSS tokens of the live Relay page (var(--canvas), var(--brand)), so nobody has to guess what maps to what. 35 text styles sit on top.

26 component sets, 162 variants. Buttons with default, hover and focus states; fields with an error state; pricing cards for monthly and yearly; the nav in three states; FAQ items. All Auto Layout, and each one has a short note on when to use it.

The landing page comes in two frames, 1440 and 390. Both are made of instances, so a change to the button component shows up on both pages.

There's a clickable prototype too. The desktop nav scrolls to each section, the mobile menu opens and closes, the billing toggle switches.

The file is view-only and opens without an account.