Sticker Mule

Overview

Sticker Mule is a high-velocity e-commerce platform for custom printing that channels the energy of street culture and DIY creativity into a polished, trustworthy interface. The brand embodies 'Vibrant Pragmatism'—a design philosophy that pairs bold, saturated colors (particularly the signature #f97805 orange) with clean, no-nonsense typography and layout to create an experience that feels both playful and professional. The UI celebrates the act of creation: every element is designed to feel tactile, approachable, and ready for action. Users encounter a brand that respects their time and celebrates their work.

The voice is confident, irreverent, and human. Sticker Mule speaks in short, punchy sentences that avoid corporate jargon. The brand personality is that of a trusted friend who happens to be exceptionally good at printing—knowledgeable without being condescending, energetic without being exhausting. Example sentence in brand voice: 'Free worldwide shipping, fast turnaround, 24/7 support—because your designs deserve better.'

Colors

The color system is anchored by a vibrant, saturated orange primary (#f97805) that dominates CTAs, hero sections, and key interactive moments. This orange is not merely decorative; it signals action and confidence. The primary palette extends through hover (#d66500) and active (#af5400) states, creating a tactile feedback loop that feels responsive and alive. Secondary colors—a professional blue (#065995) for trust-building elements and a verdant green (#459f50) for success states—provide semantic clarity without competing for attention. The neutral foundation (#f8f8f8 surface, #1a1a1a on-surface) is deliberately warm-leaning, never pure white or pure black, which prevents the interface from feeling sterile. Accent colors like the error red (#f90e5b) are used sparingly but decisively. The

Typography

The type system uses a two-family approach: proxima-nova (or fallback 'Helvetica Neue') for headlines and display text, paired with 'Helvetica Neue' for body and UI labels. This combination balances personality with legibility. Headlines employ aggressive letter-spacing (-0.04em at display scale, -0.02em at headline-lg) to create visual impact and breathing room; body text uses 0em letter-spacing for neutral readability. Font weights are deliberately limited: 400 for body, 600 for mid-weight emphasis, 700 for labels and CTAs. The display scale (60px, 700 weight, 68px line-height) is reserved for hero statements and major section breaks; headline-lg (48px, 700 weight) anchors product category pages; headline-md (32px, 600 weight) introduces subsections. Body-md (16px, 400 weight, 24px line-

Layout

The layout operates on a 12-column grid with a fixed max-width of 1000px, centered on the viewport. This constraint ensures readability on desktop while remaining responsive on tablet (breakpoint at 800px). Spacing follows a semantic scale: xs (4px) for micro-interactions, sm (12px) for component internals, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The gutter (24px) is applied consistently to left/right margins on mobile and tablet. Container padding uses md (24px) on desktop, sm (12px) on mobile. Whitespace is generous but purposeful: hero sections breathe with lg spacing above and below; product grids use md spacing between items; form fields stack with sm spacing. The rhythm creates a sense of c

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than aggressive layering. Level 1 (Base): the surface (#f8f8f8) with no shadow, establishing the foundation. Level 2 (Cards & Containers): 0 1px 2px rgba(0, 0, 0, 0.06) with a 1px border in {colors.outline} (#dedede), creating a soft separation from the background. Level 3 (Elevated Cards, Modals): 0 4px 12px rgba(0, 0, 0, 0.08) with background shifted to surface-container-high (#efefef), signaling prominence. Level 4 (Hover/Active States): 0 3px 8px rgba(0, 0, 0, 0.15) with a brief transition (150ms

Shapes

The shape language is 'Soft-Technical'—rounded corners are present but restrained, signaling approachability without sacrificing clarity. Buttons and inputs use 4px (0.25rem) border-radius, a subtle softness that feels modern without being trendy. Cards and larger containers use 8px (0.5rem) for slightly more personality. Modals and prominent surfaces use 12px (0.75rem) to create visual distinction. Full-radius (9999px) is reserved for badges and pill-shaped elements, emphasizing their role as discrete, self-contained pieces of information. The rationale: sharp 90-degree corners would feel cor

Components

Action Elements Buttons are the primary interaction mechanism and must feel responsive and confident. The button-primary component uses {colors.primary} (#f97805) background with {colors.on-primary} (#ffffff) text, 700 font-weight, 14px label-md typography, 20px 24px padding, and 4px border-radius. On hover, the background shifts to #d66500 with a 150ms ease-in-out transition; on active/focus, it becomes #af5400. The button-secondary variant uses a transparent background with a 1px {colors.outline} border and {colors.on-surface} text; on hover, the background becomes {colors.surface-container-high} (#efefef) and the border darkens to {colors.on-surface-variant} (#505050). The button-ghost variant (used for tertiary actions) applies rgba(26, 26, 26, 0.1) background with no border; on ho

Do's and Don'ts

**Do**

• Do use {colors.primary} (#f97805) for all primary CTAs—'Shop now', 'Sign up', 'Get started'—to create a consistent call-to-action language across the platform.
• Do apply generous whitespace (md and lg spacing) between sections to create visual breathing room and guide the user's eye through the page hierarchy.
• Do pair proxima-nova headlines with 'Helvetica Neue' body text to balance personality with legibility; never use proxima-nova for body copy.
• Do use the full Material 3 color token system (primary-fixed, secondary-container, etc.) to ensure consistent theming and accessible contrast ratios across all states.
• Do apply 150ms ease-in-out transitions to all interactive elements (buttons, links, cards) to provide tactile feedback without feeling sluggish.

**Don't**

• Don't use pure white (#ffffff) or pure black (#000000) as primary background or text colors; stick to the defined surface and on-surface tokens to maintain warmth and approachability.
• Don't apply aggressive shadows (box-shadow: 0 16px 40px or larger) to cards or containers; the elevation system uses soft, diffuse shadows (max 0 4px 12px) to avoid visual heaviness.
• Don't round corners beyond 12px on standard UI elements; excessive rounding (16px+) undermines the brand's precision and trustworthiness.
• Don't use secondary colors (blue #065995, green #459f50) for primary CTAs; reserve them for semantic roles (trust, success) and supporting elements.
• Don't disable transitions or use instant state changes; all interactive elements must transition over 150–200ms to feel responsive and polished.