Scuffers

Overview

Scuffers is an urban streetwear brand that transforms everyday essentials into statements of individual identity. The design system embodies a "Minimalist-Maximalist" aesthetic—a deliberate tension between austere monochromatic foundations (pure black #1a1a1a, pure white #ffffff, deep grays #272727) and strategic neon punctuation (lime green #39ff14, warm yellow #ffee5b, forest green #2b7551). This visual language speaks to a generation that rejects both corporate sterility and maximalist excess, instead embracing controlled chaos and intentional contrast. The UI evokes clarity, directness, and rebellious authenticity—the brand voice is conversational yet authoritative, never apologetic.

Scuffers' tone is unapologetically direct: "Everyday Urban Aesthetics. As Always, With Love." The vocabulary is spare, the messaging is confident, and the visual hierarchy is ruthless. A user encountering the site should feel the weight of intentional design choices—every color, every radius, every shadow serves a purpose. The brand personality rejects trends; it sets them. Example sentence in voice: "These aren't basics. They're the foundation everything else is built on."

Colors

The Scuffers color system operates on a principle of **controlled contrast**: a monochromatic backbone (surface stack anchored at #ffffff and #1a1a1a) paired with three accent roles that each serve distinct narrative functions. **Primary (#2b7551, a deep forest green)** is the brand's signature accent—deployed on CTAs, active states, and key interactive moments. It signals trust, sustainability, and urban sophistication without the coldness of pure black. **Secondary (#39ff14, neon lime green)** is the rebellion accent—used sparingly on badges, highlights, and moments demanding immediate attention. It's the visual equivalent of a raised voice in a quiet room. **Tertiary (#ffee5b, warm golden yellow)** serves as the announcement accent, typically reserved for promotional sliders and high-vi

Typography

The Scuffers type system uses Helvetica Neue as its primary family—a choice that signals industrial precision and timeless authority. The hierarchy spans eight levels from display (60px, 700 weight, -0.04em tracking) down to label-sm (12px, 500 weight, 0.08em tracking), each calibrated for specific contexts. Display and headline-lg use aggressive negative letter-spacing (-0.04em, -0.02em) to create visual density and command attention; body and label scales use positive or neutral tracking (0.01em to 0.08em) to maintain readability at smaller sizes. Line heights are set as absolute pixel values (68px for display, 48px for headline-lg, 28px for body-lg) rather than unitless multipliers, ensuring pixel-perfect alignment across the grid. On small labels over busy backgrounds or neon accents,

Layout

Scuffers uses a **fluid 12-column grid** with a fixed container max-width of 1280px, allowing the design to breathe on desktop while maintaining control on ultra-wide displays. The spacing scale is semantic and hierarchical: unit (8px) is the atomic increment; xs (4px) for micro-adjustments; sm (12px) for tight grouping; md (24px) for standard component padding and section gutters; lg (40px) for major section separation; xl (64px) for hero-to-content transitions. White-space is treated as a design material, not a void—sections are separated by lg spacing (40px) on desktop, md spacing (24px) on tablet, and sm spacing (12px) on mobile. The gutter (24px) is applied consistently to all container edges, creating a breathing room that prevents content from feeling cramped. On mobile, the grid co

Elevation & Depth

Depth in the Scuffers system is achieved through a **restrained shadow vocabulary** rather than color shifts or blur effects. The elevation scale defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle separation of interactive elements like list items; md (0 4px 12px rgba(0, 0, 0, 0.08)) for cards and modals that float above the surface; lg (0 16px 40px rgba(0, 0, 0, 0.12)) for critical overlays like the cart drawer. Shadows use a consistent blur-to-offset ratio (1:2:4 for sm, 4:12 for md, 16:40 for lg) and a fixed alpha of 0.06–0.12 to maintain visual harmony. The cart drawer app

Shapes

The Scuffers shape philosophy is **"Soft-Technical"**—a deliberate balance between the precision of sharp corners and the approachability of rounded forms. Buttons and interactive elements use md radius (0.75rem / 12px), creating a subtle softness that feels contemporary without sacrificing legibility. Cards and containers use lg radius (1rem / 16px) to establish a clear visual hierarchy—they're softer than buttons, signaling they're containers rather than actions. Input fields use DEFAULT radius (0.5rem / 8px), a middle ground that feels neither too rigid nor too playful. Badges and pills use

Components

Action Elements Buttons are the primary interaction mechanism and must be instantly recognizable. **button-primary** uses primary color (#2b7551) with white text, md radius (12px), and 48px height for optimal touch targets on mobile. The padding is 12px horizontal, 24px vertical, set via the label-md typography. On hover, the background darkens to #1f5a3f (a 15% luminosity shift) over 200ms (ease-in-out transition), signaling state change without animation fatigue. On active/pressed, the background further darkens to #1a4d38. **button-secondary** inverts the logic: transparent background with a 2px solid primary border, primary text color, and the same 48px height. On hover, the background fills with primary-container (#d4f0e8) while the border remains primary, creating a "fill" effect

Do's and Don'ts

**Do**

• Do use primary (#2b7551) exclusively for CTAs, active states, and brand-critical interactions—never for backgrounds or body text.
• Do apply md spacing (24px) between major sections and lg spacing (40px) for hero-to-content transitions to maintain visual rhythm.
• Do pair neon accents (secondary #39ff14, tertiary #ffee5b) with high-contrast text (#1a1a1a) to ensure WCAG AAA compliance.
• Do use Helvetica Neue at 600–700 weight for headlines and 400 weight for body to maintain the minimalist-technical aesthetic.
• Do transition all interactive state changes (hover, focus, active) over 150–200ms using ease-in-out timing to prevent jarring shifts.
• Do apply sm elevation (0 1px 2px rgba(0, 0, 0, 0.06)) to cards and md elevation (0 4px 12px rgba(0, 0, 0, 0.08)) to modals for consistent depth hierarchy.

**Don't**

• Don't use secondary (#39ff14) or tertiary (#ffee5b) as primary surface colors—they are accents only, deployed sparingly for maximum impact.
• Don't apply border-radius > lg (16px) to buttons or inputs; it dilutes the soft-technical aesthetic and reads as overly playful.
• Don't mix font families—Helvetica Neue is the sole typeface; avoid system-ui, -apple-system, or serif fallbacks in component definitions.
• Don't use shadows > lg elevation (0 16px 40px rgba(0, 0, 0, 0.12)) on standard components; reserve lg for critical overlays like drawers and modals.
• Don't set line-height as unitless multipliers (e.g., 1.5)—always use absolute pixel values (e.g., 28px) to ensure pixel-perfect grid alignment.
• Don't apply text-shadow on body text or large headlines; reserve it for small labels (12px or smaller) over busy or neon backgrounds only.