Rebrand store as Pulse with athletic theme and shared typography

- Pulse theme tokens in app.schema.json: Archivo Black headings (weight 400)
  + Inter body, white bg / black pill buttons, xl radius, AI-generated
  athletic imagery
- Add headerFontWeight theme prop so single-weight fonts (Archivo Black)
  load and render correctly; ThemeProvider applies font-family + weight
  inline so Typography works regardless of `as` element
- New shared Heading component (tagline / title / subtitle with size +
  align + tone variants) and Typography caption variant for taglines;
  refactor features, faq, cta, testimonials, products-carousel,
  products-grid, collection-grid, recommended-products, image-gallery,
  newsletter-cta to use them
- Hero accepts a `buttons` array (label / href / variant) replacing
  primaryCta/secondaryCta; cover-image component removed and existing
  cover blocks migrated to Hero blocks with `buttons: []`
- Newsletter CTA uses shadcn Button + Input so it inherits theme radius;
  stacked layout fixed to keep the image
- Product/collection card titles use Typography subtitle variants
  (font-body), heading font weight is theme-controlled
- Remove orphan commerce/shop-header.tsx and commerce/shop-footer.tsx;
  the editor-driven navigation/footer are the live chrome

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

components/Heading.tsx

@@ -0,0 +1,117 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Typography, type TypographyVariant } from "@/components/Typography";
+
+export type HeadingSize = "sm" | "md" | "lg" | "xl";
+export type HeadingAlign = "left" | "center";
+export type HeadingTone = "default" | "light";
+
+type SizeMap = {
+  title: TypographyVariant;
+  subtitle: TypographyVariant;
+  taglineGap: string;
+  subtitleGap: string;
+};
+
+const sizeMap: Record<HeadingSize, SizeMap> = {
+  sm: {
+    title: "h4",
+    subtitle: "subtitle2",
+    taglineGap: "mb-2",
+    subtitleGap: "mt-2",
+  },
+  md: {
+    title: "h3",
+    subtitle: "subtitle1",
+    taglineGap: "mb-3",
+    subtitleGap: "mt-3",
+  },
+  lg: {
+    title: "h2",
+    subtitle: "subtitle1",
+    taglineGap: "mb-3",
+    subtitleGap: "mt-3",
+  },
+  xl: {
+    title: "h1",
+    subtitle: "subtitle1",
+    taglineGap: "mb-4",
+    subtitleGap: "mt-4",
+  },
+};
+
+const alignClasses: Record<HeadingAlign, string> = {
+  left: "items-start text-left",
+  center: "items-center text-center",
+};
+
+export type HeadingProps = {
+  tagline?: React.ReactNode;
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  size?: HeadingSize;
+  align?: HeadingAlign;
+  tone?: HeadingTone;
+  className?: string;
+  titleClassName?: string;
+  subtitleClassName?: string;
+  taglineClassName?: string;
+  maxWidth?: string;
+};
+
+export function Heading({
+  tagline,
+  title,
+  subtitle,
+  size = "lg",
+  align = "left",
+  tone = "default",
+  className,
+  titleClassName,
+  subtitleClassName,
+  taglineClassName,
+  maxWidth,
+}: HeadingProps) {
+  if (!tagline && !title && !subtitle) return null;
+  const map = sizeMap[size];
+  const isLight = tone === "light";
+
+  return (
+    <div className={cn("flex flex-col", alignClasses[align], maxWidth, className)}>
+      {tagline ? (
+        <Typography
+          variant="caption"
+          className={cn(
+            map.taglineGap,
+            isLight && "text-background/70",
+            taglineClassName,
+          )}
+        >
+          {tagline}
+        </Typography>
+      ) : null}
+      {title ? (
+        <Typography
+          variant={map.title}
+          className={cn(isLight && "text-background", titleClassName)}
+        >
+          {title}
+        </Typography>
+      ) : null}
+      {subtitle ? (
+        <Typography
+          variant={map.subtitle}
+          className={cn(
+            map.subtitleGap,
+            isLight && "text-background/70",
+            subtitleClassName,
+          )}
+        >
+          {subtitle}
+        </Typography>
+      ) : null}
+    </div>
+  );
+}
+
+export default Heading;

