AFLALO

Overview

AFLALO is a luxury ready-to-wear brand founded by Yael Aflalo, specializing in timeless, finely crafted women's clothing including outerwear, sweaters, and dresses. The design system embodies Architectural Minimalism—a refined aesthetic that prioritizes clarity, precision, and editorial sophistication. The UI evokes a sense of refined restraint: clean white surfaces (#ffffff) anchored by a deep black primary (#111111), with carefully placed navy (#4D5A89) and rose accents (#EE80B6) that punctuate key interactions. The brand personality is understated yet confident, speaking to customers who value quality over trend. Voice: precise, measured, never promotional. Example: "Crafted from Italian wool with hand-finished seams—designed to endure."

Colors

The color palette operates on a principle of elegant constraint. Primary (#111111) is the authoritative black used for all body text, primary CTAs (buttons), and structural elements—it commands attention without aggression. On-primary (#ffffff) ensures maximum contrast for accessibility and legibility at 14px body copy. Secondary (#4D5A89) is a sophisticated navy deployed for secondary actions, hover states on tertiary elements, and data visualization; it provides visual hierarchy without competing with primary. Tertiary (#EE80B6), a refined rose, is reserved for accent highlights, badges, and premium tier indicators—used sparingly to signal exclusivity. The surface stack ranges from pure white (#ffffff) at surface-bright down to #d8dadf at surface-container-highest, providing subtle depth

Typography

The type system centers on FoundersGrotesk, a geometric sans-serif that conveys contemporary sophistication while maintaining editorial clarity. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; headline-lg (40px, 700, -0.02em) frames section titles and product category headers; headline-md (28px, 700, -0.01em) organizes subsections. Body-lg (18px, 400) and body-md (16px, 400) form the reading hierarchy for product descriptions and long-form content, both set at 28px and 24px line-height respectively to ensure comfortable scanning. Label-md (14px, 600, 0.06em) and label-sm (12px, 500, 0.08em) are used for UI labels, button text, and metadata—the increased letter-spacing (0.06–0.08em) adds visual separation and reinforces their functional role. All

Layout

The layout operates on a 12-column grid with a fixed max-width of 1280px, centered on viewport. Breakpoints are defined at 370px (us), 680px (sm), 768px (md), 1024px (lg), 1280px (xl), and 1536px (2xl) to accommodate mobile-first responsive design. The gutter is consistently 24px, applied as padding on container edges and margin between grid columns. Section separation uses lg spacing (40px) for major rhythm breaks (hero to featured products, featured to editorial), while md spacing (24px) separates cards within a grid and form fields within a section. Container max-width is 1280px; on screens below 680px, containers expand to full width minus 24px horizontal padding. White-space is treated as a design material: generous margins around typography (40px above headlines, 24px below) create v

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids visual heaviness. Level 1 (Base): flat white surface (#ffffff) with no shadow, establishing the default plane. Level 2 (Cards & Inputs): 0 1px 4px rgba(0,0,0,0.12) creates subtle separation for product cards, input fields, and list items—this shadow is barely perceptible but signals interactivity. Level 3 (Modals & Overlays): 0 4px 40px rgba(25,27,30,0.2) lifts modals and recommendation dialogs above the page, with a semi-transparent backdrop (rgba(0,0,0,0.5)) to focus attention. Hover states on cards transition to md shadow (0 6

Shapes

The shape philosophy is Architectural Precision—minimal rounding that respects the grid and maintains legibility. Buttons and primary inputs use rounded.DEFAULT (0.5rem / 8px), a subtle curve that softens hard edges without introducing organic warmth. Cards and secondary containers use rounded.DEFAULT as well, maintaining visual consistency. Modals and elevated surfaces use rounded.DEFAULT (8px) for consistency with the button language. The full radius (9999px) is reserved for badges and pill-shaped elements (e.g., circular avatars, toggle switches). No element uses 0px border-radius; even the

Components

Action Elements Buttons are the primary interaction vehicle. button-primary (48px height, 16px vertical / 24px horizontal padding, 0.5rem radius) uses #111111 background with #ffffff text at label-md weight (14px, 600). On hover, the background transitions to primary-container (#262735) over 200ms, providing clear feedback without color shift. button-secondary mirrors the primary button's dimensions but uses a transparent background with a 1px solid #cccccc border and #111111 text; on hover, the background fills with surface-container-high (#e0e2e8). Both buttons disable with opacity: 0.5 and cursor: not-allowed.

Containers & Surfaces Cards (card component) are 24px padded containers with 0.5rem radius, 1px solid #cccccc border, and sm shadow (0 1px 4px rgba(0,0,0,0.12)). On hover

Do's and Don'ts

**Do**

• Do use primary (#111111) for all body copy, CTAs, and structural elements—it is the brand's authoritative voice.
• Do maintain 24px gutter spacing and 40px section separation to create visual breathing room and guide hierarchy.
• Do apply 200ms ease transitions on all interactive state changes (hover, focus, active) to signal interactivity without jarring motion.
• Do use FoundersGrotesk at 14px body-md with 24px line-height for product descriptions and long-form content to ensure comfortable reading.
• Do reserve tertiary (#EE80B6) for accent highlights and premium indicators—use it sparingly to signal exclusivity.

**Don't**

• Don't use rounded corners larger than 1.5rem (xl) on any component; the aesthetic demands precision, not organic softness.
• Don't apply shadows larger than lg (0 4px 40px rgba(25,27,30,0.2)) on any element—depth is subtle and restrained.
• Don't mix FoundersGrotesk with system fonts or fallbacks; always declare the full font stack with FoundersGrotesk first.
• Don't use color transitions or gradients on backgrounds; the palette is flat and architectural.
• Don't reduce letter-spacing below 0em on body copy; maintain readability and the refined, editorial tone.