# Idheal Fr · Design system migration spec

> Source: https://idheal.fr  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in using typography as a primary structural element, blending editorial design with a modern, functional web layout.

## 1. Identity DNA

The system operates with the quiet authority of a high-end academic journal, where typography is not merely a styling choice but the very architectural skeleton of the layout. Each oversized letterform becomes a load-bearing column, defining the grid and the hierarchy of information on its own terms.

**One-liner:** IDHEAL uses bold, structural typography and a clean editorial grid to present research on housing and urban planning.
**Keywords:** Institut · Formation · Logement · Recherche · IDHEAL
**Analogy:** A high-end academic journal or an art exhibition catalog

## 2. Color

A strict monochrome foundation of black, white, and neutral grays establishes the primary canvas, with a palette reserved for clarity and categorization. High-chroma accents appear sparingly as structural highlights, marking chips and interactive states with sharp, deliberate punctuation.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#E5E5E5` | card background |
| `--bg-quiet` | `#D9D9D9` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#51633C` | placeholder |
| `--muted-soft` | `#BC5346` | weak hint |
| `--accent` | `#FF00BC` | single accent |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** High-contrast monochrome base with sharp, chromatic accents for categorization

The principle is one of high-contrast clarity, where color serves a taxonomic function rather than a decorative one.

## 3. Typography

The type voice is a deliberate study in contrast: a bold, grotesque sans-serif, Helvetica Neue, handles structural UI and display duties, while a refined transitional serif, New Century Schoolbook, carries the narrative weight of the body copy. This pairing creates a clear dialogue between institutional authority and scholarly exposition.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 0.85 | 700 | -2px | Hero logo and structural layout letters |
| body | 16px | 1.5 | 400 | 0px | Main paragraph text |

**Type rules:**
- Use Helvetica Neue for UI elements and headers
- Use New Century Schoolbook for narrative body copy

## 4. Spacing

Spacing follows a strict, grid-based rhythm designed to ensure vertical consistency and optimal readability across all content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Grid-based with consistent vertical spacing for readability

## 5. Surfaces

Surfaces are defined by their flatness, with depth communicated through subtle, directional shadows and thin, solid borders rather than heavy elevation. The system avoids soft blur, opting for crisp, pixel-precise separations that reinforce the editorial grid.

- **Radius:** sm 10px · md 15px · lg 38px · pill 999px
- **Shadows:**
  - 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

## 6. Layout

The layout skeleton is an asymmetric grid where giant, structural letters from the brand name itself divide sections, creating a unique architectural framework. Content occupies the negative space and columns defined by these monumental typographic elements, enforcing a strict visual order.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A structural grid where giant letters divide content sections

## 7. Motion & Interaction

Motion is treated as a functional, subtle enhancement, reserved for clarifying state changes in background colors and typography. All transitions are brief and linear, designed to guide the user with precision without distracting from the content's intellectual focus.

- **Durations:** micro 200ms · small 300ms · medium 800ms
- **Easing:** `linear`
- **Patterns:**
  - Smooth transitions for background colors and font-size changes

- **Hover:** Subtle background color shifts on clickable elements
- **Click:** Immediate state change
- **Transition:** 0.2s linear for most interactive states
- **Keyboard:** Focusable elements likely outlined or highlighted

## 8. Voice & Don'ts

The editorial voice is academic, authoritative, and precise, reflecting the site's institutional purpose. Headlines are set in bold, uppercase form to assert structure, while calls to action remain simple, direct, and typically set in lowercase or sentence case.

- **Tone:** Academic, authoritative, and precise
- **Headline style:** Bold, uppercase, and highly structured
- **CTA style:** Simple, direct, and often lowercase or sentence case
- **Avoid:** Playful language / Excessive decorative elements / Cluttered layouts

### Don'ts
- ❌ 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

The system deliberately excludes playful language, decorative flourishes, and cluttered compositions to maintain its scholarly clarity.

## System Prompt (paste into AI tool)

```
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.
```