washi/index.html

<!DOCTYPE html>
<!-- © 2026 Andy Dixon · www.dixon.cx · All rights reserved. -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>和紙 · Washi — CSS Framework</title>
<meta name="theme-color" content="#f3ede1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="washi.css">
<style>
  /* page-local only: demo scaffolding, not part of the framework */
  .demo-section { scroll-margin-top: 80px; }
  .demo-section + .demo-section { margin-top: var(--sp-7); }
  .swatch { height: 64px; border-radius: var(--r); border: 1px solid var(--border); display: flex; align-items: flex-end; padding: 6px 8px; font-size: var(--fs-xs); }
  .swatch span { background: color-mix(in srgb, var(--paper) 80%, transparent); padding: 1px 5px; border-radius: 2px; }
</style>
</head>
<body>

<header class="site-header">
  <div class="brand">
    <span class="mark">和紙</span>
    <span class="mark-en">Washi</span>
  </div>
  <nav class="nav">
    <a href="#colour">Colour</a>
    <a href="#type">Type</a>
    <a href="#buttons">Buttons</a>
    <a href="#components">Components</a>
    <a href="#forms">Forms</a>
  </nav>
</header>

<!-- HERO -->
<section class="hero">
  <div class="container-sm">
    <span class="eyebrow">CSS Framework · 和紙</span>
    <h1 class="display">Paper &amp; sumi&nbsp;ink,<br>as a design&nbsp;system.</h1>
    <p>A warm, tactile component kit — washi-paper tones, vermilion seal red, jade and murasaki accents, monospace body type and Noto Serif&nbsp;JP display.</p>
    <div class="cluster">
      <a href="#components" class="btn btn-primary">Explore components</a>
      <a href="#colour" class="btn">View tokens</a>
      <button class="btn btn-info" onclick="toggleTheme()" id="themeBtn">☾ Sumi mode</button>
    </div>
  </div>
</section>

