CURATED · OPEN · FREE

Aristide Benoist

A dark, motion-focused developer portfolio with extreme typographic scale and photographic grids.

portfoliowebgl

↓ Download design system (2 MB)Open in OpenDesign

Visit: https://aristidebenoist.com

📦 Browse pack contents →

Identity DNA

independent developermotioninteractionportfolio

A cinematic film reel in a dark gallery, showcasing visual craftsmanship.

Color

#bacbc2Ink

#1e1e1eBG

#1a1a1aBG soft

#000000BG quiet

#cc9933Muted

rgba(186, 196, 184, 0.2)Line

Deep monochromatic dark mode with a primary light sage ink and occasional golden accents.

Typography

slab-serif · grotesque-sans · monospaced

display337px · 400
h1257px · 400
body16px · 400
caption10px · 400

Spacing

4px

8px

12px

16px

20px

24px

30px

48px

64px

96px

A clear rhythm of 4px increments, with generous padding in navigation and contact areas.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 0px

Hard-edge borders and sharp corners are used throughout, with a prominent 1px bottom border on the 'ABOUT' link.

Layout

1440container

12columns

24pxgutter

768 / 1024breakpoints

Full-screen dark canvas with a centered horizontal carousel of vertical images and pinned navigation elements.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

smooth color and background transitions on interactive elements

Subtle color changes with 0.5s cubic-bezier transitions. · Immediate navigation with no visible active state.

Components

button Text-based links with sharp, uppercase styling and optional arrow indicators.
card Vertical photographic cards arranged in a horizontal scrolling container.
hero An immersive full-screen dark area featuring a horizontal scrolling grid of black-and-white photographs.

Voice & Don'ts

Tone Minimalist, sophisticated, and professional.
Headlines Uppercase, massive, high-impact display typography with tight negative tracking.
CTAs Understated, uppercase text links, often with a simple underline or arrow.

Don't use soft drop shadows — screenshot shows completely flat, hard-edged design.
Don't use rounded corners — screenshot shows sharp 0px radius on all elements.
Don't use a wide variety of colors — screenshot shows a restricted palette of dark background and sage ink.
Don't use small, timid display text — screenshot shows massive typography dominating the viewport.
Don't use busy background patterns — screenshot shows solid dark fills and photographic content.
Don't use overly complex navigation — screenshot shows a minimal 'ABOUT' link with a simple underline.
Avoid: Avoid decorative icons
Avoid: Avoid unnecessary borders
Avoid: Avoid multiple background colors

Inside the pack — real screenshots

Aristide Benoist — 桌面首屏（hero） — 桌面首屏（hero）

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

Captured from the live site · real computed styles

System prompt

This is a dark, motion-focused developer portfolio for Aristide Benoist. The design DNA is built on a deep monochromatic dark background (#1e1e1e) with light sage ink (#bacbc2) and occasional golden accents (#cc9933). It features extreme typographic scale using a slab-serif for display and a grotesque-sans for body text, with tight negative tracking on massive headlines. The layout is minimalist and cinematic, often centering a horizontal carousel of vertical black-and-white photographs. Critical design constraints: avoid any use of rounded corners, do not add decorative drop shadows or complex patterns, and never use more than two primary ink colors. Transitions should be smooth, using a 0.5s cubic-bezier timing function.

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