CURATED · OPEN · FREE

Flowen Me

A high-contrast, typographically intense portfolio for a creative developer.

Developer ToolsPortfolioBold TypographyExperimentalGeometric

↓ Download design system (5 MB)Open in OpenDesign

Visit: https://flowen.me

📦 Browse pack contents →

Identity DNA

BoldIndustrialExperimentalDirectDeveloperPortfolio

A brutalist neon-lit industrial dashboard.

Color

#FFFFFFInk

#161B1BBG

rgba(255, 255, 255, 1)Line

Extreme contrast between a dark, muted background and bright, white typography for maximum legibility and visual impact.

Typography

geometric-sans · display-serif · monospace

display100px · 700
body108px · 700

All primary text is set to uppercase. · Headlines use a massive, tightly packed geometric sans. · Alternate headlines use a decorative display serif.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous vertical padding between major sections to separate large typographic blocks.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 0px

No visible borders, relying entirely on typographic scale and spatial separation.

Layout

768 / 1024breakpoints

Asymmetrical, typography-driven layout where text dictates the flow.

Motion & Interaction

220msmicro

400mssmall

800msmedium

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

Cursor changes to pointer on interactive text elements. · Standard link navigation.

Components

button Text-based links with underlines or arrows.
card None, imagery is integrated directly into the typographic flow.
chip None.
input None.
hero A massive typographic stack of words paired with a project thumbnail.

Voice & Don'ts

Tone Direct, confident, and slightly irreverent.
Headlines Short, punchy, uppercase words stacked vertically.
CTAs Direct text links with arrows or underlines.

Don't use a centered layout — screenshot shows left-aligned, asymmetrical text blocks.
Don't use subtle colors or gradients — screenshot shows a stark, high-contrast palette.
Don't use small or standard text sizes — screenshot shows massive, display-level typography.
Don't use rounded corners — screenshot shows sharp, rectangular edges.
Don't use complex icons or buttons — screenshot shows simple, text-based navigation.
Don't use a light theme — screenshot shows a dark background with bright text.
Avoid: Politeness
Avoid: Complex sentences
Avoid: Soft edges
Avoid: Gradient backgrounds

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a high-contrast, experimental portfolio for a creative developer. The design DNA is defined by massive, uppercase typography set against a very dark background (#161B1B), using bright white ink (#FFFFFF) for maximum impact. The typography categories include a bold geometric-sans for primary headlines and a decorative display-serif for secondary elements. The layout is asymmetrical and driven entirely by typographic scale rather than traditional grids or cards. Critical donts: Do not use rounded corners or soft shadows, as the aesthetic is sharp and brutalist. Do not center content; maintain the strong left-aligned typographic rhythm. Avoid standard body text sizes; everything is treated as a display element.

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