From d6cdf45838d9711d948fa1b4f5d98a266f5abfac Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Thu, 30 Apr 2026 00:13:13 +0100
Subject: [PATCH] =?UTF-8?q?style(visual-fidelity):=20components=20?=
 =?UTF-8?q?=E2=80=94=20batches=20B,E,G,H?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- B: token-equivalent rgba → color-mix in SignupFlowOverlay, OnboardingWidget
- E: drop text-white Tailwind utility from ImageUpload remove-button (now color: var(--parch-text) inline)
- G: typography off-scale snaps (9→10, 14→13, 15→16, 19→18 px)
- H: padding off-scale snaps in BoardPostCard/Form, CirclePicker, FilterBar, LoginModal
---
 app/components/BoardPostCard.vue     | 4 ++--
 app/components/BoardPostForm.vue     | 6 +++---
 app/components/CirclePicker.vue      | 4 ++--
 app/components/EventsMiniSidebar.vue | 2 +-
 app/components/FilterBar.vue         | 2 +-
 app/components/ImageUpload.vue       | 4 ++--
 app/components/LoginModal.vue        | 6 +++---
 app/components/OnboardingWidget.vue  | 6 +++---
 app/components/SignupFlowOverlay.vue | 2 +-
 9 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/app/components/BoardPostCard.vue b/app/components/BoardPostCard.vue
