OUTFIT by ++hellohello

Overview

OUTFIT by ++hellohello is a contemporary apparel brand that celebrates collective creativity through carefully designed signature collections. The visual system embodies 'Warm Minimalism'—a design philosophy that strips away unnecessary ornamentation while maintaining tactile warmth and human connection. The interface uses a cream-to-warm-gray palette (#ede4dd, #d2cac3) as the dominant canvas, punctuated by a bold, uncompromising red (#ff0001) that commands attention on CTAs and key brand moments. This aesthetic evokes a sense of refined, intentional craft: the UI feels like a gallery space where each product and interaction is given breathing room and respect.

The brand voice is direct, confident, and unpretentious. Sentences are short and declarative—no hedging, no marketing fluff. The vocabulary favors concrete nouns (fabric, fit, collection) over abstract adjectives. Example: 'Carefully designed apparel for those who know what they want.' The tone assumes the user is discerning and values substance over trend; every visual and textual element must earn its place.

Colors

The color system is built on a warm, neutral foundation with strategic accent deployment. The primary surface (#ede4dd—a warm cream) and its dim variant (#d2cac3—a soft taupe) create a sophisticated, gallery-like backdrop that feels both contemporary and approachable. This palette is grounded in the brand's tactile heritage: the colors evoke natural fibers and unbleached textiles.

Primary accent (#ff0001—pure red) is reserved exclusively for high-intent interactions: primary CTAs, error states, and brand-critical moments. It is never used decoratively. Secondary accent (#155dfc—a vivid blue) provides a supporting accent for secondary actions and informational highlights, creating visual hierarchy without competing with the primary red. Tertiary (#d2cac3) echoes the warm surface palette an

Typography

The type system uses NeueHaasGroteskTextPro exclusively—a geometric sans-serif that balances precision with warmth. The typeface's clean proportions and generous spacing reinforce the brand's minimalist aesthetic while its humanist details (slightly rounded terminals, open counters) prevent coldness. Display (60px, 700 weight, -0.04em tracking) is used sparingly for hero moments and major section breaks; it commands space through scale and weight, not decoration. Headline-lg (40px, 700 weight) anchors page sections; headline-md (28px, 700 weight) introduces subsections. Body text (16px, 400 weight, 24px line-height) is set with generous leading (1.5x) to ensure legibility on warm backgrounds and to reinforce the spacious, gallery-like aesthetic. Labels (14px, 700 weight) are used for butto

Layout

The layout system uses a 12-column grid with a fixed max-width of 960px, centered on the viewport. This constraint ensures that content remains intimate and readable while accommodating both narrow mobile viewports and desktop displays. The spacing scale is semantic: unit (4px) is the atomic increment; sm (12px) is used for tight component spacing (button padding, input field margins); md (24px) is the standard gutter between sections and the default padding for cards; lg (40px) separates major sections (hero to featured products, featured to testimonials); xl (64px) is reserved for full-page rhythm breaks. Whitespace is treated as a design material, not a void—the warm cream background (#ede4dd) is never 'filled' with content. Sections are separated by lg spacing (40px) minimum, creating

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. The elevation system uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on interactive elements and subtle surface lifts; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards, modals, and primary containers; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements (sticky headers, expanded modals, overlays). Shadows are warm-tinted (using rgba(0, 0, 0, ...) with the warm background creates a naturally warm shadow) and never pure black, maintaining the warm minimalist aesthetic. Cards use md ele

Shapes

The shape philosophy is 'Geometric Precision with Warmth'—sharp enough to feel contemporary and intentional, but never cold or sterile. Buttons use full border-radius (9999px) to create pill-shaped affordances that feel friendly and approachable; this contrasts with the geometric precision of the typeface, humanizing the interface. Cards and containers use lg radius (12px)—enough to soften corners without appearing playful or childish. Form inputs use DEFAULT radius (6px), a subtle rounding that signals interactivity without drawing attention. Badges and tags use md radius (8px) to create a di

Components

Action Elements Buttons are the primary interactive element and must always use either primary (#ff0001) or secondary (#155dfc) backgrounds to signal affordance. Primary buttons (background: #ff0001, text: #ede4dd, padding: 16px 32px, height: 48px, border-radius: 9999px, font-weight: 700) are used for high-intent actions (add to cart, checkout, submit). On hover, transition the background to #ff6b6b (primary-container) over 150ms using ease-out timing. On active/pressed state, darken to #cc0000. Secondary buttons (background: #d4d4d4, text: #101828, border: 1px solid #99a1af) are used for lower-priority actions (cancel, learn more, filter). On hover, shift background to #c0b8b0 (surface-container-high). All buttons must have a minimum touch target of 48px height and 44px width to meet

Do's and Don'ts

**Do**

• Do use primary red (#ff0001) exclusively for high-intent CTAs and error states—never use it decoratively or for secondary information.
• Do maintain md spacing (24px) between major sections to reinforce the gallery-like, spacious aesthetic.
• Do use NeueHaasGroteskTextPro at 700 weight for all interactive labels (buttons, badges, form labels) to ensure scanability.
• Do apply warm-tinted shadows (rgba(0, 0, 0, ...)) rather than pure black to maintain the warm minimalist palette.
• Do use full border-radius (9999px) on buttons exclusively—never apply pill shapes to cards, inputs, or other elements.
• Do test all interactive elements at 44px minimum height on mobile to ensure accessibility and usability.

**Don't**

• Don't use secondary blue (#155dfc) or tertiary cream (#d2cac3) for primary CTAs—primary red is the only acceptable color for high-intent actions.
• Don't add decorative elements, gradients, or textures to the warm cream background (#ede4dd)—whitespace is a design material.
• Don't use system fonts or fallback sans-serifs in place of NeueHaasGroteskTextPro; the typeface is essential to the brand identity.
• Don't apply shadows to buttons or use shadow-based depth on interactive elements—use color and state changes instead.
• Don't mix border-radius values within a single component category (e.g., don't use 8px radius on some buttons and 12px on others).
• Don't use near-black (#171717) or near-white (#fafafa) as primary surface colors—always use the warm cream (#ede4dd) or warm gray (#d2cac3) palette.