LH Group

Overview

LH Group is a luxury fashion wholesale and retail powerhouse operating across Greece and Cyprus, with an in-house marketing and PR division that transforms brand strategy into immersive retail experiences. The design system embodies 'Editorial Minimalism'—a refined aesthetic that pairs stark black-and-white typography with generous whitespace, architectural grid systems, and high-contrast imagery to convey sophistication and precision. The UI evokes the sensibility of a luxury fashion publication: clean, uncluttered, and unapologetically bold. Voice: direct, professional, and authoritative. The brand speaks in declarative statements without flourish—example: 'Tailor-made activations that turn retail spaces into immersive brand environments.' Every word serves the narrative; every pixel serves the hierarchy.

Colors

The color palette is deliberately monochromatic, anchored by a deep ink black (#0b0b0b) and pristine white (#ffffff), with a carefully calibrated grey scale for supporting elements. Primary (#0b0b0b) is the signature accent—used on CTAs, active states, and all interactive elements that demand user attention. It appears on the 'Contact us' button and all navigation underlines, establishing a clear visual contract: black means action. Secondary (#6b6b70) and tertiary (#9a9a9a) greys create visual hierarchy in body copy, labels, and disabled states, ranging from 6b6b70 for primary text to 9a9a9a for tertiary information. The outline color (#e4e4e0) defines all structural borders and dividers, creating a subtle grid that organizes content without visual noise. In dark sections (background: #0b

Typography

The type system is built on two typefaces: Archivo Black for all display, headline, and title levels (font-weight: 400, self-hosted via WOFF2), and Archivo for body and label text (weights 400, 500, 600). Display text (94px, line-height 90px, letter-spacing -0.01em) commands attention in hero sections; headline-lg (72px) and headline-md (48px) maintain the same tight leading and negative letter-spacing to create visual compression and authority. Body text (16–18px, line-height 26–29px) is set in regular weight with generous leading for readability over long passages. Labels and eyebrows (11px, letter-spacing 0.32em, uppercase) use Archivo at 400 weight with extreme letter-spacing to create visual separation and scanability. All type is rendered with -webkit-font-smoothing: antialiased for

Layout

The layout system uses a 12-column grid with a fixed max-width of 1320px (--max: 1320px), centered via margin: 0 auto. Horizontal padding is fluid, defined as clamp(20px, 4vw, 56px), ensuring the design breathes on mobile (20px gutters) while expanding to 56px on desktop. Sections are separated by clamp(80px, 10vw, 150px) vertical padding, creating a rhythm that feels spacious without excess. The grid philosophy is 'architectural'—content aligns to invisible columns, and card layouts (hub-cards, pillars) use explicit grid-template-columns declarations (e.g., repeat(3, 1fr) for three-column grids on desktop, collapsing to 1fr on mobile at max-width: 600px). Whitespace is semantic: lg spacing (40px) separates major sections, md spacing (24px) groups related content, and sm spacing (12px) tig

Elevation & Depth

Depth is achieved through a restrained shadow system and strategic use of borders rather than layered blur effects. Level 1 (Base): flat white background (background: #ffffff) with no shadow; borders define structure via 1px solid lines at #e4e4e0. Level 2 (Cards & Hover States): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied on hover to hub-cards and interactive elements, creating a subtle lift. Level 3 (Modals & Overlays): box-shadow: 0 18px 40px rgba(0, 0, 0, 0.07) for the most prominent surfaces. The header uses a pseudo-element with backdrop-filter: blur(10px) and background: rgba(255,

Shapes

The shape philosophy is 'Architectural Precision'—minimal rounding that respects the grid and emphasizes structure over softness. Border-radius is applied sparingly: buttons and inputs use border-radius: 4px (0.25rem / DEFAULT), creating a subtle break from hard edges without compromising the geometric aesthetic. Cards and larger containers use border-radius: 0px (no rounding), maintaining sharp corners that align with the grid. The only exception is badges and pill-shaped elements, which use border-radius: 9999px (full) for visual distinction. This hierarchy—sharp cards, slightly-rounded inpu

Components

Action Elements Buttons use Archivo Black at 11px with letter-spacing: 0.32em (uppercase), padding: 14px 26px, and border: 1px solid. Primary buttons (button-primary) have background: #0b0b0b, color: #ffffff, and transition to background: #2a2a2a on hover (button-primary-hover) with a 0.3s ease timing. Secondary buttons (button-secondary) are transparent with a 1px border and text color #0b0b0b, inverting on hover to background: #e4e4e0. All buttons use cursor: pointer and include focus-visible states with box-shadow: 0 0 0 3px rgba(11, 11, 11, 0.08) for keyboard navigation.

Containers & Surfaces Hub-cards (card-hub) are full-width containers with no padding, no border-radius, and no shadow by default. On hover (card-hub-hover), they receive box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1

Do's and Don'ts

**Do**

• Do use Archivo Black for all headlines and display text; it is the brand's typographic signature and must never be substituted with a sans-serif fallback.
• Do maintain the 1px border structure on all cards and inputs—borders define the grid and create visual hierarchy without relying on color.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover to interactive elements; this is the only shadow used for depth feedback.
• Do use the full grey scale (#6b6b70, #9a9a9a, #b9b9b9) for supporting text and disabled states; never use pure black for body copy.
• Do respect the clamp() spacing system (clamp(20px, 4vw, 56px)) for horizontal padding; it ensures the design scales responsively without breakpoint-heavy media queries.

**Don't**

• Don't use rounded corners on cards or major containers; the sharp 0px radius is essential to the architectural aesthetic.
• Don't apply multiple shadows or blur effects; the design system uses a single, restrained shadow scale (0 3px 8px or 0 18px 40px only).
• Don't substitute Archivo with system fonts or generic sans-serif; the self-hosted WOFF2 files are critical to brand consistency.
• Don't use color to convey hierarchy; use typography scale, weight, and letter-spacing instead—the monochromatic palette demands typographic precision.
• Don't add decorative elements or gradients; the brand voice is direct and unadorned—every visual element must serve a functional purpose.