index ff6e9d4..97067e9 100644
--- a/app/components/BoardPostCard.vue
+++ b/app/components/BoardPostCard.vue
@@ -158,7 +158,7 @@ const slackLinks = computed(() => {
 <style scoped>
 .board-post {
   border: 1px dashed var(--border);
-  padding: 18px 22px;
+  padding: 20px 24px;
   background: var(--surface);
   break-inside: avoid;
   -webkit-column-break-inside: avoid;
@@ -219,7 +219,7 @@ const slackLinks = computed(() => {
 
 .post-title {
   font-family: "Brygada 1918", serif;
-  font-size: 19px;
+  font-size: 18px;
   font-weight: 500;
   color: var(--text-bright);
   margin: 0 0 12px;
diff --git a/app/components/BoardPostForm.vue b/app/components/BoardPostForm.vue
index f7d955b..981475a 100644
--- a/app/components/BoardPostForm.vue
+++ b/app/components/BoardPostForm.vue
@@ -138,7 +138,7 @@ function handleSubmit() {
 <style scoped>
 .post-form {
   border: 1px dashed var(--border);
-  padding: 14px 16px;
+  padding: 16px 16px;
   background: transparent;
 }
 
@@ -147,7 +147,7 @@ function handleSubmit() {
 }
 .form-title {
   font-family: "Brygada 1918", serif;
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 500;
   color: var(--text-bright);
 }
@@ -183,7 +183,7 @@ function handleSubmit() {
   color: var(--text-faint);
   text-transform: none;
   letter-spacing: 0;
-  font-size: 9px;
+  font-size: 10px;
   margin-left: 4px;
   opacity: 0.7;
 }
diff --git a/app/components/CirclePicker.vue b/app/components/CirclePicker.vue
index fb8f298..929ce1b 100644
--- a/app/components/CirclePicker.vue
+++ b/app/components/CirclePicker.vue
@@ -48,7 +48,7 @@ defineEmits(['update:modelValue'])
 
 .circle-option {
   border: 1px dashed var(--border);
-  padding: 14px 12px;
+  padding: 12px 12px;
   background: var(--bg);
   cursor: pointer;
   transition: all 0.15s;
@@ -83,7 +83,7 @@ defineEmits(['update:modelValue'])
 }
 
 .circle-tag {
-  font-size: 9px;
+  font-size: 10px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   margin-top: 6px;
diff --git a/app/components/EventsMiniSidebar.vue b/app/components/EventsMiniSidebar.vue
index de6066d..df953d6 100644
--- a/app/components/EventsMiniSidebar.vue
+++ b/app/components/EventsMiniSidebar.vue
@@ -104,7 +104,7 @@ const formatDate = (dateStr) => {
 }
 
 .em-circle {
-  font-size: 9px;
+  font-size: 10px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   margin-top: 2px;
diff --git a/app/components/FilterBar.vue b/app/components/FilterBar.vue
index 688de8e..c63f40e 100644
--- a/app/components/FilterBar.vue
+++ b/app/components/FilterBar.vue
@@ -22,7 +22,7 @@ defineEmits(['update:modelValue'])
 
 <style scoped>
 .filter-bar {
-  padding: 14px 32px;
+  padding: 16px 28px;
   border-bottom: 1px dashed var(--border);
   display: flex;
   align-items: center;
diff --git a/app/components/ImageUpload.vue b/app/components/ImageUpload.vue
index 40cc0c0..bd8a87e 100644
--- a/app/components/ImageUpload.vue
+++ b/app/components/ImageUpload.vue
@@ -12,8 +12,8 @@
       >
       <button
         type="button"
-        class="absolute top-2 right-2 p-1 text-white rounded-full transition-colors"
-        style="background: var(--ember)"
+        class="absolute top-2 right-2 p-1 rounded-full transition-colors"
+        style="background: var(--ember); color: var(--parch-text)"
         @click="removeImage"
       >
         <Icon name="heroicons:x-mark" class="w-4 h-4" />
diff --git a/app/components/LoginModal.vue b/app/components/LoginModal.vue
index 67bc904..e3fd0b6 100644
--- a/app/components/LoginModal.vue
+++ b/app/components/LoginModal.vue
@@ -40,7 +40,7 @@
                 type="email"
                 placeholder="your.email@example.com"
                 required
-              />
+              >
             </div>
 
             <div class="info-box">
@@ -182,7 +182,7 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown))
 
 .modal-overline {
   font-family: 'Brygada 1918', serif;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
   color: var(--candle);
   margin-bottom: 12px;
@@ -218,7 +218,7 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown))
 .info-box {
   font-size: 11px;
   color: var(--text-faint);
-  padding: 10px 14px;
+  padding: 12px 16px;
   border: 1px dashed var(--border);
   margin-bottom: 16px;
   line-height: 1.6;
diff --git a/app/components/OnboardingWidget.vue b/app/components/OnboardingWidget.vue
index 97c246d..3f9f11b 100644
--- a/app/components/OnboardingWidget.vue
+++ b/app/components/OnboardingWidget.vue
@@ -118,7 +118,7 @@ const barEmpty = computed(() => '-'.repeat((4 - completedCount.value) * 2) + ']'
   display: inline-block;
   margin-top: 8px;
   padding: 4px 12px;
-  border: 1px dashed rgba(237, 228, 208, 0.25);
+  border: 1px dashed color-mix(in srgb, var(--parch-text) 25%, transparent);
   color: var(--parch-accent);
   font-size: 11px;
   text-decoration: none;
@@ -134,7 +134,7 @@ const barEmpty = computed(() => '-'.repeat((4 - completedCount.value) * 2) + ']'
 .ow-progress {
   margin-top: 10px;
   padding-top: 8px;
-  border-top: 1px dashed rgba(237, 228, 208, 0.12);
+  border-top: 1px dashed color-mix(in srgb, var(--parch-text) 12%, transparent);
   font-size: 11px;
   color: var(--parch-text-dim);
   display: flex;
@@ -153,7 +153,7 @@ const barEmpty = computed(() => '-'.repeat((4 - completedCount.value) * 2) + ']'
 }
 
 .ow-bar-empty {
-  color: rgba(237, 228, 208, 0.2);
+  color: color-mix(in srgb, var(--parch-text) 20%, transparent);
 }
 
 .ow-skip {
diff --git a/app/components/SignupFlowOverlay.vue b/app/components/SignupFlowOverlay.vue
index 6ad3321..10fe663 100644
--- a/app/components/SignupFlowOverlay.vue
+++ b/app/components/SignupFlowOverlay.vue
@@ -108,7 +108,7 @@ const stepLabel = computed(() => {
   position: fixed;
   inset: 0;
   z-index: 50;
-  background: rgba(42, 32, 21, 0.72);
+  background: color-mix(in srgb, var(--parch) 72%, transparent);
   backdrop-filter: blur(4px);
   display: flex;
   align-items: center;