CURATED · OPEN · FREE

Gretel

A high-end design studio portfolio defined by stark contrast, generous whitespace, and large-scale typography.

brandstudio

↓ Download design system (20 MB)Open in OpenDesign

Visit: https://gretelny.com

📦 Browse pack contents →

Identity DNA

claritystrategydesignstudiopremium

A minimalist gallery that lets the work breathe and speak for itself.

Color

#1D1D1DInk

#FFFFFFBG

rgba(29, 29, 29, 0.1)Line

Strict monochrome to ensure maximum focus on photography and typography.

Typography

humanist-sans

display75px · 400
heading39px · 400
body16px · 400

Use tight, negative letter spacing for large display text. · Maintain high line height (1.7) for small body text for readability. · Avoid bold weights; rely on size and weight variations of a single family.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

8px base rhythm with expansive vertical margins between major sections.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

No visible UI borders; separation is handled purely through whitespace.

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Asymmetric grid with left-aligned text columns and right-aligned full-bleed or inset imagery.

Motion & Interaction

100msmicro

300mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Opacity fade-in · Subtle transform translate · Smooth hover transitions

Subtle opacity reduction on links and images. · Immediate feedback with no heavy bounces.

Components

button Minimalist text links with subtle opacity or color transitions.
card Gallery-style project cards with large typography and edge-to-edge imagery.
hero Large-scale left-aligned typography statement dominating the viewport with substantial top/bottom padding.

Voice & Don'ts

Tone Confident, authoritative, and slightly poetic.
Headlines Declarative statements with tight letter spacing and sentence case.
CTAs Understated text links without prominent button containers.

Don't use drop shadows — screenshot shows completely flat surfaces with no elevation.
Don't add decorative borders — screenshot shows separation purely through whitespace.
Don't center-align large body copy — screenshot shows strong left-aligned reading gravity.
Don't use colorful accents — screenshot shows a strict black-and-white palette.
Don't use rounded corners — screenshot shows sharp, 90-degree corners or edge-to-edge images.
Don't use heavy font weights — screenshot shows regular weight (400) dominating the entire UI.
Avoid: Excessive exclamation marks
Avoid: Marketing jargon
Avoid: Cluttered layouts

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a premium design studio portfolio for Gretel, emphasizing strategic clarity and high-end aesthetics. The design DNA is defined by a strict monochrome palette (#FFFFFF background, #1D1D1D ink) and a single humanist-sans typeface (Akkurat) used at massive scales with tight negative tracking. Layouts are asymmetric, featuring large left-aligned text blocks paired with edge-to-edge photography. Critical donts include: never use drop shadows or elevated surfaces, never center-align large text blocks, and never introduce decorative colors. Interactions are limited to subtle opacity and transform transitions using cubic-bezier easing, maintaining a calm and sophisticated user experience that prioritizes the work.

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