impeccable: Spectral+Jost fonts, eased transitions, text vars, timeline labels, focus glow, narrower sidebar

.impeccable.md

@@ -0,0 +1,17 @@
+## Design Context
+
+### Users
+TTRPG players (typically 2-6 people) using this collaboratively around a table or over video call. Mix of casual and enthusiast gamers. Used during active play sessions and between sessions to review the history they've built. The person who set up the site has more admin access than other players.
+
+### Brand Personality
+Archival. Serious. Atmospheric. Like a field record from a frontier colony that actually existed — worn documents, brass fittings, classified reports, the weight of real history. The game is called Space Station 33. NOT: space-age glossy sci-fi. YES: grimy industrial, lived-in, 19th-century expedition logs meets deep-space infrastructure.
+
+### Aesthetic Direction
+Dark mode — players use this in dimly-lit rooms during evening sessions. The existing palette is strong: near-black warm void, brass gold accents, rust red for dark mood, moss green for ongoing/active, teal for cast/people. Typography uses Georgia for headers (good serif anchor), system sans for body. The aesthetic should feel like a real archival document system — authoritative, dense, trustworthy. Anti-references: anything that looks like a SaaS dashboard, anything glowing/neon, anything that feels like it was made in Figma in 2023.
+
+### Design Principles
+1. **Weight = history** — things that matter should feel heavy and real, not lightweight and clickable
+2. **Typography does the work** — hierarchy through size and weight, not color or decoration
+3. **Silence is deliberate** — whitespace should feel considered, not just "airy"
+4. **No chrome without purpose** — UI elements earn their existence by doing something specific
+5. **The tool disappears into the game** — players should feel like they're looking at a real archive, not a web app

game.html

@@ -19,9 +19,12 @@
       --moss: #70794e;
       --oxygen: #86a5a4;
       --line: rgba(232, 220, 196, .18);
+      --text-secondary: #d0c6b3;
+      --text-body: #c2b7a4;
+      --text-dim: #b8ae9e;
       --shadow: 0 22px 70px rgba(0,0,0,.42);
-      --serif: Georgia, "Times New Roman", serif;
+      --serif: Spectral, Georgia, "Times New Roman", serif;
-      --sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
+      --sans: Jost, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
       --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
     }
     * { box-sizing: border-box; }
@@ -65,7 +68,7 @@
       padding: 1rem 0;
       text-decoration: none;
       white-space: nowrap;
-      font: 650 .72rem/1 var(--mono);
+      font: 700 .72rem/1 var(--mono);
       letter-spacing: .14em;
       text-transform: uppercase;
       color: var(--muted);
@@ -82,7 +85,7 @@
       letter-spacing: .14em;
       text-transform: uppercase;
       cursor: pointer;
-      transition: all .15s;
+      transition: background 0.18s cubic-bezier(0.22,1,.36,1), border-color 0.18s cubic-bezier(0.22,1,.36,1), color 0.18s cubic-bezier(0.22,1,.36,1);
       white-space: nowrap;
     }
     .edit-toggle.locked { color: var(--muted); }
@@ -129,7 +132,7 @@
     .mood-badge.light { color: var(--brass); border-color: rgba(184,138,67,.4); }
     .mood-badge.dark { color: var(--rust); border-color: rgba(148,69,47,.4); }
     .game-dates { font: .72rem/1 var(--mono); color: var(--muted); letter-spacing: .06em; }
-    .game-desc { color: #c2b7a4; max-width: 72ch; margin-top: 1rem; font-size: 1rem; }
+    .game-desc { color: var(--text-body); max-width: 72ch; margin-top: 1rem; font-size: 1rem; }
     .game-header-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
 
     .btn {
@@ -145,7 +148,7 @@
       text-transform: uppercase;
       cursor: pointer;
       text-decoration: none;
-      transition: background .15s, border-color .15s;
+      transition: background 0.18s cubic-bezier(0.22,1,.36,1), border-color 0.18s cubic-bezier(0.22,1,.36,1);
       white-space: nowrap;
     }
     .btn:hover { background: rgba(184,138,67,.1); border-color: var(--brass); }
@@ -217,7 +220,7 @@
       text-align: center;
     }
     .tl-lbl-name {
-      font: 600 .64rem/1.25 var(--mono);
+      font: 600 .72rem/1.25 var(--mono);
       letter-spacing: .04em;
       color: var(--text);
       overflow: hidden;
@@ -227,7 +230,7 @@
     }
     .tl-lbl-name.is-anchor { color: var(--paper); font-weight: 700; }
     .tl-lbl-date {
-      font: .56rem/1.1 var(--mono);
+      font: .63rem/1.1 var(--mono);
       color: var(--muted);
       margin-top: .12rem;
       white-space: nowrap;
@@ -345,7 +348,7 @@
       margin: 0 0 .75rem;
     }
     .entry-desc {
-      color: #c2b7a4;
+      color: var(--text-body);
       font-size: 1rem;
       line-height: 1.7;
       max-width: 72ch;
@@ -476,7 +479,7 @@
     }
     select option { background: var(--panel); }
     textarea { resize: vertical; min-height: 80px; }
-    input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brass); }
+    input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(184,138,67,.12); }
     .date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
     .mood-row { display: flex; gap: 1rem; }
     .mood-radio { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
@@ -595,7 +598,7 @@
       text-transform: uppercase;
       padding: .5rem;
       cursor: pointer;
-      transition: background .15s, border-color .15s;
+      transition: background 0.18s cubic-bezier(0.22,1,.36,1), border-color 0.18s cubic-bezier(0.22,1,.36,1);
       margin-top: .5rem;
     }
     .card-dismiss:hover { background: rgba(90,50,20,.18); border-color: rgba(90,50,20,.8); }
