Chello

Overview

Chello is a contemporary fashion e-commerce platform specializing in occasion-driven, elevated apparel for the modern woman. The brand serves discerning customers across Southeast Asia who value editorial curation, refined minimalism, and intentional design. The aesthetic movement is "Warm Minimalism"—a deliberate rejection of cold, stark interfaces in favor of a serene, editorial experience anchored in cream, taupe, and soft grays (surface palette: #ffffff, #faefe3, #f5f0eb) paired with restrained accent colors. The UI evokes the feeling of browsing a luxury print magazine: generous whitespace, deliberate typography hierarchy, and subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) create depth without visual noise. Users feel unhurried and respected, never pressured.

Chello's voice is refined, conversational, and grounded. The brand avoids hyperbole and trend-chasing language; instead, it speaks with quiet confidence about craft, occasion, and personal expression. Vocabulary patterns favor specificity over marketing jargon: "Padded Toga Asymmetrical Top" rather than "statement piece," "Shop by Occasion" rather than "curated collections." The tone is warm but never familiar, knowledgeable but never condescending. Example sentence in brand voice: "Each piece is designed for the moments that matter—select by occasion, not by season."

Colors

The color system is built on a warm, neutral foundation that prioritizes calm and editorial clarity. The surface stack (surface: #ffffff, surface-container-low: #faefe3, surface-container: #f5f0eb, surface-container-high: #eeeeee) creates subtle visual hierarchy through incremental warmth shifts, allowing cards and containers to breathe without harsh contrast. On-surface text is set to #6e6963 (a warm taupe), which maintains WCAG AA contrast (4.8:1) against white while avoiding the coldness of pure black. The outline and outline-variant tokens (#dddddd, #d0d0d0) define borders and dividers with restraint, appearing in custom select dropdowns (border: 1px solid #d0d0d0, box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) and input fields. Primary accent is #36a2f6 (a clear, confident blue), reserved

Typography

The type system uses Gill Sans Nova as the primary typeface (fallback: Gill Sans, sans-serif), a humanist sans-serif that conveys approachability and editorial sophistication. The hierarchy spans eight levels: display (56px, 400 weight, -0.02em tracking) for hero statements; headline-lg (36px, 700 weight) for section titles like "THE CHELLO DIFFERENCE"; headline-md (28px, 600 weight) for subsections; title-lg (20px, 600 weight) for card headers; body-lg (18px, 400 weight, 28px line-height) for long-form content; body-md (16px, 400 weight, 24px line-height) for standard paragraph text; label-md (14px, 600 weight, 0.02em tracking) for buttons and form labels; and label-sm (12px, 500 weight, 0.03em tracking) for badges and helper text. The progression communicates information hierarchy throug

Layout

The layout follows a 12-column fluid grid with a max-width of 1200px, centered on the viewport. The spacing scale is semantic: unit (8px) is the base increment; xs (4px) and sm (12px) are used for tight component padding; md (24px) is the standard gutter and card padding; lg (40px) separates major sections; and xl (64px) creates breathing room between hero and content blocks. Container max-width is enforced at 1200px to prevent line-length from exceeding 80 characters on large displays, maintaining readability. Whitespace is treated as a design material, not a void—sections are separated by lg spacing (40px) vertically, and horizontal gutters use md spacing (24px) on desktop, reducing to sm (12px) on mobile. The grid is responsive: on tablet (768px–991px), columns compress to 8; on mobile

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the heavy, dramatic shadows of Material Design. Three elevation levels are defined: sm (0 1px 1.5px 0 rgba(7, 6, 6, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)) for subtle card separation and input fields; md (0 3px 8px rgba(0, 0, 0, 0.15)) for hovered cards, buttons, and dropdown panels; and lg (0px 0px 10px rgba(0, 0, 0, 0.4)) for modals and overlays. The shadow blur radius and spread are calibrated to feel soft and diffuse rather than sharp, reinforcing the editorial, magazine-like aesthetic. Hover states transition smoothly (200ms

Shapes

The shape philosophy is "Restrained Geometry"—border-radius values are minimal and functional, never decorative. The rounded scale progresses from sm (2px) for subtle softening on inputs and small UI elements, to DEFAULT (3px) for standard buttons and form controls, to md (4px) for slightly larger interactive surfaces, to lg (5px) for cards and containers, and xl (8px) for modals and prominent surfaces. Full (9999px) is used only for badge pills and avatar circles. The rationale is clarity: small radius values (2–5px) maintain the editorial, structured feel of the brand without introducing the

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses background: #36a2f6, text-color: #ffffff, padding: 12px 24px, height: 44px, rounded: 3px, and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover, the background transitions to #1e88e5 over 200ms (transition: background-color 200ms ease-in-out), providing clear feedback. The button-secondary variant uses a transparent background with a 1px border (#dddddd) and text-color: #666666; on hover, it shifts to background: #eeeeee. Both variants use label-md typography (14px, 600 weight, 0.02em tracking) to ensure text is legible and appropriately weighted.

Containers & Surfaces Cards are the primary container for product listings, testimonials, and content blocks. The card component defines b

Do's and Don'ts

**Do**

• Do use the warm neutral surface stack (#ffffff, #faefe3, #f5f0eb) to create visual hierarchy through incremental color shifts, never through contrast alone.
• Do apply md spacing (24px) between major sections and lg spacing (40px) for hero-to-content transitions to maintain the editorial rhythm.
• Do reserve the primary accent (#36a2f6) exclusively for interactive elements—CTAs, focus states, and links—to preserve its signaling power.
• Do transition all hover states over 200ms (ease-in-out) to provide smooth, predictable feedback without feeling sluggish.
• Do use Gill Sans Nova at body-md (16px, 400 weight, 24px line-height) as the default paragraph text, ensuring 1.5 line-height minimum for readability.
• Do apply subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and dropdowns to create depth without visual heaviness.
• Do use border-radius values between 2px and 5px for functional softening; avoid larger radii that would compromise the structured, editorial aesthetic.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text; always use on-surface (#6e6963) or on-surface-variant (#8b8680) to maintain warmth and reduce eye strain.
• Don't apply shadows to text, badges, or inline elements—elevation is reserved for containers and interactive surfaces only.
• Don't exceed the container max-width of 1200px; this preserves line-length and prevents the layout from feeling stretched on ultra-wide displays.
• Don't use the primary accent (#36a2f6) for non-interactive elements like backgrounds or decorative frames; reserve it exclusively for CTAs and focus states.
• Don't apply border-radius values larger than 5px to cards or buttons; this compromises the structured, editorial feel of the brand.
• Don't use transitions longer than 200ms for hover states; faster feedback (150–200ms) feels responsive, while slower transitions feel sluggish.
• Don't hardcode color values in component styles; always use CSS custom properties (e.g., {colors.primary}) to ensure consistency and enable future theme variations.