components/ThemeProvider.tsx

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef } from "react";
 
 export type ThemeProps = {
   headerFont?: string;
+  headerFontWeight?: string;
   bodyFont?: string;
   primaryColor?: string;
   primaryForegroundColor?: string;
@@ -42,19 +43,40 @@ const shadowMap: Record<NonNullable<ThemeProps["shadow"]>, string> = {
   xl: "0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10)",
 };
 
-function googleFontsHref(headerFont?: string, bodyFont?: string): string | null {
-  const fonts = [headerFont, bodyFont].filter(
-    (f): f is string => !!f && f !== "system-ui"
-  );
-  if (fonts.length === 0) return null;
-  const families = Array.from(new Set(fonts))
-    .map((f) => `family=${encodeURIComponent(f)}:wght@400;500;600;700`)
-    .join("&");
-  return `https://fonts.googleapis.com/css2?${families}&display=swap`;
+function googleFontsHref(
+  headerFont?: string,
+  bodyFont?: string,
+  headerFontWeight?: string,
+): string | null {
+  const valid = (f?: string): f is string => !!f && f !== "system-ui";
+  const families: string[] = [];
+  const seen = new Set<string>();
+
+  const headerWeight = headerFontWeight || "400";
+  const bodyWeights = "400;500;600;700";
+
+  if (valid(headerFont)) {
+    seen.add(headerFont);
+    // Header font uses the configured weight only — avoids HTTP 400 from
+    // Google Fonts when a single-weight family (e.g. Archivo Black) is paired
+    // with a multi-weight default request.
+    families.push(
+      `family=${encodeURIComponent(headerFont)}:wght@${headerWeight}`,
+    );
+  }
+  if (valid(bodyFont) && !seen.has(bodyFont)) {
+    seen.add(bodyFont);
+    families.push(
+      `family=${encodeURIComponent(bodyFont)}:wght@${bodyWeights}`,
+    );
+  }
+  if (families.length === 0) return null;
+  return `https://fonts.googleapis.com/css2?${families.join("&")}&display=swap`;
 }
 
 export function ThemeProvider({
   headerFont,
+  headerFontWeight,
   bodyFont,
   primaryColor,
   primaryForegroundColor,
@@ -87,9 +109,11 @@ export function ThemeProvider({
     if (maxWidth) vars["--container-max-width"] = maxWidthMap[maxWidth];
     if (headerFont) vars["--font-header"] = `"${headerFont}", system-ui, sans-serif`;
     if (bodyFont) vars["--font-body"] = `"${bodyFont}", system-ui, sans-serif`;
+    if (headerFontWeight) vars["--font-weight-header"] = headerFontWeight;
     return vars;
   }, [
     headerFont,
+    headerFontWeight,
     bodyFont,
     primaryColor,
     primaryForegroundColor,
@@ -132,8 +156,8 @@ export function ThemeProvider({
   }, [cssVars]);
 
   const fontsHref = useMemo(
-    () => googleFontsHref(headerFont, bodyFont),
-    [headerFont, bodyFont],
+    () => googleFontsHref(headerFont, bodyFont, headerFontWeight),
+    [headerFont, bodyFont, headerFontWeight],
   );
 
   // Plain CSS rules — applied directly, no Tailwind CDN runtime needed.
@@ -146,6 +170,7 @@ export function ThemeProvider({
     }
     h1, h2, h3, h4, h5, h6 {
       font-family: var(--font-header), system-ui, -apple-system, sans-serif;
+      font-weight: var(--font-weight-header, 600);
     }
   `;
 

components/Typography.tsx

@@ -15,17 +15,17 @@ export type TypographyVariant =
   | "caption";
 
 const sizeClasses: Record<TypographyVariant, string> = {
-  h1: "text-5xl md:text-6xl lg:text-7xl font-semibold tracking-tight leading-[1.05]",
-  h2: "text-4xl md:text-5xl font-semibold tracking-tight leading-[1.1]",
-  h3: "text-3xl md:text-4xl font-semibold tracking-tight leading-tight",
-  h4: "text-2xl md:text-3xl font-semibold tracking-tight leading-snug",
-  h5: "text-xl md:text-2xl font-semibold leading-snug",
-  h6: "text-lg md:text-xl font-semibold leading-snug",
+  h1: "text-5xl md:text-6xl lg:text-7xl tracking-tight leading-[1.05]",
+  h2: "text-4xl md:text-5xl tracking-tight leading-[1.1]",
+  h3: "text-3xl md:text-4xl tracking-tight leading-tight",
+  h4: "text-2xl md:text-3xl tracking-tight leading-snug",
+  h5: "text-xl md:text-2xl leading-snug",
+  h6: "text-lg md:text-xl leading-snug",
   subtitle1: "text-lg md:text-xl leading-relaxed text-muted-foreground",
   subtitle2: "text-base md:text-lg leading-relaxed text-muted-foreground",
   body1: "text-lg leading-relaxed",
   body2: "text-base leading-relaxed",
-  caption: "text-sm leading-relaxed text-muted-foreground",
+  caption: "text-xs font-bold uppercase tracking-[0.2em] text-muted-foreground",
 };
 
 // Inline-style fallbacks so headings size correctly even when Tailwind
@@ -33,17 +33,17 @@ const sizeClasses: Record<TypographyVariant, string> = {
 // hasn't compiled utility classes yet. The Tailwind classes above still
 // apply on top once available (responsive breakpoints, leading, etc.).
 const sizeStyles: Record<TypographyVariant, React.CSSProperties> = {
-  h1: { fontSize: "clamp(2.5rem, 6vw, 4.5rem)", lineHeight: 1.05, fontWeight: 600, letterSpacing: "-0.02em" },
-  h2: { fontSize: "clamp(2rem, 4vw, 3rem)",     lineHeight: 1.1,  fontWeight: 600, letterSpacing: "-0.02em" },
-  h3: { fontSize: "clamp(1.75rem, 3.5vw, 2.25rem)", lineHeight: 1.15, fontWeight: 600, letterSpacing: "-0.015em" },
-  h4: { fontSize: "clamp(1.5rem, 3vw, 1.875rem)",   lineHeight: 1.2,  fontWeight: 600, letterSpacing: "-0.01em" },
-  h5: { fontSize: "1.5rem",   lineHeight: 1.25, fontWeight: 600 },
-  h6: { fontSize: "1.25rem",  lineHeight: 1.3,  fontWeight: 600 },
+  h1: { fontSize: "clamp(2.5rem, 6vw, 4.5rem)", lineHeight: 1.05, letterSpacing: "-0.02em" },
+  h2: { fontSize: "clamp(2rem, 4vw, 3rem)",     lineHeight: 1.1,  letterSpacing: "-0.02em" },
+  h3: { fontSize: "clamp(1.75rem, 3.5vw, 2.25rem)", lineHeight: 1.15, letterSpacing: "-0.015em" },
+  h4: { fontSize: "clamp(1.5rem, 3vw, 1.875rem)",   lineHeight: 1.2,  letterSpacing: "-0.01em" },
+  h5: { fontSize: "1.5rem",   lineHeight: 1.25 },
+  h6: { fontSize: "1.25rem",  lineHeight: 1.3 },
   subtitle1: { fontSize: "1.125rem", lineHeight: 1.6 },
   subtitle2: { fontSize: "1rem",     lineHeight: 1.6 },
   body1: { fontSize: "1.125rem", lineHeight: 1.6 },
   body2: { fontSize: "1rem",     lineHeight: 1.6 },
-  caption: { fontSize: "0.875rem", lineHeight: 1.5 },
+  caption: { fontSize: "0.75rem", lineHeight: 1.5, fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase" },
 };
 
 const defaultTag: Record<TypographyVariant, keyof JSX.IntrinsicElements> = {
@@ -80,11 +80,22 @@ export function Typography<C extends keyof JSX.IntrinsicElements = "p">({
   const isHeading = variant.startsWith("h");
   const fontClass = isHeading ? "font-heading" : "font-body";
 
+  // Apply the heading font + weight inline so the styling holds even when
+  // the rendered element isn't h1–h6 (e.g. <span> via the `as` prop). The
+  // ThemeProvider's element-scoped CSS rule only matches real h-tags, and
+  // the `font-heading` Tailwind utility can't be relied on in CDN mode.
+  const fontStyles: React.CSSProperties = isHeading
+    ? {
+        fontFamily: "var(--font-header), system-ui, sans-serif",
+        fontWeight: "var(--font-weight-header, 600)",
+      }
+    : {};
+
   return React.createElement(
     Tag,
     {
       className: cn(fontClass, sizeClasses[variant], className),
-      style: { ...sizeStyles[variant], ...style },
+      style: { ...fontStyles, ...sizeStyles[variant], ...style },
       ...rest,
     },
     children,

components/commerce/collection-card.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router';
 import { Card, CardContent } from '@/components/ui/card';
+import { Typography } from '@/components/Typography';
 
 interface CollectionImage {
   url: string;
@@ -40,9 +41,12 @@ const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
 
         {/* Collection Info */}
         <CardContent className="p-6">
-          <h3 className="text-2xl font-bold text-foreground mb-3 group-hover:text-muted-foreground transition-colors font-heading">
+          <Typography
+            variant="subtitle1"
+            className="mb-3 font-semibold tracking-tight text-foreground transition-colors group-hover:text-muted-foreground"
+          >
             {collection.title}
-          </h3>
+          </Typography>
 
           {collection.description && (
             <p className="text-muted-foreground">

components/commerce/collection-grid.tsx

@@ -2,8 +2,9 @@ import { useEffect, useState } from "react";
 import { Link } from "react-router";
 import { shopifyFetch } from "@/services/shopify/client";
 import { GET_COLLECTIONS_QUERY } from "@/graphql/collections";
-import { Typography } from "@/components/Typography";
 import { Container } from "@/components/layout/Container";
+import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";
 
 export type CollectionGridProps = {
   tagline: string;
@@ -47,19 +48,15 @@ export function CollectionGrid({
   return (
     <section className="bg-background py-20 md:py-28">
       <Container>
-        <div className="mx-auto mb-12 max-w-2xl text-center">
-          {tagline ? (
-            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {tagline}
-            </p>
-          ) : null}
-          <Typography variant="h2">{heading}</Typography>
-          {subheading ? (
-            <Typography variant="subtitle1" className="mt-3">
-              {subheading}
-            </Typography>
-          ) : null}
-        </div>
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align="center"
+          size="lg"
+          className="mx-auto mb-12"
+          maxWidth="max-w-2xl"
+        />
 
         <div
           className={
@@ -90,22 +87,27 @@ export function CollectionGrid({
                 {isEditorial ? (
                   <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/60 via-transparent to-transparent p-8">
                     <div>
-                      <Typography variant="h4" className="text-white">
+                      <Typography
+                        variant="subtitle1"
+                        className="font-semibold tracking-tight text-white"
+                      >
                         {c.title}
                       </Typography>
                       <span className="mt-2 inline-flex text-xs uppercase tracking-[0.2em] text-white/80">
-                        Shop now →
+                        Shop now
                       </span>
                     </div>
                   </div>
                 ) : null}
               </div>
               {!isEditorial ? (
-                <div className="mt-4 flex items-center justify-between">
-                  <h3 className="text-sm font-medium tracking-tight">{c.title}</h3>
-                  <span className="text-xs text-muted-foreground transition-opacity group-hover:opacity-100">
-                    →
-                  </span>
+                <div className="mt-4">
+                  <Typography
+                    variant="subtitle2"
+                    className="font-medium tracking-tight text-foreground"
+                  >
+                    {c.title}
+                  </Typography>
                 </div>
               ) : null}
             </Link>

components/commerce/featured-product.tsx

@@ -90,9 +90,7 @@ export function FeaturedProductView({
         </div>
         <div className="flex flex-col items-start gap-5">
           {tagline ? (
-            <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {tagline}
-            </p>
+            <Typography variant="caption">{tagline}</Typography>
           ) : null}
           <Typography variant="h2">{product.title}</Typography>
           {formatted ? (

components/commerce/product-card.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Link } from "react-router";
+import { Typography } from "@/components/Typography";
 
 type ProductImage = { url: string; altText?: string };
 type ProductPrice = { amount: string; currencyCode: string };
@@ -53,7 +54,12 @@ export function ProductCard({
         ) : null}
       </div>
       <div className="mt-4 flex items-start justify-between gap-3">
-        <h3 className="text-sm font-medium tracking-tight">{product.title}</h3>
+        <Typography
+          variant="subtitle2"
+          className="font-medium tracking-tight text-foreground"
+        >
+          {product.title}
+        </Typography>
         {price ? (
           <div className="flex flex-col items-end text-sm">
             {onSale && compare ? (

components/commerce/products-carousel.tsx

@@ -4,7 +4,7 @@ import type { ShopifyCollection } from "@reacteditor/field-shopify";
 import { getProducts } from "@/hooks/use-shopify-products";
 import { getCollectionProducts } from "@/hooks/use-shopify-collections";
 import { ProductCard } from "./product-card";
-import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";
 import {
   Carousel,
   CarouselContent,
@@ -74,19 +74,14 @@ export function ProductsCarousel({
     <section className="bg-background py-20 md:py-28">
       <Container>
         <div className="mb-10 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
-          <div className="max-w-xl">
-            {tagline ? (
-              <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                {tagline}
-              </p>
-            ) : null}
-            <Typography variant="h2">{heading}</Typography>
-            {subheading ? (
-              <Typography variant="subtitle1" className="mt-3">
-                {subheading}
-              </Typography>
-            ) : null}
-          </div>
+          <Heading
+            tagline={tagline}
+            title={heading}
+            subtitle={subheading}
+            align="left"
+            size="lg"
+            maxWidth="max-w-xl"
+          />
           {ctaLabel ? (
             <Link
               to={

components/commerce/products-grid.tsx

@@ -4,8 +4,8 @@ import type { ShopifyCollection } from "@reacteditor/field-shopify";
 import { getProducts } from "@/hooks/use-shopify-products";
 import { getCollectionProducts } from "@/hooks/use-shopify-collections";
 import { ProductCard } from "./product-card";
-import { Typography } from "@/components/Typography";
 import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";
 
 export type ProductsGridProps = {
   collection: ShopifyCollection | null;
@@ -62,19 +62,14 @@ export function ProductsGrid({
     <section className="bg-background py-20 md:py-28">
       <Container>
         <div className="mb-12 flex flex-col items-end justify-between gap-6 md:flex-row md:items-end">
-          <div className="max-w-xl">
-            {tagline ? (
-              <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                {tagline}
-              </p>
-            ) : null}
-            <Typography variant="h2">{heading}</Typography>
-            {subheading ? (
-              <Typography variant="subtitle1" className="mt-3">
-                {subheading}
-              </Typography>
-            ) : null}
-          </div>
+          <Heading
+            tagline={tagline}
+            title={heading}
+            subtitle={subheading}
+            align="left"
+            size="lg"
+            maxWidth="max-w-xl"
+          />
           {ctaLabel ? (
             <Link
               to={ctaHref || (collection?.handle ? `/collections/${collection.handle}` : "/collections")}

components/commerce/recommended-products.tsx

@@ -4,9 +4,9 @@ import {
   useProductRecommendations,
 } from "@/hooks/use-shopify-products";
 import { ProductCard } from "./product-card";
-import { Typography } from "@/components/Typography";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";
 
 export type RecommendedProductsProps = {
   product: ShopifyProduct | null;
@@ -46,14 +46,14 @@ export function RecommendedProductsView({
   return (
     <section className="bg-background py-20 md:py-28">
       <Container>
-        <div className="mb-12 max-w-xl">
-          {tagline ? (
-            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {tagline}
-            </p>
-          ) : null}
-          <Typography variant="h3">{heading}</Typography>
-        </div>
+        <Heading
+          tagline={tagline}
+          title={heading}
+          align="left"
+          size="md"
+          className="mb-12"
+          maxWidth="max-w-xl"
+        />
 
         <div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-4">
           {items.length === 0

components/commerce/shop-footer.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-const Footer: React.FC = () => {
-  return (
-    <footer className="bg-foreground text-background py-12">
-      <div className="container mx-auto px-4 text-center">
-        <h3
-          className="text-2xl font-bold mb-4"
-          style={{fontFamily: 'Space Grotesk, sans-serif'}}
-        >
-          Store
-        </h3>
-        <p className="text-background/70 mb-6">
-          Your premium shopping destination
-        </p>
-        <div className="mt-8 pt-8 border-t border-background/20 text-background/70">
-          <p>&copy; 2025 Store. All rights reserved.</p>
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-export default Footer;

components/commerce/shop-header.tsx

@@ -1,68 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Link } from 'react-router';
-import { useShopifyCart } from '@/hooks/use-shopify-cart';
-import config from '@/lib/config.json';
-
-const CartIcon: React.FC = () => {
-  const { toggleCart, itemCount } = useShopifyCart();
-
-  return (
-    <button
-      onClick={toggleCart}
-      className="relative p-1 text-foreground hover:text-muted-foreground transition-colors"
-    >
-      <i className="ri-shopping-cart-line text-xl"></i>
-      {itemCount > 0 && (
-        <span className="absolute -top-1 -right-1 bg-primary text-primary-foreground text-[10px] rounded-full w-4 h-4 flex items-center justify-center font-semibold">
-          {itemCount > 99 ? '99+' : itemCount}
-        </span>
-      )}
-    </button>
-  );
-};
-
-const Header: React.FC = () => {
-  return (
-    <nav className="bg-background shadow-sm sticky top-0 z-30 h-14">
-      <div className="container mx-auto px-4 h-full">
-        <div className="flex justify-between items-center h-full">
-          {/* Logo */}
-          <Link to="/" className="text-lg font-bold text-foreground font-heading">
-            {config.brand.logo.url ? (
-              <img
-                src={config.brand.logo.url}
-                alt={config.brand.logo.alt || 'Store'}
-                className="h-8"
-              />
-            ) : (
-              'Store'
-            )}
-          </Link>
-
-          {/* Navigation Links */}
-          <div className="flex items-center space-x-6">
-            <Link
-              to="/"
-              className="text-sm text-foreground hover:text-muted-foreground font-medium transition-colors"
-            >
-              Products
-            </Link>
-            <Link
-              to="/collections"
-              className="text-sm text-foreground hover:text-muted-foreground font-medium transition-colors"
-            >
-              Collections
-            </Link>
-
-            {/* Cart Icon */}
-            <CartIcon />
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-};
-
-export default Header;

components/cta/cta.tsx

@@ -1,6 +1,6 @@
 import { Link } from "react-router";
 import { cn } from "@/lib/utils";
-import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";
 
 export type CTAProps = {
   tagline: string;
@@ -43,17 +43,15 @@ export function CTA({
           align === "center" ? "items-center text-center" : "items-start",
         )}
       >
-        {tagline ? (
-          <p className="mb-4 text-xs uppercase tracking-[0.2em] text-white/80">
-            {tagline}
-          </p>
-        ) : null}
-        <Typography variant="h2">{heading}</Typography>
-        {subheading ? (
-          <Typography variant="subtitle1" className="mt-5 max-w-xl text-white/80">
-            {subheading}
-          </Typography>
-        ) : null}
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align={align === "center" ? "center" : "left"}
+          size="lg"
+          tone="light"
+          subtitleClassName="max-w-xl"
+        />
         <div
           className={cn(
             "mt-10 flex flex-wrap gap-3",

components/faq/faq.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Plus, Minus } from "lucide-react";
-import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";
 
 export type FAQProps = {
   tagline: string;
@@ -14,19 +14,14 @@ export function FAQ({ tagline, heading, subheading, items }: FAQProps) {
   return (
     <section className="bg-background py-20 md:py-28">
       <div className="container mx-auto max-w-3xl px-6">
-        <div className="mb-12 text-center">
-          {tagline ? (
-            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {tagline}
-            </p>
-          ) : null}
-          <Typography variant="h2">{heading}</Typography>
-          {subheading ? (
-            <Typography variant="subtitle1" className="mt-3">
-              {subheading}
-            </Typography>
-          ) : null}
-        </div>
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align="center"
+          size="lg"
+          className="mb-12"
+        />
 
         <div className="divide-y divide-border border-y border-border">
           {items.map((item, i) => {

components/features/features.tsx

@@ -1,5 +1,6 @@
 import { Typography } from "@/components/Typography";
 import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";
 
 export type FeaturesProps = {
   tagline: string;
@@ -19,28 +20,24 @@ export function Features({ tagline, heading, subheading, columns, items }: Featu
   return (
     <section className="bg-background py-20 md:py-28">
       <Container>
-        <div className="mx-auto mb-16 max-w-2xl text-center">
-          {tagline ? (
-            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {tagline}
-            </p>
-          ) : null}
-          <Typography variant="h2">{heading}</Typography>
-          {subheading ? (
-            <Typography variant="subtitle1" className="mt-3">
-              {subheading}
-            </Typography>
-          ) : null}
-        </div>
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align="center"
+          size="lg"
+          className="mx-auto mb-16"
+          maxWidth="max-w-2xl"
+        />
 
         <div className={`grid grid-cols-1 gap-x-10 gap-y-12 ${colClass[columns]}`}>
           {items.map((item, i) => (
-            <div key={i} className="border-t border-border pt-6">
-              <p className="mb-3 text-xs tracking-[0.18em] text-muted-foreground">
+            <div key={i} className="flex flex-col gap-3">
+              <Typography variant="caption">
                 {String(i + 1).padStart(2, "0")}
-              </p>
+              </Typography>
               <Typography variant="h5">{item.title}</Typography>
-              <Typography variant="body2" className="mt-3 text-muted-foreground">
+              <Typography variant="body2" className="text-muted-foreground">
                 {item.body}
               </Typography>
             </div>

components/hero/hero.editor.tsx

@@ -13,8 +13,10 @@ export const heroEditor: ComponentConfig<HeroProps> = {
     heading: "Made for the way you move",
     subheading:
       "A considered wardrobe of essentials, cut from natural fibers and designed to last.",
-    primaryCta: { label: "Shop the collection", href: "/collections" },
-    secondaryCta: { label: "Our story", href: "/about" },
+    buttons: [
+      { label: "Shop the collection", href: "/collections", variant: "primary" },
+      { label: "Our story", href: "/about", variant: "secondary" },
+    ],
     imageUrl:
       "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=2400&q=80",
     align: "left",
@@ -25,21 +27,29 @@ export const heroEditor: ComponentConfig<HeroProps> = {
     tagline: { label: "Tagline", type: "text", contentEditable: true },
     heading: { label: "Heading", type: "textarea", contentEditable: true },
     subheading: { label: "Subheading", type: "textarea", contentEditable: true },
-    primaryCta: {
-      label: "Primary CTA",
-      type: "object",
-      objectFields: {
+    buttons: {
+      label: "Buttons",
+      type: "array",
+      arrayFields: {
         label: { label: "Label", type: "text", contentEditable: true },
         href: { label: "Link", type: "text" },
+        variant: {
+          label: "Variant",
+          type: "select",
+          options: [
+            { label: "Primary (filled)", value: "primary" },
+            { label: "Secondary (outline)", value: "secondary" },
+            { label: "Outline", value: "outline" },
+            { label: "Ghost", value: "ghost" },
+          ],
+        },
       },
-    },
-    secondaryCta: {
-      label: "Secondary CTA",
-      type: "object",
-      objectFields: {
-        label: { label: "Label", type: "text", contentEditable: true },
-        href: { label: "Link", type: "text" },
+      defaultItemProps: {
+        label: "Button",
+        href: "/",
+        variant: "primary",
       },
+      getItemSummary: (item) => item?.label || "Button",
     },
     imageUrl: { label: "Background image", ...imageField({ adapter: frontendAiMediaAdapter }) },
     align: {

components/hero/hero.tsx

@@ -2,12 +2,19 @@ import { Link } from "react-router";
 import { cn } from "@/lib/utils";
 import { Typography } from "@/components/Typography";
 
+export type HeroButtonVariant = "primary" | "secondary" | "outline" | "ghost";
+
+export type HeroButton = {
+  label: string;
+  href: string;
+  variant: HeroButtonVariant;
+};
+
 export type HeroProps = {
   tagline: string;
   heading: string;
   subheading: string;
-  primaryCta: { label: string; href: string };
-  secondaryCta: { label: string; href: string };
+  buttons: HeroButton[];
   imageUrl: string;
   align: "left" | "center";
   height: "md" | "lg" | "full";
@@ -20,18 +27,40 @@ const heightClass: Record<HeroProps["height"], string> = {
   full: "min-h-screen",
 };
 
+function buttonClass(variant: HeroButtonVariant, isDark: boolean): string {
+  switch (variant) {
+    case "primary":
+      return cn(
+        "inline-flex items-center justify-center rounded-md px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-90",
+        isDark ? "bg-white text-black" : "bg-foreground text-background",
+      );
+    case "secondary":
+    case "outline":
+      return cn(
+        "inline-flex items-center justify-center rounded-md border px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-80",
+        isDark ? "border-white text-white" : "border-foreground text-foreground",
+      );
+    case "ghost":
+      return cn(
+        "inline-flex items-center justify-center rounded-md px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-80",
+        isDark ? "text-white" : "text-foreground",
+      );
+  }
+}
+
 export function Hero({
   tagline,
   heading,
   subheading,
-  primaryCta,
-  secondaryCta,
+  buttons,
   imageUrl,
   align,
   height,
   tone,
 }: HeroProps) {
   const isDark = tone === "dark";
+  const visibleButtons = (buttons ?? []).filter((b) => b?.label);
+
   return (
     <section
       className={cn(
@@ -63,14 +92,15 @@ export function Hero({
         )}
       >
         {tagline ? (
-          <p
+          <Typography
+            variant="caption"
             className={cn(
-              "mb-5 text-xs uppercase tracking-[0.2em]",
+              "mb-5",
               isDark ? "text-white/80" : "text-foreground/70",
             )}
           >
             {tagline}
-          </p>
+          </Typography>
         ) : null}
         <Typography variant="h1" className="max-w-3xl">
           {heading}
@@ -87,35 +117,24 @@ export function Hero({
           </Typography>
         ) : null}
 
-        <div
-          className={cn(
-            "mt-10 flex flex-wrap gap-3",
-            align === "center" && "justify-center",
-          )}
-        >
-          {primaryCta?.label ? (
-            <Link
-              to={primaryCta.href || "#"}
-              className={cn(
-                "inline-flex items-center justify-center rounded-md px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-90",
-                isDark ? "bg-white text-black" : "bg-foreground text-background",
-              )}
-            >
-              {primaryCta.label}
-            </Link>
-          ) : null}
-          {secondaryCta?.label ? (
-            <Link
-              to={secondaryCta.href || "#"}
-              className={cn(
-                "inline-flex items-center justify-center rounded-md border px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-80",
-                isDark ? "border-white text-white" : "border-foreground text-foreground",
-              )}
-            >
-              {secondaryCta.label}
-            </Link>
-          ) : null}
-        </div>
+        {visibleButtons.length > 0 ? (
+          <div
+            className={cn(
+              "mt-10 flex flex-wrap gap-3",
+              align === "center" && "justify-center",
+            )}
+          >
+            {visibleButtons.map((b, i) => (
+              <Link
+                key={`${b.href}-${b.label}-${i}`}
+                to={b.href || "#"}
+                className={buttonClass(b.variant, isDark)}
+              >
+                {b.label}
+              </Link>
+            ))}
+          </div>
+        ) : null}
       </div>
     </section>
   );

components/landing/image-gallery.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils";
-import { Typography } from "@/components/Typography";
 import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";
 
 export type ImageGalleryProps = {
   tagline: string;
@@ -14,21 +14,15 @@ export function ImageGallery({ tagline, heading, subheading, layout, items }: Im
   return (
     <section className="bg-background py-20 md:py-28">
       <Container>
-        {(tagline || heading || subheading) && (
-          <div className="mx-auto mb-12 max-w-2xl text-center">
-            {tagline ? (
-              <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                {tagline}
-              </p>
-            ) : null}
-            {heading ? <Typography variant="h2">{heading}</Typography> : null}
-            {subheading ? (
-              <Typography variant="subtitle1" className="mt-3">
-                {subheading}
-              </Typography>
-            ) : null}
-          </div>
-        )}
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align="center"
+          size="lg"
+          className="mx-auto mb-12"
+          maxWidth="max-w-2xl"
+        />
 
         {layout === "masonry" ? (
           <div className="columns-1 gap-4 sm:columns-2 lg:columns-3">

components/landing/newsletter-cta.tsx

@@ -1,7 +1,9 @@
 import { useState } from "react";
 import { cn } from "@/lib/utils";
-import { Typography } from "@/components/Typography";
 import { Container } from "@/components/layout/Container";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Heading } from "@/components/Heading";
 
 export type EmailProvider = "none" | "mailchimp" | "klaviyo";
 
@@ -109,92 +111,80 @@ export function NewsletterCta({
   const Form = (
     <form
       onSubmit={submit}
-      className="flex w-full max-w-md items-center border-b border-foreground/30 focus-within:border-foreground"
+      className="flex w-full max-w-md flex-col gap-3 sm:flex-row sm:items-center"
     >
-      <input
+      <Input
         type="email"
         required
         value={email}
         onChange={(e) => setEmail(e.target.value)}
-        placeholder="you@example.com"
-        className="flex-1 bg-transparent py-3 text-sm placeholder:text-muted-foreground focus:outline-none"
+        placeholder="Enter your email"
+        className="h-11 flex-1"
       />
-      <button
-        type="submit"
-        disabled={submitting}
-        className="ml-3 text-sm font-medium tracking-wide hover:opacity-70 disabled:opacity-40"
-      >
-        {submitting ? "…" : buttonLabel} →
-      </button>
+      <Button type="submit" size="lg" disabled={submitting} className="h-11">
+        {submitting ? "Joining…" : buttonLabel}
+      </Button>
     </form>
   );
 
-  if (layout === "split") {
-    return (
-      <section className="bg-background">
-        <Container className="py-16 md:py-24">
-          <div className="grid grid-cols-1 items-center gap-12 md:grid-cols-2">
-            <div>
-              {imageUrl ? (
+  const isStacked = layout === "stacked";
+
+  return (
+    <section className="bg-background">
+      <Container className="py-20 md:py-28">
+        <div
+          className={cn(
+            "grid grid-cols-1 gap-10",
+            isStacked
+              ? "mx-auto max-w-3xl items-center text-center"
+              : "items-center md:grid-cols-12 md:gap-16",
+          )}
+        >
+          {imageUrl ? (
+            <div className={cn(!isStacked && "md:col-span-7")}>
+              <div className="relative overflow-hidden rounded-xl bg-muted">
                 <img
                   src={imageUrl}
                   alt=""
-                  className="aspect-[5/4] w-full rounded-md object-cover"
+                  className={cn(
+                    "w-full object-cover transition-transform duration-700 hover:scale-105",
+                    isStacked ? "aspect-[16/9]" : "aspect-[4/3]",
+                  )}
                 />
-              ) : null}
-            </div>
-            <div className="flex flex-col items-start">
-              {tagline ? (
-                <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                  {tagline}
-                </p>
-              ) : null}
-              <Typography variant="h2">{heading}</Typography>
-              {subheading ? (
-                <Typography variant="subtitle1" className="mt-3 max-w-md">
-                  {subheading}
-                </Typography>
-              ) : null}
-              <div className="mt-8 w-full">
-                {submitted ? (
-                  <p className="text-sm text-muted-foreground">
-                    Thanks — we'll be in touch.
-                  </p>
-                ) : (
-                  Form
-                )}
               </div>
             </div>
+          ) : null}
+          <div
+            className={cn(
+              "flex w-full flex-col",
+              isStacked ? "items-center" : "items-start md:col-span-5",
+            )}
+          >
+            <Heading
+              tagline={tagline}
+              title={heading}
+              subtitle={subheading}
+              align={isStacked ? "center" : "left"}
+              size="lg"
+              subtitleClassName={isStacked ? "mx-auto max-w-xl" : "max-w-md"}
+            />
+            <div
+              className={cn(
+                "mt-8 w-full",
+                isStacked && "flex justify-center",
+              )}
+            >
+              {submitted ? (
+                <p className="text-sm font-medium uppercase tracking-wide">
+                  You're in. See you Monday at 5:30am.
+                </p>
+              ) : (
+                Form
+              )}
+            </div>
           </div>
-        </Container>
-      </section>
-    );
-  }
-
-  return (
-    <section className="bg-muted/40 py-20 md:py-28">
-      <div className="container mx-auto max-w-2xl px-6 text-center">
-        {tagline ? (
-          <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-            {tagline}
-          </p>
-        ) : null}
-        <Typography variant="h2">{heading}</Typography>
-        {subheading ? (
-          <Typography variant="subtitle1" className="mt-3">
-            {subheading}
-          </Typography>
-        ) : null}
-        <div className={cn("mx-auto mt-10 flex w-full max-w-md justify-center")}>
-          {submitted ? (
-            <p className="text-sm text-muted-foreground">
-              Thanks — we'll be in touch.
-            </p>
-          ) : (
-            Form
-          )}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/logos/logos.tsx

@@ -1,4 +1,5 @@
 import { Container } from "@/components/layout/Container";
+import { Typography } from "@/components/Typography";
 
 export type LogosProps = {
   tagline: string;
@@ -11,9 +12,9 @@ export function Logos({ tagline, items, layout }: LogosProps) {
     <section className="border-y border-border bg-muted/40 py-12">
       <Container>
         {tagline ? (
-          <p className="mb-8 text-center text-xs uppercase tracking-[0.2em] text-muted-foreground">
+          <Typography variant="caption" className="mb-8 text-center">
             {tagline}
-          </p>
+          </Typography>
         ) : null}
         {layout === "marquee" ? (
           <div className="overflow-hidden">

components/navigation/navigation.tsx

@@ -4,6 +4,7 @@ import { Link } from "react-router";
 import { useShopifyCart } from "@/hooks/use-shopify-cart";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import { Container } from "@/components/layout/Container";
+import { Typography } from "@/components/Typography";
 import { cn } from "@/lib/utils";
 
 export type NavigationProps = {
@@ -51,11 +52,7 @@ export function Navigation({
         )}
       >
         <Container className="flex h-16 items-center justify-between md:h-20">
-          <Link
-            to="/"
-            className="inline-flex items-center font-semibold tracking-tight"
-            style={{ fontSize: "1.125rem", letterSpacing: "0.02em" }}
-          >
+          <Link to="/" className="inline-flex items-center">
             {logo ? (
               <img
                 src={logo}
@@ -63,7 +60,9 @@ export function Navigation({
                 className="h-8 w-auto object-contain"
               />
             ) : (
-              brand || "Brand Logo"
+              <Typography variant="h3" as="span">
+                {brand || "Brand Logo"}
+              </Typography>
             )}
           </Link>
 

components/testimonials/testimonials.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
-import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";
 
 export type TestimonialsProps = {
   tagline: string;
@@ -21,12 +21,12 @@ export function Testimonials({ tagline, heading, items }: TestimonialsProps) {
   return (
     <section className="bg-muted/40 py-20 md:py-28">
       <div className="container mx-auto max-w-4xl px-6 text-center">
-        {tagline ? (
-          <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-            {tagline}
-          </p>
-        ) : null}
-        {heading ? <Typography variant="h2">{heading}</Typography> : null}
+        <Heading
+          tagline={tagline}
+          title={heading}
+          align="center"
+          size="lg"
+        />
 
         {item ? (
           <div className="relative mt-12">