From 576b8559d79983d3d00396bb4c29c70c7328891b Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 27 May 2026 12:25:01 +0200
Subject: [PATCH] feat: framed EARTH WALKER / DESIGN wordmark, themed via
 currentColor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Carries forward the original site's wordmark — heavier "EARTH WALKER"
paired with lighter "DESIGN", contained in a thin rectangular frame —
adapted to our type system (Fraunces semibold + light) rather than
re-importing the original slab serif. Because everything is rendered
in currentColor, the frame and both words invert automatically against
the dark hero overlay, the dark theme, and any of the four palettes.

Wordmark.vue takes a size prop ('sm' | 'md' | 'lg') driving type
scale, frame padding, and letter-spacing. Replaces the plain-text
brand in:
  - SiteHeader logo slot (sm)
  - Mobile Sheet drawer header (sm)
  - SiteFooter brand block (sm)
  - HomeView hero overlay above the headline (md)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/layout/SiteFooter.vue |  5 +--
 src/components/layout/SiteHeader.vue | 11 ++++---
 src/components/layout/Wordmark.vue   | 46 ++++++++++++++++++++++++++++
 src/views/HomeView.vue               |  7 ++---
 4 files changed, 58 insertions(+), 11 deletions(-)
 create mode 100644 src/components/layout/Wordmark.vue

diff --git a/src/components/layout/SiteFooter.vue b/src/components/layout/SiteFooter.vue
index e6036e1..e6f3912 100644
--- a/src/components/layout/SiteFooter.vue
+++ b/src/components/layout/SiteFooter.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import Wordmark from './Wordmark.vue'
 
 const { t } = useI18n({ useScope: 'global' })
 const year = new Date().getFullYear()
@@ -11,8 +12,8 @@ const year = new Date().getFullYear()
     <div
       class="mx-auto flex max-w-[1400px] flex-col items-start justify-between gap-6 px-6 py-12 md:flex-row md:items-center md:px-10"
     >
-      <div class="space-y-1">
-        <p class="font-serif text-base tracking-[0.18em] uppercase">{{ t('brand') }}</p>
+      <div class="space-y-3">
+        <Wordmark size="sm" class="text-foreground" />
         <p class="text-muted-foreground text-xs">{{ t('footer.tagline') }}</p>
       </div>
       <div class="flex items-center gap-8">
diff --git a/src/components/layout/SiteHeader.vue b/src/components/layout/SiteHeader.vue
index 88c1011..4a546fa 100644
--- a/src/components/layout/SiteHeader.vue
+++ b/src/components/layout/SiteHeader.vue
@@ -12,6 +12,7 @@ import {
 } from '@/components/ui/sheet'
 import ThemeToggle from './ThemeToggle.vue'
 import LocaleSwitcher from './LocaleSwitcher.vue'
+import Wordmark from './Wordmark.vue'
 
 const { t } = useI18n({ useScope: 'global' })
 
@@ -32,9 +33,10 @@ const mobileOpen = ref(false)
     >
       <RouterLink
         to="/"
-        class="text-foreground font-serif text-lg tracking-[0.18em] uppercase"
+        class="text-foreground"
+        :aria-label="t('brand')"
       >
-        {{ t('brand') }}
+        <Wordmark size="sm" />
       </RouterLink>
 
       <nav class="hidden items-center gap-8 md:flex">
@@ -63,9 +65,8 @@ const mobileOpen = ref(false)
           </SheetTrigger>
           <SheetContent side="right" class="w-full sm:max-w-sm">
             <SheetHeader>
-              <SheetTitle class="font-serif tracking-[0.18em] uppercase">
-                {{ t('brand') }}
-              </SheetTitle>
+              <SheetTitle class="sr-only">{{ t('brand') }}</SheetTitle>
+              <Wordmark size="sm" class="text-foreground" />
             </SheetHeader>
             <nav class="mt-10 flex flex-col gap-6 px-4">
               <RouterLink
diff --git a/src/components/layout/Wordmark.vue b/src/components/layout/Wordmark.vue
new file mode 100644
index 0000000..cd5b59b
--- /dev/null
+++ b/src/components/layout/Wordmark.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+type Size = 'sm' | 'md' | 'lg'
+
+const props = withDefaults(
+  defineProps<{
+    /** Visual size — controls type scale + frame padding. */
+    size?: Size
+  }>(),
+  { size: 'md' },
+)
+
+const frameClasses: Record<Size, string> = {
+  sm: 'px-2.5 py-1.5 gap-2',
+  md: 'px-4 py-2.5 gap-3',
+  lg: 'px-6 py-3.5 gap-4',
+}
+
+const earthClasses: Record<Size, string> = {
+  sm: 'text-[0.7rem] tracking-[0.28em]',
+  md: 'text-sm tracking-[0.32em] md:text-base',
+  lg: 'text-base tracking-[0.34em] md:text-xl',
+}
+
+const designClasses: Record<Size, string> = {
+  sm: 'text-[0.55rem] tracking-[0.28em]',
+  md: 'text-[0.7rem] tracking-[0.32em] md:text-xs',
+  lg: 'text-xs tracking-[0.34em] md:text-sm',
+}
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-flex items-baseline border border-current uppercase',
+      frameClasses[props.size],
+    ]"
+    aria-label="Earth Walker Design"
+  >
+    <span :class="['font-serif font-semibold', earthClasses[props.size]]">
+      Earth Walker
+    </span>
+    <span :class="['font-serif font-light opacity-90', designClasses[props.size]]">
+      Design
+    </span>
+  </span>
+</template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f8fe19f..670a448 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -4,6 +4,7 @@ import { RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { AspectRatio } from '@/components/ui/aspect-ratio'
 import { Button } from '@/components/ui/button'
+import Wordmark from '@/components/layout/Wordmark.vue'
 import { projects } from '@/data/projects'
 
 const { t } = useI18n({ useScope: 'global' })
@@ -34,11 +35,9 @@ const projectCards = computed(() =>
       <div
         class="absolute right-0 bottom-14 left-0 mx-auto max-w-[1400px] px-6 text-white md:bottom-20 md:px-10"
       >
-        <p class="text-xs uppercase tracking-[0.22em] text-white/80">
-          {{ t('home.hero.eyebrow') }}
-        </p>
+        <Wordmark size="md" class="text-white/95" />
         <h1
-          class="mt-4 max-w-3xl font-serif text-4xl font-light leading-[1.05] tracking-tight md:text-6xl lg:text-7xl"
+          class="mt-6 max-w-3xl font-serif text-4xl font-light leading-[1.05] tracking-tight md:text-6xl lg:text-7xl"
         >
           {{ t('home.hero.headline') }}<br />{{ t('home.hero.headline2') }}
         </h1>