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..ee1f82f 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 inline-flex items-center"
+        :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..73226bd
--- /dev/null
+++ b/src/components/layout/Wordmark.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+type Size = 'sm' | 'lg'
+
+const props = withDefaults(
+  defineProps<{
+    /** Visual size — controls type scale. 'sm' for header/footer, 'lg' for hero. */
+    size?: Size
+  }>(),
+  { size: 'sm' },
+)
+
+const earthClasses: Record<Size, string> = {
+  sm: 'text-sm tracking-[0.22em] md:text-base md:tracking-[0.24em]',
+  lg: 'text-2xl tracking-[0.24em] md:text-3xl lg:text-4xl md:tracking-[0.26em]',
+}
+
+const designClasses: Record<Size, string> = {
+  sm: 'text-[0.55rem] tracking-[0.42em] md:text-[0.65rem] md:tracking-[0.46em]',
+  lg: 'text-xs tracking-[0.46em] md:text-sm md:tracking-[0.5em] lg:text-base',
+}
+
+const gapClasses: Record<Size, string> = {
+  sm: 'gap-[0.2em]',
+  lg: 'gap-[0.25em]',
+}
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-flex flex-col items-center whitespace-nowrap uppercase leading-none',
+      gapClasses[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..f9929d6 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="lg" 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>