diff --git a/DESIGN.md b/DESIGN.md
index d110a11..bc4c7d9 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -51,6 +51,11 @@ typography:
     fontSize: 0.875rem
     fontWeight: 400
     lineHeight: 1.5
+  control-small:
+    fontFamily: "'UI Latin Sans', 'UI zh-CN Sans', 'Noto Sans', 'Noto Sans SC', ui-sans-serif, system-ui, sans-serif"
+    fontSize: 0.75rem
+    fontWeight: 400
+    lineHeight: 1
   prose:
     fontFamily: "'UI Latin Sans', 'UI zh-CN Sans', 'Noto Sans', 'Noto Sans SC', ui-sans-serif, system-ui, sans-serif"
     fontSize: 0.9375rem
@@ -115,6 +120,14 @@ components:
     rounded: '{rounded.md}'
     padding: '0 8px'
     height: 28px
+  region-option-selected:
+    backgroundColor: '{colors.paper}'
+    borderColor: 'color-mix(in srgb, {colors.ink-soft} 75%, {colors.ink-mute})'
+    textColor: '{colors.ink}'
+    typography: '{typography.control-small}'
+    rounded: '{rounded.control}'
+    padding: '0 8px'
+    height: 28px
   navigation-control:
     backgroundColor: transparent
     textColor: '{colors.ink-mute}'
@@ -242,6 +255,8 @@ locale by accident.
   headings.
 - **Body** (regular, 1rem, line-height 1.5): Interface explanations and
   ordinary content.
+- **Control Small** (regular, 0.75rem, line-height 1): Compact filter and
+  region-option labels that must align inside a 1.75rem control.
 - **Prose** (regular, 0.9375rem, line-height 1.85): Long-form methodology and
   source notes, held to a readable 42rem measure.
 - **Label** (regular, 0.6875rem, letter-spacing 0.04em): Section labels,
@@ -332,8 +347,24 @@ motif; large capsules belong only to tiny run markers and scroll thumbs.
 - **Disabled or hidden:** Opacity communicates unavailability only after the
   label and control state remain programmatically explicit.
 
-**The Selected State Is a Slab Rule.** Filters use ink-on-paper inversion for
-the selected state, not a brighter border alone.
+**The Selected State Is a Slab Rule.** Non-regional content filters use
+ink-on-paper inversion for the selected state, not a brighter border alone.
+Region options are the explicit artwork-safe exception defined below.
+
+### Region Options
+
+Region selectors use one compact outlined control whether they appear as a
+single-choice index, a visibility toggle, or a listing filter. Because a flag
+is full-color artwork, it never carries selection state and never sits on an
+inverted Ink slab. Selection instead strengthens the border to a quiet blend
+between Soft Ink and Muted Ink, then returns the control to Paper; resting
+flags and the Sunk Paper surface recede so the chosen marks remain easy to
+scan. This edge-and-surface contrast stays visible with short text labels, in
+grayscale, and in both themes.
+
+**The Artwork Never Carries State Rule.** A region option must remain visibly
+selected when its flag or text label is removed. State belongs to the control
+edge and surface, while the artwork only names the region.
 
 ### Cards / Containers
 
