Scale variations with modes
Inspired by the Mise en Mode methodology, Arbor manages design variations with the powerful mode system, not token groups. Define one small set of tokens, then remix them with modes to quickly build out comprehensive treatments for things like error, success, dense, hero, and anything you dream up.
Card
Modes stack and nest
Modes give you the peace of mind that all tokens are defined and consistent. They make it easy to do the right thing when building. And they make it possible to freely layer in experimental treatments and variations without piling on endless tokens.
Design with rules, not artifacts
We call design tokens "decisions," but that's not really true - decisions are living rules; the tokens we export are just the outcome of those rules.
Arbor gives you the full power of modern CSS to imbue your tokens with powerful, contextual, real rules. Adjust padding based on roundness. Calculate text metrics from a density global. Then watch as these rules produce emergent, consistent styles across the interface.
Take a look at how changing one global token affects everything downstream:
Because these "living" tokens can do the work of many static tokens, your token set stays small and manageable.
A first class editing experience
Arbor comes with token validation, rich documentation, color previews, and editor suggestions for developers -- even when token rules are complex.
A better developer experience means more developers confidently adopting the right tokens.
Tomorrow's CSS, today
Arbor is future-proof, using upcoming CSS standards like @function and @mixin, transformed with PostCSS to work in all
browsers today. Arbor sprinkles in token dependency resolution,
typechecking, and CSS simplification preprocessing on top.
Built-in light, dark, and inverted modes use light-dark.
Modes leverage cascading to seamlessly layer rules. This is all just
CSS!
Gets started with a powerful set of built-in mixins and functions.