CURATED · OPEN · FREE

Delba de Oliveira

A clean, typography-focused portfolio for a developer education specialist.

portfoliodev

↓ Download design system (2 MB)Open in OpenDesign

Visit: https://delba.dev

📦 Browse pack contents →

Identity DNA

minimaldeveloper-educationeditorialcleantext-heavy

A well-typeset academic thesis

Color

#2A2A29Ink

#FAF9F7BG

#666666Muted

rgba(0, 0, 0, 0.1)Line

High contrast on a warm neutral background

Typography

transitional-serif · monospace

display40px · 500
headline24px · 600
body18px · 400
small16px · 400

Use a single serif family for both display and body to maintain the editorial aesthetic. · Ensure strong visual weight hierarchy for headings. · Use underlines for inline links to maintain readability within text blocks.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous vertical spacing between sections with tight rhythm within lists.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

None, except for a subtle top border on the mobile layout.

Layout

1200container

12columns

48pxgutter

768 / 1024breakpoints

Two-column asymmetric grid on desktop, single column on mobile.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Minimal to no visible motion observed.

Links likely change color or underline style. · Standard link navigation.

Components

button Solid black background, white text, slightly rounded corners.
card None. Content is presented in a flat, text-based list format.
chip None.
input None.
hero Minimal text-only hero with a large serif title and a brief introductory paragraph.

Voice & Don'ts

Tone Professional, direct, and straightforward.
Headlines Clear and descriptive section titles.
CTAs Conversational and action-oriented.

Don't use decorative gradients — screenshot shows flat, solid backgrounds.
Don't use rounded container borders — screenshot shows sharp, square edges.
Don't use a bright, high-chroma accent color — screenshot shows a strictly monochromatic palette.
Don't use a sans-serif for body text — screenshot shows serif for both display and body.
Don't use complex cards or panels — screenshot shows simple, unboxed content blocks.
Don't use drop shadows on UI elements — screenshot shows completely flat design.
Avoid: Avoid jargon-heavy or overly complex language.
Avoid: Avoid decorative elements that distract from the content.
Avoid: Avoid casual slang or overly enthusiastic tone.

Inside the pack — real screenshots

Delba de Oliveira — 桌面首屏（hero） — 桌面首屏（hero）

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

Captured from the live site · real computed styles

System prompt

This design is a refined, editorial-style portfolio for a developer education specialist. It utilizes a monochromatic palette of black and dark grays on a warm off-white (#FAF9F7) background. Typography is the core element, using a transitional-serif for both headings and body text. Layout is a clean, two-column asymmetric grid on desktop, focusing on readability. Critical don'ts include: avoid decorative gradients, avoid rounded container borders, and do not use high-chroma accent colors.

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