diff --git a/app/components/FilterBar.vue b/app/components/FilterBar.vue
index dc0443a..646e961 100644
--- a/app/components/FilterBar.vue
+++ b/app/components/FilterBar.vue
@@ -11,7 +11,7 @@ import {
 
 const chars = injectChars()
 const { t, locale } = useT()
-const { flagsOn, visibleColumns, visibleRegions } = usePrefs()
+const { visibleColumns, visibleRegions } = usePrefs()
 
 // Every label has to be computed, not built once: t() reads the active locale
 // and the reader can change it after the component is set up
@@ -140,19 +140,24 @@ const strokeHigh = computed({
 
 /** Tier labels live under char.tierCn and friends; old forms use region.old. */
 const listingOptions = computed(() =>
-  listingOptionsFor(visibleColumns.value).map((entry) => ({
-    ...entry,
-    label:
+  listingOptionsFor(visibleColumns.value).map((entry) => {
+    const label =
       entry.kind === 'old'
         ? t('region.old.short')
         : t(
             `char.tier${entry.region[0]!.toUpperCase()}${entry.region[1]}.${entry.tier}`,
-          ),
-    title:
+          )
+    const title =
       entry.kind === 'old'
         ? t('region.old.full')
-        : t(`region.${entry.region}.full`),
-  })),
+        : t(`region.${entry.region}.full`)
+    return {
+      ...entry,
+      label,
+      title,
+      ariaLabel: `${title} ${label}`,
+    }
+  }),
 )
 
 function toggleTier(id: string) {
@@ -215,22 +220,14 @@ function toggleRegion(region: string) {
       <div class="filter-field">
         <span class="filter-label eyebrow">{{ t('filter.common') }}</span>
         <div class="filter-control flex gap-1">
-          <button
+          <RegionOption
             v-for="region in visibleRegions"
             :key="region"
-            type="button"
-            class="focus-ring size-7 border rounded-md text-xs transition duration-150"
-            :class="
-              chars.common.value.includes(region)
-                ? 'chip-on'
-                : 'border-rule bg-paper text-mute hover:border-ink/30'
-            "
-            :title="t(`region.${region}.full`)"
-            :aria-pressed="chars.common.value.includes(region)"
-            @click="toggleRegion(region)"
-          >
-            <RegionLabel :flag="flagsOn" :region="region" />
-          </button>
+            :active="chars.common.value.includes(region)"
+            :label="t(`region.${region}.full`)"
+            :parts="[{ region }]"
+            @select="toggleRegion(region)"
+          />
         </div>
       </div>
 
@@ -270,25 +267,15 @@ function toggleRegion(region: string) {
         t('filter.tier')
       }}</span>
       <div class="filter-control flex flex-wrap items-center gap-x-3 gap-y-2">
-        <button
+        <RegionOption
           v-for="option in listingOptions"
           :key="option.id"
-          type="button"
-          class="focus-ring chip gap-1.5 text-xs"
-          :class="
-            chars.tiers.value.includes(option.id) ? 'chip-on' : 'chip-off'
-          "
+          :active="chars.tiers.value.includes(option.id)"
+          :label="option.ariaLabel"
+          :parts="[{ region: option.region, suffix: option.label }]"
           :title="option.title"
-          :aria-pressed="chars.tiers.value.includes(option.id)"
-          @click="toggleTier(option.id)"
-        >
-          <RegionLabel
-            :flag="flagsOn"
-            :region="option.region"
-            class="opacity-60"
-          />
-          {{ option.label }}
-        </button>
+          @select="toggleTier(option.id)"
+        />
       </div>
     </div>
 
diff --git a/app/components/OptionsMenu.vue b/app/components/OptionsMenu.vue
index bc5e7b1..915fd77 100644
--- a/app/components/OptionsMenu.vue
+++ b/app/components/OptionsMenu.vue
@@ -2,7 +2,6 @@
 const { t } = useT()
 const {
   flagLabels,
-  flagsOn,
   outline,
   COLUMNS,
   columnShown,
@@ -63,18 +62,9 @@ onKeyStroke('Escape', () => (open.value = false))
           </span>
         </label>
 
-        <!--
-          Which columns are compared at all. Same chip as the filter bar, but
-          not the same state: down there the exceptional thing is a filter being
-          on, so selection is a filled slab. Here an enabled column is the
-          normal state, so a chip that is off simply fades. That also keeps a
-          solid ink field from landing behind a flag, where the artwork's own
-          colors fight it.
-
-          One track per region, so the five sit as a single row of equal cells
-          rather than wrapping and leaving the last one stranded. The kyujitai
-          is not a place, and takes the full-width row underneath.
-        -->
+        <!-- One track per region keeps the five as a single row. Every region
+             control shares RegionOption's edge-and-key selected state; the
+             kyujitai is not a place and takes the full-width row underneath. -->
         <div class="mt-3 border-t border-rule pt-3">
           <span class="text-sm text-ink font-medium">{{
             t('options.columns')
@@ -83,32 +73,31 @@ onKeyStroke('Escape', () => (open.value = false))
             t('options.columnsHint')
           }}</span>
           <div class="grid grid-cols-5 mt-2 gap-1.5">
-            <button
+            <RegionOption
               v-for="column in COLUMNS"
               :key="column"
-              type="button"
-              class="focus-ring chip justify-center gap-1.5 text-xs disabled:cursor-not-allowed"
-              :class="[
-                columnShown(column)
-                  ? 'border-ink/35 bg-paper text-ink'
-                  : 'border-rule bg-sunk text-mute opacity-55 hover:opacity-85',
-                column === 'old' ? 'order-1 col-span-5' : '',
-              ]"
+              class="w-full"
+              :class="column === 'old' ? 'order-1 col-span-5' : ''"
+              :active="columnShown(column)"
               :disabled="columnLocked(column)"
+              :label="
+                column === 'old'
+                  ? t('region.old.full')
+                  : t(`region.${column}.full`)
+              "
+              :parts="[
+                {
+                  region: column === 'old' ? 'jp' : column,
+                  suffix: column === 'old' ? t('region.old.short') : undefined,
+                },
+              ]"
               :title="
                 columnLocked(column)
                   ? t('options.columnsLast')
                   : t(`region.${column}.full`)
               "
-              :aria-pressed="columnShown(column)"
-              @click="toggleColumn(column)"
-            >
-              <RegionLabel
-                :flag="flagsOn"
-                :region="column === 'old' ? 'jp' : column"
-              />
-              <span v-if="column === 'old'">{{ t('region.old.short') }}</span>
-            </button>
+              @select="toggleColumn(column)"
+            />
           </div>
         </div>
       </div>
diff --git a/app/components/RegionChoice.vue b/app/components/RegionChoice.vue
index 812afb1..2981392 100644
--- a/app/components/RegionChoice.vue
+++ b/app/components/RegionChoice.vue
@@ -13,46 +13,22 @@ defineProps<{
   }[]
 }>()
 const model = defineModel<T>({ required: true })
-const { flagsOn } = usePrefs()
 </script>
 
 <template>
   <span
     role="group"
     :aria-label="groupLabel"
-    class="h-7 max-w-full inline-flex shrink-0 items-center gap-px overflow-x-auto border border-rule rounded-md bg-sunk p-[2px]"
+    class="h-7 max-w-full inline-flex shrink-0 items-center gap-0.5 overflow-x-auto rounded-md bg-sunk p-[3px]"
   >
-    <button
+    <RegionOption
       v-for="option in options"
       :key="option.value"
-      type="button"
-      class="focus-ring flex shrink-0 items-center justify-center gap-1 rounded text-[0.6875rem] transition-colors duration-150"
-      :class="[
-        model === option.value
-          ? 'bg-paper text-ink shadow-[0_1px_2px_rgb(0_0_0/0.06)]'
-          : 'text-mute hover:text-soft',
-        option.parts.length > 1 || option.parts.some((part) => part.suffix)
-          ? 'h-[22px] min-w-[22px] px-1.5'
-          : 'size-[22px]',
-      ]"
-      :title="option.title"
-      :aria-label="option.title"
-      :aria-pressed="model === option.value"
-      @click="model = option.value"
-    >
-      <span
-        v-for="(part, index) in option.parts"
-        :key="`${part.region ?? ''}:${part.suffix ?? ''}:${index}`"
-        class="inline-flex items-center gap-1"
-      >
-        <RegionLabel
-          v-if="part.region"
-          :flag="flagsOn"
-          :region="part.region"
-          aria-hidden="true"
-        />
-        <span v-if="part.suffix">{{ part.suffix }}</span>
-      </span>
-    </button>
+      :active="model === option.value"
+      :label="option.title"
+      :parts="option.parts"
+      size="compact"
+      @select="model = option.value"
+    />
   </span>
 </template>
