Leverage Waterhole's design tokens, utilities, and components in your customizations.
The Waterhole Design System provides a foundation on which to build consistent user interfaces. It consists of three parts:
Design tokens, exposed as CSS variables, enabling a consistent orchestration of spacing, colors, and typography.
A limited collection of utility classes to streamline construction of common layouts and consumption of design tokens.
A range of components, exposed as CSS classes and sometimes Blade Components, abstracting frequently used visual styles and patterns.
The Design System is not exhaustive. Utility classes are only provided where they make sense as a way of encapsulating common declarations, but not to replace CSS in its entirety. You are encouraged to still use semantic class names to keep your code readable, apply additional styles beyond what the utility classes facilitate, and as an interface for other users to customize.
Similarly, Blade Components are only provided to encapsulate more complex HTML structures and behavior. For basic UI elements like buttons and inputs, use plain HTML elements and apply the CSS classes directly.