Our design system combines Bauhaus principles with modern digital needs, creating a balance between bold aesthetics and user-friendly interfaces.
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%
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%
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%
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%
Our color system adapts for dark mode by adjusting saturation and lightness while maintaining the Bauhaus color identity.
--accent: 164 83% 57%
--blue: 204 83% 57%
--yellow: 54 83% 57%
--red: 0 83% 57%
--accent: 164 70% 40%
--blue: 204 70% 40%
--yellow: 54 70% 40%
--red: 0 70% 40%
Primary Usage:
Headers, Labels, Important UI Elements
Available Weights:
Symbol Spotter - Decode Characters and Symbols
Primary Usage:
Body Text, Descriptions, UI Text
Available Weights:
Free tool to identify and decode mysterious characters and symbols in your text.
Our color system is implemented using CSS variables with HSL values, providing flexibility for both light and dark modes.
.dark
selector.dark
class on the root elementExample 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)); }