CAPS Apparel

Overview

CAPS Apparel is a contemporary headwear and lifestyle brand headquartered in Amsterdam, serving a global audience that values authenticity, craftsmanship, and personal expression. The design system embodies 'Architectural Minimalism'—a philosophy that strips away ornament to reveal essential structure, using stark contrast (black #333333 against white #ffffff) and deliberate negative space to communicate confidence and clarity. The brand's visual language evokes a sense of refined restraint: every pixel serves a purpose, every interaction feels intentional, and the interface recedes to let the product and user story take center stage. The emotional response is one of understated sophistication—users feel they are engaging with a brand that respects their intelligence and time.

The CAPS voice is direct, unpretentious, and grounded in European sensibility. Vocabulary leans toward concrete nouns (cap, story, craft, drop) rather than abstract marketing language. The tone avoids breathlessness; instead, it speaks with the calm authority of someone who knows their craft. Example sentence in brand voice: 'Drop 001 launches Friday. Fifty pieces. No restock.' This brevity and specificity signal that CAPS values substance over hype, aligning with the tagline 'Character Over Hype. Since 2017.'

Colors

The CAPS color system is built on a monochromatic foundation with surgical accent colors. Primary (#333333, rgb(51, 51, 51)) is the workhorse neutral—used for body text, button backgrounds, borders, and interactive states. It is not pure black (#000000) but a softer charcoal that reduces eye strain on extended viewing while maintaining authority. On-primary (#ffffff) provides maximum contrast for text and icons on dark surfaces. The surface stack ranges from bright white (#ffffff) down to a warm off-white (#fafafa, used as surface-dim) and progressively darker grays (#efefef, #e5e5e5, #c2c2c2) for container hierarchy. On-surface (#111111) is the primary text color, slightly warmer than pure black to feel approachable. Secondary (#c0392b, a deep crimson) is reserved for alerts, badges, and

Typography

The CAPS type system is anchored in Montserrat, a geometric sans-serif that conveys modernity without pretension. Headings use fontWeight: 600 with letterSpacing: 0.05em (uppercase tracking) to create visual rhythm and reinforce the brand's architectural precision. Display (56px, 700 weight, -0.02em tracking) is reserved for hero moments and major section breaks; headline-lg (40px, 600 weight) anchors page sections; headline-md (28px, 600 weight) introduces subsections. Body text uses fontWeight: 400 at 14px (body-md) or 16px (body-lg) with lineHeight: 20px or 24px respectively, ensuring comfortable reading at arm's length. Labels use 600 weight with 0.18em letter-spacing (uppercase transformation) to signal interactivity and hierarchy. The label-md (14px, 600 weight, 0.18em tracking) is a

Layout

CAPS uses a fluid 12-column grid with a container max-width of 1280px (--container-max-width: 1280px), allowing content to breathe on large screens while maintaining focus. The gutter (horizontal padding) scales responsively: 24px on mobile (--container-gutter: 1.25rem), 32px on tablet (2rem), and 48px on desktop (3rem), creating a rhythm that feels spacious without wasting real estate. Section vertical spacing (--section-vertical-spacing) is 40px on mobile and 64px on desktop, establishing a 2.5:1 ratio that guides the eye through content blocks. The spacing scale uses semantic tokens: xs (4px) for micro-interactions, sm (12px) for component internals, md (24px) for card padding and button spacing, lg (40px) for section separation, and xl (64px) for major layout breaks. White-space is tre

Elevation & Depth

Depth in CAPS is conveyed through subtle shadow and strategic layering rather than dramatic effects. The elevation system uses three tiers: sm (0 1px 3px rgba(0, 0, 0, 0.2)) for hover states on small components like buttons and badges, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and dropdown panels, and lg (0 2px 12px rgba(0, 0, 0, 0.15)) for modals and overlays. Shadows are soft and diffuse (blur radius 8–12px) to avoid harsh edges, maintaining the brand's refined aesthetic. Flat surfaces (inputs, list items) use no shadow by default, gaining elevation only on interaction (hover state applie

Shapes

CAPS embraces 'Geometric Precision'—a shape philosophy that favors sharp, right-angled corners (border-radius: 0–4px) for buttons and inputs, with selective rounding for secondary elements. Buttons use border-radius: 0.0rem (no rounding, 0px), reinforcing the architectural aesthetic and making CTAs feel decisive and modern. Cards and containers use border-radius: 4px (0.25rem), a subtle softening that prevents the interface from feeling cold or rigid. Modals and dropdown panels use border-radius: 8px (0.5rem), creating a gentle frame without compromising legibility. Badges and circular UI elem

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses backgroundColor: rgb(51, 51, 51) (#333333), textColor: #ffffff, padding: 20px 16px, height: 48px, and border-radius: 0px. The uppercase label (fontWeight: 600, letterSpacing: 0.18em) signals interactivity. On hover, button-primary-hover shifts backgroundColor to #4d4d4d (primary-container) with a smooth transition (all 200ms ease). button-secondary uses a transparent background with a 1px solid #cccccc border, allowing secondary actions to coexist without visual dominance. Focus states add a 2px outline at rgba(51, 51, 51, 0.3) (10% opacity primary), visible at 2px offset, ensuring keyboard navigation is always clear.

Containers & Surfaces Cards (card component) use backgroundColor: #ffffff, border:

Do's and Don'ts

**Do**

• Do use Montserrat 600 weight with 0.05em letter-spacing for all headings to maintain the geometric, architectural feel.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to elevated surfaces (cards, dropdowns) for consistent depth.
• Do keep button border-radius at 0px (sharp corners) for primary CTAs to signal urgency and decisiveness.
• Do use the primary color (#333333) for body text and interactive elements; it is the visual anchor of the system.
• Do scale spacing proportionally: 24px gutter on mobile, 32px on tablet, 48px on desktop, maintaining rhythm across breakpoints.
• Do reserve secondary (#c0392b) and tertiary (#00bbff) colors for alerts and accents; overuse dilutes their impact.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for body text; use #111111 (on-surface) and #ffffff (surface) respectively for reduced eye strain.
• Don't apply border-radius > 4px to buttons or primary inputs; it softens the brand's architectural precision.
• Don't mix typefaces; Montserrat is the sole font family for headings and body, ensuring visual cohesion.
• Don't use shadows with blur > 12px or spread > 0px; they create a dated, skeuomorphic appearance.
• Don't apply color to more than 3 accent colors (primary, secondary, tertiary); additional colors fragment the visual language.
• Don't use opacity < 0.3 for interactive elements (buttons, links); they become invisible and fail accessibility standards.