SaunaDip Design System

Our visual language and component library

Brand Identity

Sauna Dip

Light Background

Sauna Dip

Dark Background

Sauna Dip

Logo Assets

Logo Component

<Logo 
  variant="dark" // or "light"
  width={200}    // optional
  height={50}    // optional
/>

Specifications

  • SVG with gradient effects
  • Default size: 200 x 50 px
  • Responsive scaling

Logo Usage Guidelines

Colors

  • Primary gradient: Orange (#FF6B2C) to Blue (#3898FF)
  • Text colors: Orange (#FF6B2C) for "Sauna", Blue (#3898FF) for "Dip"
  • Water drop icon: Gradient from Orange to Blue

Clear Space

Maintain minimum clear space around the logo equal to the height of the water drop icon.

Minimum Size

Do not use the logo smaller than 24px in height to maintain legibility.

Do's and Don'ts

  • Do maintain the original aspect ratio
  • Do use the provided Logo component for best quality
  • Don't modify the logo colors
  • Don't distort or rotate the logo
  • Don't add effects like shadows or outlines
  • Don't use the logo on busy backgrounds

Hero Section

Main Hero

Our primary hero section uses a three-line heading with distinct colors and a clean, minimal layout.

Find Your Heat.

Embrace the Cold.

Your Ritual Starts Here.

Colors

  • Line 1: Orange (#FF6B2C)
  • Line 2: Light Blue/Gray (#B8C7E0)
  • Line 3: Bright Blue (#00B4FF)

Typography

  • Font: System font stack
  • Weight: Bold (700)
  • Tracking: Tight (-0.02em)
  • Responsive sizes: 48px to 96px

Usage Guidelines

  • Always maintain the color order and hierarchy
  • Keep text center-aligned
  • Maintain adequate spacing between lines
  • Use on dark backgrounds for best contrast

Color Palette

Primary Colors

Primary Orange

#FF6B2C

Secondary Orange

#EA580C

Neutral Colors

Dark Gray

#111827

Medium Gray

#4B5563

Typography

Heading 1

Inter Bold, 48px/56px

Heading 2

Inter Bold, 36px/44px

Heading 3

Inter Semibold, 24px/32px

Body Text

Inter Regular, 18px/28px

Components

Buttons

Cards

Card Title

Card content goes here. This is an example of a standard card component.

Gradient Card

This is an example of a gradient card component.

Form Elements