DripModa

Overview

DripModa is a premium athleisure retailer that positions performance sportswear as a lifestyle statement. The brand serves athletes and lifestyle enthusiasts who demand both technical excellence and aesthetic sophistication. The design system embodies 'Minimalist-Athletic' aesthetics: clean geometric layouts with zero border-radius on primary elements, a monochromatic foundation (white #ffffff, near-black #212120, light grays #e4e4e0–#d6d6d1), and a signature crimson accent (#d50602) that punctuates CTAs and key interactions. The visual language evokes precision, movement, and understated confidence—evoking the feeling of high-performance gear meeting contemporary design rigor.

The brand voice is direct, authoritative, and performance-focused. DripModa speaks in declarative statements about product capability and lifestyle aspiration, never apologetic or overly casual. Vocabulary emphasizes technical terms ("pulse runner," "platinum, steel blue and titanium") and action-oriented language. Example sentence in brand voice: "Cleens pulse runner now landing in platinum, steel blue and titanium—engineered for velocity."

Colors

The color system is built on a stark monochromatic foundation with a single, high-saturation accent. Primary surface is pure white (#ffffff), with a carefully calibrated gray scale for depth: surface-dim (#f2f2f2), surface-container (#e4e4e0), surface-container-high (#d6d6d2), and inverse-surface (#121212) for dark overlays. The on-surface text color is near-black (#212120) at 75% opacity for body copy, with on-surface-variant (#6f6f6a) for secondary text and disabled states.

The brand's signature accent is crimson (#d50602), used exclusively on primary CTAs ("Shop Now" buttons), active states, and error messaging. This high-saturation red creates visual urgency and brand recognition against the neutral palette. Secondary color is the near-black (#212120) itself, used for buttons, navigat

Typography

The type system uses a single typeface family—GeneralSans—across all scales, reinforcing the minimalist-athletic brand identity. GeneralSans Medium (500 weight) serves as the default body weight, with GeneralSans Semibold (600 weight) for emphasis and labels. Display (60px, 500 weight, -0.02em letter-spacing) is reserved for hero headlines and major section titles; headline-lg (40px, 500 weight) for subsection headers; headline-md (28px, 500 weight) for card titles. Body-lg (18px, 500 weight) and body-md (16px, 500 weight) handle content hierarchy, while label-md (14px, 600 weight, 0.01em letter-spacing) and label-sm (12px, 600 weight, 0.05em letter-spacing) are used for buttons, badges, and UI labels. All type is set with line-height 130% (1.3 unitless) at the body level, tightening to 1.

Layout

The layout system uses a 12-column grid with a max-width of 1280px (160rem), centered with 0px margin on desktop. Spacing follows an 8px unit scale: xs (4px), sm (12px), md (24px), lg (40px), xl (64px). Section separation uses lg spacing (40px) vertically; card-to-card horizontal gutters use md spacing (24px). The hero section spans full-width with zero padding, allowing product imagery to bleed edge-to-edge; content overlays use md padding (24px) inset from edges. Product grids use 16px horizontal spacing (grid-desktop-horizontal-spacing) and 32px vertical spacing (grid-desktop-vertical-spacing) between items. On mobile, spacing compresses to sm (12px) horizontal and md (24px) vertical. Container max-width is enforced at 1280px for all content sections except hero and full-bleed imagery.

Elevation & Depth

Depth in DripModa is achieved through flat, graphic layering rather than soft shadows. The primary elevation method is background color contrast: Level 1 (Base) uses white (#ffffff) or surface-dim (#f2f2f2); Level 2 (Cards/Containers) uses surface-container (#e4e4e0) or surface-container-high (#d6d6d2); Level 3 (Modals/Overlays) uses inverse-surface (#121212) at 95% opacity with a 1px border at outline-variant (#d6d6d1). When shadows are necessary (e.g., collection cards), use box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) for subtle depth. Product cards and interactive elements use a 1px solid bor

Shapes

The shape philosophy is 'Geometric Precision'—sharp, right-angled forms that reinforce the athletic and technical brand identity. All primary UI elements (buttons, inputs, cards) use 0px border-radius (square corners), creating a stark, architectural aesthetic. Secondary elements like badges and pills use full (9999px) border-radius for contrast and visual softness. Product images and collection cards maintain 0px radius to align with the grid structure. The only exception is interactive hover states, which may introduce a subtle 0.75rem (md) radius on cards to signal interactivity without bre

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use secondary color (#212120) background with white text, 48px height, 12px vertical / 24px horizontal padding, and 0px border-radius. On hover, background transitions to on-primary-fixed-variant (#3b3b38) over 200ms. Accent buttons use primary color (#d50602) background with white text; on hover, darken to #c40501. All buttons use label-md typography (14px, 600 weight). Secondary buttons are transparent with a 1px border at secondary (#212120); on hover, fill with surface-container-high (#d6d6d2). Apply a 2px focus ring at primary (#d50602) on keyboard focus, inset by 2px.

Containers & Surfaces Cards use white (#ffffff) background with 0px border-radius and no shadow by default. On hover, background tran

Do's and Don'ts

**Do**

• Do use the crimson accent (#d50602) sparingly and intentionally—only on primary CTAs, error states, and brand-critical interactions to maintain visual hierarchy and urgency.
• Do maintain zero border-radius on all primary UI elements (buttons, inputs, cards) to reinforce the geometric-precision aesthetic and athletic brand identity.
• Do apply label-md (14px, 600 weight) typography to all button text and use sentence case (e.g., 'Shop Now', not 'SHOP NOW') for a contemporary, confident tone.
• Do use the full gray scale (surface-dim through surface-container-highest) to create depth through color contrast rather than relying on shadows; shadows are minimal and used only for elevation Level 3.
• Do enforce the 8px spacing unit scale rigorously: use md (24px) for section gutters, lg (40px) for major section separation, and sm (12px) for component-level spacing.

**Don't**

• Don't use rounded corners on primary buttons, inputs, or cards—this breaks the geometric-precision aesthetic and dilutes the athletic brand identity.
• Don't apply the crimson accent (#d50602) to non-interactive elements or backgrounds; reserve it exclusively for CTAs, focus states, and error messaging to maintain visual clarity.
• Don't use drop shadows on cards or containers as the primary depth mechanism; use background color contrast and 1px borders instead to maintain the flat, graphic aesthetic.
• Don't mix typeface families or use serif fonts; GeneralSans is the sole typeface across all scales to reinforce minimalist consistency.
• Don't apply opacity or transparency to surface colors; use the full color scale (surface-dim, surface-container, etc.) instead to maintain color integrity and accessibility.