amadan

eleven / ocho Public

home: system-font wordmark, hint below the card, "Sign in" button (#327)

Landing polish from Paul's feedback:
- "Eleven" wordmark uses the system font (San Francisco on Apple), not the
  rounded display font.
- The reassurance line moves outside the card, sitting under it (and still
  hides once you're signed in).
- The button is just "Sign in" — the wordmark above already says Eleven.
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Paul Campbell 2e81e66fb9bf90ef398ecb743650ff2fde258731 parent 2c3e543
2 files changed, +16 −7
  • home/web/pages/index.html +14 −7
  • home/web/static/home.js +2 −0
diff --git a/home/web/pages/index.html b/home/web/pages/index.html
index c978127..038e2fa 100644
--- a/home/web/pages/index.html
+++ b/home/web/pages/index.html
@@ -16,12 +16,18 @@
/* The real app icon (web/static/icon-*.png, copied into home's static). The
PNG is already a rounded superellipse; the radius just cleans the edge. */
.brand-mark { width: 64px; height: 64px; border-radius: 15px; display: block; }
+ /* System font (San Francisco on Apple) for the wordmark — not the rounded
+ display font. */
.brand-word {
- font-family: var(--font-display); font-weight: 800;
- font-size: 26px; letter-spacing: -0.02em;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
+ font-weight: 800; font-size: 26px; letter-spacing: -0.02em;
}
#signin { width: 100%; }
- .reassure { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 16px 0 0; }
+ /* The reassurance sits OUTSIDE the card, under it. */
+ .reassure {
+ max-width: 360px; text-align: center; margin: 16px auto 0;
+ color: var(--muted); font-size: 13px; line-height: 1.45;
+ }
.linkish {
background: none; border: none; padding: 0; font: inherit; font-weight: 600;
color: var(--accent); cursor: pointer; text-decoration: underline;
@@ -59,11 +65,8 @@
<!-- The signed-out affordances; hidden once you're in (see showVault). -->
<div id="signed-out">
<div class="actions">
- <button id="signin">Sign in with Eleven</button>
+ <button id="signin">Sign in</button>
</div>
-
- <p class="reassure">No signup required, we don't store any personal details.
- We can't spam what we don't have.</p>
</div>
<!-- Inline status only — never a floating toast (product-wide rule). -->
@@ -95,6 +98,10 @@
<p class="status" id="vault-status"></p>
</div>
</main>
+
+<!-- Reassurance lives outside the card, under it; hidden once signed in. -->
+<p class="reassure" id="reassure">No signup required, we don't store any personal
+ details. We can't spam what we don't have.</p>
<script type="module" src="/static/home.js"></script>
</body>
</html>
diff --git a/home/web/static/home.js b/home/web/static/home.js
index 26a92b1..cd0e44e 100644
--- a/home/web/static/home.js
+++ b/home/web/static/home.js
@@ -140,6 +140,7 @@ function signOut() {
$("new-space-result").classList.add("hidden");
$("server-list").textContent = "";
$("signed-out").classList.remove("hidden");
+ $("reassure").classList.remove("hidden");
$("signin").disabled = false;
setStatus("Signed out.", "");
prefetchLogin(); // ready a fresh ceremony for the next sign-in
@@ -149,6 +150,7 @@ function signOut() {
function showVault() {
$("signed-out").classList.add("hidden");
+ $("reassure").classList.add("hidden");
$("vault").classList.remove("hidden");
if (spacesEnabled) $("space-section").classList.remove("hidden");
const list = $("server-list");