web-prototype-taste-editorial

Original：🇺🇸 English

Translated

Editorial-minimalist web prototype. Warm monochrome canvas, serif display + grotesque body, 1px hairline borders, muted pastel chips, generous macro-whitespace, ambient micro-motion. Distilled from Leonxlnx/taste-skill `minimalist-skill`.

6installs

Sourcenexu-io/open-design

Added on2026-05-04

NPX Install

npx skill4agent add nexu-io/open-design web-prototype-taste-editorial

SKILL.md Content

View Translation Comparison →

Web Prototype — Editorial Minimalism

A single-page web prototype shaped like a Notion/Linear marketing site or premium documentation surface. Use when the brief asks for "clean", "editorial", "premium SaaS", "documentation", or "knowledge product".

Source

Distilled from Leonxlnx/taste-skill —

skills/minimalist-skill/SKILL.md

and the spatial-rhythm rules in

skills/taste-skill/SKILL.md

. See

example.html

in this directory for a fully-realized template.

Hard rules

Canvas: warm off-white (
```
#FBFBFA
```
or
```
#F7F6F3
```
), never pure white.
Foreground: off-black
```
#111111
```
, secondary text
```
#787774
```
. Never
```
#000000
```
.

Borders:

1px solid #EAEAEA

only. No drop shadows above

0 1px 2px rgba(0,0,0,0.04)

.

Type pairing: display in editorial serif (Instrument Serif / Newsreader / Lyon), body in grotesque (Geist / Switzer / SF Pro), monospace for meta/keystrokes (Geist Mono / JetBrains Mono).

Display tracking:

letter-spacing: -0.025em

,

line-height: 1.05

.

Pastel chips only: muted backgrounds (
```
#FDEBEC
```
,
```
#E1F3FE
```
,
```
#EDF3EC
```
,
```
#FBF3DB
```
) for tags/badges. Never as section backgrounds.
Containers:
```
border-radius: 8–12px
```
max. No pill containers, no
```
rounded-full
```
on cards.
Section padding:
```
py-24
```
minimum,
```
py-32
```
for hero.

Banned

Inter, Roboto, Open Sans (use Geist / Switzer / SF Pro).
Generic Lucide thin-stroke icons (use Phosphor Bold or Radix).
Gradients, neon, glassmorphism beyond a subtle navbar blur.
Drop shadows above
```
shadow-sm
```
. No glows.
Generic placeholder names (John Doe / Acme / Lorem). Use specific contextual content.
AI copy clichés: "Elevate", "Seamless", "Unleash", "Next-Gen".
Pure black
```
#000000
```
.
Centered hero H1 over a dark image.

Required components

Sticky pill navbar (translucent off-white,
```
backdrop-blur-md
```
, hairline border).
Asymmetric hero: serif display left-aligned, eyebrow tag above, lede paragraph at
```
max-w-[52ch]
```
.
Bento feature grid with uneven row heights and visible
```
1px
```
dividers — never 3 equal cards.
A "what it isn't" or contrast block separated by
```
border-t
```
only, no card.
Pricing or signup band with one accent CTA.
Footer: monospace metadata, single hairline above.

Motion (subtle only)

Scroll entry:

translateY(12px) → 0

+

opacity 0 → 1

over

600ms cubic-bezier(0.16, 1, 0.3, 1)

.

IntersectionObserver

only.

Hover lift on cards:

box-shadow

from

0 0 0

to

0 2px 8px rgba(0,0,0,0.04)