Skip to main content

Hardwater Brand

Hardwater is the parent brand of the Teardrop Design System. This guide covers the Hardwater-specific theming, components, and design patterns.

Overview​

Hardwater uses the core Teardrop design system with brand-specific theming and customization. All components and foundations are available with Hardwater's visual identity applied.

Brand Identity​

Visual Characteristics​

  • Professional and trustworthy - Clean, modern design
  • Efficient and productive - Focus on clarity and usability
  • Consistent - Unified experience across all Hardwater products

Theme Configuration​

Colors​

Hardwater's color palette emphasizes professionalism and clarity.

Primary Colors:

  • Primary: #0065ff (Blue)
  • Primary Hover: #0052cc
  • Primary Active: #003d99

Neutral Colors:

  • Neutral 900: #091e42 (Darkest)
  • Neutral 100: #f4f5f7 (Lightest)
  • White: #ffffff

Semantic Colors:

  • Success: #00875a
  • Warning: #ff991f
  • Error: #de350b
  • Info: #0052cc

View full color palette →

Typography​

Font Family:

  • Primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
  • Monospace: 'SF Mono', Monaco, 'Cascadia Code', monospace

Scale:

  • Heading 1: 32px / 40px line height
  • Heading 2: 24px / 32px line height
  • Heading 3: 20px / 28px line height
  • Body: 16px / 24px line height
  • Small: 14px / 20px line height

View typography system →

Spacing​

Hardwater uses an 8px spacing scale:

  • XSmall: 4px
  • Small: 8px
  • Medium: 16px
  • Large: 24px
  • XLarge: 32px
  • XXLarge: 48px

View spacing system →

Components​

All Teardrop components are available with Hardwater theming:

Usage​

In Code​

import { ThemeProvider } from '@hardwater/teardrop';
import { hardwaterTheme } from '@hardwater/teardrop/themes/hardwater';

<ThemeProvider theme={hardwaterTheme}>
  <App />
</ThemeProvider>

In Design​

Use the Hardwater Figma library which includes:

  • Hardwater color tokens
  • Hardwater typography styles
  • Hardwater component variants
  • Hardwater-specific patterns

Brand Guidelines​

Logo Usage​

  • Use the Hardwater logo according to brand guidelines
  • Maintain minimum clear space around the logo
  • Use approved logo variations only

Color Usage​

  • Primary color should be used for primary actions and key UI elements
  • Maintain sufficient contrast ratios (WCAG AA minimum)
  • Use semantic colors appropriately (success, warning, error)

Typography​

  • Use the primary font family for all UI text
  • Follow the typography scale for consistent hierarchy
  • Maintain readable line lengths (45-75 characters)

Patterns​

Common Patterns​

Hardwater products commonly use these patterns:

  • Dashboard layouts - Data-heavy interfaces with clear information hierarchy
  • Form workflows - Multi-step forms with clear progress indicators
  • Data tables - Sortable, filterable tables with bulk actions
  • Settings pages - Organized settings with clear groupings

Migration​

If you're migrating an existing Hardwater product to Teardrop:

  1. Review component documentation and update your code accordingly
  2. Replace custom components with Teardrop equivalents
  3. Update color and spacing tokens
  4. Test for accessibility compliance

Resources​

Support​

For questions about Hardwater brand implementation:

  • Contact the design system team
  • Review brand guidelines
  • Check component documentation