Skip to main content

Hardwater Studios

Hardwater Studios is a sub-brand supported by Teardrop Design System. This guide covers the Hardwater Studios-specific theming, components, and design patterns.

Overview​

Hardwater Studios uses Teardrop's foundation with specialized theming that reflects its creative and artistic identity. While sharing core components with Hardwater, Hardwater Studios has unique visual characteristics and brand-specific customizations.

Brand Identity​

Visual Characteristics​

  • Creative and expressive - More artistic and visually engaging
  • Studio-focused - Reflects the creative studio environment
  • Distinctive - Maintains unique identity while sharing foundations with Hardwater

Theme Configuration​

Colors​

Hardwater Studios uses a distinct color palette that reflects its creative identity.

Primary Colors:

  • Primary: #7c3aed (Purple/Violet)
  • Primary Hover: #6d28d9
  • Primary Active: #5b21b6

Accent Colors:

  • Accent 1: #ec4899 (Pink)
  • Accent 2: #f59e0b (Amber)
  • Accent 3: #10b981 (Emerald)

Neutral Colors:

  • Neutral 900: #111827 (Darkest)
  • Neutral 100: #f9fafb (Lightest)
  • White: #ffffff

Semantic Colors:

  • Success: #10b981
  • Warning: #f59e0b
  • Error: #ef4444
  • Info: #3b82f6

View full color palette →

Typography​

Font Family:

  • Primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif
  • Display: 'Poppins', sans-serif (for headings)
  • Monospace: 'JetBrains Mono', 'SF Mono', monospace

Scale:

  • Display: 48px / 56px line height
  • Heading 1: 36px / 44px line height
  • Heading 2: 28px / 36px line height
  • Heading 3: 22px / 30px line height
  • Body: 16px / 24px line height
  • Small: 14px / 20px line height

View typography system →

Spacing​

Hardwater Studios uses the same 8px spacing scale as Hardwater, with some additional large sizes for more expressive layouts:

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

View spacing system →

Components​

All Teardrop components are available with Hardwater Studios theming. Some components have Studio-specific variants:

Usage​

In Code​

import { ThemeProvider } from '@hardwater/teardrop';
import { hardwaterStudiosTheme } from '@hardwater/teardrop/themes/hardwater-studios';

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

In Design​

Use the Hardwater Studios Figma library which includes:

  • Hardwater Studios color tokens
  • Hardwater Studios typography styles
  • Studio-specific component variants
  • Creative patterns and layouts

Brand Guidelines​

Logo Usage​

  • Use the Hardwater Studios logo according to brand guidelines
  • Maintain minimum clear space around the logo
  • Use approved logo variations only
  • Studio logo can be used more expressively than parent brand

Color Usage​

  • Primary purple should be used for key brand elements
  • Accent colors can be used more liberally for creative expression
  • Maintain sufficient contrast ratios (WCAG AA minimum)
  • Use semantic colors appropriately

Typography​

  • Display font (Poppins) can be used for hero sections and key headings
  • Primary font (Inter) for body text and UI elements
  • More expressive typography treatments are acceptable
  • Maintain readability while allowing creative expression

Patterns​

Common Patterns​

Hardwater Studios products commonly use these patterns:

  • Portfolio layouts - Showcase creative work with visual emphasis
  • Project galleries - Grid-based layouts for creative content
  • Creative workflows - Tools and interfaces for creative work
  • Showcase pages - Hero sections with bold typography and imagery

Studio-Specific Components​

Hardwater Studios includes some components not available in the base Hardwater theme:

  • Media Gallery - For showcasing creative work
  • Project Card - Specialized card component for projects
  • Creative Button - More expressive button variants
  • Showcase Hero - Hero component with creative layouts

View all components →

Migration​

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

  1. Review component documentation and update your code accordingly
  2. Replace custom components with Teardrop equivalents
  3. Update to Hardwater Studios color and spacing tokens
  4. Consider using Studio-specific components where appropriate
  5. Test for accessibility compliance

Resources​

Support​

For questions about Hardwater Studios brand implementation:

  • Contact the design system team
  • Review brand guidelines
  • Check component documentation
  • Explore Studio-specific patterns