<main class="container stack-lg" style="padding-bottom: var(--sp-8);">

  <!-- COLOUR -->
  <section class="demo-section" id="colour">
    <div class="rule">色 · Colour</div>
    <div class="grid mt-6">
      <div class="swatch" style="background:var(--paper)"><span>--paper</span></div>
      <div class="swatch" style="background:var(--card)"><span>--card</span></div>
      <div class="swatch" style="background:var(--paper-2)"><span>--paper-2</span></div>
      <div class="swatch" style="background:var(--paper-3)"><span>--paper-3</span></div>
      <div class="swatch" style="background:var(--ink);color:var(--paper)"><span style="background:rgba(243,237,225,.2)">--ink</span></div>
      <div class="swatch" style="background:var(--accent);color:#fff"><span style="background:rgba(0,0,0,.2)">--accent</span></div>
      <div class="swatch" style="background:var(--jade);color:#fff"><span style="background:rgba(0,0,0,.2)">--jade</span></div>
      <div class="swatch" style="background:var(--murasaki);color:#fff"><span style="background:rgba(0,0,0,.2)">--murasaki</span></div>
      <div class="swatch" style="background:var(--gold);color:#fff"><span style="background:rgba(0,0,0,.2)">--gold</span></div>
      <div class="swatch" style="background:var(--muted);color:#fff"><span style="background:rgba(0,0,0,.2)">--muted</span></div>
    </div>
  </section>

  <!-- TYPE -->
  <section class="demo-section" id="type">
    <div class="rule">字 · Typography</div>
    <div class="grid-2 mt-6">
      <div class="stack">
        <span class="eyebrow">Eyebrow label</span>
        <h1>Display heading 見出し</h1>
        <h2>Section heading</h2>
        <h3>Subsection heading</h3>
        <p class="lead">A lead paragraph sets the tone — slightly larger, softer ink, tighter leading.</p>
        <p>Body copy is set in DM&nbsp;Mono for a precise, drafting-table feel. Inline <code>code</code>, a <a href="#">hyperlink</a>, <strong>strong</strong> emphasis, and <kbd>⌘K</kbd> keys all live here.</p>
      </div>
      <div class="stack">
        <blockquote>The space between things is where the design lives.
          <cite>— a maxim</cite></blockquote>
        <ul>
          <li>Marker bullets carry the accent colour</li>
          <li>Generous line-height for readability</li>
          <li>Consistent vertical rhythm</li>
        </ul>
        <pre><code>:root {
  --ink:    #1a1714;
  --paper:  #f3ede1;
  --accent: #c0392b;
}</code></pre>
      </div>
    </div>
  </section>

  <!-- BUTTONS -->
  <section class="demo-section" id="buttons">
    <div class="rule">釦 · Buttons</div>
    <div class="stack mt-6">
      <div class="cluster">
        <button class="btn">Default</button>
        <button class="btn btn-primary">Primary</button>
        <button class="btn btn-accent">Accent</button>
        <button class="btn btn-success">Success</button>
        <button class="btn btn-info">Info</button>
        <button class="btn btn-danger">Danger</button>
        <button class="btn btn-ghost">Ghost</button>
        <button class="btn" disabled>Disabled</button>
      </div>
      <div class="cluster">
        <button class="btn btn-sm btn-primary">Small</button>
        <button class="btn btn-primary">Regular</button>
        <button class="btn btn-lg btn-primary">Large</button>
        <button class="btn btn-info is-loading">✦ Solving…</button>
      </div>
      <div class="cluster">
        <div class="segmented">
          <button class="btn">6×6</button>
          <button class="btn active">8×8</button>
          <button class="btn">10×10</button>
        </div>
        <div class="pills">
          <button class="btn">Easy</button>
          <button class="btn active">Medium</button>
          <button class="btn">Hard</button>
        </div>
      </div>
    </div>
  </section>

  <!-- COMPONENTS -->
  <section class="demo-section" id="components">
    <div class="rule">部品 · Components</div>

    <h4 class="mt-6 mb-4 eyebrow">Cards</h4>
    <div class="grid-3">
      <article class="card card-accent card-hover">
        <div class="card-body stack-sm">
          <span class="badge badge-accent">New</span>
          <h3 class="card-title">Vermilion</h3>
          <p class="muted">Cards lift on hover and carry an optional coloured top-stripe.</p>
        </div>
      </article>
      <article class="card card-jade card-hover">
        <div class="card-header"><h3 class="card-title">Jade</h3><span class="seal seal-round">完</span></div>
        <div class="card-body"><p class="muted">A header row pairs nicely with a hanko seal.</p></div>
        <div class="card-footer cluster"><button class="btn btn-sm">Action</button></div>
      </article>
      <article class="card card-violet card-hover">
        <div class="card-body stack-sm">
          <h3 class="card-title">Murasaki</h3>
          <p class="muted">Soft warm shadows, hairline borders, paper surface.</p>
          <div class="cluster-sm"><span class="tag">tag</span><span class="tag">tag</span></div>
        </div>
      </article>
    </div>

    <h4 class="mt-6 mb-4 eyebrow">Badges, tags &amp; stats</h4>
    <div class="cluster mb-6">
      <span class="badge">Default</span>
      <span class="badge badge-accent">Accent</span>
      <span class="badge badge-jade">Jade</span>
      <span class="badge badge-violet">Violet</span>
      <span class="badge badge-gold">Gold</span>
      <span class="badge badge-solid">Solid</span>
    </div>
    <div class="grid-4 surface" style="padding:var(--sp-5)">
      <div class="stat"><span class="stat-num">和</span><span class="stat-label">Harmony</span></div>
      <div class="stat"><span class="stat-num">42</span><span class="stat-label">Projects</span></div>
      <div class="stat"><span class="stat-num">3:08</span><span class="stat-label">Avg time</span></div>
      <div class="stat"><span class="stat-num">98%</span><span class="stat-label">Uptime</span></div>
    </div>

    <h4 class="mt-6 mb-4 eyebrow">Alerts &amp; status</h4>
    <div class="stack">
      <div class="alert alert-accent"><div><span class="alert-title">Vermilion alert</span>Something needs attention.</div></div>
      <div class="alert alert-jade"><div><span class="alert-title">Success</span>The operation completed cleanly.</div></div>
      <div class="alert alert-violet"><div><span class="alert-title">Note</span>An aside, set apart in murasaki.</div></div>
      <div class="cluster">
        <span class="status">Default status</span>
        <span class="status error">Invalid input</span>
        <span class="status success">Looking good!</span>
        <span class="status info">Solving…</span>
      </div>
    </div>

    <h4 class="mt-6 mb-4 eyebrow">Table</h4>
    <div class="surface" style="overflow:hidden">
      <table class="table table-hover table-zebra">
        <thead><tr><th>Piece</th><th>Area</th><th>State</th></tr></thead>
        <tbody>
          <tr><td>Rectangle A</td><td>2 × 3</td><td><span class="badge badge-jade">Valid</span></td></tr>
          <tr><td>Rectangle B</td><td>1 × 4</td><td><span class="badge badge-jade">Valid</span></td></tr>
          <tr><td>Rectangle C</td><td>3 × 3</td><td><span class="badge badge-accent">Overlap</span></td></tr>
        </tbody>
      </table>
    </div>

    <h4 class="mt-6 mb-4 eyebrow">Overlay / modal</h4>
    <button class="btn btn-primary" onclick="document.getElementById('demo-overlay').classList.add('show')">Open modal</button>
  </section>

  <!-- FORMS -->
  <section class="demo-section" id="forms">
    <div class="rule">入力 · Forms</div>
    <div class="grid-2 mt-6">
      <div class="stack">
        <div class="field">
          <label for="n">Name</label>
          <input id="n" type="text" placeholder="Andy Dixon">
        </div>
        <div class="field">
          <label for="e">Email</label>
          <input id="e" type="email" class="is-valid" value="andy@dixon.cx">
          <span class="hint">Looks valid.</span>
        </div>
        <div class="field">
          <label for="s">Difficulty</label>
          <select id="s"><option>Easy</option><option selected>Medium</option><option>Hard</option></select>
        </div>
      </div>
      <div class="stack">
        <div class="field">
          <label for="m">Message</label>
          <textarea id="m" placeholder="Drag across cells to draw a rectangle…"></textarea>
        </div>
        <label class="check"><input type="checkbox" checked> Show clue numbers</label>
        <label class="check"><input type="radio" name="r" checked> Light · washi</label>
        <label class="check"><input type="radio" name="r"> Dark · sumi</label>
        <div class="input-group">
          <input type="search" placeholder="Search…">
          <button class="btn btn-primary">Go</button>
        </div>
      </div>
    </div>
  </section>

</main>

<footer class="site-footer">
  <span class="title-jp">和紙 · Washi</span>
  <span>A paper &amp; sumi-ink CSS framework</span>
  <span>© 2026 Andy Dixon · <a href="https://www.dixon.cx">www.dixon.cx</a></span>
</footer>

<!-- demo modal -->
<div class="overlay" id="demo-overlay">
  <div class="modal stack">
    <div class="win-kanji">完</div>
    <h3 class="card-title">Complete</h3>
    <p class="muted">Backdrop blur, fade-in, and a popped-in kanji.</p>
    <div class="cluster center">
      <button class="btn btn-primary" onclick="document.getElementById('demo-overlay').classList.remove('show')">Next →</button>
      <button class="btn" onclick="document.getElementById('demo-overlay').classList.remove('show')">Close</button>
    </div>
  </div>
</div>

<script>
  function toggleTheme() {
    const root = document.documentElement;
    const dark = root.getAttribute('data-theme') === 'sumi';
    root.setAttribute('data-theme', dark ? '' : 'sumi');
    document.getElementById('themeBtn').textContent = dark ? '☾ Sumi mode' : '☀ Washi mode';
  }
</script>
</body>
</html>