CURATED · OPEN · FREE

Nevflynn

A playful, card-based personal portfolio with a warm pastel palette and bold, rounded typography.

PortfolioPlayfulCleanApp UIDeveloper

↓ Download design system (3 MB)Open in OpenDesign

Visit: https://nevflynn.com

📦 Browse pack contents →

Identity DNA

personalplayfulmoderndeveloperportfolio

A playful yet professional developer portfolio.

Color

#6ED2B7Accent

#0D1117Ink

#000000Ink soft

#F7F2F2BG

#FFFFFFBG soft

#8A949EMuted

rgba(0, 0, 0, 1)Line

Warm, neutral background with soft pastel accents and high-contrast dark text.

Typography

geometric-sans

display40px · 700
h124px · 500
body16px · 400

Use Moranga Bold for display elements. · Use Silka for body and UI text.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Based on a 4px unit grid.

Surfaces

sm · 8px

md · 18px

lg · 32px

pill · 999px

Visible on active states or specific cards, often 2px solid.

rgba(0, 0, 0, 0) 0px 0px 0px 2px inset · rgb(240, 242, 248) 0px 0px 0px 2px

Layout

1280container

4columns

24pxgutter

768 / 1024breakpoints

Masonry-style card grid with varying card sizes.

Motion & Interaction

220msmicro

300mssmall

500msmedium

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

Smooth transitions for hover states (0.3s) · Subtle opacity fades on interaction.

Subtle box-shadow or background color change. · Minimal visual feedback, relies on pointer cursor.

Components

button Pill-shaped with subtle border or solid background.
card Large rounded corners (18px or 32px), white background, soft padding.
chip Small pill-shaped tags or navigation items.
input Minimal border-bottom or bottom border style.
hero Card-based layout containing avatar and bio text.

Voice & Don'ts

Tone Friendly, casual, and approachable.
Headlines Short, bold, and direct.
CTAs Conversational questions or simple statements.

Don't use dark mode — screenshot shows a light, warm background instead.
Don't use sharp corners — screenshot shows large 18px and 32px border-radius instead.
Don't use thin, elegant serifs — screenshot shows bold geometric sans-serif fonts instead.
Don't use a rigid, strict grid — screenshot shows a playful, staggered card layout instead.
Don't use aggressive, high-saturation neon colors — screenshot shows soft, muted pastels instead.
Don't use complex, heavy drop shadows — screenshot shows very subtle, light shadows or flat design instead.
Avoid: Stiff corporate jargon
Avoid: Overly complex sentence structures
Avoid: Aggressive sales language

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a personal portfolio for a developer and product designer, characterized by a warm, playful aesthetic. The palette is grounded in a soft off-white background with bold black text and is punctuated by pastel accents like teal, blue, and pink. Typography is a mix of a bold geometric sans for headlines and a clean, legible sans-serif for body text. Key interaction patterns include smooth transitions on hover. Critical design constraints include: DO NOT use dark mode, DO NOT use sharp corners, DO NOT use thin serifs, DO NOT use a rigid grid layout, and DO NOT use high-saturation neon 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