CURATED · OPEN · FREE

Idheal Fr

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

EditorialTypographyCurationCleanGrid

↓ Download design system (4 MB)Open in OpenDesign

Visit: https://idheal.fr

📦 Browse pack contents →

Identity DNA

InstitutFormationLogementRechercheIDHEAL

A high-end academic journal or an art exhibition catalog

Color

#FF00BCAccent

#000000Ink

#FFFFFFBG

#E5E5E5BG soft

#D9D9D9BG quiet

#51633CMuted

rgba(0,0,0,1)Line

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

Typography

grotesque-sans · transitional-serif · monospace

display56px · 700
body16px · 400

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Grid-based with consistent vertical spacing for readability

Surfaces

sm · 10px

md · 15px

lg · 38px

pill · 999px

Thin 1px solid black or colored borders for chips

4px 2px 4px rgba(0,0,0,0.2) · 2px -1px 6px rgb(237,237,237)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

A structural grid where giant letters divide content sections

Motion & Interaction

200msmicro

300mssmall

800msmedium

lineareasing

Smooth transitions for background colors and font-size changes

Subtle background color shifts on clickable elements · Immediate state change

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

Voice & Don'ts

Tone Academic, authoritative, and precise
Headlines Bold, uppercase, and highly structured
CTAs Simple, direct, and often lowercase or sentence case

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
Avoid: Playful language
Avoid: Excessive decorative elements
Avoid: Cluttered layouts

Inside the pack — real screenshots

Idheal Fr — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko