---
name: Typology
description: "This site is a prime example of minimalist e-commerce design, using a restrained aesthetic to convey purity and scientific credibility."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#141414"
  secondary: "#4F4F4F"
  neutral: "#909090"
  bg-soft: "#F4F4F2"
  bg-quiet: "#FBF9F7"
  line: "rgba(212, 212, 212, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.5px"
  h1:
    fontFamily: grotesque-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1px"
  h2:
    fontFamily: grotesque-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 15px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: grotesque-sans
    fontSize: 13px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.2px"
  micro:
    fontFamily: grotesque-sans
    fontSize: 10px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0.26px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

A minimalist, premium skincare brand focused on clean ingredients and scientific precision.

*A modern apothecary meets high-end editorial magazine.*

## Colors

Monochromatic restraint with high-contrast typography to evoke clinical purity.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#141414`)** — uses `ink` token
- **Secondary text (`#4F4F4F`)** — uses `ink-soft` token
- **Muted (`#909090`)** — uses `muted` token
- **Borders (`rgba(212, 212, 212, 1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

- Navigation and utility text are always uppercase.
- Headlines use tight tracking and a heavy weight.
- Body text maintains a clean, neutral sans-serif appearance.

## Layout

Full-width photographic heroes followed by clean, structured grids for product discovery.

*Rhythm:* Consistent 4px base grid with generous whitespace for an airy, premium feel.

## Elevation & Depth

- rgba(0, 0, 0, 0.3) 0px 30px 70px 0px
- Borders: Thin 1px borders in black or dark gray, used sparingly for separation and buttons.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** High-contrast rectangles with uppercase text; primary is black background with white text, secondary is white background with black border.
- **card:** Clean, borderless cards with high-quality product imagery and precise typography.
- **chip:** N/A - not present in the visible screenshot.
- **input:** N/A - not present in the visible screenshot.
- **hero:** Full-bleed, high-impact photography with overlaid left-aligned text.

## Do's and Don'ts

**Don't:**
- don't use rounded, bubbly shapes — screenshot shows sharp, geometric rectangles and squares.
- don't use vibrant, saturated accent colors — screenshot shows a strictly monochromatic palette.
- don't use decorative or script fonts — screenshot shows a clean, functional grotesque sans-serif.
- don't clutter the interface with many borders or boxes — screenshot shows a clean, borderless layout with ample whitespace.
- don't use heavy drop shadows everywhere — screenshot shows a single, subtle deep shadow used sparingly.
- don't use lowercase for primary navigation and CTAs — screenshot shows consistent uppercase styling for these elements.

---

## System Prompt (paste into AI agent)

```
This is a premium, minimalist skincare e-commerce site for Typology Paris. The design DNA is clinical, clean, and sophisticated, relying on a strict monochromatic palette (black, white, and off-white/gray) and a functional grotesque sans-serif typeface (Post Grotesk). The layout is spacious and editorial, using large-scale photography and bold, uppercase typography for headlines and navigation. Key hex colors are #FFFFFF for backgrounds, #F4F4F2 for soft surfaces, and #141414 for primary ink. Critical donts: never use vibrant accent colors, avoid rounded or bubbly shapes, and never use decorative or script fonts. The interface should feel precise, scientific, and high-end.
```