The Slashy design system
Slashy is an AI email and calendar app that runs on the desktop, the web, and a phone. Three surfaces, one feel. To keep them consistent without slowing down, everything visual is built from a small set of tokens and a handful of reusable components. This is a tour of that system: the colors and type, the spacing and corner math, the motion, and the components themselves, with the reasoning behind the choices that were not obvious.
Built with React, Tailwind, and Radix. Around 2,900 lines of tokens plus a shared component library.
Color
One calm accent, warm grays instead of pure black, and a status color that always ships with a matching tint. Each color is a variable, so a single light or dark switch reassigns every value and no component has to change.
Type scale
Six sizes, anchored at a dense 14px body. It is deliberately small and tight, the way a desktop app reads, not the roomy 16px of a marketing page.
Spacing
Every gap is a multiple of four. That one rule keeps layouts on a grid and stops anything from landing on an odd half-pixel.
Corners
A small radius scale: crisp on little controls, softer on big surfaces, fully round for pills and avatars. In practice a few components drift off the scale (the modal rounds to 16, a chip to 7), which is worth being honest about.
Elevation
Shadows grow in both blur and darkness as a surface lifts off the page, so depth reads consistently from a resting card up to a floating dialog.
Motion
Three easing curves, each with a job. A calm glide for big UI moves, a fast pop for menus, and a springy overshoot for the toggle so it feels tactile.
Layering
Every floating thing has a named layer, written down in one file. Surfaces live low; transient overlays like tooltips and toasts always sit above them.