Studio Gruhl

Studio Gruhl presents a stark, high-contrast dark mode aesthetic, emphasizing brand identity through bold, monochrome typography that commands attention. The design system leverages a powerful interplay of deep charcoal and pure white, with minimal use of color reserved for impactful brand moments or subtle interaction cues. Components are compact, sharply defined, and prioritize information density over expansive whitespace, creating a direct and confident user experience. Underlying this is an expressive motion language that adds a dynamic, almost kinetic, fluidity to interactions. Prioritize GreedStandard 700 for all marketing headlines; for sub-headings and body use 400 for contrast. Sizes from the typeScale. Use Midnight Charcoal #18181b as the primary page background for all sections unless a distinct surface is needed. Apply Pure White #ffffff for all primary text elements to maintain high contrast with dark backgrounds. Utilize Slate Surface #2e2e30 for all interactive elements like buttons and card backgrounds requiring a slight elevation. Maintain a compact information density with primary vertical spacing between sections at 120px, and horizontal element spacing around 10px. Apply a 12px border-radius consistently to all interactive elements, cards, and primary containers. Employ the Expressive motion profile with 0.5s ease transitions for general interactive states like hover and active to ensure a fluid user experience. Avoid using excessive color; restrict chromatic colors to functional accents or specific branding elements where explicitly defined. Do not introduce drop shadows; the design relies on flat surface changes and borders for depth. Steer clear of large, flowing blocks of body text; break text into smaller, impactful chunks matching the bold typographic style. Do not use generic system fonts for branding or primary content areas; GreedStandard is essential for brand identity. Avoid overly spacious layouts; the system prefers a compact, dense arrangement, conveying efficiency and directness. Do not use arbitrary border-radii; adhere strictly to the defined radii such as 12px for cards and buttons, and 9999px for pill-shaped elements. Never use light backgrounds for main content sections; the site is exclusively dark-themed.