Teardrop Design System
Design with clarity. Build with confidence.
Ship Hardwater interfaces using quality foundations, flexible components, and powerful tools.
Get Started
For Designers
Design guidelines, Figma libraries, plugins, and tools.
For Developers
Environment configuration, tooling, and composition guides.
Get started with development →
For Content Designers
Content standards, voice and tone, and design assets.
Brands
Teardrop supports multiple brands with shared foundations and brand-specific theming.
Hardwater
The parent brand with the core design system.
Hardwater Studios
A sub-brand with specialized theming and components.
Design with Elegant Foundations
Design decisions are expressed with tokens and modular building blocks.
Foundational Guidelines and Visual Styles
- Tokens - Single sources of truth to name and store design decisions
- Accessibility - Enable everyone to interact with, understand, and navigate our apps
- Content - Clear, concise, and conversational language to get teams where they need to go
- Color - Distinguish our brand and reinforce consistent experiences across apps
- Typography - Enhance communication, reinforce brand, and guide users' emotions
- Spacing - Simplify the creation of page layouts and UI
Build Iconic Hardwater Experiences
Access modular and responsive components.
Flexible Components and Primitives
- Button - A button triggers an event or action
- Badge - A badge is a visual indicator for numeric values
- Flag - A flag is used for confirmations, alerts, and acknowledgments
- Box - A primitive component that acts as a generic container
- Stack - A primitive component that manages vertical layout
- Inline - A primitive component that manages horizontal layout
Tools for Designers and Developers
- Figma libraries - Our tokens, foundations, components, and plugins
- ESLint plugin - The essential linting plugin for Teardrop Design System
- UI Styling Standard - Principles to guide styling UI code across Hardwater's frontend