Design System
A considered set of components, patterns, and principles for my site.
Constrained properties
Properties come from a fixed set of tokens and scales. Spaces, colours, and sizes are all predefined, preventing arbitrary and inconsistent styling.
Type-safe API
Component properties and the underlying styling system are expressed in TypeScript, so invalid styling won't compile.
Composable primitives
Foundational components like Box, Stack, Inline, Spread, and Tiles are composed together to build larger pieces of UI.
Themes
A shared TypeScript contract keeps themes consistent. Each theme (Light, Sunshine, Forest, Dark) implements it with its own palette.
Responsive design
Layouts can adapt across breakpoints, with different arrangements for desktop, tablet, and mobile. The same model applies to spacing, gaps, padding, margins, and orientation.
Build-time CSS
Vanilla Extract avoids the runtime cost of other CSS-in-JS solutions. Styles are written in TypeScript and compiled to static CSS, without shipping extra styling logic to the browser.