web-prototype-taste-editorial

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) over 200ms.
• Stagger lists by --index * 80ms.
• Animate only transform and opacity.

Pre-flight

• Serif display + grotesque body pairing present
• Canvas is warm off-white, foreground is off-black
• All cards/dividers use 1px solid #EAEAEA
• At least one asymmetric layout (split, eyebrow tag, uneven bento)
• Pastel chips used only for tags, never as block backgrounds
• Section padding ≥ py-24
• No emojis, no banned fonts, no AI clichés