feat(brand): add dot motif components and a brand kit page

app/assets/css/main.css

@@ -26,6 +26,9 @@
   --syntax-dim: var(--ui-text-muted);
   --syntax-bin: var(--ui-text);
   --syntax-arg: oklch(0.44 0.17 17.32);
+  /* The one rose dot in a brand motif: the Skill you picked. A graphic, never
+     text, so it keeps the brighter mark rose instead of the button rose. */
+  --brand-dot: oklch(0.645 0.246 16.44);
 }
 
 .dark {
@@ -41,6 +44,7 @@
   --ui-color-primary-400: oklch(0.555 0.225 17.32);
   --ui-color-primary-500: oklch(0.555 0.225 17.32);
   --syntax-arg: oklch(0.8 0.12 17.32);
+  --brand-dot: oklch(0.712 0.194 13.43);
 }
 
 /* High contrast mode */
@@ -154,6 +158,19 @@
   font-weight: 500;
 }
 
+/* The Skill name, when `split-name` separates it from its owner and repo. */
+.install-command__name {
+  color: var(--syntax-arg);
+  font-weight: 600;
+}
+
+/* Each segment is one unit, so a wrapped command breaks after a slash, never
+   after a hyphen inside a name. A segment wider than the line still wraps. */
+.install-command--split .install-command__target,
+.install-command--split .install-command__name {
+  display: inline-block;
+}
+
 /* Lead emphasis — the one place a page may spend the accent on a whole surface.
    Light, not a bar: a masked corner wash plus a hairline that ignites at the
    leading top corner and dies inside a third of the width. Replaced a 2px rose

app/components/BrailleSpark.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { brailleSpark, sparkWeek } from '#shared/braille-spark'
+
+/**
+ * Seven days of counts as seven braille bars, today in rose, with the count
+ * beside them. The bars are text from `shared/braille-spark.ts`, so the weekly
+ * email and any plain-text surface print the same spark.
+ */
+const {
+  counts,
+  total,
+  unit = 'mentions',
+  showUnit = true,
+} = defineProps<{
+  /** Seven daily counts, oldest first, today last. */
+  counts: readonly number[]
+  /** The count beside the bars. Defaults to the sum of the seven days. */
+  total?: number
+  /** What is counted, as a plural noun. The screen reader label always names it. */
+  unit?: string
+  /** Show the unit after the count. Hide it only where a column heading names it. */
+  showUnit?: boolean
+}>()
+
+const week = computed(() => sparkWeek(counts))
+const bars = computed(() => [...brailleSpark(counts)])
+const shown = computed(() => total ?? week.value.reduce((sum, count) => sum + count, 0))
+const totalText = computed(() => showUnit ? `${shown.value.toLocaleString('en-US')} ${unit}` : shown.value.toLocaleString('en-US'))
+const label = computed(() => `${shown.value.toLocaleString('en-US')} ${unit}. Per day, oldest first: ${week.value.join(', ')}. Today: ${week.value.at(-1)}.`)
+</script>
+
+<template>
+  <span class="braille-spark" role="img" :aria-label="label">
+    <span class="braille-spark__bars" aria-hidden="true">{{ bars.slice(0, -1).join('') }}<span class="braille-spark__today">{{ bars.at(-1) }}</span></span>
+    <span class="braille-spark__total" aria-hidden="true">{{ totalText }}</span>
+  </span>
+</template>
+
+<style scoped>
+.braille-spark {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ui-text-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* IBM Plex Mono has no braille, so the bars fall through to a face that does. */
+.braille-spark__bars {
+  font-family: 'IBM Plex Mono', 'DejaVu Sans Mono', 'Apple Braille', 'Segoe UI Symbol', ui-monospace, monospace;
+  font-size: 0.875rem;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  /* Muted, not dimmed: the bars are a graphic and need 3:1 against the surface. */
+  color: var(--ui-text-muted);
+}
+
+.braille-spark__today {
+  color: var(--brand-dot);
+}
+</style>