CURATED · OPEN · FREE

Egstad

A bold, expressive personal portfolio for a graphic designer and web developer.

PortfolioBold TypographyStudioCleanRestraint

↓ Download design system (3 MB)Open in OpenDesign

Visit: https://egstad.com

📦 Browse pack contents →

Identity DNA

graphic designweb developmentexpressiveenduringplayful

A graphic designer's personal portfolio with bold typographic statements and playful interactive elements.

Color

#252422Ink

#e2e0d9BG

#808080Muted

rgba(37, 36, 34, 1)Line

High contrast monochrome with a warm, off-white background.

Typography

grotesque-sans · humanist-sans · monospace

display398px · 400
body-lg58px · 400
body16px · 400

Use extreme scale for the primary brand name to create a bold visual statement. · Navigation text is uppercase with wide tracking. · Body copy maintains a clean, readable sans-serif style.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous white space to let the bold typography breathe, with tighter spacing within navigation and footer elements.

Surfaces

sm · 4px

md · 36px

lg · 1440px

pill · 999px

1px solid rgba(37, 36, 34, 1)

rgba(0, 0, 0, 0.063) 0px 1.3px 5.3px 0px · rgba(0, 0, 0, 0.09) 0px 4.5px 17.9px 0px · rgba(0, 0, 0, 0.15) 0px 20px 80px 0px

Layout

1440container

12columns

24pxgutter

768 / 1024breakpoints

A single-column hero followed by a multi-column grid for the bio and footer.

Motion & Interaction

200msmicro

400mssmall

750msmedium

cubic-bezier(0.375, 0.39, 0, 1.175)easing

Slow, smooth fade-in and color transitions for interactive elements. · Playful transform-based hover effects on the floating element.

Subtle color changes and transform-based movements on interactive elements. · Smooth transitions on background and border colors.

Components

button Pill-shaped with dark backgrounds and white text, featuring hover transitions.
card Not prominently featured in the provided views.
chip Not prominently featured in the provided views.
input Not prominently featured in the provided views.
hero A massive, full-width typographic hero with an interactive, overlapping 3D-like floating element.

Voice & Don'ts

Tone Confident, personal, and slightly playful.
Headlines Extremely bold, large-scale typography that dominates the visual field.
CTAs Direct and simple, presented in pill-shaped buttons.

Don't use small, understated headlines — screenshot shows massive, screen-filling typographic statements.
Don't use a complex or vibrant color palette — screenshot shows a strictly restrained monochrome and off-white scheme.
Don't use sharp, square corners on interactive elements — screenshot shows prominent pill-shaped buttons with high border-radius.
Don't use generic, system-default fonts for display — screenshot shows a custom, highly stylized grotesque sans-serif.
Don't avoid white space — screenshot shows generous margins and padding around all content blocks.
Don't use busy, cluttered layouts — screenshot shows a clean, focused single-column and multi-column grid structure.
Avoid: Formal corporate language
Avoid: Small, understated headlines
Avoid: Complex color palettes

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a personal portfolio for a graphic designer and web developer. It features extreme typographic scale and a restrained color palette. Key colors are a warm off-white background (#e2e0d9) and near-black text (#252422). The primary font is a custom grotesque sans-serif, with a secondary humanist sans-serif for body copy. Critical donts: Do not use small, understated headlines—use massive, screen-filling type. Do not use a complex color palette—stick to strict monochrome. Do not use sharp corners on buttons—use pill-shaped, highly rounded forms.

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