---
name: Socialclubparis
description: "Worth including for its masterful use of extreme typographic scale and a strictly restrained palette to create a high-end, architectural agency presence."
version: alpha

colors:
  background: "#FAF9F6"
  primary: "#000000"
  neutral: "#D4D4D4"
  bg-soft: "#DEDBD3"
  line: "rgba(0, 0, 0, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 157px
    lineHeight: 0.8
    fontWeight: 400
    letterSpacing: "-1px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 46px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 0px
  md: 4px
  lg: 5px
  pill: 999px

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

---

## Overview

A global advertising agency presented as a refined creative club with oversized typographic statements.

*A minimalist gallery space where large-scale typography acts as the primary architecture.*

## Colors

Strictly monochromatic, relying on high-contrast black and white with subtle warm neutrals for depth.

- **Background (`#FAF9F6`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#D4D4D4`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 1)`)** — uses `line` token

## Typography

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

- All-caps (uppercase) is the default text transform for all text elements.
- Large typography acts as a primary compositional element rather than just a heading.
- Tight letter-spacing is used on large display sizes to maintain visual cohesion.

## Layout

Full-width hero with massive typography, followed by a masonry-like grid of project images.

*Rhythm:* Generous vertical padding (e.g., 57px, 106px, 150px) creates an airy, editorial feel.

## Elevation & Depth

- Borders: Thin, solid black borders used for interactive outlines and UI elements.

## Shapes

- `sm`: 0px
- `md`: 4px
- `lg`: 5px
- `pill`: 999px

## Components

- **button:** Minimal text-only buttons with uppercase labels and hover effects.
- **card:** Large project cards featuring full-bleed photography and distinct labels.
- **chip:** Category indicators (e.g., '● ADS', '● BRANDING') using solid dots.
- **input:** Cookie consent bar with horizontal text and flat button actions.
- **hero:** Dominates the viewport with a massive 'SOCIALCLUB' watermark and centered positioning text.

## Do's and Don'ts

**Don't:**
- Don't use vibrant accent colors — the screenshot shows a strict black, white, and warm-neutral palette.
- Don't use mixed case text — the screenshot shows almost exclusive use of ALL-CAPS (uppercase).
- Don't use heavy shadows — the screenshot shows flat, borderless, or thin-bordered surfaces.
- Don't use serif fonts — the screenshot shows exclusively clean, geometric, or monospaced sans-serifs.
- Don't use small hero text — the screenshot shows an oversized 'SOCIALCLUB' text that fills the viewport.
- Don't use traditional card borders — the screenshot shows cards defined by their photographic content and labels.
- Don't use decorative elements — the screenshot shows a highly restrained, functional aesthetic.

---

## System Prompt (paste into AI agent)

```
Positioning: An independent global advertising and branding agency that presents itself as a refined 'creative club'. Key hex colors: #FAF9F6 (background), #000000 (ink/text), #D4D4D4 (muted/display text), and #DEDBD3 (subtle background soft). Font categories: Grotesque-sans for display and body, Monospaced-sans for specific data or labels. Critical donts: Do not use uppercase text (the screenshot is entirely uppercase); do not use vibrant colors (the palette is strictly monochromatic); do not use serif typography (the design is purely sans-serif). The layout is generous and editorial, using massive typography as a primary architectural element.
```