Lisa Folawiyo

Overview

Lisa Folawiyo is a luxury African fashion house that elevates hand embellishment to an art form, merging contemporary design with cultural heritage. The brand serves discerning customers who value craftsmanship, individuality, and the stories woven into each garment. The aesthetic is "Refined Minimalism with Artisanal Soul"—a design language that pairs clean, architectural typography and generous whitespace with rich, textured imagery of meticulously embellished pieces. The UI evokes sophistication, intentionality, and quiet confidence: every element is deliberate, nothing is superfluous.

The brand voice is measured, elegant, and deeply respectful of craft. Vocabulary leans toward precision ("hand embellishment," "contemporary elegance," "collections") rather than hyperbole. The tone is never rushed or casual; it speaks to the customer as a peer who understands quality. Example sentence in brand voice: "Each piece is hand-embellished by master artisans, transforming fabric into wearable art."

Colors

The color palette centers on a sophisticated neutral foundation—pure white (#ffffff) surfaces paired with a deep charcoal primary (#212529)—creating maximum contrast for legibility and visual clarity. This monochromatic core reflects the brand's commitment to letting the embellished garments themselves become the focal point. Secondary grays (#666666, #6c757d) provide subtle hierarchy and support, while tertiary tones (#2b3135) add depth to interactive states. The surface stack uses precise increments: surface-container-low (#f0f0f0) for subtle backgrounds, surface-container (#ececec) for mid-tier containers, and surface-container-highest (#d0d0d0) for elevated interactive states. Primary (#212529) is deployed on all CTAs ("Shop," "Contact"), links, and active states—it is the signature ac

Typography

The type system uses Century Gothic exclusively—a geometric sans-serif with distinctive letterforms that convey modernity and precision. Display (60px, 700 weight, -0.04em tracking) anchors hero moments with commanding presence; Headline-lg (40px, 600 weight) structures major sections; Headline-md (28px, 600 weight) introduces subsections; Title-lg (20px, 600 weight) labels key content areas. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) carry narrative content with 0.01–0.02em positive tracking to enhance readability in the brand's minimal aesthetic. Label-md (14px, 600 weight) and Label-sm (12px, 500 weight) handle UI labels and metadata. All text over images or complex backgrounds applies text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensur

Layout

The layout follows a 12-column grid system with a fixed container max-width of 1500px, ensuring content remains scannable on all screens. Spacing is semantic and hierarchical: the unit is 8px, with scales of xs (4px), sm (12px), md (24px), lg (40px), and xl (64px). Section separation uses lg spacing (40px) to create breathing room between major content blocks; card padding uses md spacing (24px) for internal breathing; gutter spacing (24px) defines horizontal margins. The design philosophy is "generous whitespace"—negative space is treated as a design element, not wasted real estate. Container max-width of 1500px prevents lines from becoming too long, maintaining a comfortable reading rhythm around 50–75 characters per line. Margins and padding are never arbitrary; every spacing decision r

Elevation & Depth

Depth is conveyed through a restrained shadow system that respects the brand's minimalist aesthetic. Level 1 (Base): flat surfaces with no shadow, relying on 1px borders at outline-variant (#c5d2e6) for definition. Level 2 (Standard Cards/Dropdowns): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow that lifts elements 8px from the base without drama. Level 3 (Elevated/Hover States): box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), a slightly deeper shadow that signals interactive elevation. All shadows use a 0 vertical offset and 3px blur radius for a diffuse, natural light effect. Hover sta

Shapes

The shape philosophy is "Architectural Precision"—rounded corners are used sparingly and purposefully, never decoratively. Buttons and inputs use rounded.lg (1rem / 16px) for a modern, approachable feel that softens hard edges without appearing playful. Cards and containers use rounded.md (0.75rem / 12px) for subtle definition. Dropdowns and small UI elements use rounded.DEFAULT (0.5rem / 8px) for consistency. The smallest interactive elements (badges, tags) use rounded.full (9999px) for pill-shaped affordance. This graduated scale creates visual hierarchy: larger radius = more prominent, more

Components

Action Elements Buttons follow a strict hierarchy. Primary buttons (button-primary) use {colors.primary} (#212529) background with {colors.on-primary} (#ffffff) text, 12px 24px padding, 48px height, and 1px border at primary. On hover (button-primary-hover), the background shifts to {colors.primary-container} (#e9ecef) with a 1px border at outline (#505050), signaling state change without losing visual weight. Secondary buttons (button-secondary) are transparent with a 1px outline border, allowing the primary button to dominate CTAs. Ghost buttons (button-ghost) have no border or background, used for tertiary actions like "Learn More." All buttons use {typography.label-md} (14px, 600 weight) and apply a transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth state ch

Do's and Don'ts

**Do**

• Do use the primary color (#212529) exclusively on CTAs and active states—it is the brand's signature accent and must remain rare and impactful.
• Do maintain generous whitespace (lg spacing, 40px) between major sections to reflect the brand's minimalist, intentional aesthetic.
• Do apply 1px borders at outline-variant (#c5d2e6) to all cards and containers for architectural clarity and definition.
• Do use Century Gothic exclusively for all typography—its geometric precision is core to the brand identity.
• Do transition all interactive states over 150ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, predictable feedback.
• Do prioritize legibility by applying text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on text over images or complex backgrounds.

**Don't**

• Don't use rounded corners larger than 1.5rem (xl)—excessive rounding undermines the brand's refined, architectural positioning.
• Don't apply shadows deeper than {elevation.lg} (0 3px 10px rgba(0, 0, 0, 0.2))—the brand favors subtle depth, not dramatic layering.
• Don't introduce accent colors beyond primary (#212529), secondary (#666666), and tertiary (#2b3135)—the palette is intentionally restrained.
• Don't use system fonts or generic sans-serifs—Century Gothic is non-negotiable and must be loaded via @font-face.
• Don't mix spacing scales arbitrarily; always reference the semantic tokens (xs, sm, md, lg, xl) to maintain rhythm.
• Don't animate state changes faster than 150ms or slower than 300ms—the brand values responsiveness without frenetic motion.