Web Prototype Taste Editorial

Name: Web Prototype Taste Editorial
Author: nexu-io

nexu-io/open-design

173 installs
83.7k repo stars
Updated August 5, 2026
nexu-io/open-design

Spin up editorial-taste web prototypes to compare typography, spacing, and content hierarchy with users and founders before investing in production UI implementation.

About

Produces editorial-flavored web prototypes from open-design presets so teams can validate aesthetic direction, reading flow, and page structure prior to frontend build or design system work.

Editorial visual taste
Clickable web mock
Typography exploration
Hierarchy testing
Low-commitment iteration

Web Prototype Taste Editorial by the numbers

173 all-time installs (skills.sh)
+1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #968 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/nexu-io/open-design --skill web-prototype-taste-editorial

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/web-prototype-taste-editorial.svg)](https://skillselion.com/skills/nexu-io/open-design/web-prototype-taste-editorial)

Installs	173
repo stars	★ 83.7k
Last updated	August 5, 2026
Repository	nexu-io/open-design ↗

What it does

Spin up editorial-taste web prototypes to compare typography, spacing, and content hierarchy with users and founders before investing in production UI implementation.

Files

SKILL.mdMarkdownGitHub ↗

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Quartz — quiet workspace for technical writers</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <style>
    :root {
      --canvas: #FBFBFA;
      --surface: #FFFFFF;
      --ink: #1A1A19;
      --muted: #787774;
      --hairline: #EAEAEA;
      --pale-red-bg: #FDEBEC; --pale-red-fg: #9F2F2D;
      --pale-blue-bg: #E1F3FE; --pale-blue-fg: #1F6C9F;
      --pale-green-bg: #EDF3EC; --pale-green-fg: #346538;
      --pale-yellow-bg: #FBF3DB; --pale-yellow-fg: #956400;
      --display: 'Instrument Serif', 'Newsreader', 'Lyon Text', Georgia, serif;
      --sans: 'Inter Tight', 'Switzer', 'SF Pro Display', system-ui, sans-serif;
      --mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      background: var(--canvas);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    .wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

    /* ============ NAV (floating pill) ============ */
    .nav {
      position: sticky; top: 16px; z-index: 50;
      margin: 16px auto 0;
      display: flex; align-items: center; justify-content: space-between;
      max-width: 920px;
      padding: 10px 14px 10px 20px;
      background: rgba(251,251,250,0.78);
      backdrop-filter: saturate(140%) blur(16px);
      -webkit-backdrop-filter: saturate(140%) blur(16px);
      border: 1px solid var(--hairline);
      border-radius: 999px;
    }
    .nav .brand { font-family: var(--display); font-size: 22px; letter-spacing: -0.01em; }
    .nav .brand em { font-style: italic; color: var(--muted); }
    .nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
    .nav ul a { color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 500; }
    .nav ul a:hover { color: var(--muted); }
    .nav .cta {
      font: 500 13px/1 var(--sans);
      padding: 9px 14px; border-radius: 999px;
      background: var(--ink); color: var(--canvas);
      border: 1px solid var(--ink);
      transition: transform 200ms cubic-bezier(0.16,1,0.3,1);
    }
    .nav .cta:active { transform: scale(0.98); }

    /* ============ HERO (asymmetric, eyebrow + serif display) ============ */
    .hero { padding: 96px 0 80px; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--muted);
      padding: 5px 11px; border: 1px solid var(--hairline);
      border-radius: 999px; background: var(--surface);
    }
    .eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--pale-green-fg); }
    .hero h1 {
      font-family: var(--display);
      font-size: clamp(48px, 7vw, 96px);
      line-height: 1.02;
      letter-spacing: -0.025em;
      margin: 22px 0 0;
      max-width: 16ch;
      font-weight: 400;
    }
    .hero h1 em { font-style: italic; color: var(--muted); }
    .hero .lede {
      font-size: 18.5px; color: var(--muted);
      max-width: 52ch; margin: 24px 0 36px;
      line-height: 1.55;
    }
    .hero .actions { display: flex; gap: 12px; align-items: center; }
    .btn {
      font: 500 14px/1 var(--sans);
      padding: 13px 22px; border-radius: 8px;
      cursor: pointer; transition: transform 200ms cubic-bezier(0.16,1,0.3,1), box-shadow 200ms ease;
    }
    .btn-primary { background: var(--ink); color: var(--canvas); border: 1px solid var(--ink); }
    .btn-primary:hover { background: #2A2A28; }
    .btn-primary:active { transform: scale(0.98); }
    .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline); }
    .btn-link { background: transparent; border: none; color: var(--ink); padding: 13px 0; font: 500 14px/1 var(--sans); cursor: pointer; }
    .btn-link::after { content: ' →'; color: var(--muted); }

    .keystroke {
      font-family: var(--mono); font-size: 11.5px;
      padding: 3px 7px; border: 1px solid var(--hairline);
      border-radius: 4px; background: var(--surface);
      color: var(--muted);
    }

    /* ============ BENTO (uneven grid, hairline only) ============ */
    .bento {
      padding: 72px 0;
      border-top: 1px solid var(--hairline);
    }
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: minmax(180px, auto);
      gap: 0;
      border: 1px solid var(--hairline);
      background: var(--hairline);
    }
    .bento-grid > .cell {
      background: var(--surface);
      padding: 28px 30px;
    }
    .cell--hero { grid-column: span 4; grid-row: span 2; padding: 36px 40px; }
    .cell--tall { grid-column: span 2; grid-row: span 2; }
    .cell--wide { grid-column: span 4; }
    .cell--small { grid-column: span 2; }
    .cell h3 { font-family: var(--display); font-size: 26px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.15; }
    .cell h4 { font-size: 14px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.005em; }
    .cell p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.6; max-width: 38ch; }
    .cell .num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 22px; }

    .chip {
      display: inline-block; font-family: var(--mono); font-size: 10.5px;
      letter-spacing: 0.08em; text-transform: uppercase;
      padding: 3px 8px; border-radius: 999px; margin-right: 6px;
    }
    .chip--green { background: var(--pale-green-bg); color: var(--pale-green-fg); }
    .chip--blue { background: var(--pale-blue-bg); color: var(--pale-blue-fg); }
    .chip--red { background: var(--pale-red-bg); color: var(--pale-red-fg); }
    .chip--yellow { background: var(--pale-yellow-bg); color: var(--pale-yellow-fg); }

    .doclines {
      font-family: var(--mono); font-size: 11.5px; color: var(--muted); line-height: 1.85;
      border-top: 1px dashed var(--hairline); padding-top: 14px; margin-top: 20px;
    }
    .doclines b { color: var(--ink); font-weight: 500; }

    /* ============ CONTRAST BLOCK (no card, hairline only) ============ */
    .contrast {
      padding: 88px 0;
      border-top: 1px solid var(--hairline);
    }
    .contrast .columns {
      display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
    }
    .contrast h2 {
      font-family: var(--display); font-size: clamp(34px, 4.4vw, 56px);
      line-height: 1.05; letter-spacing: -0.025em; margin: 0;
      max-width: 14ch; font-weight: 400;
    }
    .contrast .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--hairline); margin-top: 24px; }
    .contrast .pair > div { padding: 22px 0; border-bottom: 1px solid var(--hairline); }
    .contrast .pair > div + div { border-left: 1px solid var(--hairline); padding-left: 22px; }
    .contrast .pair > div:nth-child(odd) { padding-right: 22px; }
    .contrast .pair .label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 8px; }
    .contrast .pair p { margin: 0; font-size: 14.5px; line-height: 1.55; }
    .contrast .pair .strike { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }

    /* ============ PRICING band (no card overuse) ============ */
    .pricing { padding: 88px 0; border-top: 1px solid var(--hairline); }
    .pricing-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 36px; }
    .pricing-head h2 { font-family: var(--display); font-size: clamp(32px, 4vw, 48px); margin: 0; font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; max-width: 18ch; }
    .pricing-head p { color: var(--muted); margin: 0; max-width: 38ch; font-size: 14.5px; }
    .tiers { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hairline); }
    .tier { padding: 32px 28px; }
    .tier + .tier { border-left: 1px solid var(--hairline); }
    .tier h3 { font-family: var(--display); font-size: 24px; font-weight: 400; margin: 0 0 4px; letter-spacing: -0.01em; }
    .tier .sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
    .tier .price { font-family: var(--display); font-size: 44px; letter-spacing: -0.025em; line-height: 1; margin-bottom: 18px; font-weight: 400; }
    .tier .price small { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-left: 6px; }
    .tier ul { list-style: none; padding: 0; margin: 0 0 24px; }
    .tier ul li { font-size: 13.5px; padding: 8px 0; border-top: 1px solid var(--hairline); color: var(--ink); }
    .tier ul li:first-child { border-top: none; }
    .tier ul li::before { content: '— '; color: var(--muted); }
    .tier .btn { width: 100%; }
    .tier--highlight { background: var(--canvas); position: relative; }
    .tier--highlight::after {
      content: 'recommended';
      position: absolute; top: 16px; right: 16px;
      font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--pale-green-fg); background: var(--pale-green-bg);
      padding: 3px 8px; border-radius: 999px;
    }

    /* ============ FOOTER ============ */
    footer {
      border-top: 1px solid var(--hairline);
      padding: 32px 0;
      font-family: var(--mono); font-size: 11.5px; color: var(--muted);
      letter-spacing: 0.04em;
    }
    footer .row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    footer a { color: var(--muted); text-decoration: none; }
    footer a:hover { color: var(--ink); }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 880px) {
      .nav ul { display: none; }
      .bento-grid { grid-template-columns: 1fr; }
      .cell--hero, .cell--tall, .cell--wide, .cell--small { grid-column: span 1; grid-row: auto; }
      .contrast .columns, .pricing-head, .tiers { grid-template-columns: 1fr; display: block; }
      .tier + .tier { border-left: none; border-top: 1px solid var(--hairline); }
      .pricing-head p { margin-top: 12px; }
    }

    /* ============ MOTION (entry, subtle) ============ */
    .reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1); }
    .reveal.is-in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
    }
  </style>
