docs: compare three panel headers against the current one

At nav size the stamp cannot carry itself: its perforation is under a pixel and its brick field dissolves into the brick bar, leaving a thin frame around the name. The perforated edge under the bar was also drawn inverted - round bumps with pointed gaps, where a real perforation is round holes with flat teeth. header/ puts the current header beside three replacements on a real page: A, the wordmark alone with round holes of page colour bitten into the bar at the mark's own hole-to-tooth ratio; B, the wordmark on a plain bar; C, a stamp-paper header with an ink hairline, the mark's perforation, and brick only behind the name. The wordmark files are the stamp's own outlines, cut out of selfpost-stamp-compact.svg. A comparison sheet pending the owner's choice; the 33 mockups and the design contract are unchanged. Also tracks .claude/launch.json, the local static server the mockups are previewed with. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-21 22:24:37 +03:00
parent 2f7b5d95c3
commit 4921416384
7 changed files with 147 additions and 0 deletions
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Header variants · SelfPost</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3/dist/tabler-icons.min.css">
+<link rel="stylesheet" href="../shared/brand.css">
+<link rel="stylesheet" href="../panel/theme.css">
+<link rel="stylesheet" href="variants.css">
+</head>
+<body>
+<div class="hv-note"><h1>Header: the mark, the name, the edge</h1>
+<p class="sp-muted">At nav size the stamp cannot carry itself: its perforation is under a pixel and its brick field dissolves into the brick bar, leaving a thin frame. And the current edge is inverted — a real perforation is round holes with flat teeth, not round bumps.</p></div>
+
+<div class="hv-label"><b>Now</b><span>the stamp at nav size, round bumps hanging off the bar</span></div>
+<div class="hv-frame hv-0">
+<nav class="navbar is-primary"><div class="container">
+  <div class="navbar-brand"><a class="navbar-item" href="#"><img src="../../selfpost-stamp-compact.svg" alt="SelfPost"></a></div>
+  <div class="navbar-menu is-active"><div class="navbar-start"><a class="navbar-item" href="#">Overview</a><a class="navbar-item sp-current" href="#">Outbound</a><a class="navbar-item" href="#">Inbound</a><a class="navbar-item" href="#">Server</a></div>
+  <div class="navbar-end"><a class="navbar-item" href="#"><i class="ti ti-user-circle"></i>&nbsp;admin</a></div></div>
+</div></nav>
+<div class="sp-perf"></div>
+<div class="sp-subnav"><div class="container"><a href="#" aria-current="page"><i class="ti ti-world-upload"></i>Domains</a><a href="#"><i class="ti ti-list-details"></i>Log</a><a href="#"><i class="ti ti-stack-2"></i>Queue</a><a href="#"><i class="ti ti-report-analytics"></i>DMARC reports</a></div></div>
+<div class="container"><div class="sp-head">
+  <div class="sp-postmark sp-fail"><span>DNS</span><b>FAIL</b><span>1 OF 3 RECORDS</span></div>
+  <div class="sp-grow"><p class="sp-kicker">Outbound domains /</p><h1 class="title is-3">example.org</h1><p class="sp-lead">1 284 messages in 30 days · peak 96 msg/h</p></div>
+  <div class="buttons"><a class="button" href="#"><i class="ti ti-refresh"></i>Re-check DNS</a><a class="button is-primary" href="#"><i class="ti ti-plus"></i>Add application</a></div>
+</div></div>
+</div>
+
+<div class="hv-label"><b>A · name + real perforation</b><span>wordmark only; round holes of page colour bitten into the bar, the mark's own hole-to-tooth ratio</span></div>
+<div class="hv-frame hv-a">
+<nav class="navbar is-primary"><div class="container">
+  <div class="navbar-brand"><a class="navbar-item" href="#"><img class="hv-word" src="wordmark-cream.svg" alt="SelfPost"></a></div>
+  <div class="navbar-menu is-active"><div class="navbar-start"><a class="navbar-item" href="#">Overview</a><a class="navbar-item sp-current" href="#">Outbound</a><a class="navbar-item" href="#">Inbound</a><a class="navbar-item" href="#">Server</a></div>
+  <div class="navbar-end"><a class="navbar-item" href="#"><i class="ti ti-user-circle"></i>&nbsp;admin</a></div></div>
+</div></nav>
+<div class="hv-perf"></div>
+<div class="sp-subnav"><div class="container"><a href="#" aria-current="page"><i class="ti ti-world-upload"></i>Domains</a><a href="#"><i class="ti ti-list-details"></i>Log</a><a href="#"><i class="ti ti-stack-2"></i>Queue</a><a href="#"><i class="ti ti-report-analytics"></i>DMARC reports</a></div></div>
+<div class="container"><div class="sp-head">
+  <div class="sp-postmark sp-fail"><span>DNS</span><b>FAIL</b><span>1 OF 3 RECORDS</span></div>
+  <div class="sp-grow"><p class="sp-kicker">Outbound domains /</p><h1 class="title is-3">example.org</h1><p class="sp-lead">1 284 messages in 30 days · peak 96 msg/h</p></div>
+  <div class="buttons"><a class="button" href="#"><i class="ti ti-refresh"></i>Re-check DNS</a><a class="button is-primary" href="#"><i class="ti ti-plus"></i>Add application</a></div>
+</div></div>
+</div>
+
+<div class="hv-label"><b>B · name, no edge</b><span>wordmark only, a plain bar; the stamp and its perforation stay on sign-in, setup and the favicon</span></div>
+<div class="hv-frame hv-b">
+<nav class="navbar is-primary"><div class="container">
+  <div class="navbar-brand"><a class="navbar-item" href="#"><img class="hv-word" src="wordmark-cream.svg" alt="SelfPost"></a></div>
+  <div class="navbar-menu is-active"><div class="navbar-start"><a class="navbar-item" href="#">Overview</a><a class="navbar-item sp-current" href="#">Outbound</a><a class="navbar-item" href="#">Inbound</a><a class="navbar-item" href="#">Server</a></div>
+  <div class="navbar-end"><a class="navbar-item" href="#"><i class="ti ti-user-circle"></i>&nbsp;admin</a></div></div>
+</div></nav>
+<div class="sp-subnav"><div class="container"><a href="#" aria-current="page"><i class="ti ti-world-upload"></i>Domains</a><a href="#"><i class="ti ti-list-details"></i>Log</a><a href="#"><i class="ti ti-stack-2"></i>Queue</a><a href="#"><i class="ti ti-report-analytics"></i>DMARC reports</a></div></div>
+<div class="container"><div class="sp-head">
+  <div class="sp-postmark sp-fail"><span>DNS</span><b>FAIL</b><span>1 OF 3 RECORDS</span></div>
+  <div class="sp-grow"><p class="sp-kicker">Outbound domains /</p><h1 class="title is-3">example.org</h1><p class="sp-lead">1 284 messages in 30 days · peak 96 msg/h</p></div>
+  <div class="buttons"><a class="button" href="#"><i class="ti ti-refresh"></i>Re-check DNS</a><a class="button is-primary" href="#"><i class="ti ti-plus"></i>Add application</a></div>
+</div></div>
+</div>
+
+<div class="hv-label"><b>C · the header is the stamp</b><span>stamp paper, ink hairline and the mark's perforation; brick only behind the name, as on the mark</span></div>
+<div class="hv-frame hv-c">
+<nav class="navbar"><div class="container">
+  <div class="navbar-brand"><a class="hv-brand" href="#"><img class="hv-word" src="wordmark-cream.svg" alt="SelfPost"></a></div>
+  <div class="navbar-menu is-active"><div class="navbar-start"><a class="navbar-item" href="#">Overview</a><a class="navbar-item hv-current" href="#">Outbound</a><a class="navbar-item" href="#">Inbound</a><a class="navbar-item" href="#">Server</a></div>
+  <div class="navbar-end"><a class="navbar-item" href="#"><i class="ti ti-user-circle"></i>&nbsp;admin</a></div></div>
+</div></nav>
+<div class="hv-perf"></div>
+<div class="sp-subnav"><div class="container"><a href="#" aria-current="page"><i class="ti ti-world-upload"></i>Domains</a><a href="#"><i class="ti ti-list-details"></i>Log</a><a href="#"><i class="ti ti-stack-2"></i>Queue</a><a href="#"><i class="ti ti-report-analytics"></i>DMARC reports</a></div></div>
+<div class="container"><div class="sp-head">
+  <div class="sp-postmark sp-fail"><span>DNS</span><b>FAIL</b><span>1 OF 3 RECORDS</span></div>
+  <div class="sp-grow"><p class="sp-kicker">Outbound domains /</p><h1 class="title is-3">example.org</h1><p class="sp-lead">1 284 messages in 30 days · peak 96 msg/h</p></div>
+  <div class="buttons"><a class="button" href="#"><i class="ti ti-refresh"></i>Re-check DNS</a><a class="button is-primary" href="#"><i class="ti ti-plus"></i>Add application</a></div>
+</div></div>
+</div>
+
+</body>
+</html>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="7" viewBox="0 0 16 7">
+<path d="M0 0H16V6H13A5 5 0 0 0 3 6H0Z" fill="#F3EDE1"/>
+<path d="M0 6H3A5 5 0 0 1 13 6H16" fill="none" stroke="#12161C" stroke-width="0.7"/>
+</svg>
@@ -0,0 +1,33 @@
+/* Three takes on the panel header, on top of panel/theme.css. A comparison
+   sheet, not part of the design contract: the chosen one moves into
+   panel/theme.css and build.py, the rest is deleted. */
+body { display: block; }
+.hv-note { max-width: 60rem; margin: 2rem auto 0; padding: 0 1.5rem; }
+.hv-note h1 { font-size: 1.6rem; font-weight: 600; margin-bottom: .4rem; }
+.hv-label { max-width: 1344px; margin: 2.6rem auto .6rem; padding: 0 1.5rem; display: flex; gap: 1rem; align-items: baseline; }
+.hv-label b { font-family: var(--sp-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-brick); }
+.hv-label span { color: var(--sp-muted); }
+.hv-frame { border-block: 1px solid var(--sp-rule); background: var(--sp-paper); padding-bottom: 1.5rem; }
+.hv-frame .sp-head { margin: 1.6rem 0 0; }
+
+.hv-word { width: auto; display: block; }
+.navbar-brand img.hv-word { max-height: none; height: 1.45rem; }
+
+/* A — brick bar, wordmark, the stamp's real edge: round holes of page colour
+   bitten into the bar, hole wider than tooth (r / pitch = 5 / 16, the mark's
+   2.2 / 7.03). */
+.hv-a .hv-perf {
+  height: 5px; margin-top: -5px; position: relative; z-index: 31; /* above Bulma's navbar (30) */
+  background: radial-gradient(circle at 8px 5px, var(--sp-paper) 5px, transparent 5.6px);
+  background-size: 16px 5px; background-repeat: repeat-x;
+}
+
+/* C — the header is the stamp: its paper, its ink hairline, its perforation;
+   brick is only the block behind the name, as on the mark. */
+.hv-c .navbar { background: var(--sp-stamp-paper); --bulma-navbar-height: 4rem; }
+.hv-c .navbar-item, .hv-c .navbar-link { color: var(--sp-ink); font-weight: 500; }
+.hv-c .navbar-link::after { border-color: var(--sp-brick); }
+.hv-c .hv-brand { background: var(--sp-brick); padding: .7rem 1.1rem; margin-block: .55rem; margin-right: 1rem; display: flex; align-items: center; }
+.hv-c .hv-current { box-shadow: inset 0 -3px 0 var(--sp-brick); color: var(--sp-brick); }
+.hv-c .hv-perf { height: 7px; background: url("perf-edge.svg") repeat-x; background-size: 16px 7px; }
+.hv-b .sp-subnav, .hv-a .sp-subnav, .hv-c .sp-subnav { margin-top: 0; }
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="52 39.8 117.4 27.6" role="img" aria-label="SelfPost">
+<!-- The wordmark of selfpost-stamp-compact.svg on its own: the same outlines, no stamp. -->
+<path d="M61.06 66.41Q58.14 66.41 56.23 65.3Q54.33 64.2 53 62.46L53.96 61.72Q55.21 63.35 56.86 64.32Q58.51 65.29 61.1 65.29Q64.05 65.29 65.67 63.89Q67.28 62.5 67.28 59.88Q67.28 58.08 66.6 57.04Q65.92 56 64.73 55.46Q63.54 54.92 62.08 54.61L59.8 54.17Q57.46 53.73 56.12 52.83Q54.77 51.92 54.18 50.68Q53.58 49.44 53.58 47.98Q53.58 45.91 54.5 44.55Q55.42 43.19 57.08 42.52Q58.75 41.86 60.96 41.86Q63.61 41.86 65.38 42.78Q67.15 43.7 68.17 45.23L67.22 45.94Q66.2 44.48 64.67 43.73Q63.14 42.98 60.89 42.98Q58.07 42.98 56.46 44.21Q54.84 45.43 54.84 47.95Q54.84 49.61 55.54 50.61Q56.23 51.62 57.42 52.16Q58.61 52.71 60.08 53.01L62.35 53.45Q64.77 53.9 66.11 54.83Q67.45 55.77 67.98 57.04Q68.51 58.32 68.51 59.78Q68.51 61.95 67.61 63.42Q66.71 64.88 65.02 65.64Q63.34 66.41 61.06 66.41Z M78.56 66.41Q76.28 66.41 74.64 65.35Q72.99 64.3 72.09 62.29Q71.18 60.29 71.18 57.36Q71.18 54.44 72.07 52.42Q72.95 50.39 74.57 49.36Q76.18 48.32 78.46 48.32Q80.57 48.32 82.17 49.37Q83.76 50.43 84.67 52.35Q85.57 54.27 85.57 56.89V57.43H72.44V58.35Q72.44 61.51 74.06 63.43Q75.67 65.35 78.6 65.35Q80.64 65.35 82.08 64.35Q83.53 63.35 84.27 61.41L85.19 61.92Q84.44 63.96 82.74 65.18Q81.04 66.41 78.56 66.41ZM78.46 49.34Q76.56 49.34 75.21 50.21Q73.87 51.07 73.16 52.66Q72.44 54.24 72.44 56.34V56.48H84.27V56.28Q84.27 54.17 83.54 52.62Q82.81 51.07 81.5 50.21Q80.19 49.34 78.46 49.34Z M93.72 66H91.17Q90.42 66 90.06 65.63Q89.7 65.25 89.7 64.57V40.84H90.89V64.95H93.72Z M97.92 66V49.78H94.83V48.73H97.92V42.57Q97.92 41.76 98.33 41.3Q98.74 40.84 99.59 40.84H102.99V41.89H99.11V48.73H102.99V49.78H99.11V66Z M109.88 66H105.39V42.27H116.07Q118.28 42.27 119.84 43.19Q121.41 44.1 122.26 45.75Q123.11 47.4 123.11 49.61Q123.11 51.82 122.26 53.47Q121.41 55.12 119.84 56.04Q118.28 56.96 116.07 56.96H109.88ZM109.88 46.18V53.08H115.66Q116.55 53.08 117.16 52.76Q117.77 52.43 118.11 51.84Q118.45 51.24 118.45 50.39V48.83Q118.45 47.95 118.11 47.37Q117.77 46.79 117.16 46.48Q116.55 46.18 115.66 46.18Z M132.75 66.41Q130.24 66.41 128.38 65.27Q126.53 64.13 125.53 62.04Q124.53 59.95 124.53 57.09Q124.53 54.24 125.53 52.18Q126.53 50.12 128.38 48.98Q130.24 47.84 132.75 47.84Q135.3 47.84 137.16 48.98Q139.01 50.12 140.01 52.18Q141.02 54.24 141.02 57.09Q141.02 59.95 140.01 62.04Q139.01 64.13 137.16 65.27Q135.3 66.41 132.75 66.41ZM132.75 62.91Q134.49 62.91 135.47 61.83Q136.46 60.76 136.46 58.76V55.46Q136.46 53.45 135.47 52.4Q134.49 51.35 132.75 51.35Q131.09 51.35 130.08 52.4Q129.08 53.45 129.08 55.46V58.76Q129.08 60.76 130.08 61.83Q131.09 62.91 132.75 62.91Z M149.47 66.41Q146.92 66.41 145.19 65.54Q143.45 64.67 142.13 63.14L144.78 60.56Q145.77 61.68 146.94 62.33Q148.11 62.97 149.64 62.97Q151.21 62.97 151.9 62.43Q152.6 61.89 152.6 60.93Q152.6 60.15 152.11 59.69Q151.61 59.23 150.42 59.06L148.66 58.83Q146.75 58.59 145.43 57.94Q144.1 57.3 143.42 56.17Q142.74 55.05 142.74 53.45Q142.74 50.87 144.59 49.36Q146.45 47.84 149.47 47.84Q151.21 47.84 152.45 48.17Q153.69 48.49 154.64 49.12Q155.59 49.75 156.41 50.63L153.86 53.18Q153.08 52.37 151.99 51.82Q150.9 51.28 149.61 51.28Q148.25 51.28 147.58 51.77Q146.92 52.26 146.92 53.11Q146.92 54 147.45 54.46Q147.98 54.92 149.23 55.12L151.04 55.36Q153.96 55.77 155.37 57.08Q156.78 58.38 156.78 60.59Q156.78 62.29 155.88 63.62Q154.98 64.95 153.33 65.68Q151.68 66.41 149.47 66.41Z M168.09 66H164.97Q162.72 66 161.55 64.83Q160.38 63.65 160.38 61.48V51.69H157.76V48.25H159.12Q160.1 48.25 160.46 47.79Q160.82 47.33 160.82 46.42V43.39H164.73V48.25H168.37V51.69H164.73V62.53H168.09Z" fill="#F6EDE2"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="52 39.8 117.4 27.6" role="img" aria-label="SelfPost">
+<!-- The wordmark of selfpost-stamp-compact.svg on its own: the same outlines, no stamp. -->
+<path d="M61.06 66.41Q58.14 66.41 56.23 65.3Q54.33 64.2 53 62.46L53.96 61.72Q55.21 63.35 56.86 64.32Q58.51 65.29 61.1 65.29Q64.05 65.29 65.67 63.89Q67.28 62.5 67.28 59.88Q67.28 58.08 66.6 57.04Q65.92 56 64.73 55.46Q63.54 54.92 62.08 54.61L59.8 54.17Q57.46 53.73 56.12 52.83Q54.77 51.92 54.18 50.68Q53.58 49.44 53.58 47.98Q53.58 45.91 54.5 44.55Q55.42 43.19 57.08 42.52Q58.75 41.86 60.96 41.86Q63.61 41.86 65.38 42.78Q67.15 43.7 68.17 45.23L67.22 45.94Q66.2 44.48 64.67 43.73Q63.14 42.98 60.89 42.98Q58.07 42.98 56.46 44.21Q54.84 45.43 54.84 47.95Q54.84 49.61 55.54 50.61Q56.23 51.62 57.42 52.16Q58.61 52.71 60.08 53.01L62.35 53.45Q64.77 53.9 66.11 54.83Q67.45 55.77 67.98 57.04Q68.51 58.32 68.51 59.78Q68.51 61.95 67.61 63.42Q66.71 64.88 65.02 65.64Q63.34 66.41 61.06 66.41Z M78.56 66.41Q76.28 66.41 74.64 65.35Q72.99 64.3 72.09 62.29Q71.18 60.29 71.18 57.36Q71.18 54.44 72.07 52.42Q72.95 50.39 74.57 49.36Q76.18 48.32 78.46 48.32Q80.57 48.32 82.17 49.37Q83.76 50.43 84.67 52.35Q85.57 54.27 85.57 56.89V57.43H72.44V58.35Q72.44 61.51 74.06 63.43Q75.67 65.35 78.6 65.35Q80.64 65.35 82.08 64.35Q83.53 63.35 84.27 61.41L85.19 61.92Q84.44 63.96 82.74 65.18Q81.04 66.41 78.56 66.41ZM78.46 49.34Q76.56 49.34 75.21 50.21Q73.87 51.07 73.16 52.66Q72.44 54.24 72.44 56.34V56.48H84.27V56.28Q84.27 54.17 83.54 52.62Q82.81 51.07 81.5 50.21Q80.19 49.34 78.46 49.34Z M93.72 66H91.17Q90.42 66 90.06 65.63Q89.7 65.25 89.7 64.57V40.84H90.89V64.95H93.72Z M97.92 66V49.78H94.83V48.73H97.92V42.57Q97.92 41.76 98.33 41.3Q98.74 40.84 99.59 40.84H102.99V41.89H99.11V48.73H102.99V49.78H99.11V66Z M109.88 66H105.39V42.27H116.07Q118.28 42.27 119.84 43.19Q121.41 44.1 122.26 45.75Q123.11 47.4 123.11 49.61Q123.11 51.82 122.26 53.47Q121.41 55.12 119.84 56.04Q118.28 56.96 116.07 56.96H109.88ZM109.88 46.18V53.08H115.66Q116.55 53.08 117.16 52.76Q117.77 52.43 118.11 51.84Q118.45 51.24 118.45 50.39V48.83Q118.45 47.95 118.11 47.37Q117.77 46.79 117.16 46.48Q116.55 46.18 115.66 46.18Z M132.75 66.41Q130.24 66.41 128.38 65.27Q126.53 64.13 125.53 62.04Q124.53 59.95 124.53 57.09Q124.53 54.24 125.53 52.18Q126.53 50.12 128.38 48.98Q130.24 47.84 132.75 47.84Q135.3 47.84 137.16 48.98Q139.01 50.12 140.01 52.18Q141.02 54.24 141.02 57.09Q141.02 59.95 140.01 62.04Q139.01 64.13 137.16 65.27Q135.3 66.41 132.75 66.41ZM132.75 62.91Q134.49 62.91 135.47 61.83Q136.46 60.76 136.46 58.76V55.46Q136.46 53.45 135.47 52.4Q134.49 51.35 132.75 51.35Q131.09 51.35 130.08 52.4Q129.08 53.45 129.08 55.46V58.76Q129.08 60.76 130.08 61.83Q131.09 62.91 132.75 62.91Z M149.47 66.41Q146.92 66.41 145.19 65.54Q143.45 64.67 142.13 63.14L144.78 60.56Q145.77 61.68 146.94 62.33Q148.11 62.97 149.64 62.97Q151.21 62.97 151.9 62.43Q152.6 61.89 152.6 60.93Q152.6 60.15 152.11 59.69Q151.61 59.23 150.42 59.06L148.66 58.83Q146.75 58.59 145.43 57.94Q144.1 57.3 143.42 56.17Q142.74 55.05 142.74 53.45Q142.74 50.87 144.59 49.36Q146.45 47.84 149.47 47.84Q151.21 47.84 152.45 48.17Q153.69 48.49 154.64 49.12Q155.59 49.75 156.41 50.63L153.86 53.18Q153.08 52.37 151.99 51.82Q150.9 51.28 149.61 51.28Q148.25 51.28 147.58 51.77Q146.92 52.26 146.92 53.11Q146.92 54 147.45 54.46Q147.98 54.92 149.23 55.12L151.04 55.36Q153.96 55.77 155.37 57.08Q156.78 58.38 156.78 60.59Q156.78 62.29 155.88 63.62Q154.98 64.95 153.33 65.68Q151.68 66.41 149.47 66.41Z M168.09 66H164.97Q162.72 66 161.55 64.83Q160.38 63.65 160.38 61.48V51.69H157.76V48.25H159.12Q160.1 48.25 160.46 47.79Q160.82 47.33 160.82 46.42V43.39H164.73V48.25H168.37V51.69H164.73V62.53H168.09Z" fill="#12161C"/>
+</svg>