@@ -737,6 +740,9 @@
     }
     [x-cloak] { display: none !important; }
   </style>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Jost:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body x-data="gameApp()" x-cloak>
 

games.html

@@ -19,9 +19,12 @@
       --moss: #70794e;
       --oxygen: #86a5a4;
       --line: rgba(232, 220, 196, .18);
+      --text-secondary: #d0c6b3;
+      --text-body: #c2b7a4;
+      --text-dim: #b8ae9e;
       --shadow: 0 22px 70px rgba(0,0,0,.42);
-      --serif: Georgia, "Times New Roman", serif;
+      --serif: Spectral, Georgia, "Times New Roman", serif;
-      --sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
+      --sans: Jost, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
       --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
     }
     * { box-sizing: border-box; }
@@ -63,7 +66,7 @@
       padding: 1rem 0;
       text-decoration: none;
       white-space: nowrap;
-      font: 650 .72rem/1 var(--mono);
+      font: 700 .72rem/1 var(--mono);
       letter-spacing: .14em;
       text-transform: uppercase;
       color: var(--muted);
@@ -100,7 +103,7 @@
       text-transform: uppercase;
       cursor: pointer;
       text-decoration: none;
-      transition: background .15s, border-color .15s, color .15s;
+      transition: background 0.18s cubic-bezier(0.22,1,.36,1), border-color 0.18s cubic-bezier(0.22,1,.36,1), color 0.18s cubic-bezier(0.22,1,.36,1);
       white-space: nowrap;
     }
     .btn:hover { background: rgba(184,138,67,.12); border-color: var(--brass); }
@@ -116,7 +119,7 @@
       border-bottom: 1px solid var(--line);
       text-decoration: none;
       display: block;
-      transition: color .15s;
+      transition: color 0.18s cubic-bezier(0.22,1,.36,1);
     }
     .game-row:first-child { border-top: 1px solid var(--line); }
     .game-row-eyebrow {
@@ -136,10 +139,10 @@
       letter-spacing: -.02em;
       line-height: 1.05;
       margin: 0 0 .6rem;
-      transition: color .15s;
+      transition: color 0.18s cubic-bezier(0.22,1,.36,1);
     }
     .game-row:hover .game-row-title { color: var(--brass); }
-    .game-row-desc { color: #c2b7a4; font-size: 1rem; line-height: 1.6; max-width: 72ch; }
+    .game-row-desc { color: var(--text-body); font-size: 1rem; line-height: 1.6; max-width: 72ch; }
     .empty-state {
       padding: 3rem 0;
       color: var(--muted);
@@ -197,10 +200,7 @@
       -webkit-appearance: none;
     }
     textarea { resize: vertical; min-height: 80px; }
-    input:focus, textarea:focus, select:focus {
+    input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(184,138,67,.12); }
-      outline: none;
-      border-color: var(--brass);
-    }
     .mood-row { display: flex; gap: 1rem; }
     .mood-radio { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
     .mood-radio input { width: auto; }
@@ -216,6 +216,9 @@
 
     [x-cloak] { display: none !important; }
   </style>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Jost:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body x-data="gamesApp()" x-cloak>
 

index.html

@@ -20,9 +20,12 @@
       --moss: #70794e;
       --oxygen: #86a5a4;
       --line: rgba(232, 220, 196, .18);
+      --text-secondary: #d0c6b3;
+      --text-body: #c2b7a4;
+      --text-dim: #b8ae9e;
       --shadow: 0 22px 70px rgba(0,0,0,.42);
-      --serif: Georgia, "Times New Roman", serif;
+      --serif: Spectral, Georgia, "Times New Roman", serif;
-      --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --sans: Jost, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
       --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
     }
 
@@ -99,7 +102,7 @@
     h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.05; color: var(--paper); }
     h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.25; color: var(--paper); }
 
-    .hero-copy p { max-width: 62ch; color: #d0c6b3; font-size: 1.08rem; }
+    .hero-copy p { max-width: 62ch; color: var(--text-secondary); font-size: 1.08rem; }
 
     nav {
       position: sticky;
@@ -115,7 +118,7 @@
       padding: 1rem 0;
       text-decoration: none;
       white-space: nowrap;
-      font: 650 .72rem/1 var(--mono);
+      font: 700 .72rem/1 var(--mono);
       letter-spacing: .14em;
       text-transform: uppercase;
       color: var(--muted);
@@ -134,7 +137,7 @@
 
     .project {
       display: grid;
-      grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
+      grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.6fr);
       gap: clamp(2rem, 5vw, 5rem);
       align-items: start;
       margin: 0 0 7rem;
@@ -150,7 +153,7 @@
     }
     .project-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
     .project-copy { padding-top: 1rem; }
-    .project-copy p { color: #c2b7a4; }
+    .project-copy p { color: var(--text-body); }
 
     .meta {
       display: grid;
@@ -203,7 +206,7 @@
       padding: 1.2rem 0;
       border-top: 1px solid var(--line);
       border-bottom: 1px solid var(--line);
-      color: #b8ae9e;
+      color: var(--text-dim);
       font-family: var(--serif);
       font-size: .95rem;
       font-style: italic;
@@ -222,6 +225,9 @@
       .project-image { position: relative; top: auto; }
     }
   </style>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Jost:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
   <header class="masthead">