diff --git a/app/components/RegionOption.vue b/app/components/RegionOption.vue
new file mode 100644
index 0000000..a3f7a2e
--- /dev/null
+++ b/app/components/RegionOption.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import type { Region } from '~~/shared/types.ts'
+
+type RegionOptionPart = {
+  region?: Region
+  suffix?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    active: boolean
+    disabled?: boolean
+    label: string
+    parts: readonly RegionOptionPart[]
+    size?: 'compact' | 'default'
+    title?: string
+  }>(),
+  {
+    disabled: false,
+    size: 'default',
+    title: undefined,
+  },
+)
+
+defineEmits<{ select: [] }>()
+
+const { flagsOn } = usePrefs()
+const iconOnly = computed(
+  () => props.parts.length === 1 && !props.parts[0]?.suffix,
+)
+</script>
+
+<template>
+  <!--
+    Regional artwork is content, never state. Selection therefore lives on
+    the control's edge and surface contrast, where neither a flag nor a short
+    text label can cover it. Muting resting flags is only a supporting cue.
+  -->
+  <button
+    type="button"
+    class="region-option focus-ring"
+    :class="[
+      active ? 'region-option-active' : 'region-option-resting',
+      `region-option-${size}`,
+      iconOnly ? 'region-option-icon' : '',
+    ]"
+    :disabled="disabled"
+    :title="title ?? label"
+    :aria-label="label"
+    :aria-pressed="active"
+    @click="$emit('select')"
+  >
+    <span class="region-option-content" aria-hidden="true">
+      <span
+        v-for="(part, index) in parts"
+        :key="`${part.region ?? ''}:${part.suffix ?? ''}:${index}`"
+        class="region-option-part"
+      >
+        <RegionLabel v-if="part.region" :flag="flagsOn" :region="part.region" />
+        <span v-if="part.suffix" class="whitespace-nowrap">{{
+          part.suffix
+        }}</span>
+      </span>
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.region-option {
+  position: relative;
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--c-rule);
+  border-radius: 4px;
+  background: var(--c-paper-sunk);
+  color: var(--c-ink-mute);
+  line-height: 1;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+.region-option-default {
+  min-width: 1.75rem;
+  height: 1.75rem;
+  padding-inline: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.region-option-compact {
+  min-width: 1.375rem;
+  height: 1.375rem;
+  padding-inline: 0.375rem;
+  border-radius: 3px;
+  font-size: 0.6875rem;
+}
+
+.region-option-icon {
+  padding-inline: 0;
+}
+
+.region-option-content,
+.region-option-part {
+  display: inline-flex;
+  align-items: center;
+}
+
+.region-option-content {
+  gap: 0.25rem;
+}
+
+.region-option-part {
+  gap: 0.375rem;
+}
+
+.region-option-resting:hover:not(:disabled) {
+  border-color: var(--c-ink-mute);
+  background: var(--c-paper);
+  color: var(--c-ink-soft);
+}
+
+.region-option-active {
+  border-color: color-mix(in srgb, var(--c-ink-soft) 75%, var(--c-ink-mute));
+  background: var(--c-paper);
+  color: var(--c-ink);
+}
+
+.region-option-resting :deep(.region-flag) {
+  filter: saturate(0.7);
+  opacity: 0.68;
+}
+
+.region-option-active :deep(.region-flag) {
+  filter: none;
+  opacity: 1;
+}
+
+.region-option-compact :deep(.region-flag) {
+  width: 1.15em;
+  height: 1.15em;
+}
+
+.region-option:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .region-option {
+    transition: none;
+  }
+}
+</style>