initial commit

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

@@ -0,0 +1,53 @@
+// LatestLine — the most recent post as ONE typographic line. Bait to move into
+// the site. No panel, no thumbnail. Hairline rule + arrow that drifts on hover.
+function LatestLine({ onDark = false }) {
+  const [hover, setHover] = React.useState(false);
+  const c = onDark
+    ? { fg: 'var(--fg-on-dark-1)', meta: 'var(--fg-on-dark-3)', rule: 'var(--hairline-on-dark)' }
+    : { fg: 'var(--fg-1)', meta: 'var(--fg-3)', rule: 'var(--hairline)' };
+
+  const ll = {
+    eyebrow: {
+      fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: '11px',
+      letterSpacing: '0.22em', textTransform: 'uppercase',
+      color: onDark ? 'var(--fg-on-dark-2)' : 'var(--fg-3)', margin: '0 0 14px',
+    },
+    line: {
+      display: 'flex', alignItems: 'baseline', gap: '16px',
+      textDecoration: 'none', color: c.fg,
+    },
+    title: {
+      fontFamily: 'var(--font-display)', fontWeight: 500,
+      fontSize: 'clamp(20px, 2.2vw, 27px)', letterSpacing: '-0.01em',
+    },
+    meta: {
+      fontFamily: 'var(--font-body)', fontSize: '12.5px', color: c.meta,
+      fontFeatureSettings: '"onum" 1', marginLeft: 'auto', whiteSpace: 'nowrap',
+    },
+    arrow: {
+      color: 'var(--accent-deep)',
+      transform: hover ? 'translateX(5px)' : 'translateX(0)',
+      transition: 'transform var(--dur-base) var(--ease-out)',
+    },
+    rule: { height: '1px', background: c.rule, marginTop: '14px' },
+  };
+
+  return (
+    <div>
+      <p style={ll.eyebrow}>Selected writing</p>
+      <a
+        href="#"
+        style={ll.line}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+        onClick={(e) => e.preventDefault()}
+      >
+        <span style={ll.title}>Notes on warm light and cold water</span>
+        <span style={ll.meta}>Mar&nbsp;2026</span>
+        <span style={ll.arrow}>→</span>
+      </a>
+      <div style={ll.rule} />
+    </div>
+  );
+}
+Object.assign(window, { LatestLine });