Re-theme demo in National Design Studio editorial style (black/white, Swiss grid, EOB masthead)

README.md

@@ -1,11 +1,11 @@
 ---
-title: Rampart PII Redaction
+title: Rampart
 emoji: 🛡️
-colorFrom: purple
-colorTo: indigo
+colorFrom: gray
+colorTo: gray
 sdk: static
 app_file: index.html
-short_description: Client-side PII redaction in your browser
+short_description: On-device PII redaction by National Design Studio
 ---
 
 # Rampart — Client-Side PII Redaction Demo

index.html

@@ -7,21 +7,21 @@
 <meta name="description" content="14.7 MB ONNX model that detects and redacts PII in your browser before it leaves your device. No server, no API, no data sent anywhere.">
 <style>
 :root {
-  --bg: #0a0a0f;
-  --bg-elev: #131318;
-  --bg-card: #16161c;
-  --border: #1e1e26;
-  --border-bright: #2a2a34;
-  --text: #e8e8ed;
-  --text-dim: #71717a;
-  --text-dimmer: #52525b;
-  --accent: #a78bfa;
-  --accent-dim: #7c3aed;
-  --accent-glow: rgba(167, 139, 250, 0.15);
-  --green: #4ade80;
-  --red: #f87171;
-  --radius: 12px;
-  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --bg: #000000;
+  --bg-elev: #0c0c0c;
+  --bg-card: #070707;
+  --border: rgba(255,255,255,0.14);
+  --border-bright: rgba(255,255,255,0.30);
+  --text: #ffffff;
+  --text-dim: rgba(255,255,255,0.62);
+  --text-dimmer: rgba(255,255,255,0.40);
+  --accent: #ffffff;
+  --accent-dim: #ffffff;
+  --accent-glow: rgba(255,255,255,0.08);
+  --green: #5dd39e;
+  --red: #ff5d5d;
+  --radius: 2px;
+  --font: "PP Neue Montreal", "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
   --mono: "SF Mono", "Fira Code", "Fira Mono", "Cascadia Code", Menlo, Consolas, monospace;
 }
 * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -564,6 +564,139 @@ textarea.input-box::placeholder { color: var(--text-dimmer); }
 .tooltip .tt-label { font-weight: 700; }
 .tooltip .tt-original { color: var(--text-dim); margin-top: 2px; }
 .tooltip .tt-score { color: var(--text-dimmer); margin-top: 2px; }
