Skip to main content

Tools

Teardrop provides tools and resources to help designers and developers work efficiently with the design system.

Design Tools​

Figma Libraries​

Access Teardrop components, tokens, and patterns in Figma.

Includes:

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

Get Figma access →

Development Tools​

Token Visualizer​

An interactive graph-based visualizer for exploring Teardrop design token relationships and connections.

Features:

  • 🕸️ Interactive force-directed graph showing token relationships
  • 🔗 Visualize how tokens reference each other (e.g., text.strong → neutral.1)
  • 🎨 Filter by token layer (primitive, semantic, component)
  • 🔍 Search tokens by name, color, or description
  • 🌈 Switch between different theme modes
  • 📊 Click nodes to see detailed information and connections

Open Token Visualizer →

ESLint Plugin​

The Teardrop ESLint plugin helps enforce design system usage and catch common mistakes.

Installation:

npm install --save-dev @hardwater/eslint-plugin-teardrop

Configuration:

{
  "plugins": ["@hardwater/teardrop"],
  "rules": {
    "@hardwater/teardrop/no-deprecated-components": "error",
    "@hardwater/teardrop/prefer-tokens": "warn"
  }
}

ESLint plugin documentation (Coming soon)

Storybook Addon​

The Teardrop Storybook addon provides design system integration for Storybook.

Features:

  • Theme switching
  • Token documentation
  • Component status
  • Accessibility testing

Storybook addon documentation (Coming soon)

Stylelint Plugin​

The Teardrop Stylelint plugin enforces styling standards.

Installation:

npm install --save-dev @hardwater/stylelint-plugin-teardrop

Stylelint plugin documentation (Coming soon)

Standards​

UI Styling Standard​

Principles to guide styling UI code across Hardwater's frontend.

Principles:

  1. Use design tokens
  2. Follow component patterns
  3. Maintain accessibility
  4. Ensure consistency

UI Styling Standard documentation (Coming soon)

Resources​