Heavy Play

Overview

Heavy Play is a premium card gaming equipment brand serving competitive TCG players (Magic: the Gathering, Pokémon, Yu-Gi-Oh, Lorcana, Flesh and Blood) with ergonomic playmats, deck boxes, and sleeves. The design system embodies 'Tactical Minimalism'—a high-contrast, purposeful aesthetic that prioritizes clarity, functional elegance, and competitive readiness over decoration. The UI evokes precision and professionalism: every element serves a purpose, every color choice signals intent, and the visual hierarchy guides the player toward action without distraction.

The brand voice is direct, knowledgeable, and respectful of the player's time. Tone: confident but never condescending, technical but never jargon-heavy. Vocabulary favors concrete nouns (deck, playmat, protection) and action verbs (enhance, protect, organize). The brand speaks to players as peers, not customers. Example sentence: 'Your deck deserves protection as serious as your strategy.'

Colors

Heavy Play's color system is built on a stark, high-contrast foundation: pure white (#ffffff) and near-black (#0d0d0d) form the primary axis, with a cool gray-blue secondary palette (#5b6770, #d3dbe2) providing depth and a deep burgundy accent (#6c1d4d) reserved for premium or featured content. Primary (#ffffff) is the dominant interactive surface—buttons, cards, and input fields use white as the default state, creating a clean, uncluttered canvas. On-primary (#333333) ensures text legibility at 4.5:1 contrast ratio minimum. Secondary (#5b6770) is used for headers, navigation, and structural elements; it conveys authority without aggression. Tertiary (#6c1d4d), a deep wine tone, appears sparingly on badges, accent highlights, and limited-edition product callouts—it signals exclusivity and

Typography

The typography system uses Barlow exclusively, a geometric sans-serif that conveys modern professionalism and technical precision. The type hierarchy is built on a 12px baseline grid: display (60px, 700 weight) anchors hero sections and major announcements; headline-lg (40px, 700) titles product categories and key sections; headline-md (28px, 600) breaks content into digestible chunks; title-lg (20px, 600) labels cards and subsections; body-lg (18px, 500) and body-md (16px, 500) carry narrative content with generous line-height (28px and 24px respectively) for readability at all screen sizes; label-md (14px, 600) and label-sm (12px, 500) handle UI labels, form hints, and metadata. Letter-spacing is minimal (-0.04em on display, -0.02em on headline-lg) to create visual density and authority.

Layout

Heavy Play uses a 12-column fluid grid with a maximum container width of 1200px, centered on the viewport. The page rhythm is built on a 24px gutter (md spacing) between columns and 40px (lg spacing) between major sections. White-space is generous but purposeful: the announcement bar (black background, white text) sits at the top; the header (dark gray #5b6770 background) contains the logo and navigation; hero sections occupy full viewport height with 500px minimum on mobile. Product cards use 24px padding (md) internally and are separated by 24px gaps. Form fields and inputs use 12px (sm) padding vertically and 15px horizontally. The container-max-width of 1200px ensures content remains scannable on ultra-wide displays. Spacing scale is semantic: xs (4px) for micro-interactions, sm (12px)

Elevation & Depth

Elevation in Heavy Play is achieved through subtle shadows and layering, not color shifts. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on flat elements; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, dropdowns, and modals; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated modals and floating elements. Cards use a 1px solid border at {colors.surface-container-high} (#d3dbe2) to define edges without relying on shadow alone. Modals layer a semi-transparent dark overlay (rgba(0, 0, 0, 0.5)) with a 4px blur backdrop-filter behind the modal-cont

Shapes

Heavy Play employs 'Geometric Precision'—a shape philosophy that balances sharp, technical edges with subtle rounding for usability. Buttons use full rounding (border-radius: 50px or 9999px) to signal interactivity and create a soft, approachable CTA despite the high-contrast color scheme. Cards and containers use md rounding (12px or 0.75rem) to soften corners without appearing playful; this creates a professional, product-focused appearance. Form inputs use DEFAULT rounding (8px or 0.5rem) for a neutral, functional look. Modals and overlays use lg rounding (16px or 1rem) to distinguish them

Components

Action Elements Buttons are the primary call-to-action mechanism. button-primary uses white background (#ffffff) with dark gray text (#333333), full rounding (50px), and 5px vertical / 10px horizontal padding. Font-weight is 500 (label-md). On hover, the background shifts to primary-fixed-dim (#b3b3b3) to indicate interactivity. button-dark (used for form submissions and secondary CTAs) inverts this: black background (#000000), white text, 6px border-radius, 12px 22px padding, 600 font-weight. On hover, background becomes #444444 with a 0.3s ease transition. button-secondary uses transparent background with a 1px outline at {colors.outline} (#5b6770), 24px padding, and 48px height for touch targets. All buttons use transition: background-color 0.3s ease to signal state changes smoothly

Do's and Don'ts

**Do**

• Do use white (#ffffff) as the primary surface for all interactive elements—buttons, cards, modals—to maintain the high-contrast, tactical aesthetic.
• Do apply md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and standard containers; reserve lg shadow for modals and floating elements only.
• Do use Barlow at 500, 600, or 700 weight exclusively; never use 400 weight, as it appears fragile against the stark background.
• Do maintain 24px (md) gutters between columns and 40px (lg) spacing between major sections to preserve the clean, scannable layout.
• Do use tertiary (#6c1d4d) sparingly—only for premium badges, limited-edition callouts, or accent highlights—to preserve its exclusivity signal.

**Don't**

• Don't use color gradients or transparency overlays on primary surfaces; Heavy Play's strength is in stark, unambiguous contrast.
• Don't apply shadows larger than lg (0 8px 24px rgba(0, 0, 0, 0.12)) to any element; excessive shadow depth contradicts the minimalist philosophy.
• Don't mix typefaces; Barlow is the sole font family. Avoid system-ui, sans-serif, or serif fallbacks in component definitions.
• Don't round corners more than lg (16px) on any element except buttons (which use full rounding); over-rounding softens the tactical precision.
• Don't use secondary (#5b6770) as a text color on white backgrounds; it fails contrast requirements. Use on-surface (#0d0d0d) for body text instead.