+
+/* ===================================================================== */
+/* National Design Studio editorial theme — black/white, Swiss grid,     */
+/* hairline rules, Roman-numeral section markers, arrow affordances.     */
+/* ===================================================================== */
+body { line-height: 1.5; letter-spacing: -0.005em; }
+::selection { background: #fff; color: #000; }
+
+/* Top nav */
+.nav {
+  display: flex; align-items: baseline; justify-content: space-between;
+  gap: 16px; padding: 22px 40px; border-bottom: 1px solid var(--border);
+}
+.nav-brand { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
+.nav-links { display: flex; gap: 26px; font-size: 14px; }
+.nav-links a { color: var(--text-dim); text-decoration: none; transition: color .15s; }
+.nav-links a:hover { color: #fff; }
+.nav-links a .arr { display: inline-block; transition: transform .2s ease; }
+.nav-links a:hover .arr { transform: translate(2px,-2px); }
+
+/* Hero — left-aligned editorial */
+.hero { text-align: left; padding: 80px 40px 56px; overflow: visible; }
+.hero::before { display: none; }
+.hero-badge {
+  border: 1px solid var(--border); border-radius: 99px; background: transparent;
+  color: var(--text-dim); margin-bottom: 36px; text-transform: none; letter-spacing: 0;
+}
+.hero-badge .dot { background: var(--green); box-shadow: none; }
+.hero h1 {
+  font-size: clamp(3rem, 9vw, 6.5rem); font-weight: 500; letter-spacing: -0.04em;
+  line-height: 0.95; margin-bottom: 22px;
+  background: none; -webkit-text-fill-color: #fff; color: #fff;
+}
+.hero p {
+  font-size: clamp(1.15rem, 2.2vw, 1.6rem); color: var(--text); line-height: 1.12;
+  max-width: 760px; margin: 0; letter-spacing: -0.02em; font-weight: 400;
+}
+.hero p .muted { color: var(--text-dim); }
+.hero-stats {
+  justify-content: flex-start; gap: 0; margin-top: 56px;
+  border-top: 1px solid var(--border);
+}
+.stat {
+  text-align: left; flex: 1; min-width: 120px; padding: 18px 24px 0 0;
+}
+.stat-val { font-size: 1.9rem; font-weight: 500; letter-spacing: -0.03em; }
+.stat-label {
+  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.66rem;
+  color: var(--text-dimmer); margin-top: 4px;
+}
+
+/* Layout */
+.container { max-width: 1280px; padding: 0 40px 96px; }
+.section { margin-bottom: 72px; }
+
+/* Section header: Roman numeral + label, hairline above */
+.section-title {
+  text-transform: none; letter-spacing: -0.01em; font-size: 1.05rem; color: var(--text);
+  border-top: 1px solid var(--border); padding-top: 20px; margin-bottom: 28px;
+  gap: 22px;
+}
+.section-title::after { display: none; }
+.section-title .rn {
+  display: inline-block; width: 2.4em; color: var(--text-dimmer);
+  font-variant-numeric: normal; font-feature-settings: normal;
+  font-size: 0.85rem; letter-spacing: 0.04em;
+}
+.section-title .lede { color: var(--text-dim); font-size: 0.95rem; margin-left: auto; max-width: 46ch; text-align: right; }
+
+/* Panels — square, hairline */
+.demo-panel, .chat-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
+.demo-header { padding: 18px 22px; }
+.demo-header-title { font-weight: 400; color: var(--text-dim); font-size: 13px; }
+.model-status { border-radius: 99px; background: transparent; }
+
+textarea.input-box, .chat-input, .output-box, .mapping-value, .stat-pill, .legend-item, .example-card {
+  border-radius: var(--radius);
+}
+textarea.input-box, .chat-input { background: #000; }
+textarea.input-box:focus, .chat-input:focus { border-color: #fff; }
+.output-box { background: #000; }
+
+/* Buttons — square, uppercase micro-label, invert on hover */
+.btn {
+  border-radius: var(--radius); background: transparent; color: var(--text-dim);
+  text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 500;
+  border: 1px solid var(--border); padding: 8px 14px;
+}
+.btn:hover { border-color: #fff; color: #fff; background: transparent; }
+.btn-primary { background: #fff; border-color: #fff; color: #000; }
+.btn-primary:hover { background: var(--text-dim); border-color: var(--text-dim); color: #000; }
+
+/* Tabs — minimal text, underline active */
+.tabs { gap: 28px; }
+.tab {
+  text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 500;
+  padding: 12px 0; color: var(--text-dimmer);
+}
+.tab:hover { color: var(--text); }
+.tab.active { color: #fff; border-bottom-color: #fff; }
+
+/* Cards */
+.example-card { background: var(--bg-card); }
+.example-card:hover { border-color: #fff; background: var(--bg-elev); }
+.example-card-title { color: #fff; text-transform: none; letter-spacing: 0; }
+.legend-item:hover { border-color: var(--border-bright); }
+.mapping-placeholder { color: #fff; }
+
+/* Footer — inverted white block, ND Studio masthead */
+.footer {
+  background: #fff; color: #000; text-align: left; border-top: none;
+  padding: 56px 40px; display: grid; gap: 32px;
+  grid-template-columns: 1.2fr 1fr; align-items: start; font-size: 14px;
+}
+.footer a { color: #000; text-decoration: underline; text-underline-offset: 3px; }
+.footer a:hover { color: #000; opacity: 0.6; }
+.footer .f-mark { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; max-width: 18ch; }
+.footer .f-addr { color: #333; line-height: 1.5; margin-top: 16px; font-size: 13px; }
+.footer .f-links { display: flex; flex-wrap: wrap; gap: 18px 26px; align-content: start; }
+.footer .f-legal { grid-column: 1 / -1; border-top: 1px solid rgba(0,0,0,0.15); padding-top: 20px; color: #444; font-size: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
+
+.loading-overlay { background: rgba(0,0,0,0.92); }
+.loading-spinner { border-color: var(--border); border-top-color: #fff; }
+.loading-progress-bar { background: #fff; }
+
+@media (max-width: 768px) {
+  .nav, .hero, .container, .footer { padding-left: 20px; padding-right: 20px; }
+  .hero { padding-top: 48px; }
+  .nav-links { gap: 16px; }
+  .section-title { flex-wrap: wrap; }
+  .section-title .lede { margin-left: 0; text-align: left; max-width: none; }
+  .footer { grid-template-columns: 1fr; }
+}
 </style>
 </head>
 <body>
@@ -578,17 +711,26 @@ textarea.input-box::placeholder { color: var(--text-dimmer); }
   </div>
 </div>
 
+<!-- NAV -->
+<nav class="nav">
+  <div class="nav-brand">National Design Studio</div>
+  <div class="nav-links">
+    <a href="https://huggingface.co/nationaldesignstudio/rampart" target="_blank" rel="noopener">Model <span class="arr">↗</span></a>
+    <a href="https://ndstudio.gov" target="_blank" rel="noopener">ndstudio.gov <span class="arr">↗</span></a>
+  </div>
+</nav>
+
 <!-- HERO -->
 <div class="hero">
   <div class="hero-badge">
     <span class="dot"></span>
-    Runs 100% in your browser · No data leaves your device
+    Runs entirely in your browser — no data leaves your device
   </div>
   <h1>Rampart</h1>
-  <p>A 14.7 MB ONNX model that detects and redacts personally identifiable information before it ever leaves your device — powered by transformers.js running entirely in your browser.</p>
+  <p>Personal information, redacted before it ever leaves your device. <span class="muted">A 14.7&nbsp;MB on-device model that finds and removes PII in real time — no server, no API, no data sent anywhere.</span></p>
   <div class="hero-stats">
     <div class="stat">
-      <div class="stat-val">14.7<span style="font-size:1rem">MB</span></div>
+      <div class="stat-val">14.7<span style="font-size:1rem"> MB</span></div>
       <div class="stat-label">Model Size</div>
     </div>
     <div class="stat">
@@ -601,10 +743,10 @@ textarea.input-box::placeholder { color: var(--text-dimmer); }
     </div>
     <div class="stat">
       <div class="stat-val">98.4<span style="font-size:1rem">%</span></div>
-      <div class="stat-label">Recall</div>
+      <div class="stat-label">Private-term recall</div>
     </div>
     <div class="stat">
-      <div class="stat-val">~4<span style="font-size:1rem">ms</span></div>
+      <div class="stat-val">~4<span style="font-size:1rem"> ms</span></div>
       <div class="stat-label">p50 Latency</div>
     </div>
   </div>
@@ -614,7 +756,7 @@ textarea.input-box::placeholder { color: var(--text-dimmer); }
 
   <!-- LIVE REDACTION DEMO -->
   <div class="section">
-    <div class="section-title">⚡ Live Redaction</div>
+    <div class="section-title"><span class="rn">I</span><span>Live Redaction</span><span class="lede">Type or paste text. PII is detected and replaced with stable placeholders, on-device, as you type.</span></div>
     <div class="demo-panel">
       <div class="demo-header">
         <div class="demo-header-left">
@@ -656,6 +798,7 @@ textarea.input-box::placeholder { color: var(--text-dimmer); }
 
   <!-- TABS: Examples / Entity Types / Chat Sim / Rehydration -->
   <div class="section">
+    <div class="section-title"><span class="rn">II</span><span>Reference</span><span class="lede">Examples, the full entity schema, a chat simulation, and the reversible placeholder map.</span></div>
     <div class="tabs">
       <button class="tab active" onclick="switchTab(event,'examples')">Example Gallery</button>
       <button class="tab" onclick="switchTab(event,'entities')">Entity Types</button>
@@ -727,15 +870,27 @@ textarea.input-box::placeholder { color: var(--text-dimmer); }
 </div>
 
 <!-- FOOTER -->
-<div class="footer">
-  <p>
-    <a href="https://huggingface.co/nationaldesignstudio/rampart" target="_blank" rel="noopener">Rampart Model</a> ·
-    <a href="https://www.npmjs.com/package/@nationaldesignstudio/rampart" target="_blank" rel="noopener">npm</a> ·
-    <a href="https://huggingface.co/datasets/ai4privacy/pii-masking-openpii-1.5m" target="_blank" rel="noopener">Training Data</a> ·
-    <a href="https://huggingface.co/docs/transformers.js" target="_blank" rel="noopener">transformers.js</a>
-  </p>
-  <p style="margin-top:8px">CC BY 4.0 · National Design Studio · Demo by Mike0021</p>
-</div>
+<footer class="footer">
+  <div>
+    <div class="f-mark">National Design Studio</div>
+    <div class="f-addr">
+      Eisenhower Executive Office Building<br>
+      1650 17th St NW,<br>
+      Washington, DC 20006
+    </div>
+  </div>
+  <div class="f-links">
+    <a href="https://huggingface.co/nationaldesignstudio/rampart" target="_blank" rel="noopener">Rampart Model ↗</a>
+    <a href="https://www.npmjs.com/package/@nationaldesignstudio/rampart" target="_blank" rel="noopener">npm ↗</a>
+    <a href="https://huggingface.co/datasets/ai4privacy/pii-masking-openpii-1.5m" target="_blank" rel="noopener">Training Data ↗</a>
+    <a href="https://huggingface.co/docs/transformers.js" target="_blank" rel="noopener">transformers.js ↗</a>
+    <a href="https://ndstudio.gov" target="_blank" rel="noopener">ndstudio.gov ↗</a>
+  </div>
+  <div class="f-legal">
+    <span>Rampart model — National Design Studio. CC&nbsp;BY&nbsp;4.0.</span>
+    <span>Demo build by Mike0021. This is America, designed.</span>
+  </div>
+</footer>
 
 <!-- TOOLTIP -->
 <div class="tooltip" id="tooltip"></div>