Skip to main content

Get Started: For Designers

Welcome to Teardrop Design System! This guide will help you get started using Teardrop in your design work.

Overview​

Teardrop provides a comprehensive set of design resources to help you create consistent, accessible, and beautiful interfaces for Hardwater products.

What's Available​

Figma Libraries​

Access our Figma libraries containing:

  • Design tokens (colors, typography, spacing, etc.)
  • Component libraries
  • Brand-specific themes (Hardwater and Hardwater Studios)
  • Icon sets
  • Illustration assets

Getting the Figma Libraries:

  1. Contact the design system team to get access
  2. Open the library in Figma
  3. Enable the library in your team's Figma workspace

Design Tokens​

Design tokens are the foundation of Teardrop. They ensure consistency across all Hardwater products.

  • Color tokens - Brand colors, semantic colors, and theme variations
  • Typography tokens - Font families, sizes, weights, and line heights
  • Spacing tokens - Consistent spacing scale
  • Elevation tokens - Shadow and depth definitions
  • Border radius tokens - Consistent corner rounding

Learn more about tokens →

Components​

All components are available in Figma with:

  • Multiple variants and states
  • Interactive prototypes
  • Usage guidelines
  • Accessibility specifications

Browse components →

Brand Support​

Hardwater (Parent Brand)​

The core Hardwater brand uses the primary Teardrop theme.

Hardwater brand guide →

Hardwater Studios​

Hardwater Studios has a specialized theme with unique color palettes and styling.

Hardwater Studios brand guide →

Design Principles​

When designing with Teardrop, keep these principles in mind:

  1. Consistency - Use components and tokens as intended
  2. Accessibility - Design for all users, following WCAG AA standards
  3. Clarity - Make interfaces clear and easy to understand
  4. Flexibility - Use the system's flexibility to solve unique problems

Learn about design principles in the Foundations section

Getting Help​

  • Design System Team - Reach out for questions or feedback
  • Design Reviews - Schedule a review for new patterns or components
  • Documentation - Check the full documentation for detailed guidelines

Next Steps​

  1. Set up Figma libraries
  2. Review design tokens
  3. Explore components
  4. Learn about your brand's theme