# membersexperience-create.lacoste.com — Design System Reference

## 1. Visual Theme & Atmosphere

Luxury retail restraint with a heritage teal signature. Lacoste's members experience microsite strips away everything to focus on membership conversion — white and light-gray surfaces, dark charcoal text, and a single teal (#05687B) that carries 80 years of brand equity. Figtree provides modern geometric warmth without the genericness of Inter. The UI component token system (--ui-color-*) reveals an enterprise design system underneath.

---

## 2. Color Palette & Roles

- **background**: rgb(255, 255, 255)
- **surfaceLight**: rgb(238, 238, 238) — #eee for card backgrounds
- **text**: rgb(68, 68, 68) / rgb(51, 51, 51)
- **teal**: rgb(5, 104, 123) / #05687B — Lacoste teal brand CTA
- **overlay**: rgba(34, 34, 34, 0.2) — modal/scrim
- **white**: #fff
- **whiteVariant**: #f0f0f0

*Notably absent:* Brand green (Lacoste green/yellow-green)

---

## 3. Typography Rules

**Typeface(s):** Figtree, Arial (system fallback)

**Tech stack fonts hint:** (no framework detected)

- **note**: Figtree — a geometric sans with rounded terminals, friendlier than Inter but equally clean. Labels likely uppercase with tracking.

---

## 4. Component Stylings

**Border Radius:** Likely soft (rounded-md to rounded-xl) — enterprise component system

**Shadows:** Component system includes multi-layer box shadows for overlays and modals

**Gradients:** None

Components lean on spacing and typography for distinction rather than decorative chrome. Buttons likely use filled + ghost variants in the primary colour.

---

## 5. Layout Principles

Built on **(no framework detected)**. Layouts follow a content-first grid — wide gutters, deliberate whitespace rhythm. Section breaks use background-colour contrast rather than divider lines.

---

## 6. Depth & Elevation

Elevation system: Component system includes multi-layer box shadows for overlays and modals. Depth is used purposefully, not decoratively.

---

## 7. Do's and Don'ts

**Do:**
- Use the exact colour roles as defined — each serves a specific semantic purpose
- Respect the typeface role boundaries (each font has one job)
- Preserve generous whitespace — crowding breaks the design language
- Keep interactions restrained: hover opacity or colour-shift, not complex transforms

**Don't:**
- Introduce colours outside the defined palette
- Mix typefaces beyond the established pairing
- Add drop shadows where the design is intentionally flat
- Use gradients unless the site already employs them
- Add Brand green (Lacoste green/yellow-green)
- Add visible sport references

---

## 8. Responsive Behavior

Standalone microsite; mobile-first conversion flow

On mobile, the core design language holds — the reduction is spatial (tighter gutters, stacked columns) not stylistic. Colour, typography, and component styles remain unchanged.

---

## 9. Agent Prompt Guide

> Use this as a one-paragraph brief when prompting an AI to build in this design language:

**"Luxury retail microsite: white+#eee surfaces, Figtree, single teal #05687B CTA color, dark charcoal text, enterprise UI component tokens, soft rounded corners, conversion-focused layout"**

---

*Generated by Sparkbites — extracted from live CSS analysis*