Design token updates.

app/components/OnboardingWidget.vue

@@ -1,92 +1,61 @@
 <template>
   <ClientOnly>
-    <div v-if="!loading" class="onboarding-widget dashed-box no-hover">
+    <div v-if="!loading" class="onboarding-widget">
       <!-- Welcome mode: onboarding in progress -->
       <template v-if="!isComplete">
-        <div class="ow-header">
-          <h3 class="ow-title">Welcome to Ghost Guild</h3>
-          <p class="ow-intro">Get oriented — here are a few things to explore as a new member.</p>
-        </div>
-
-        <div class="ow-suggestion">
-          <span class="ow-suggestion-text">{{ currentSuggestion.text }}</span>
-          <NuxtLink
-            v-if="currentSuggestion.action && !currentSuggestion.isExternal"
-            :to="currentSuggestion.action"
-            class="btn btn-primary ow-action"
-          >
-            {{ currentSuggestion.actionText }}
-          </NuxtLink>
-          <a
-            v-else-if="currentSuggestion.isExternal"
-            :href="currentSuggestion.action"
-            target="_blank"
-            rel="noopener"
-            class="btn btn-primary ow-action"
-            @click="trackGoal('wikiClicked')"
-          >
-            {{ currentSuggestion.actionText }}
-          </a>
-        </div>
-
+        <div class="ow-prompt">&gt; welcome</div>
+        <div class="ow-message">You are in the <strong>Ghost Guild</strong>. A few passages remain unexplored.</div>
+        <div class="ow-hint">Next: {{ currentSuggestion.text }}</div>
+        <NuxtLink
+          v-if="currentSuggestion.action && !currentSuggestion.isExternal"
+          :to="currentSuggestion.action"
+          class="ow-action"
+        >
+          {{ currentSuggestion.actionText }} &rarr;
+        </NuxtLink>
+        <a
+          v-else-if="currentSuggestion.isExternal"
+          :href="currentSuggestion.action"
+          target="_blank"
+          rel="noopener"
+          class="ow-action"
+          @click="trackGoal('wikiClicked')"
+        >
+          {{ currentSuggestion.actionText }} &rarr;
+        </a>
         <div class="ow-progress">
-          <span class="ow-progress-label">{{ completedCount }} of 4</span>
-          <span class="ow-dots">
-            <span
-              v-for="i in 4"
-              :key="i"
-              class="ow-dot"
-              :class="{ 'ow-dot--done': i <= completedCount }"
-            />
-          </span>
+          <span class="ow-bar"><span class="ow-bar-fill">{{ barFill }}</span><span class="ow-bar-empty">{{ barEmpty }}</span></span>
+          {{ completedCount }} of 4 explored
         </div>
       </template>
 
       <!-- Suggestion mode: onboarding complete -->
       <template v-else>
         <!-- Empty state -->
-        <div v-if="currentSuggestion.key === 'empty'" class="ow-empty">
-          {{ currentSuggestion.text }}
-        </div>
+        <div v-if="currentSuggestion.key === 'empty'" class="ow-prompt">&gt; look</div>
+        <div v-if="currentSuggestion.key === 'empty'" class="ow-message ow-message--dim">{{ currentSuggestion.text }}</div>
 
-        <!-- Event recommendation -->
-        <div v-else-if="currentSuggestion.key === 'event'" class="ow-rec">
-          <div class="section-label">Suggested</div>
-          <span class="ow-rec-text">{{ currentSuggestion.text }}</span>
-          <NuxtLink
-            :to="currentSuggestion.action"
-            class="ow-rec-link"
-          >
-            {{ currentSuggestion.actionText }} &rarr;
-          </NuxtLink>
-        </div>
-
-        <!-- Ecology recommendation -->
-        <div v-else-if="currentSuggestion.key === 'ecology'" class="ow-rec">
-          <div class="section-label">Suggested</div>
-          <span class="ow-rec-text">{{ currentSuggestion.text }}</span>
-          <NuxtLink
-            :to="currentSuggestion.action"
-            class="ow-rec-link"
-          >
-            {{ currentSuggestion.actionText }} &rarr;
-          </NuxtLink>
-        </div>
-
-        <!-- Wiki recommendation -->
-        <div v-else-if="currentSuggestion.key === 'wiki'" class="ow-rec">
-          <div class="section-label">Suggested</div>
-          <span class="ow-rec-text">{{ currentSuggestion.text }}</span>
+        <!-- Recommendation (event, ecology, or wiki) -->
+        <template v-if="currentSuggestion.key !== 'empty'">
+          <div class="ow-prompt">&gt; look</div>
+          <div class="ow-message">{{ currentSuggestion.text }}</div>
           <a