</head>
<body>

  <header class="nav" data-od-id="topnav">
    <span class="brand">Quartz<em> · workspace</em></span>
    <ul>
      <li><a href="#bento">Surfaces</a></li>
      <li><a href="#contrast">What it isn't</a></li>
      <li><a href="#pricing">Plans</a></li>
      <li><a href="#changelog">Changelog</a></li>
    </ul>
    <button class="cta">Open workspace</button>
  </header>

  <main>
    <section class="wrap hero reveal" data-od-id="hero">
      <span class="eyebrow"><span class="dot"></span>Now in private beta · build 0.4.7</span>
      <h1>A quiet place to write the <em>docs nobody read</em>, and have them read.</h1>
      <p class="lede">Quartz is a workspace for technical writers who'd rather ship a clean changelog than win a Notion-template contest. Outline, draft, review, publish — without leaving the keyboard.</p>
      <div class="actions">
        <button class="btn btn-primary">Request access</button>
        <button class="btn-link">Read the manual</button>
        <span class="keystroke">⌘ K</span>
      </div>
    </section>

    <section class="wrap bento reveal" id="bento" data-od-id="bento">
      <div class="bento-grid">
        <div class="cell cell--hero">
          <span class="num">01 / outline</span>
          <span class="chip chip--green">Editor</span>
          <h3>An outline that doubles as a typewriter.</h3>
          <p>Drag headings to restructure. Toggle a heading to focus mode and the rest of the page dims to a hairline. No floating toolbars, no popover bingo — just the line you're typing.</p>
          <div class="doclines">
            <b>↳</b> ⌘ ⇧ O   toggle outline<br>
            <b>↳</b> ⌘ J     focus mode<br>
            <b>↳</b> ⌘ ⏎     publish draft
          </div>
        </div>
        <div class="cell cell--tall" data-od-id="bento-review">
          <span class="num">02 / review</span>
          <span class="chip chip--blue">Review</span>
          <h4 style="margin-top: 14px;">Inline review, no Slack thread</h4>
          <p>Reviewers leave threaded comments anchored to a single line. Resolve to archive — never lose context to a "what was this about" two weeks later.</p>
        </div>
        <div class="cell cell--small" data-od-id="bento-export">
          <span class="num">03 / export</span>
          <h4>Markdown out, always</h4>
          <p>Export round-trips: a doc opened in Quartz writes the same .md it read.</p>
        </div>
        <div class="cell cell--small" data-od-id="bento-history">
          <span class="num">04 / history</span>
          <span class="chip chip--yellow">Audit</span>
          <h4 style="margin-top: 8px;">Git-grade history</h4>
          <p>Every save is a commit. Diff two revisions in three keystrokes.</p>
        </div>
        <div class="cell cell--wide" data-od-id="bento-stack">
          <span class="num">05 / stack</span>
          <span class="chip chip--red">Integrations</span>
          <h4 style="margin-top: 14px;">Plays nicely with Linear, GitHub, and your CMS</h4>
          <p>Quartz reads Linear ticket IDs in your prose and surfaces the parent issue in the side rail. Push a published doc to a GitHub repo or a static site — no plugin marketplace required.</p>
        </div>
      </div>
    </section>

    <section class="wrap contrast reveal" id="contrast" data-od-id="contrast">
      <div class="columns">
        <h2>Quartz isn't trying to be a wiki. Or a CMS. Or a second brain.</h2>
        <div>
          <div class="pair">
            <div>
              <div class="label">Doesn't</div>
              <p class="strike">Auto-generate three-column landing pages from your outline.</p>
            </div>
            <div>
              <div class="label">Does</div>
              <p>Publish what you wrote, in the structure you wrote it in.</p>
            </div>
            <div>
              <div class="label">Doesn't</div>
              <p class="strike">Suggest emojis, AI summaries, "callout" blocks.</p>
            </div>
            <div>
              <div class="label">Does</div>
              <p>Honour the page break. Set the typography. Get out of the way.</p>
            </div>
            <div>
              <div class="label">Doesn't</div>
              <p class="strike">Sync to a database, then pretend the database doesn't exist.</p>
            </div>
            <div>
              <div class="label">Does</div>
              <p>Write Markdown to disk. Read Markdown from disk. Done.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="wrap pricing reveal" id="pricing" data-od-id="pricing">
      <div class="pricing-head">
        <h2>One plan for the writer. One for the team. The rest is sales calls.</h2>
        <p>Free for fourteen days. We don't ask for a card and we don't email you afterwards unless you write back first.</p>
      </div>
      <div class="tiers">
        <div class="tier">
          <h3>Solo</h3>
          <p class="sub">For one writer with strong opinions.</p>
          <div class="price">$9<small>/ month</small></div>
          <ul>
            <li>Unlimited documents</li>
            <li>Local-first, encrypted sync</li>
            <li>Markdown export & import</li>
            <li>Three custom themes</li>
          </ul>
          <button class="btn btn-ghost">Start solo</button>
        </div>
        <div class="tier tier--highlight">
          <h3>Studio</h3>
          <p class="sub">For docs teams up to twelve.</p>
          <div class="price">$22<small>/ seat / month</small></div>
          <ul>
            <li>Everything in Solo</li>
            <li>Inline review & approvals</li>
            <li>GitHub & Linear sync</li>
            <li>Audit log with diff history</li>
            <li>Static-site publish target</li>
          </ul>
          <button class="btn btn-primary">Start studio</button>
        </div>
        <div class="tier">
          <h3>Press</h3>
          <p class="sub">For publishers and large orgs.</p>
          <div class="price">Talk<small>/ to us</small></div>
          <ul>
            <li>SSO (SAML, OIDC)</li>
            <li>Self-hosted deployment</li>
            <li>Custom export pipelines</li>
            <li>Named support engineer</li>
          </ul>
          <button class="btn btn-ghost">Open a thread</button>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="wrap row">
      <span>Quartz · Bordeaux, FR · v0.4.7 · 2026</span>
      <span>
        <a href="#">Manual</a> · <a href="#">Changelog</a> · <a href="#">Status</a> · <a href="#">Privacy</a>
      </span>
    </div>
  </footer>

  <script>
    // Intersection-observer reveal — never window scroll listeners.
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); }
      }
    }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
    document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
  </script>
</body>
</html>