Symbol Spotter Design System

Our design system combines Bauhaus principles with modern digital needs, creating a balance between bold aesthetics and user-friendly interfaces.

Color Evolution: Bauhaus to Modern

Teal (Accent)

Modern: #35EDC2

Bauhaus: #00FFCC

Historical Context:

Not a traditional Bauhaus color, but inspired by the movement's exploration of color

Modern Adaptation:

Primary accent color for the Symbol Spotter brand, representing innovation and clarity. Used for interactive elements and primary actions.

CSS Variable:

--accent: 164 83% 57%

Blue

Modern: #35A3ED

Bauhaus: #0000FF

Historical Context:

Traditional Bauhaus blue was more pure/primary (0000FF)

Modern Adaptation:

Modern version is lighter and more cyan-leaning, optimized for digital readability while maintaining the Bauhaus spirit of boldness

CSS Variable:

--blue: 204 83% 57%

Yellow

Modern: #EDDE35

Bauhaus: #FFFF00

Historical Context:

Classic Bauhaus yellow was pure primary (FFFF00)

Modern Adaptation:

Modern version has warmer, golden undertones for better contrast and visual comfort on screens

CSS Variable:

--yellow: 54 83% 57%

Red

Modern: #ED3535

Bauhaus: #FF0000

Historical Context:

Bauhaus red was pure primary (FF0000)

Modern Adaptation:

Modern version has slightly muted intensity to reduce eye strain while maintaining vibrancy

CSS Variable:

--red: 0 83% 57%

Dark Mode Adaptations

Our color system adapts for dark mode by adjusting saturation and lightness while maintaining the Bauhaus color identity.

Light Mode

--accent: 164 83% 57%

--blue: 204 83% 57%

--yellow: 54 83% 57%

--red: 0 83% 57%

Dark Mode

--accent: 164 70% 40%

--blue: 204 70% 40%

--yellow: 54 70% 40%

--red: 0 70% 40%

Typography System

Space Grotesk

Primary Usage:

Headers, Labels, Important UI Elements

Available Weights:

  • 300 (Light)
  • 400 (Regular)
  • 500 (Medium)
  • 600 (SemiBold)
  • 700 (Bold)

Symbol Spotter - Decode Characters and Symbols

Work Sans

Primary Usage:

Body Text, Descriptions, UI Text

Available Weights:

  • 300 (Light)
  • 400 (Regular)
  • 500 (Medium)
  • 600 (SemiBold)
  • 700 (Bold)

Free tool to identify and decode mysterious characters and symbols in your text.

CSS Implementation

Our color system is implemented using CSS variables with HSL values, providing flexibility for both light and dark modes.

Implementation Details

  • Colors are defined as HSL values in CSS variables
  • Dark mode variants are included in a .dark selector
  • The theme toggle uses JavaScript to add/remove the .dark class on the root element
  • User preferences are stored in localStorage and respected on page load
  • System preferences (prefers-color-scheme) are respected when no stored preference exists

Example CSS Variable Usage:

@layer base {
  :root {
    --accent: 164 83% 57%;
    --blue: 204 83% 57%;
    /* Other variables... */
  }

  .dark {
    --accent: 164 70% 40%;
    --blue: 204 70% 40%;
    /* Dark mode variables... */
  }
}

Using Variables in Components:

/* In Tailwind classes */
<button className="bg-accent text-accent-foreground">
  Click Me
</button>

/* In custom CSS */
.custom-element {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}