---
title: "IDHEAL design system"
variant: extended
source: https://idheal.fr/
captured_at: 2026-10-12
theme: light
industry: nonprofit
generator: Design DNA (https://four.wiralomi.com/style/idheal-fr)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# IDHEAL · Design System

> A housing institute expressed through space and type

**Theme:** light · **Industry:** nonprofit · **Source:** https://idheal.fr/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

IDHEAL’s homepage pairs oversized black institutional typography with restrained navigation and architectural photography. Its white canvas and sparse composition make the housing-focused image and the institute’s name the central visual anchors.

## North star

Let oversized, expressive typography and a single documentary architectural image define the page, keeping interface details quiet.

## Overview

The page uses a stark white canvas and near-black text to establish an editorial, institutional tone. A huge IDHEAL wordmark dominates the opening view, treated as a graphic element rather than a conventional heading; its final letter drops toward the architectural photograph below. The image is a direct, documentary-style view of a home and its urban surroundings, offset to the right and framed by substantial white space. Navigation is minimal and visually subordinate to the wordmark, with simple text labels and rounded outlined controls. Measured sage green and muted red are tiny text accents rather than broad interface fills; the screenshot’s other muted tones belong largely to the photograph. Serif body and headline typography gives the content a literary quality, while Helvetica Neue supports compact utility text and controls. The composition feels spacious without decorative effects: flat surfaces, fine borders, and a deliberately uneven balance between type and image.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Editorial Ink | `#000000` | `--color-editorial-ink` | brand | Primary text and oversized IDHEAL wordmark; also used for simple navigation and outlined controls. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and open space surrounding the wordmark and architectural photograph. |
| Soft Concrete | `#e5e5e5` | `--color-soft-concrete` | surface | Pale gray card surfaces elsewhere in the measured page; not a defining first-viewport color. |
| Fine Ash | `#ededed` | `--color-fine-ash` | semantic | Light button and interface hairlines, including subtle outlined controls. |
| Olive Note | `#51633c` | `--color-olive-note` | accent | Very sparse text accent; not a dominant canvas or interface fill in the screenshot. |
| Brick Note | `#bc5346` | `--color-brick-note` | accent | Very sparse text accent; use sparingly rather than as a large decorative block. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e5e5e5` (Soft Concrete) · `--color-text` → `#000000` (Editorial Ink) · `--color-border` → `#ededed` (Fine Ash) · `--color-accent` → `#51633c` (Olive Note) · `--color-accent-2` → `#bc5346` (Brick Note)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e5e5e5` | 16.67:1 | AAA |
| `#51633c` | `#ffffff` | 6.56:1 | AA |
| `#51633c` | `#e5e5e5` | 5.21:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| NewCenturySchlbkLTStd-Roman | `--font-body` | webfont | 400 | Editorial headlines and body copy | Libre Baskerville |
| HelveticaNeueLTPro-Roman | `--font-helveticaneueltpro-roman` | webfont | 400 | Utility text, captions, and outlined controls | Inter |
| HelveticaNeueLTPro-Md | `--font-helveticaneueltpro-md` | webfont | 400 | Medium-weight sans-serif emphasis | Inter |
| sans-serif | `--font-display` | system | 400 | Oversized display wordmark and navigation display text | Inter |
| HelveticaNeueLTPro-Bd | `--font-helveticaneueltpro-bd` | webfont | 400 | Bold sans-serif emphasis | Inter |

- **NewCenturySchlbkLTStd-Roman:** Regular-weight serif provides a literary contrast; keep casing natural and avoid added tracking.
- **HelveticaNeueLTPro-Roman:** Regular sans-serif for compact interface text; button labels are lowercase.
- **HelveticaNeueLTPro-Md:** Use selectively for modest emphasis, retaining the restrained sans-serif voice.
- **sans-serif:** Large, regular-weight display forms; navigation labels can appear lowercase.
- **HelveticaNeueLTPro-Bd:** Measured but limited use; reserve for emphasis without making the overall page feel heavy.

### Type scale — Perfect Fourth (ratio ≈ 1.332, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 67px | 400 | 1 | 0 | — | sans-serif | Oversized IDHEAL wordmark and prominent display text. |
| h1 | 43px | 400 | 1.08 | 0 | — | NewCenturySchlbkLTStd-Roman | Editorial page headline or primary institutional statement. |
| h2 | 42px | 400 | 1 | 0 | lowercase | sans-serif | Large lowercase section headings. |
| h3 | 39px | 400 | 1.1 | 0 | — | HelveticaNeueLTPro-Roman | Sans-serif section or feature headings. |
| h4 | 22.5px | 400 | 1.1 | 0 | lowercase | NewCenturySchlbkLTStd-Roman | Smaller lowercase editorial subheadings. |
| body | 16px | 400 | 1.1 | 0 | — | NewCenturySchlbkLTStd-Roman | Primary editorial and explanatory copy. |
| caption | 12px | 400 | 1.2 | 0 | — | HelveticaNeueLTPro-Roman | Compact captions and supporting metadata. |
| button | 20px | 400 | 1 | 0 | lowercase | HelveticaNeueLTPro-Roman | Lowercase labels inside outlined controls. |
| nav | 67px | 400 | 1 | 0 | — | sans-serif | Large display-style navigation labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 5, 6, 7, 8, 10, 11, 15, 16, 18, 20, 21, 23, 24, 30, 65 px.
- Section rhythm 65px · element gap — · card padding 108px · max content width —.

The opening composition is a single, broad white field with no visible column dividers. The wordmark occupies the upper area and stretches across the page; its final letter descends toward an architectural photograph aligned to the right. Navigation remains small in the overall composition, while the image and large type create the page’s asymmetrical balance. Preserve generous open space around these elements and use a measured, comfortable rhythm between sections. Avoid imposing a fixed maximum width: none is available in the measurements.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- Shadow `sm` (button, other): `rgba(0, 0, 0, 0.2) 4px 2px 4px 0px`

The page is predominantly flat: no prominent shadows or layered cards define the first viewport. Controls rely on thin outlines, including black and pale gray borders, while card-like areas can use a neutral gray surface. Keep edges clean and let open white space, typography, and photography establish hierarchy rather than elevation effects.

## Imagery

Use documentary architectural photography rather than illustration, 3D, or decorative graphics. The visible image depicts a home opening onto an urban rooftop, with materials and surroundings left natural rather than heavily stylized. Frame it as a large horizontal rectangle offset to the right beneath the wordmark. Keep image colors subdued and let the photograph read as evidence of the housing subject, not as a colorful interface background.

## Components

### Oversized wordmark

Treat IDHEAL as a monumental black typographic composition across the top of the page; allow the final letter to sit lower beside the image.

### Architectural feature image

Use a large, unadorned photograph aligned to the right beneath the wordmark, showing a lived-in home and its city context.

### Text navigation

Keep labels such as home, Institut, and logement plain and subordinate to the display typography.

### Outlined text control

Use lowercase labels, black text, and a fine outline; measured examples have rounded corners.

### Pale surface card

Where card surfaces appear, use the measured #e5e5e5 fill and dark text with square, unembellished edges.

### Measured component styles

- **Primary button** (“à propos”): transparent background · text #000000 · border 1px solid #000000 · radius 15px · padding 6px 7.5px 2.3px 7.5px · 400 19.95px HelveticaNeueLTPro-Roman · lowercase
- **Link** (“IDHEAL, c'est aussi Les Ateliers de l'In”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px sans-serif
- **Card** (“17.06.2026 Plein emploi, plein logement ”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 431px 0px 0px 0px · 400 15px sans-serif
- **Navigation item** (“home”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px sans-serif

## Do

- Use white space as an active part of the composition.
- Make the institutional wordmark the dominant typographic gesture.
- Pair the display typography with restrained editorial serif copy.
- Use architectural photography with a documentary feel.
- Keep navigation and controls visually secondary.
- Reserve olive and brick accents for very small touches.

## Don't

- Do not introduce gradients or colorful section backgrounds.
- Do not turn the wordmark into a small conventional logo.
- Do not center every element into a symmetrical template.
- Do not add decorative shadows to flat content areas.
- Do not treat colors inside the photograph as interface palette colors.
- Do not make the interface denser than the sparse reference.

## Agent prompt

Build a new institutional page in IDHEAL’s editorial style. Use Gallery White (#ffffff) as the canvas and Editorial Ink (#000000) for the wordmark, headings, and core navigation. Create a very large typographic opening gesture, then balance it with a right-aligned documentary architectural photograph; preserve the reference’s asymmetry and generous blank space. Use the measured serif face for editorial headlines and body copy, with a restrained sans-serif for navigation, captions, and lowercase outlined controls. Keep borders thin and surfaces flat; use Fine Ash (#ededed) only for subtle interface hairlines. Soft Concrete (#e5e5e5) may support secondary card surfaces. Olive Note (#51633c) and Brick Note (#bc5346) are rare text accents, not broad fills. Avoid gradients, ornamental effects, and dense card grids.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single white field; oversized wordmark above and around a right-aligned architectural photograph, with sparse navigation. | prominent institutional identity, text navigation, image-led introduction | oversized black typography, documentary photography, open white space, minimal outlined controls |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/idheal-fr