Slab Foundations

Foundations is just a fancy word for stuff that our Figma, React Native, and React Web components share. The goal of sharing is, of course, caring. But also it makes our UI feel consistent across products.

Design tokens are shared variables for color and spacing.
Using design tokens in turn enables us to theme our apps (think dark mode). Theming works differently in Figma, mobile, and web.
We're working on guides for things like using animation, using depth (shadows), and writing product copy — with the goal of removing any guesswork and encouraging consistency.

Tokens & Theming
Don't embarass yourself with a 3px border or roll your own dark mode.
Search Design Tokens
Copy-and-paste right into your code.
Writing App Copy
Writing app copy can be hard work. Our guidelines make it easier.

Tokens & Theming

Search Design Tokens

Writing App Copy