---
name: Milieu Grotesque
description: "This site is worth including as a masterclass in professional typography-driven design, balancing bold creative expression with functional e-commerce."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1E242C"
  secondary: "#576579"
  tertiary: "#1A73E8"
  neutral: "#313945"
  bg-soft: "#F4F4F4"
  line: "rgba(30,36,44,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 26px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "normal"
  body:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "normal"

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

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A curated platform for premium typefaces and design foundries.

*A high-end gallery for type designers.*

## Colors

High contrast dark text on clean light surfaces, with a strong blue accent for interactive elements.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1E242C`)** — uses `ink` token
- **Secondary text (`#576579`)** — uses `ink-soft` token
- **Accent (`#1A73E8`)** — uses `accent` token
- **Muted (`#313945`)** — uses `muted` token
- **Borders (`rgba(30,36,44,1.0)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans

## Layout

Full-width hero sections transitioning into structured grid layouts for content cards.

*Rhythm:* Consistent use of multiples of 4px for padding and margins.

## Elevation & Depth

- rgba(0, 0, 0, 0.06) 0px 1px 6px 0px
- rgba(0, 0, 0, 0.16) 0px 2px 32px 0px
- Borders: Solid 1px borders using the primary ink color.

## Shapes

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

## Components

- **button:** Solid accent color buttons with pill-shaped radius and white text.
- **card:** Image-heavy cards with minimal chrome, often featuring full-bleed photography.
- **chip:** Small, rounded tags used for filtering or categorization.
- **input:** Search bar with a prominent lens icon and 'AI Search' call-to-action.
- **hero:** Large, dramatic photographic backgrounds with overlaid text and high-contrast typography.

## Do's and Don'ts

**Don't:**
- don't use rounded, friendly icons — screenshot shows sharp, geometric UI elements
- don't apply drop shadows everywhere — screenshot shows mostly flat, clean surfaces
- don't use a multi-color rainbow palette — screenshot shows a disciplined blue-and-dark-neutral scheme
- don't use script or decorative fonts for UI — screenshot shows strictly functional sans-serifs
- don't use low-contrast gray text — screenshot shows high-contrast dark ink for readability
- don't use cluttered backgrounds behind text — screenshot shows clean white or solid dark sections

---

## System Prompt (paste into AI agent)

```
A sophisticated type foundry marketplace with a clean, editorial aesthetic. Key colors are ink #1E242C on white #FFFFFF with a blue accent #1A73E8. Typography utilizes grotesque and humanist sans-serif categories. Critical donts: avoid whimsical icons, minimize drop shadows, avoid multi-color palettes, strictly use functional sans-serifs, ensure high-contrast text, and maintain clean backgrounds for legibility.
```