-            v-if="currentSuggestion.action"
+            v-if="currentSuggestion.isExternal && currentSuggestion.action"
             :href="currentSuggestion.action"
             target="_blank"
             rel="noopener"
-            class="ow-rec-link"
+            class="ow-action"
           >
             {{ currentSuggestion.actionText }} &rarr;
           </a>
-        </div>
+          <NuxtLink
+            v-else-if="currentSuggestion.action"
+            :to="currentSuggestion.action"
+            class="ow-action"
+          >
+            {{ currentSuggestion.actionText }} &rarr;
+          </NuxtLink>
+        </template>
       </template>
     </div>
   </ClientOnly>
@@ -100,115 +69,79 @@ const completedCount = computed(() => {
   return [g.hasProfileTags, g.hasVisitedEvent, g.hasEngagedEcology, g.hasClickedWiki]
     .filter(Boolean).length
 })
+
+const barFill = computed(() => '[' + '#'.repeat(completedCount.value * 2))
+const barEmpty = computed(() => '-'.repeat((4 - completedCount.value) * 2) + ']')
 </script>
 
 <style scoped>
 .onboarding-widget {
   padding: 16px 20px;
-}
-
-/* Welcome mode */
-.ow-header {
-  margin-bottom: 12px;
-}
-
-.ow-title {
-  font-family: var(--font-display);
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-bright);
-  margin: 0 0 4px;
-}
-
-.ow-intro {
+  border-bottom: 1px dashed var(--parch-border);
+  background: var(--parch);
+  color: var(--parch-text);
   font-size: 12px;
-  color: var(--text-dim);
-  margin: 0;
-  line-height: 1.5;
+  line-height: 1.7;
 }
 
-.ow-suggestion {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 10px 0;
-  border-top: 1px dashed var(--border);
-  flex-wrap: wrap;
+.ow-prompt {
+  color: var(--parch-accent);
+  margin-bottom: 6px;
 }
 
-.ow-suggestion-text {
-  font-size: 12px;
-  color: var(--text);
-  line-height: 1.5;
-}
-
-.ow-action {
-  flex-shrink: 0;
-  font-size: 11px;
-  padding: 5px 14px;
-}
-
-.ow-progress {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding-top: 10px;
-  border-top: 1px dashed var(--border);
-}
-
-.ow-progress-label {
-  font-size: 10px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--text-faint);
-}
-
-.ow-dots {
-  display: flex;
-  gap: 4px;
-}
-
-.ow-dot {
-  width: 6px;
-  height: 6px;
-  border: 1px dashed var(--border);
-  display: inline-block;
-}
-
-.ow-dot--done {
-  background: var(--candle);
-  border-color: var(--candle);
-  border-style: solid;
-}
-
-/* Suggestion mode (graduated) */
-.ow-rec {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.ow-rec .section-label {
+.ow-message {
+  color: var(--parch-text);
   margin-bottom: 2px;
 }
 
-.ow-rec-text {
-  font-size: 12px;
-  color: var(--text);
-  line-height: 1.5;
+.ow-message--dim {
+  color: var(--parch-text-dim);
 }
 
-.ow-rec-link {
+.ow-hint {
+  color: var(--parch-text-dim);
   font-size: 11px;
-  color: var(--candle);
-  margin-top: 2px;
-  display: inline-block;
 }
 
-.ow-empty {
-  font-size: 12px;
-  color: var(--text-faint);
-  line-height: 1.5;
+.ow-action {
+  display: inline-block;
+  margin-top: 8px;
+  padding: 4px 12px;
+  border: 1px dashed rgba(237, 228, 208, 0.25);
+  color: var(--parch-accent);
+  font-size: 11px;
+  text-decoration: none;
+  letter-spacing: 0.04em;
+}
+
+.ow-action:hover {
+  border-color: var(--parch-accent);
+  border-style: solid;
+  text-decoration: none;
+}
+
+.ow-progress {
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px dashed rgba(237, 228, 208, 0.12);
+  font-size: 11px;
+  color: var(--parch-text-dim);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ow-bar {
+  display: inline-flex;
+  gap: 0;
+  letter-spacing: 0;
+}
+
+.ow-bar-fill {
+  color: var(--parch-accent);
+}
+
+.ow-bar-empty {
+  color: rgba(237, 228, 208, 0.2);
 }
 </style>

app/components/ParchmentInset.vue

@@ -10,7 +10,7 @@
   color: var(--parch-text);
   padding: 32px;
   margin: 0;
-  border-bottom: 1px dashed var(--border);
+  border-bottom: 1px dashed var(--parch-border);
 }
 
 .parchment-inset :deep(h2) {
@@ -30,6 +30,6 @@
 }
 
 .parchment-inset :deep(a) {
-  color: var(--candle-faint);
+  color: var(--parch-accent);
 }
 </style>