SOUR – cmd+zest

Overview

SOUR's cmd+zest is a diagnostic interface celebrating creative overthinking as a superpower. The design embodies 'Monochromatic Maximalism'—a philosophy that strips away color noise to amplify a single, luminous accent (lime-green #c1f85c) against a near-black canvas (#141513). This creates an almost brutalist aesthetic: high contrast, zero compromise, every pixel intentional. The brand personality is witty, self-aware, and unapologetically nerdy. It speaks to designers who send three versions when one was asked for, who agonize over kerning, who see overthinking not as a flaw but as a creative signature. Voice example: 'You're the type who redesigns the entire system before shipping the button.'

Colors

The color system is deliberately austere: a near-black surface (#141513) anchors the interface, while a vibrant lime-green primary (#c1f85c) serves as the sole emotional accent, used exclusively on CTAs, focus states, and moments of celebration. This extreme contrast (WCAG AAA compliant at 16.5:1 ratio) ensures accessibility while reinforcing the brand's 'no-filler' ethos. Secondary grays (#c8c8c8, #666666, #dddddd) provide hierarchy without distraction. The accent-secondary (#edf9da) is a pale lime wash used sparingly for container backgrounds, creating a subtle echo of the primary. Error states use a muted red (#ff6b6b) to maintain the monochromatic tension. All interactive elements—buttons, radio inputs, focus rings—use the primary accent with a 0.3 opacity glow (box-shadow: 0px 0px 5px

Typography

The type system pairs GT Flexa (a geometric sans with distinctive alternates) for headlines and body copy with IBM Plex Mono for labels and metadata, creating a 'technical-yet-warm' voice. Display sizes (72px, 700 weight) command attention on hero sections; headline-lg (48px, 600 weight) anchors card titles; body-md (16px, 400 weight) maintains readability on dark backgrounds with 24px line-height. The monospace labels (14px, 600 weight, 0.02em letter-spacing) add a 'code-like' precision to form labels and badges. All type on dark surfaces uses #f9f9f9 (off-white, not pure white) to reduce eye strain; apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels over animated backgrounds to maintain legibility during motion.

Layout

The layout follows a 12-column grid with a 1280px max-width, using 24px gutters for desktop and 12px for mobile. Page rhythm is driven by 40px (lg spacing) section separators, creating breathing room between diagnostic sections. Cards and containers use 24px internal padding (md spacing) with 12px gaps between nested elements (sm spacing). The hero section occupies full viewport height with a centered, stacked layout; the diagnostic quiz uses a single-column flow on mobile, expanding to 2–3 columns on tablet. White-space is aggressive—empty space is treated as a design material, not wasted real estate. Container max-width is enforced at 1280px to prevent text lines from exceeding 75 characters, maintaining readability on ultra-wide displays.

Elevation & Depth

Depth is conveyed through subtle shadow and border treatments rather than dramatic layering. Level 1 (base surface) has no shadow; Level 2 (cards, inputs) uses a 1px solid border at rgba(0, 0, 0, 0.3) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); Level 3 (modals, elevated cards) adds box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25) with a 1.5px border. Focus states on interactive elements trigger a 5px glow (box-shadow: 0px 0px 5px 5px rgba(193, 248, 92, 0.3)) that pulses subtly. Hover states lift cards 2px (transform: translateY(-2px)) with a simultaneous shadow increase, creating a tactile 'pres

Shapes

The shape language is 'Soft-Technical'—rounded corners are used sparingly and purposefully. Buttons and inputs use 0.75rem (12px) border-radius, creating a friendly-but-professional appearance. Cards use 1rem (16px) for a slightly softer presence. Full-width containers and badges use 9999px (full circle) for maximum softness. The rationale: sharp corners (0px) would feel cold and corporate; extreme roundness (50%) would undermine the austere aesthetic. The 12–16px sweet spot balances approachability with precision, mirroring the brand's 'overthinking with warmth' personality.

Components

Action Elements Buttons use a two-state system: primary (lime-green #c1f85c on black, 15px vertical / 32px horizontal padding, 48px height) and secondary (transparent with 1px outline, 666666 border). On hover, primary buttons scale to 1.065 × 1.095 with a transition: transform 0.45s cubic-bezier(0.7, 0, 0.3, 1). On active (press), buttons compress to scaleX(0.955) scaleY(0.954) with a 200ms ease-out. The 'color swoosh' variant animates a secondary text layer from below on hover, using a custom elastic easing function (linear() with 18 keyframes) for a playful, bouncy reveal. All buttons have -webkit-tap-highlight-color: transparent to prevent mobile flash.

Containers & Surfaces Cards exist in two densities: standard (surface-container #1f1f1d, 1px outline-variant border, 24px pad

Do's and Don'ts

**Do**

• Do use the lime-green accent (#c1f85c) exclusively on interactive elements, focus states, and moments of celebration—never on passive surfaces.
• Do maintain at least 40px (lg spacing) between major sections to create visual breathing room and reduce cognitive load.
• Do apply the elastic easing function (cubic-bezier(0.7, 0, 0.3, 1)) to all transitions for a confident, snappy feel that matches the brand's decisive personality.
• Do use GT Flexa for headlines and body copy to reinforce the 'technical-yet-warm' voice; reserve IBM Plex Mono for labels and metadata only.
• Do enforce a 1280px max-width container to prevent text lines from exceeding 75 characters, ensuring readability on ultra-wide displays.
• Do test all color combinations against WCAG AAA standards (7:1 minimum contrast) to ensure accessibility for users with color blindness.

**Don't**

• Don't use multiple accent colors or gradients—the monochromatic aesthetic depends on lime-green as the sole emotional focal point.
• Don't apply shadows deeper than 0 16px 40px rgba(0, 0, 0, 0.25) or the interface will lose its austere, high-contrast character.
• Don't round corners beyond 1.5rem (24px) on any element; extreme roundness contradicts the 'soft-technical' philosophy.
• Don't use pure white (#ffffff) for text on dark backgrounds; always use #f9f9f9 (off-white) to reduce eye strain and maintain the brand's refined aesthetic.
• Don't animate more than one property per element simultaneously (e.g., avoid transform + opacity + color all at once); keep transitions focused and intentional.
• Don't exceed 24px padding on cards or containers—the brand values density and intentionality, not spaciousness.