---
name: Magnetism Fr
description: "This site is a textbook example of a luxury agency aesthetic, utilizing extreme typographic scale and aggressive restraint to communicate prestige and confidence."
version: alpha

colors:
  background: "#ECECEC"
  primary: "#222222"
  secondary: "#343434"
  tertiary: "#1A5AFF"
  neutral: "#AAAAAA"
  muted-soft: "#DBDBDB"
  line: "rgba(229, 231, 235, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 120px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  h1:
    fontFamily: grotesque-sans
    fontSize: 27px
    lineHeight: 1.35
    fontWeight: 400
    letterSpacing: "5.94px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: grotesque-sans
    fontSize: 10px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "2.2px"

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

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

---

## Overview

A Paris-based luxury creative agency combining strategy, art direction, and production.

*A magnetic field—structured, powerful, and drawing you in.*

## Colors

Restrained, high-contrast palette that prioritizes bold typography and allows vibrant imagery to act as the primary accent.

- **Background (`#ECECEC`)** — uses `bg` token
- **Primary text (`#222222`)** — uses `ink` token
- **Secondary text (`#343434`)** — uses `ink-soft` token
- **Accent (`#1A5AFF`)** — uses `accent` token
- **Muted (`#AAAAAA`)** — uses `muted` token
- **Borders (`rgba(229, 231, 235, 1)`)** — uses `line` token

## Typography

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

- Use wide letter-spacing for uppercase UI and meta text
- Maintain tight leading for massive display typography
- All-caps is standard for navigation and category labels

## Layout

A minimalist, top-heavy layout featuring massive typography that often bleeds into or near the screen edges, paired with full-width cinematic imagery.

*Rhythm:* Standard 4px grid with generous vertical rhythm for large-scale layouts.

## Elevation & Depth

- None
- Borders: Thin, subtle borders using rgb(229, 231, 235) to separate content blocks.

## Shapes

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

## Components

- **button:** Minimalist uppercase text links, often flanked by small geometric arrows.
- **card:** Edge-to-edge photographic cards with simple text overlays below.
- **chip:** N/A
- **input:** N/A
- **hero:** Massive typographic statement followed immediately by high-impact full-width visuals.

## Do's and Don'ts

**Don't:**
- Don't use colorful gradients — screenshot shows flat, solid backgrounds like #ECECEC instead
- Don't use rounded corners — screenshot shows sharp, 0px radius edges on all elements
- Don't use drop shadows — screenshot shows completely flat, shadow-free surfaces
- Don't use mixed-case headlines — screenshot shows aggressive use of uppercase textTransform across headers
- Don't use wide margins for headers — screenshot shows massive display type bleeding near screen edges
- Don't use vibrant UI buttons — screenshot shows minimalist, text-only navigation links with subtle arrows

---

## System Prompt (paste into AI agent)

```
This is a high-end creative agency portfolio for Magnetism. The design is defined by extreme typographic contrast: massive geometric sans-serif headlines (like 'MAGNETISM') dominate the viewport against a restrained, neutral background (#ECECEC) and dark ink text (#222222). The layout is minimalist and spacious, letting large-format, cinematic photography drive the visual narrative. Navigation and metadata are handled through small, wide-tracked, uppercase grotesque-sans text. Interactions are smooth and understated, relying on 0.5s cubic-bezier opacity fades. Critical don'ts: never use rounded corners, drop shadows, or casual lowercase headlines. Always prioritize expansive white space and rigid alignment to maintain the premium, refined agency aesthetic.
```