---
name: Idheal Fr
description: "This site is a masterclass in using typography as a primary structural element, blending editorial design with a modern, functional web layout."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  tertiary: "#FF00BC"
  neutral: "#51633C"
  bg-soft: "#E5E5E5"
  bg-quiet: "#D9D9D9"
  muted-soft: "#BC5346"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 0.85
    fontWeight: 700
    letterSpacing: "-2px"
  body:
    fontFamily: transitional-serif
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 10px
  md: 15px
  lg: 38px
  pill: 999px

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

---

## Overview

IDHEAL uses bold, structural typography and a clean editorial grid to present research on housing and urban planning.

*A high-end academic journal or an art exhibition catalog*

## Colors

High-contrast monochrome base with sharp, chromatic accents for categorization

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#FF00BC`)** — uses `accent` token
- **Muted (`#51633C`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

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

- Use Helvetica Neue for UI elements and headers
- Use New Century Schoolbook for narrative body copy

## Layout

A structural grid where giant letters divide content sections

*Rhythm:* Grid-based with consistent vertical spacing for readability

## Elevation & Depth

- 4px 2px 4px rgba(0,0,0,0.2)
- 2px -1px 6px rgb(237,237,237)
- Borders: Thin 1px solid black or colored borders for chips

## Shapes

- `sm`: 10px
- `md`: 15px
- `lg`: 38px
- `pill`: 999px

## Components

- **button:** Outlined pills with solid borders and subtle shadows
- **card:** Flat content blocks separated by structural lines
- **chip:** Colored dot followed by lowercase text in a rounded pill
- **input:** Minimalist, likely outlined or underlined
- **hero:** A massive typographic arrangement where letters span the viewport

## Do's and Don'ts

**Don't:**
- don't use soft, rounded corners for primary containers — screenshot shows sharp edges and strict grid lines
- don't use a multi-colored gradient background — screenshot shows flat, solid blocks of white, grey, or black
- don't use heavy drop shadows for depth — screenshot shows very minimal, directional shadows or none at all
- don't use a centered, flowing layout — screenshot shows a strict, asymmetric grid where letters create columns
- don't use lowercase for the primary hero branding — screenshot shows 'IDHEAL' in all caps
- don't hide navigation behind complex UI — screenshot shows a simple hamburger menu with an icon

---

## System Prompt (paste into AI agent)

```
Design a highly structured, editorial interface for an academic or research institution. Use a strict grid where bold, oversized typography acts as both content and layout structure. The primary palette is monochrome (black, white, #E5E5E5) with a sharp accent color like #FF00BC for highlights. Typography should contrast a bold grotesque-sans for headers with a refined transitional-serif for body text. Avoid centered layouts, heavy shadows, and playful or rounded UI elements. Maintain a clean, high-contrast, and intellectual aesthetic.
```