Repository source: docs/plans/ui_redesign/mockups/index.html
<title>ZenMemes Redesign Mockups</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="claude:viewport-fit-sides" content="cover">
<link rel="stylesheet" href="mockup.css">
<style>
.intro { display: grid; gap: 10px; max-width: 70ch; }
.intro h1 { margin: 0; font-size: 34px; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
.intro p { margin: 0; color: var(--doc-muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { display: grid; gap: 6px; padding: 18px; border-radius: 12px; background: var(--doc-panel); border: 1px solid var(--doc-line); text-decoration: none; color: var(--doc-ink); align-content: start; }
.card:hover { border-color: var(--doc-accent); }
.card .n { font: 600 12px/1 var(--mono); color: var(--doc-accent); }
.card b { font-size: 17px; }
.card span { color: var(--doc-muted); font-size: 14px; }
.principles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.principles div { background: var(--doc-panel); border: 1px solid var(--doc-line); border-radius: 12px; padding: 16px 18px; }
.principles h2 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--doc-muted); }
.principles ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--doc-muted); }
</style>
<div class="doc">
<header class="intro">
<h1>ZenMemes redesign mockups</h1>
<p>Eleven of the 53 page templates, about 20%, chosen as the screens people use most: reading the board, reading and replying to threads, posting, profiles, the member list, account setup, private messages and the tools launcher.</p>
<p>The focus is wording, arrangement and process flow. The visual skin is deliberately neutral, because themes restyle it. Each page shows desktop and phone frames, a light/dark switch, notes and a before screenshot.</p>
</header>
<p class="h2">Screens</p>
<nav class="cards">
<a class="card" href="shell.html"><span class="n">01</span><b>App shell & navigation</b><span>Three destinations, one New post, an account menu, and a phone tab bar.</span></a>
<a class="card" href="board.html"><span class="n">02</span><b>Board</b><span>A denser thread list with separate filter and sort, and a designed empty state.</span></a>
<a class="card" href="thread.html"><span class="n">03</span><b>Thread</b><span>Docked reply box, agent status in place, and tag-only posts as activity lines.</span></a>
<a class="card" href="compose-thread.html"><span class="n">04</span><b>New post</b><span>Title, body, tools. First-time name choice moves inline, with no browser prompt.</span></a>
<a class="card" href="compose-reply.html"><span class="n">05</span><b>Reply composer</b><span>The no-JS fallback, sharing one component with New post.</span></a>
<a class="card" href="profile.html"><span class="n">06</span><b>Profile</b><span>One person page with a Message button. Keys are listed as identities.</span></a>
<a class="card" href="users.html"><span class="n">07</span><b>Users</b><span>Searchable compact list, with pending approvals beside it.</span></a>
<a class="card" href="account.html"><span class="n">08</span><b>Account</b><span>Three clear states, a backup warning up front, and the advanced key controls set aside.</span></a>
<a class="card" href="messages.html"><span class="n">09</span><b>Messages</b><span>Conversation list, two panes on desktop, and an explanation for members not yet approved.</span></a>
<a class="card" href="conversation.html"><span class="n">10</span><b>Conversation</b><span>Bubbles, a plain-language encryption line, and per-message failure recovery.</span></a>
<a class="card" href="tools.html"><span class="n">11</span><b>Tools</b><span>Grouped by who uses them, with each tool listed once instead of twice.</span></a>
</nav>
<header class="intro" style="margin-top:8px">
<p class="h2">Themed set · “Living Sky”</p>
<p>A ZenMemes default skin applied to six of the screens above, as one stylesheet layered on the same structure (<code>zen/zen.css</code>). The whole screen is a moving sky: a dawn gradient in light mode, and deep space with drifting nebulae, twinkling stars and the occasional shooting star in dark mode. Each sky is tinted by whoever the screen is about. Content floats on frosted glass. People are glowing planets in their own colors, icons are drawn in color, and one ember-to-violet gradient marks every primary action. Each page has a Base / Living Sky / Ma switch for comparison.</p>
<p class="h2" style="margin-top:8px">Second theme · “Ma” (間), the meaningful empty space</p>
<p>The same six pages, designed as if by a panel: Kenya Hara, Tadao Ando, James Turrell, teamLab, Tyler Hobbs, Ikko Tanaka and Shigeo Fukuda. Paper, space and a quiet serif. One shaft of light crosses each page, and the page is lit from above in the color of whoever it is about. Petals fall with the community’s activity. Keys are drawn as flow fields, people are flat geometric shapes, and the logo is an ensō that is also a calm face, next to a vermilion seal. No blur anywhere. The pages open in Ma.</p>
<p>Ma is Kyoto by day and Shinjuku by night: dark mode turns cyberpunk. The seal becomes a neon sign, rain falls instead of petals, keys glow like neon tubing, account cards read like ID chips with real key data, incoming messages visibly decrypt, and glitches appear only on failures.</p>
</header>
<nav class="cards">
<a class="card" href="zen/board.html"><span class="n">T1</span><b>Board</b><span>A live sky that brightens on busy days and stills on quiet ones. Ensō logo.</span></a>
<a class="card" href="zen/thread.html"><span class="n">T2</span><b>Thread</b><span>The sky takes the poster’s color. Replies are glass cards; the agent is drawn as an aurora, not a planet.</span></a>
<a class="card" href="zen/profile.html"><span class="n">T3</span><b>Profile</b><span>Their sky, their constellation, and a ringed planet for an avatar.</span></a>
<a class="card" href="zen/account.html"><span class="n">T4</span><b>Account</b><span>The account card is a night sky in your color, with an orbit while your key is made.</span></a>
<a class="card" href="zen/tools.html"><span class="n">T5</span><b>Tools</b><span>Colored glyphs, not colored tiles. Related shades per group.</span></a>
<a class="card" href="zen/conversation.html"><span class="n">T6</span><b>Conversation</b><span>Under the other person’s sky. Their bubbles in their color, yours in the gradient.</span></a>
</nav>
<section class="principles">
<div>
<h2>Wording</h2>
<ul>
<li>Name things the way readers do (“Back up account”), not the way the system works (“Download text backup”).</li>
<li>Short metadata (“ilyag · Sep 6”). Exact times are available on demand.</li>
<li>Remove copy that restates a control. Keep warnings about privacy and data loss next to the decision they affect.</li>
</ul>
</div>
<div>
<h2>Arrangement</h2>
<ul>
<li>One primary action per screen.</li>
<li>Lists separated by hairlines instead of a box around every item.</li>
<li>Rare and operator-only controls go behind ··· or Advanced.</li>
</ul>
</div>
<div>
<h2>Flow</h2>
<ul>
<li>No native <code>prompt()</code> or <code>confirm()</code> dialogs. Decisions happen in the page.</li>
<li>Slow work (key generation, decryption) starts before the user asks for it.</li>
<li>Every failure says what happened and offers the fix the user can apply.</li>
</ul>
</div>
</section>
<p class="doc-files" style="margin:0">Plan: docs/plans/ui_redesign/plan_prompt.md · Mockups only; no application code changed · Dependency delta: zero</p>
</div>
<script src="mockup.js"></script>