CURATED · OPEN · FREE

Microwaver59

A monochrome, typographically driven, and highly interactive portfolio interface.

Dark ModeMonochromeExperimentalTypographyRefined

↓ Download design system (0 MB)Open in OpenDesign

Visit: https://microwaver59.com

📦 Browse pack contents →

Identity DNA

minimalbrutalistexperimentalmonochrometypographic

A stark, experimental design studio landing page.

Color

#FCFCFAInk

#000000BG

rgba(252, 252, 250, 0.2)Line

High-contrast monochrome, utilizing only black, white, and a single subtle gray.

Typography

monospace

body19px · 700

All text is uppercase · Monospaced typeface used throughout for a technical, uniform aesthetic · Generous letter spacing applied to all text elements

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Strictly aligned to a 4px base grid with tight, consistent internal padding.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

1px solid borders used for interactive elements and structural divisions.

0 0 0 1px rgba(252, 252, 250, 1)

Layout

1440container

1columns

24pxgutter

768 / 1024breakpoints

Full-bleed, single-column layout with heavily padded sections.

Motion & Interaction

240msmicro

370mssmall

620msmedium

cubic-bezier(0.68, -0.6, 0.32, 1.6)easing

Morphing logo animation into a progress spinner · Smooth, slightly springy cubic-bezier transitions on hover states · Opacity fades for loading states

Subtle opacity or underline shifts on interactive elements. · Cursor changes to pointer on interactive elements.

Components

button Stark, rectangular buttons with uppercase monospace text and a default underline on hover.
card Cards are defined primarily by typography and subtle hover states rather than heavy containers.
chip Not visibly present in the provided screenshots.
input Not visibly present in the provided screenshots.
hero A dynamic, centered typographic logo animation that morphs into a progress indicator.

Voice & Don'ts

Tone Technical, direct, and highly restrained.
Headlines All-caps, monospaced, and heavily tracked.
CTAs Direct, uppercase, and minimal.

Don't use colorful gradients — screenshot shows a strict monochrome black and white palette.
Don't use rounded corners on main elements — screenshot shows sharp, rectangular edges.
Don't use varied font weights — screenshot shows a uniform heavy weight for almost all text.
Don't use left-aligned text — screenshot shows a centered, symmetrical layout.
Don't use standard sentence casing — screenshot shows everything in uppercase.
Don't use wide letter spacing — screenshot shows tightly packed, condensed text.
Avoid: Rounded shapes
Avoid: Soft gradients
Avoid: Decorative imagery
Avoid: Multiple colors

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a stark, experimental portfolio interface characterized by a strict monochrome palette (black #000000 and off-white #FCFCFA). The typography is exclusively monospaced, heavy-weight, uppercase, and tightly tracked, creating a technical and brutalist aesthetic. The layout is centered and minimalist, focusing heavily on interactive animations like the morphing logo and progress indicator. Critical donts include avoiding rounded corners on containers, using colorful gradients, applying standard sentence casing, or employing varied font weights. The design relies on extreme contrast and subtle, springy transitions rather than decorative elements or multiple 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