MENSTARTERPACK

Overview

MENSTARTERPACK is a curated e-commerce platform serving modern men seeking essential, timeless products. The design philosophy embraces Architectural Minimalism—a discipline rooted in the belief that every visual element must justify its existence through function or clarity. The aesthetic is deliberately austere: pure white backgrounds (rgb(255, 255, 255)), deep black typography (rgba(0, 0, 0, 1.0)), and generous negative space create an environment where products speak louder than decoration. The emotional response is one of confidence and clarity—users feel they are shopping with intention, not distraction.

The brand voice is direct, authoritative, and unadorned. Copy avoids hyperbole; instead, it speaks in declarative statements: 'Everything a modern man needs. Minimal. Functional. Timeless.' The vocabulary is concrete and masculine without aggression—think 'essential,' 'crafted,' 'enduring' rather than 'revolutionary' or 'premium.' Tone is calm, measured, and respectful of the user's time. Example sentence: 'This notebook outlasts trends. Grab one.'

Colors

The color system is built on a monochromatic foundation with two strategic accent colors. Primary (rgb(0, 0, 0) / #000000) dominates the interface as text, borders, and interactive states—it is the workhorse of clarity. On-primary (rgb(255, 255, 255) / #FFFFFF) provides contrast on dark surfaces and CTAs. The surface stack ranges from pure white (surface: #ffffff) through carefully calibrated grays (surface-container-high: #e6e6e6, surface-container-low: #f2f2f2) to create subtle depth without visual noise. Secondary (rgb(89, 177, 171) / #59b1ab), a muted teal, is reserved for secondary CTAs, status indicators, and accent highlights—it appears sparingly to draw attention without overwhelming. Tertiary (rgb(232, 175, 87) / #e8af57), a warm gold, is used for promotional badges and limited-ti

Typography

The type system uses Inter exclusively across all weights (400, 500, 700), creating a unified, contemporary voice. Display (56px, 700 weight, -0.02em letter-spacing) is reserved for hero headlines and major page titles, commanding attention through scale rather than decoration. Headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) structure content hierarchy, with tight line-heights (1.1–1.15) reinforcing the minimalist aesthetic. Body-md (14px, 400 weight, 24px line-height) is the default reading size, chosen to match the rendered DOM standard of 14px and optimized for both desktop and mobile scanning. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons and interactive labels, with increased letter-spacing to enhance legibility at small sizes. On small labels ov

Layout

The layout follows a 12-column grid system with a maximum container width of 1200px, maintaining readability and focus on product imagery. The page rhythm is built on a semantic spacing scale: lg (40px) separates major sections (hero to products), md (24px) creates breathing room between cards and content blocks, and sm (12px) provides internal padding within components. The hero section spans full-width with a dark background image overlay (linear-gradient: rgba(0, 0, 0, 0.5)), allowing white text to float with maximum contrast. Product grids use a 4-column layout on desktop (each column ~280px), collapsing to 2 columns on tablet and 1 on mobile. Gutters between columns are consistently 24px (gutter token), creating a rhythm that feels neither cramped nor wasteful. White space is treated

Elevation & Depth

Depth in this system is achieved through subtle layering rather than dramatic shadows. The base layer (Level 1) is the white background (rgb(255, 255, 255)) with no shadow. Level 2 (cards, input fields) uses a 1px solid border in outline color (rgb(204, 204, 204)) and a soft shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). This shadow is applied on hover to product cards, signaling interactivity without visual aggression. Level 3 (modals, popovers, dropdowns) uses a stronger shadow: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), creating clear separation from the page. The shadow values are cal

Shapes

The shape philosophy is 'Functional Precision'—rounded corners are used sparingly and purposefully. Buttons and primary CTAs use a 14px border-radius (rounded.lg), creating a subtle softness that feels modern without sacrificing clarity. Input fields and secondary containers use 4px (rounded.DEFAULT), maintaining a more architectural feel. Cards and larger containers use 0px (no rounding), emphasizing their role as content vessels rather than decorative elements. Badges and pill-shaped elements use 50% border-radius (rounded.full), creating visual distinction for status indicators and promotio

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses a solid black background (rgb(0, 0, 0)), white text (rgb(255, 255, 255)), 14px padding horizontally and 16px vertically, and a 14px border-radius. On hover, the background shifts to primary-container (rgb(26, 26, 26)), creating a subtle darkening effect that signals state change without jarring the user. The transition uses cubic-bezier(0.25, 0.46, 0.45, 0.94) over 125ms (--animation-speed), providing responsive feedback. Button-secondary uses a transparent background with a 1px border in outline color (rgb(204, 204, 204)) and black text; on hover, the background fills with surface-container-high (rgb(230, 230, 230)) and the border darkens to on-surface-variant (rgb(51, 51, 51)). Both butto

Do's and Don'ts

**Do**

• Do use white space generously—minimum 40px (lg spacing) between major sections to prevent cognitive overload and maintain the minimalist aesthetic.
• Do apply the 14px border-radius consistently to all primary buttons and CTAs to signal affordance and interactivity.
• Do use the secondary accent color (#59b1ab) sparingly—reserve it for secondary CTAs and status indicators to maintain visual hierarchy.
• Do maintain 1px borders on cards and containers using the outline color (rgb(204, 204, 204)) to define structure without visual noise.
• Do apply the 125ms animation speed (cubic-bezier(0.25, 0.46, 0.45, 0.94)) to all hover and focus state transitions for consistent, responsive feedback.

**Don't**

• Don't use rounded corners on cards or structural containers—keep them at 0px to maintain the architectural precision of the design.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) to avoid creating visual heaviness that contradicts the minimalist philosophy.
• Don't use the tertiary accent color (#e8af57) for primary CTAs or navigation elements—reserve it exclusively for promotional badges and limited-time indicators.
• Don't reduce the 48px button height below this threshold, as it compromises touch-friendly interaction and accessibility on mobile devices.
• Don't mix font families—Inter is the sole typeface across all weights and sizes; avoid introducing secondary fonts that would fragment the visual identity.