initial commit

docs/design-system/ui_kits/home/Wordmark.jsx

@@ -0,0 +1,25 @@
+// Wordmark — the name lockup. Bodoni display, a single ochre period as the
+// only color event. Sits at the top-left of the composition.
+function Wordmark({ size = 'header', onDark = false }) {
+  const isHeader = size === 'header';
+  const wmStyles = {
+    name: {
+      fontFamily: 'var(--font-display)',
+      fontWeight: 500,
+      fontSize: isHeader ? '21px' : 'clamp(56px, 9vw, 132px)',
+      lineHeight: isHeader ? 1 : 0.92,
+      letterSpacing: isHeader ? '0' : '-0.02em',
+      color: onDark ? 'var(--fg-on-dark-1)' : 'var(--fg-1)',
+      margin: 0,
+      display: 'flex',
+      alignItems: 'baseline',
+    },
+    dot: { color: 'var(--accent-deep)' },
+  };
+  return (
+    <h1 style={wmStyles.name}>
+      Josh&nbsp;Bairstow<span style={wmStyles.dot}>.</span>
+    </h1>
+  );
+}
+Object.assign(window, { Wordmark });