@deepgram/styles 0.0.9 → 0.1.2

package/design-system.yaml

@@ -0,0 +1,2591 @@
+# yaml-language-server: $schema=https://design.dx.deepgram.com/.well-known/design-system-schema-v1.json
+
+version: "1.0"
+
+# =============================================================================
+# DESIGN TOKENS
+# =============================================================================
+tokens:
+  variables:
+    "--dg-base-font-size": "16px"
+    "--dg-border-width": "0.125rem"
+    "--dg-primary": "#13ef95"
+    "--dg-secondary": "#149afb"
+
+  colors:
+    brand:
+      primary:
+        value: "var(--dg-primary, #13ef95)"
+        variable: "--dg-primary"
+        fallback: "#13ef95"
+      secondary:
+        value: "var(--dg-secondary, #149afb)"
+        variable: "--dg-secondary"
+        fallback: "#149afb"
+
+    background:
+      almost-black: "#050506"
+      default: "#0b0b0c"
+      charcoal: "#1a1a1f"
+      translucent: "rgba(0, 0, 0, 0.5)"
+
+    border:
+      default: "#2c2c33"
+      pebble: "#4e4e52"
+      slate: "#949498"
+
+    text:
+      default: "#fbfbff"
+      fog: "#edede2"
+      platinum: "#e1e1e5"
+      muted: "#949498"
+
+    status:
+      success: "#12b76a"
+      warning: "#fec84b"
+      danger: "#f04438"
+
+    gradient:
+      start: "#008fc1"
+      end: "#00f099"
+
+  fonts:
+    sans:
+      family: ["Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif"]
+      tailwind-key: "dg-sans"
+    noto:
+      family: ["Noto Sans", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif"]
+      tailwind-key: "dg-noto"
+    mono:
+      family: ["Fira Code", "Monaco", "Consolas", "Courier New", "monospace"]
+      tailwind-key: "dg-mono"
+
+  spacing:
+    xs: "0.25rem"
+    sm: "0.5rem"
+    md: "1rem"
+    lg: "1.5rem"
+    xl: "2rem"
+    2xl: "3rem"
+    "128": "32rem"
+
+  border-radius:
+    sm: "0.25rem"
+    md: "0.5rem"
+    lg: "0.75rem"
+    xl: "1rem"
+
+  shadows:
+    sm: "0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05)"
+    md: "0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.06)"
+    lg: "0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.05)"
+
+  logos:
+    primary:
+      path: "assets/deepgram-dark.svg"
+      alt: "Deepgram"
+
+# =============================================================================
+# BASE STYLES (applied via Tailwind plugin addBase)
+# =============================================================================
+base:
+  html:
+    properties:
+      fontSize: "var(--dg-base-font-size, 16px)"
+      scrollBehavior: "smooth"
+  body:
+    properties:
+      fontFamily: "theme(fontFamily.dg-sans)"
+      WebkitFontSmoothing: "antialiased"
+      MozOsxFontSmoothing: "grayscale"
+      backgroundColor: "theme(colors.dg-background)"
+      color: "theme(colors.dg-text)"
+      lineHeight: "theme(lineHeight.normal)"
+  "h1, h2, h3, h4, h5, h6":
+    properties:
+      fontFamily: "theme(fontFamily.dg-noto)"
+      fontWeight: "theme(fontWeight.bold)"
+  h1:
+    properties:
+      fontSize: "theme(fontSize.4xl)"
+    media:
+      "(min-width: 768px)":
+        properties:
+          fontSize: "theme(fontSize.5xl)"
+  h2:
+    properties:
+      fontSize: "theme(fontSize.3xl)"
+    media:
+      "(min-width: 768px)":
+        properties:
+          fontSize: "theme(fontSize.4xl)"
+  h3:
+    properties:
+      fontSize: "theme(fontSize.2xl)"
+    media:
+      "(min-width: 768px)":
+        properties:
+          fontSize: "theme(fontSize.3xl)"
+  h4:
+    properties:
+      fontSize: "theme(fontSize.xl)"
+    media:
+      "(min-width: 768px)":
+        properties:
+          fontSize: "theme(fontSize.2xl)"
+  "code, pre":
+    properties:
+      fontFamily: "theme(fontFamily.dg-mono)"
+  a:
+    properties:
+      color: "theme(colors.dg-primary)"
+      transitionProperty: "color"
+      transitionDuration: "200ms"
+      "&:hover":
+        opacity: "0.8"
+
+# =============================================================================
+# CUSTOM UTILITIES (applied via Tailwind plugin addUtilities)
+# =============================================================================
+utilities:
+  ".dg-gradient-border":
+    properties:
+      backgroundImage: "linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000))"
+      backgroundOrigin: "padding-box, border-box"
+      backgroundClip: "padding-box, border-box"
+      backgroundRepeat: "no-repeat"
+      backgroundPosition: "center"
+      backgroundSize: "100% 100%"
+      backgroundColor: "rgb(0, 0, 0)"
+  ".dg-bg-reset":
+    properties:
+      backgroundImage: "none"
+      backgroundOrigin: "padding-box"
+      backgroundClip: "border-box"
+      backgroundRepeat: "repeat"
+      backgroundPosition: "0% 0%"
+      backgroundSize: "auto"
+  ".dg-glow-cyan-green":
+    properties:
+      boxShadow: "color-mix(in srgb, var(--dg-primary, #13ef95) 20%, transparent) 0.375rem 0 0.9375rem 0, color-mix(in srgb, var(--dg-secondary, #149afb) 20%, transparent) -0.375rem 0 0.9375rem 0"
+  ".dg-shadow-subtle":
+    properties:
+      boxShadow: "rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem"
+
+# =============================================================================
+# COMPONENTS
+# =============================================================================
+components:
+
+  # ---------------------------------------------------------------------------
+  # BUTTONS
+  # ---------------------------------------------------------------------------
+  btn:
+    metadata:
+      title: "Primary Button"
+      description: "Main call-to-action button with primary brand color"
+      category: "application-ui"
+      section: "Elements"
+      subsection: "Buttons"
+      tags: [button, primary, cta, action]
+    css:
+      ".dg-btn":
+        apply: "inline-flex items-center justify-center px-5 py-1.5 leading-[2] font-dg-sans font-semibold text-base rounded capitalize whitespace-nowrap cursor-pointer select-none outline-none w-fit disabled:opacity-50 disabled:cursor-not-allowed"
+        properties:
+          gap: "0.5rem"
+          height: "3rem"
+    variants:
+      sm:
+        css:
+          ".dg-btn--sm":
+            apply: "px-5 py-2 font-bold text-sm"
+            properties:
+              height: "2.25rem"
+      primary:
+        css:
+          ".dg-btn--primary":
+            apply: "border border-transparent relative dg-text-white dg-gradient-border dg-glow-cyan-green"
+          ".dg-btn--primary:hover":
+            apply: "border-transparent text-black dg-bg-reset bg-white dg-shadow-subtle"
+      secondary:
+        css:
+          ".dg-btn--secondary":
+            apply: "border border-transparent bg-white text-black"
+          ".dg-btn--secondary:hover":
+            apply: "border border-white bg-black dg-text-white"
+      ghost:
+        css:
+          ".dg-btn--ghost":
+            apply: "border border-dg-slate bg-transparent dg-text-white"
+          ".dg-btn--ghost:hover":
+            apply: "border-transparent text-black dg-bg-reset bg-white dg-shadow-subtle"
+      danger-ghost:
+        css:
+          ".dg-btn--danger-ghost":
+            apply: "border border-dg-danger bg-transparent dg-text-white"
+          ".dg-btn--danger-ghost:hover":
+            apply: "border-transparent bg-dg-danger dg-text-white"
+      icon-only:
+        css:
+          ".dg-btn--icon-only":
+            apply: "px-2 size-12"
+          ".dg-btn--icon-only.dg-btn--sm":
+            apply: "size-6"
+      collapse:
+        css:
+          ".dg-btn--collapse":
+            apply: "inline-flex"
+        media:
+          "(max-width: 768px)":
+            ".dg-btn--collapse":
+              apply: "w-full justify-center"
+    elements:
+      icon:
+        css:
+          ".dg-btn i, .dg-btn svg":
+            properties:
+              flex-shrink: "0"
+    examples:
+      - title: "Primary Button"
+        description: "Default primary button element"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--primary"
+          children:
+            - "Primary Action"
+      - title: "Primary Button as Link"
+        description: "Button styles applied to a link - perfect for navigation CTAs"
+        ast:
+          tag: a
+          props:
+            href: "#"
+            class: "dg-btn dg-btn--primary"
+          children:
+            - "Get Started"
+      - title: "Primary Button with Icon Before"
+        description: "Icon placed before text"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--primary"
+          children:
+            - tag: i
+              props:
+                class: "fas fa-play"
+            - "Start Recording"
+      - title: "Primary Link with Icon After"
+        description: "Link styled as button with trailing icon"
+        ast:
+          tag: a
+          props:
+            href: "#"
+            class: "dg-btn dg-btn--primary"
+          children:
+            - "Continue"
+            - tag: i
+              props:
+                class: "fas fa-arrow-right"
+      - title: "Small Primary Button"
+        description: "Compact version for tight spaces"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--primary dg-btn--sm"
+          children:
+            - "Primary"
+      - title: "Small Primary Link"
+        description: "Compact link styled as button"
+        ast:
+          tag: a
+          props:
+            href: "#"
+            class: "dg-btn dg-btn--primary dg-btn--sm"
+          children:
+            - "Sign Up"
+      - title: "Custom Color Primary Button"
+        description: "Primary button with custom brand colors using CSS variables"
+        ast:
+          tag: div
+          props:
+            style: "--dg-primary: #a855f7; --dg-secondary: #ec4899;"
+          children:
+            - tag: button
+              props:
+                type: button
+                class: "dg-btn dg-btn--primary"
+              children:
+                - tag: i
+                  props:
+                    class: "fas fa-sparkles"
+                - "Custom Purple Brand"
+
+  btn-secondary:
+    metadata:
+      title: "Secondary Button"
+      description: "Secondary action button with alternative styling"
+      category: "application-ui"
+      section: "Elements"
+      subsection: "Buttons"
+      tags: [button, secondary, action]
+    examples:
+      - title: "Secondary Button"
+        description: "Default secondary button element"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--secondary"
+          children:
+            - "Secondary Action"
+      - title: "Secondary Button as Link"
+        description: "Button styles applied to a link"
+        ast:
+          tag: a
+          props:
+            href: "#"
+            class: "dg-btn dg-btn--secondary"
+          children:
+            - "Learn More"
+      - title: "Secondary Button with Icon Before"
+        description: "Icon placed before text"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--secondary"
+          children:
+            - tag: i
+              props:
+                class: "fas fa-download"
+            - "Download"
+      - title: "Secondary Link with Icon After"
+        description: "Link styled as button with trailing icon"
+        ast:
+          tag: a
+          props:
+            href: "#"
+            class: "dg-btn dg-btn--secondary"
+          children:
+            - "View Docs"
+            - tag: i
+              props:
+                class: "fas fa-external-link-alt"
+      - title: "Small Secondary Button"
+        description: "Compact version for tight spaces"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--secondary dg-btn--sm"
+          children:
+            - "Cancel"
+      - title: "Small Secondary Link"
+        description: "Compact link styled as secondary button"
+        ast:
+          tag: a
+          props:
+            href: "#"
+            class: "dg-btn dg-btn--secondary dg-btn--sm"
+          children:
+            - "More Info"
+
+  btn-ghost:
+    metadata:
+      title: "Ghost Button"
+      description: "Minimal button with transparent background and border"
+      category: "application-ui"
+      section: "Elements"
+      subsection: "Buttons"
+      tags: [button, ghost, minimal, tertiary]
+    examples:
+      - title: "Ghost Button"
+        description: "Default ghost button element"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--ghost"
+          children:
+            - "Ghost Action"
+      - title: "Ghost Button as Link"
+        description: "Button styles applied to a link"
+        ast:
+          tag: a
+          props:
+            href: "#"
+            class: "dg-btn dg-btn--ghost"
+          children:
+            - "View Details"
+      - title: "Ghost Button with Icon Before"
+        description: "Icon placed before text"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--ghost"
+          children:
+            - tag: i
+              props:
+                class: "fas fa-cog"
+            - "Settings"
+      - title: "Ghost Link with Icon After"
+        description: "Link styled as button with trailing icon"
+        ast:
+          tag: a
+          props:
+            href: "#"
+            class: "dg-btn dg-btn--ghost"
+          children:
+            - "Explore"
+            - tag: i
+              props:
+                class: "fas fa-chevron-right"
+      - title: "Small Ghost Button"
+        description: "Compact version for tight spaces"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--ghost dg-btn--sm"
+          children:
+            - "Close"
+      - title: "Small Ghost Link"
+        description: "Compact link styled as ghost button"
+        ast:
+          tag: a
+          props:
+            href: "#"
+            class: "dg-btn dg-btn--ghost dg-btn--sm"
+          children:
+            - "Skip"
+
+  btn-danger-ghost:
+    metadata:
+      title: "Danger Ghost Button"
+      description: "Destructive action button with ghost styling"
+      category: "application-ui"
+      section: "Elements"
+      subsection: "Buttons"
+      tags: [button, danger, ghost, destructive, delete]
+    examples:
+      - title: "Danger Ghost Button"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--danger-ghost"
+          children:
+            - "Delete"
+      - title: "Danger Ghost Button as Link"
+        ast:
+          tag: a
+          props:
+            href: "#"
+            class: "dg-btn dg-btn--danger-ghost"
+          children:
+            - "Remove Account"
+      - title: "Danger Ghost Button with Icon"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--danger-ghost"
+          children:
+            - tag: i
+              props:
+                class: "fas fa-trash"
+            - "Delete Recording"
+      - title: "Small Danger Ghost Button"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--danger-ghost dg-btn--sm"
+          children:
+            - "Remove"
+      - title: "Small Danger Ghost Link"
+        ast:
+          tag: a
+          props:
+            href: "#"
+            class: "dg-btn dg-btn--danger-ghost dg-btn--sm"
+          children:
+            - "Discard"
+
+  btn-icon:
+    metadata:
+      title: "Icon Button"
+      description: "Icon-only button for compact actions"
+      category: "application-ui"
+      section: "Elements"
+      subsection: "Buttons"
+      tags: [button, icon, compact]
+    examples:
+      - title: "Icon Button"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--primary dg-btn--icon-only"
+          children:
+            - tag: i
+              props:
+                class: "fas fa-microphone"
+      - title: "Small Icon Button"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--ghost dg-btn--icon-only dg-btn--sm"
+          children:
+            - tag: i
+              props:
+                class: "fas fa-times"
+
+  btn-small:
+    metadata:
+      title: "Small Button"
+      description: "Compact button for tight spaces"
+      category: "application-ui"
+      section: "Elements"
+      subsection: "Buttons"
+      tags: [button, small, compact]
+    examples:
+      - title: "Small Primary Button"
+        description: "Compact primary button for tight spaces"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--primary dg-btn--sm"
+          children:
+            - "Save"
+      - title: "Small Primary Link"
+        description: "Compact link styled as primary button"
+        ast:
+          tag: a
+          props:
+            href: "#"
+            class: "dg-btn dg-btn--primary dg-btn--sm"
+          children:
+            - "Edit"
+      - title: "Small Secondary Button"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--secondary dg-btn--sm"
+          children:
+            - "Cancel"
+      - title: "Small Secondary Link"
+        ast:
+          tag: a
+          props:
+            href: "#"
+            class: "dg-btn dg-btn--secondary dg-btn--sm"
+          children:
+            - "View"
+      - title: "Small Ghost Button"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--ghost dg-btn--sm"
+          children:
+            - "Close"
+      - title: "Small Ghost Link"
+        ast:
+          tag: a
+          props:
+            href: "#"
+            class: "dg-btn dg-btn--ghost dg-btn--sm"
+          children:
+            - "Skip"
+
+  btn-collapse:
+    metadata:
+      title: "Collapse Button"
+      description: "Responsive button that expands full-width on mobile"
+      category: "application-ui"
+      section: "Elements"
+      subsection: "Buttons"
+      tags: [button, responsive, mobile]
+    examples:
+      - title: "Collapse Primary Button"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--primary dg-btn--collapse"
+          children:
+            - "Full Width on Mobile"
+      - title: "Collapse Ghost Button"
+        ast:
+          tag: button
+          props:
+            type: button
+            class: "dg-btn dg-btn--ghost dg-btn--collapse"
+          children:
+            - "Responsive Ghost"
+
+  # ---------------------------------------------------------------------------
+  # BUTTON GROUPS
+  # ---------------------------------------------------------------------------
+  action-group:
+    metadata:
+      title: "Button Group"
+      description: "Horizontal group of buttons with consistent spacing"
+      category: "application-ui"
+      section: "Elements"
+      subsection: "Button Groups"
+      tags: [button, group, actions]
+    css:
+      ".dg-action-group":
+        apply: "flex flex-wrap justify-center gap-4"
+    media:
+      "(max-width: 640px)":
+        ".dg-action-group":
+          apply: "flex-col items-stretch"
+        ".dg-action-group .dg-btn":
+          apply: "w-full"
+    examples:
+      - title: "Button Group"
+        ast:
+          tag: div
+          props:
+            class: "dg-action-group"
+          children:
+            - tag: button
+              props:
+                type: button
+                class: "dg-btn dg-btn--primary"
+              children:
+                - "Primary"
+            - tag: button
+              props:
+                type: button
+                class: "dg-btn dg-btn--secondary"
+              children:
+                - "Secondary"
+            - tag: button
+              props:
+                type: button
+                class: "dg-btn dg-btn--ghost"
+              children:
+                - "Ghost"
+      - title: "Multiple Actions"
+        ast:
+          tag: div
+          props:
+            class: "dg-action-group"
+          children:
+            - tag: button
+              props:
+                type: button
+                class: "dg-btn dg-btn--primary"
+              children:
+                - "Save Changes"
+            - tag: button
+              props:
+                type: button
+                class: "dg-btn dg-btn--ghost"
+              children:
+                - "Cancel"
+      - title: "Action Group with Icons"
+        ast:
+          tag: div
+          props:
+            class: "dg-action-group"
+          children:
+            - tag: button
+              props:
+                type: button
+                class: "dg-btn dg-btn--primary"
+              children:
+                - tag: i
+                  props:
+                    class: "fas fa-play"
+                - "Start"
+            - tag: button
+              props:
+                type: button
+                class: "dg-btn dg-btn--danger-ghost"
+              children:
+                - tag: i
+                  props:
+                    class: "fas fa-stop"
+                - "Stop"
+
+  # ---------------------------------------------------------------------------
+  # LAYOUT - SECTIONS
+  # ---------------------------------------------------------------------------
+  section:
+    metadata:
+      title: "Section"
+      description: "Reusable content section with responsive padding"
+      category: "application-ui"
+      section: "Layout"
+      subsection: "Containers"
+      tags: [section, layout, container]
+    css:
+      ".dg-section":
+        apply: "w-full"
+        properties:
+          padding: "0.75rem"
+          margin-bottom: "1rem"
+    media:
+      "(min-width: 640px)":
+        ".dg-section":
+          properties:
+            padding: "1.25rem 1rem"
+            margin-bottom: "1.5rem"
+      "(min-width: 1024px)":
+        ".dg-section":
+          properties:
+            padding: "2rem 1.5rem"
+            margin-bottom: "2rem"
+    variants:
+      compact:
+        css:
+          ".dg-section--compact":
+            properties:
+              padding: "0.5rem"
+              margin-bottom: "0.5rem"
+        media:
+          "(min-width: 640px)":
+            ".dg-section--compact":
+              properties:
+                padding: "0.75rem"
+                margin-bottom: "0.75rem"
+      spacious:
+        css:
+          ".dg-section--spacious":
+            properties:
+              padding: "1.5rem 0.75rem"
+              margin-bottom: "2rem"
+        media:
+          "(min-width: 640px)":
+            ".dg-section--spacious":
+              properties:
+                padding: "2rem 1.5rem"
+                margin-bottom: "2.5rem"
+      bordered:
+        css:
+          ".dg-section--bordered":
+            apply: "rounded-lg border border-dg-pebble bg-dg-charcoal"
+      elevated:
+        css:
+          ".dg-section--elevated":
+            apply: "rounded-lg border border-dg-pebble bg-dg-charcoal shadow-dg-md"
+      fieldset:
+        css:
+          ".dg-section--fieldset":
+            apply: "rounded-lg border border-dg-pebble relative"
+            properties:
+              padding-top: "2rem"
+          ".dg-section--fieldset .dg-section-heading":
+            apply: "absolute bg-dg-background dg-text-muted uppercase tracking-wide font-semibold text-base px-2 m-0"
+            properties:
+              top: "-0.75rem"
+              left: "1rem"
+        media:
+          "(min-width: 640px)":
+            ".dg-section--fieldset":
+              properties:
+                padding-top: "2.5rem"
+            ".dg-section--fieldset .dg-section-heading":
+              properties:
+                font-size: "1.125rem"
+    examples:
+      - title: "Section"
+        ast:
+          tag: div
+          props:
+            class: "dg-section"
+          children:
+            - tag: p
+              children:
+                - "Section content"
+
+  # ---------------------------------------------------------------------------
+  # LAYOUT - CARDS
+  # ---------------------------------------------------------------------------
+  card:
+    metadata:
+      title: "Card"
+      description: "Flexible card container with multiple variants"
+      category: "application-ui"
+      section: "Layout"
+      subsection: "Cards"
+      tags: [card, container, layout]
+    css:
+      ".dg-card":
+        apply: "w-full rounded-lg border border-dg-pebble bg-dg-charcoal flex flex-col p-3 mb-3 shadow-dg-sm transition-shadow duration-200"
+      ".dg-card:hover":
+        apply: "shadow-dg-md"
+    media:
+      "(min-width: 640px)":
+        ".dg-card":
+          apply: "p-4 mb-4"
+      "(min-width: 1024px)":
+        ".dg-card":
+          apply: "p-6"
+    variants:
+      compact:
+        css:
+          ".dg-card--compact":
+            apply: "p-2"
+        media:
+          "(min-width: 640px)":
+            ".dg-card--compact":
+              apply: "p-3"
+      spacious:
+        css:
+          ".dg-card--spacious":
+            apply: "p-4"
+        media:
+          "(min-width: 640px)":
+            ".dg-card--spacious":
+              apply: "p-6"
+          "(min-width: 1024px)":
+            ".dg-card--spacious":
+              apply: "p-8"
+      bordered:
+        css:
+          ".dg-card--bordered":
+            apply: "border-2 border-dg-slate"
+      structured:
+        css:
+          ".dg-card--structured":
+            apply: "p-0 justify-between"
+      selectable:
+        css:
+          ".dg-card--selectable":
+            apply: "cursor-pointer transition-all duration-200 border-2 border-dg-pebble"
+            properties:
+              padding: "1.25rem"
+          ".dg-card--selectable:hover":
+            apply: "border-dg-slate"
+          ".dg-card--selectable:has(input[type=\"radio\"]:checked)":
+            apply: "border-dg-primary"
+            properties:
+              background: "rgba(19, 239, 149, 0.05)"
+          ".dg-sr-only":
+            apply: "sr-only"
+          ".dg-card--selectable input[type=\"radio\"]":
+            apply: "sr-only"
+          ".dg-card--selectable__indicator":
+            apply: "hidden"
+          ".dg-card--selectable__icon":
+            apply: "dg-text-white"
+            properties:
+              margin-right: "0.5rem"
+          ".dg-card--selectable__content":
+            apply: "flex-1 flex flex-col gap-1"
+          ".dg-card--selectable .dg-item-title":
+            apply: "text-base font-semibold dg-text-white"
+            properties:
+              display: "flex"
+              align-items: "center"
+          ".dg-card--selectable .dg-prose":
+            apply: "text-sm dg-text-muted"
+        media:
+          "(max-width: 767px)":
+            ".dg-card--selectable__content":
+              apply: "flex-row items-center gap-3"
+            ".dg-card--selectable .dg-item-title":
+              properties:
+                margin-bottom: "0"
+                flex-shrink: "0"
+            ".dg-card--selectable .dg-prose":
+              properties:
+                flex: "1"
+                white-space: "nowrap"
+                overflow: "hidden"
+                text-overflow: "ellipsis"
+          "(min-width: 768px)":
+            ".dg-card--selectable .dg-item-title":
+              properties:
+                margin-bottom: "0.25rem"
+      file-upload:
+        css:
+          ".dg-card--file-upload":
+            apply: "cursor-pointer transition-all duration-200 border-2 border-dashed border-dg-pebble"
+            properties:
+              padding: "1.25rem"
+          ".dg-card--file-upload:hover":
+            apply: "border-dg-slate"
+          ".dg-card--file-upload:has(input[type=\"checkbox\"]:checked)":
+            apply: "border-dg-primary border-solid"
+            properties:
+              background: "rgba(19, 239, 149, 0.05)"
+          ".dg-card--file-upload input[type=\"file\"], .dg-card--file-upload input[type=\"checkbox\"]":
+            apply: "sr-only"
+          ".dg-card--file-upload__icon":
+            apply: "dg-text-white"
+            properties:
+              margin-right: "0.5rem"
+          ".dg-card--file-upload__content":
+            apply: "flex-1 flex flex-col gap-1"
+          ".dg-card--file-upload .dg-item-title":
+            apply: "text-base font-semibold dg-text-white"
+            properties:
+              display: "flex"
+              align-items: "center"
+          ".dg-card--file-upload .dg-prose":
+            apply: "text-sm dg-text-muted"
+        media:
+          "(max-width: 767px)":
+            ".dg-card--file-upload__content":
+              apply: "flex-row items-center gap-3"
+            ".dg-card--file-upload .dg-item-title":
+              properties:
+                margin-bottom: "0"
+                flex-shrink: "0"
+            ".dg-card--file-upload .dg-prose":
+              properties:
+                flex: "1"
+                white-space: "nowrap"
+                overflow: "hidden"
+                text-overflow: "ellipsis"
+          "(min-width: 768px)":
+            ".dg-card--file-upload .dg-item-title":
+              properties:
+                margin-bottom: "0.25rem"
+    elements:
+      image:
+        css:
+          ".dg-card__image":
+            apply: "w-full overflow-hidden flex-shrink-0"
+            properties:
+              border-radius: "0.5rem 0.5rem 0 0"
+          ".dg-card__image img":
+            apply: "w-full h-full object-cover block"
+          ".dg-card__image--small":
+            apply: "h-[7.5rem]"
+          ".dg-card__image--medium":
+            apply: "h-[10rem]"
+          ".dg-card__image--large":
+            apply: "h-[15rem]"
+          ".dg-card__image--aspect-4-3":
+            apply: "aspect-[4/3] h-auto"
+      icon:
+        css:
+          ".dg-card__icon":
+            apply: "flex items-center p-3 pt-6"
+          ".dg-card__icon i, .dg-card__icon svg":
+            apply: "text-5xl dg-text-primary"
+          ".dg-card__icon--left":
+            apply: "justify-start"
+          ".dg-card__icon--center":
+            apply: "justify-center"
+          ".dg-card__icon--right":
+            apply: "justify-end"
+        media:
+          "(min-width: 640px)":
+            ".dg-card__icon":
+              apply: "p-4 pt-8"
+          "(min-width: 1024px)":
+            ".dg-card__icon":
+              apply: "px-6 pb-6 pt-10"
+      header:
+        css:
+          ".dg-card__header":
+            apply: "flex flex-col gap-2 p-3"
+        media:
+          "(min-width: 640px)":
+            ".dg-card__header":
+              apply: "p-4"
+          "(min-width: 1024px)":
+            ".dg-card__header":
+              apply: "px-6 pt-6 pb-0"
+      body:
+        css:
+          ".dg-card__body":
+            apply: "flex flex-col gap-3 p-3 flex-1"
+        media:
+          "(min-width: 640px)":
+            ".dg-card__body":
+              apply: "p-4"
+          "(min-width: 1024px)":
+            ".dg-card__body":
+              apply: "px-6 pb-6 pt-0"
+      footer:
+        css:
+          ".dg-card__footer":
+            apply: "flex items-center gap-3 p-3 border-t border-transparent mt-auto"
+          ".dg-card__footer--bordered":
+            apply: "border-t-dg-pebble"
+        media:
+          "(min-width: 640px)":
+            ".dg-card__footer":
+              apply: "p-4"
+          "(min-width: 1024px)":
+            ".dg-card__footer":
+              apply: "p-6"
+    examples:
+      - title: "Default Card"
+        ast:
+          tag: div
+          props:
+            class: "dg-card"
+          children:
+            - tag: h3
+              props:
+                class: "dg-card-heading"
+              children:
+                - "Card Title"
+            - tag: p
+              children:
+                - "Card content goes here."
+      - title: "Compact Card"
+        ast:
+          tag: div
+          props:
+            class: "dg-card dg-card--compact"
+          children:
+            - tag: h3
+              props:
+                class: "dg-card-heading"
+              children:
+                - "Compact Card"
+            - tag: p
+              children:
+                - "Card content goes here."
+      - title: "Spacious Card"
+        ast:
+          tag: div
+          props:
+            class: "dg-card dg-card--spacious"
+          children:
+            - tag: h3
+              props:
+                class: "dg-card-heading"
+              children:
+                - "Spacious Card"
+            - tag: p
+              children:
+                - "Card content goes here."
+      - title: "Card with Image and Footer"
+        description: "Structured card with image, header, body, and footer"
+        ast:
+          tag: div
+          props:
+            class: "dg-card dg-card--structured"
+            style: "max-width: 400px;"
+          children:
+            - tag: div
+              props:
+                class: "dg-card__image dg-card__image--medium"
+              children:
+                - tag: img
+                  props:
+                    src: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800&h=400&fit=crop"
+                    alt: "Technology workspace"
+            - tag: div
+              props:
+                class: "dg-card__header"
+              children:
+                - tag: h3
+                  props:
+                    class: "dg-card-heading"
+                  children:
+                    - "Build with APIs"
+            - tag: div
+              props:
+                class: "dg-card__body"
+              children:
+                - tag: p
+                  props:
+                    class: "dg-prose"
+                  children:
+                    - "Voice AI Infrastructure for Builders. For developers and product teams ready to move fast with flexible APIs."
+            - tag: div
+              props:
+                class: "dg-card__footer"
+              children:
+                - tag: button
+                  props:
+                    class: "dg-btn dg-btn--primary"
+                  children:
+                    - "Start Building"
+      - title: "Card with Icon (Left Aligned)"
+        description: "Card with Font Awesome icon, left-aligned (default)"
+        ast:
+          tag: div
+          props:
+            class: "dg-card dg-card--structured"
+            style: "max-width: 400px;"
+          children:
+            - tag: div
+              props:
+                class: "dg-card__icon dg-card__icon--left"
+              children:
+                - tag: i
+                  props:
+                    class: "fas fa-rocket"
+            - tag: div
+              props:
+                class: "dg-card__header"
+              children:
+                - tag: h3
+                  props:
+                    class: "dg-card-heading"
+                  children:
+                    - "Fast Integration"
+            - tag: div
+              props:
+                class: "dg-card__body"
+              children:
+                - tag: p
+                  props:
+                    class: "dg-prose"
+                  children:
+                    - "Get started quickly with our streamlined API and comprehensive documentation."
+            - tag: div
+              props:
+                class: "dg-card__footer"
+              children:
+                - tag: button
+                  props:
+                    class: "dg-btn dg-btn--primary"
+                  children:
+                    - "Get Started"
+
+  # ---------------------------------------------------------------------------
+  # LAYOUT - CODE BLOCK
+  # ---------------------------------------------------------------------------
+  code-block:
+    metadata:
+      title: "Code Block"
+      description: "Preformatted code/text display with scrolling"
+      category: "application-ui"
+      section: "Page Examples"
+      subsection: "Detail Screens"
+      tags: [code, pre, monospace]
+    css:
+      ".dg-code-block":
+        apply: "w-full rounded-lg border border-dg-pebble bg-dg-charcoal overflow-auto p-2 my-3 max-h-[12.5rem]"
+        properties:
+          -webkit-overflow-scrolling: "touch"
+      ".dg-code-block pre":
+        apply: "m-0 p-0 font-dg-mono text-xs dg-text-fog whitespace-pre-wrap break-words"
+        properties:
+          line-height: "1.3"
+    media:
+      "(min-width: 640px)":
+        ".dg-code-block":
+          apply: "p-3 my-4 max-h-[15.625rem]"
+        ".dg-code-block pre":
+          apply: "text-sm"
+      "(min-width: 1024px)":
+        ".dg-code-block":
+          apply: "max-h-[18.75rem]"
+    variants:
+      compact:
+        css:
+          ".dg-code-block--compact":
+            apply: "max-h-[7.5rem] p-1"
+        media:
+          "(min-width: 640px)":
+            ".dg-code-block--compact":
+              apply: "max-h-[9.375rem] p-2"
+      tall:
+        css:
+          ".dg-code-block--tall":
+            apply: "max-h-[18.75rem]"
+        media:
+          "(min-width: 640px)":
+            ".dg-code-block--tall":
+              apply: "max-h-[25rem]"
+          "(min-width: 1024px)":
+            ".dg-code-block--tall":
+              apply: "max-h-[31.25rem]"
+      no-scroll:
+        css:
+          ".dg-code-block--no-scroll":
+            apply: "overflow-visible max-h-none"
+    examples:
+      - title: "Code Block"
+        ast:
+          tag: div
+          props:
+            class: "dg-code-block"
+          children:
+            - tag: pre
+              children:
+                - "const dg = new Deepgram(apiKey);\nconst response = await dg.transcription.preRecorded(\n  { url: audioUrl },\n  { model: 'nova-3' }\n);"
+
+  # ---------------------------------------------------------------------------
+  # TYPOGRAPHY - HERO
+  # ---------------------------------------------------------------------------
+  hero:
+    metadata:
+      title: "Hero Section"
+      description: "Large page header with title, subtitle, and call-to-action buttons"
+      category: "application-ui"
+      section: "Headings"
+      subsection: "Page Headings"
+      tags: [hero, header, heading, cta]
+    css:
+      ".dg-hero-title":
+        apply: "text-center font-bold font-dg-noto text-5xl leading-tight mb-6 bg-gradient-to-r from-dg-secondary to-dg-primary bg-clip-text"
+        properties:
+          -webkit-text-fill-color: "transparent"
+          letter-spacing: "-0.02em"
+          font-feature-settings: "\"liga\" 0, \"dlig\" 0, \"hlig\" 0, \"ordn\" 0, \"ss09\", \"kern\""
+          font-kerning: "normal"
+      ".dg-hero":
+        apply: "w-full text-center py-16 px-4"
+      ".dg-hero__content":
+        apply: "flex flex-col gap-6 mx-auto max-w-[53.125rem]"
+      ".dg-hero__announcement":
+        apply: "inline-flex items-center justify-center rounded-full border bg-dg-translucent border-dg-slate/30 py-2 px-5 mx-auto mb-2 no-underline cursor-pointer w-fit gap-3 transition-all duration-200"
+      ".dg-hero__announcement:hover":
+        apply: "border-dg-primary -translate-y-0.5"
+        properties:
+          background-color: "rgba(19, 239, 149, 0.1)"
+          box-shadow: "0 0.25rem 0.75rem rgba(19, 239, 149, 0.15)"
+      ".dg-hero__announcement-text":
+        apply: "dg-text-white text-sm font-normal whitespace-nowrap"
+      ".dg-hero__announcement-cta":
+        apply: "inline-flex items-center dg-text-secondary text-sm font-semibold gap-2 transition-[gap] duration-200"
+      ".dg-hero__announcement:hover .dg-hero__announcement-cta":
+        apply: "gap-3"
+      ".dg-hero__body":
+        apply: "text-center dg-text-fog text-lg leading-7 font-normal mx-auto max-w-[53.125rem]"
+      ".dg-hero__actions":
+        apply: "flex items-center justify-center flex-wrap gap-4 mt-2"
+    media:
+      "(max-width: 1024px)":
+        ".dg-hero-title":
+          apply: "text-4xl"
+      "(max-width: 768px)":
+        ".dg-hero-title":
+          apply: "text-3xl"
+        ".dg-hero":
+          apply: "py-12 px-4"
+        ".dg-hero__content":
+          apply: "gap-5"
+        ".dg-hero__body":
+          apply: "text-base leading-relaxed"
+      "(max-width: 640px)":
+        ".dg-hero-title":
+          apply: "text-2xl"
+        ".dg-hero":
+          apply: "py-8 px-4"
+        ".dg-hero__announcement-text":
+          apply: "text-xs whitespace-normal"
+        ".dg-hero__announcement-cta":
+          apply: "text-xs"
+        ".dg-hero__body":
+          apply: "text-[0.9375rem] leading-normal"
+        ".dg-hero__actions":
+          apply: "flex-col w-full"
+        ".dg-hero__actions > *":
+          apply: "w-full"
+    examples:
+      - title: "Full Hero with Announcement"
+        ast:
+          tag: section
+          props:
+            class: "dg-hero"
+          children:
+            - tag: div
+              props:
+                class: "dg-hero__content"
+              children:
+                - tag: a
+                  props:
+                    href: "#"
+                    class: "dg-hero__announcement"
+                  children:
+                    - tag: span
+                      props:
+                        class: "dg-hero__announcement-text"
+                      children:
+                        - "New: Meet Flux - speech recognition for real-time voice agents"
+                    - tag: span
+                      props:
+                        class: "dg-hero__announcement-cta"
+                      children:
+                        - "Try It Now →"
+                - tag: h1
+                  props:
+                    class: "dg-hero-title"
+                  children:
+                    - "Voice AI APIs that just work"
+                - tag: p
+                  props:
+                    class: "dg-hero__body"
+                  children:
+                    - "Build with the most accurate, realistic, and cost-effective APIs for speech-to-text, text-to-speech, and voice agents."
+                - tag: div
+                  props:
+                    class: "dg-hero__actions"
+                  children:
+                    - tag: button
+                      props:
+                        class: "dg-btn dg-btn--primary"
+                        type: button
+                      children:
+                        - "Sign Up Free"
+                    - tag: button
+                      props:
+                        class: "dg-btn dg-btn--secondary"
+                        type: button
+                      children:
+                        - "Playground"
+      - title: "Simple Hero"
+        ast:
+          tag: section
+          props:
+            class: "dg-hero"
+          children:
+            - tag: div
+              props:
+                class: "dg-hero__content"
+              children:
+                - tag: h1
+                  props:
+                    class: "dg-hero-title"
+                  children:
+                    - "Welcome to Our Platform"
+                - tag: p
+                  props:
+                    class: "dg-hero__body"
+                  children:
+                    - "Build amazing experiences with our component library"
+      - title: "Hero with Single CTA"
+        ast:
+          tag: section
+          props:
+            class: "dg-hero"
+          children:
+            - tag: div
+              props:
+                class: "dg-hero__content"
+              children:
+                - tag: h1
+                  props:
+                    class: "dg-hero-title"
+                  children:
+                    - "Get Started Today"
+                - tag: p
+                  props:
+                    class: "dg-hero__body"
+                  children:
+                    - "Join thousands of developers building with Deepgram"
+                - tag: div
+                  props:
+                    class: "dg-hero__actions"
+                  children:
+                    - tag: button
+                      props:
+                        class: "dg-btn dg-btn--primary"
+                        type: button
+                      children:
+                        - "Start Building"
+
+  # ---------------------------------------------------------------------------
+  # TYPOGRAPHY - HEADINGS
+  # ---------------------------------------------------------------------------
+  section-heading:
+    metadata:
+      title: "Section Header"
+      description: "Consistent section heading with multiple levels"
+      category: "application-ui"
+      section: "Headings"
+      subsection: "Section Headings"
+      tags: [heading, section, title]
+    css:
+      ".dg-section-heading":
+        apply: "font-semibold font-dg-noto text-2xl dg-text-white mb-6 flex flex-wrap items-baseline gap-2"
+      ".dg-section-heading small":
+        apply: "font-normal text-base dg-text-muted"
+    media:
+      "(max-width: 640px)":
+        ".dg-section-heading":
+          apply: "text-xl mb-3 gap-1.5"
+        ".dg-section-heading small":
+          apply: "text-sm"
+    examples:
+      - title: "Section Heading"
+        ast:
+          tag: h2
+          props:
+            class: "dg-section-heading"
+          children:
+            - "Section Title"
+      - title: "Section Heading with Context"
+        ast:
+          tag: h2
+          props:
+            class: "dg-section-heading"
+          children:
+            - "Transcription Results"
+            - tag: small
+              children:
+                - "3 files processed"
+
+  page-heading:
+    metadata:
+      title: "Page Heading"
+      description: "Simple page heading with title and optional description"
+      category: "application-ui"
+      section: "Headings"
+      subsection: "Page Headings"
+      tags: [heading, page, title, description]
+    css:
+      ".dg-page-heading":
+        apply: "mb-8"
+      ".dg-page-heading__title":
+        apply: "font-semibold font-dg-noto text-4xl dg-text-white mb-2 leading-tight"
+      ".dg-page-heading__description":
+        apply: "dg-text-muted text-lg leading-relaxed m-0 max-w-[65ch]"
+    media:
+      "(max-width: 768px)":
+        ".dg-page-heading__title":
+          apply: "text-3xl"
+        ".dg-page-heading__description":
+          apply: "text-base"
+      "(max-width: 640px)":
+        ".dg-page-heading":
+          apply: "mb-6"
+        ".dg-page-heading__title":
+          apply: "text-2xl"
+        ".dg-page-heading__description":
+          apply: "text-[0.9375rem]"
+    examples:
+      - title: "Simple Page Heading"
+        ast:
+          tag: div
+          props:
+            class: "dg-page-heading"
+          children:
+            - tag: h1
+              props:
+                class: "dg-page-heading__title"
+              children:
+                - "Dashboard"
+      - title: "Page Heading with Description"
+        ast:
+          tag: div
+          props:
+            class: "dg-page-heading"
+          children:
+            - tag: h1
+              props:
+                class: "dg-page-heading__title"
+              children:
+                - "Transcription"
+            - tag: p
+              props:
+                class: "dg-page-heading__description"
+              children:
+                - "Upload audio files or record live to get accurate transcriptions powered by Deepgram."
+
+  card-heading:
+    metadata:
+      title: "Card Heading"
+      description: "Heading for card components"
+      category: "application-ui"
+      section: "Headings"
+      subsection: "Section Headings"
+      tags: [heading, card, title]
+    css:
+      ".dg-card-heading":
+        apply: "font-medium font-dg-noto text-xl dg-text-white mb-3 flex flex-wrap items-baseline gap-1.5"
+      ".dg-card-heading small":
+        apply: "font-normal text-sm dg-text-muted"
+    examples:
+      - title: "Card Heading"
+        ast:
+          tag: h3
+          props:
+            class: "dg-card-heading"
+          children:
+            - "Card Title"
+
+  item-title:
+    metadata:
+      title: "Item Title"
+      description: "Title for list items and small components"
+      category: "application-ui"
+      section: "Headings"
+      subsection: "Section Headings"
+      tags: [heading, item, title]
+    css:
+      ".dg-item-title":
+        apply: "font-medium font-dg-noto text-base dg-text-white mb-1 flex flex-wrap items-baseline gap-1"
+      ".dg-item-title small":
+        apply: "font-normal text-xs dg-text-muted"
+    examples:
+      - title: "Item Title"
+        ast:
+          tag: h4
+          props:
+            class: "dg-item-title"
+          children:
+            - "Item Name"
+
+  # ---------------------------------------------------------------------------
+  # TYPOGRAPHY - PROSE
+  # ---------------------------------------------------------------------------
+  prose:
+    metadata:
+      title: "Prose"
+      description: "Body text component with responsive sizing"
+      category: "application-ui"
+      section: "Headings"
+      subsection: "Section Headings"
+      tags: [text, prose, body, paragraph]
+    css:
+      ".dg-prose":
+        apply: "w-full dg-text-fog text-sm leading-snug mb-3"
+      ".dg-prose.dg-prose--block":
+        apply: "max-w-none w-full"
+    media:
+      "(min-width: 640px)":
+        ".dg-prose":
+          apply: "text-base mb-4 max-w-[65ch]"
+    variants:
+      large:
+        css:
+          ".dg-prose--large":
+            apply: "text-base"
+        media:
+          "(min-width: 640px)":
+            ".dg-prose--large":
+              apply: "text-lg"
+          "(min-width: 1024px)":
+            ".dg-prose--large":
+              apply: "text-xl"
+      small:
+        css:
+          ".dg-prose--small":
+            apply: "text-xs dg-text-muted"
+        media:
+          "(min-width: 640px)":
+            ".dg-prose--small":
+              apply: "text-sm"
+    examples:
+      - title: "Prose"
+        ast:
+          tag: p
+          props:
+            class: "dg-prose"
+          children:
+            - "Body text content goes here."
+
+  # ---------------------------------------------------------------------------
+  # FORMS
+  # ---------------------------------------------------------------------------
+  input:
+    metadata:
+      title: "Input Group"
+      description: "Text input fields with labels, placeholders, and validation states"
+      category: "application-ui"
+      section: "Forms"
+      subsection: "Input Groups"
+      tags: [input, text, form, field, label]
+    css:
+      ".dg-input":
+        apply: "w-full px-4 py-3 rounded border border-dg-pebble bg-dg-charcoal dg-text-white font-dg-sans text-sm outline-none transition-all duration-300 shadow-dg-sm"
+        properties:
+          height: "2.75rem"
+      ".dg-input::placeholder":
+        apply: "dg-text-muted"
+      ".dg-input:focus":
+        apply: "border-dg-primary"
+        properties:
+          box-shadow: "0 0 0 0.0625rem theme(colors.dg-primary)"
+      ".dg-input:disabled":
+        apply: "opacity-50 cursor-not-allowed"
+    variants:
+      inline:
+        css:
+          ".dg-input--inline":
+            apply: "min-w-[12.5rem]"
+      full:
+        css:
+          ".dg-input--full":
+            apply: "max-w-none"
+      select:
+        css:
+          ".dg-input[type=\"select\"], select.dg-input":
+            apply: "appearance-none"
+            properties:
+              background-image: "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='rgb(255,255,255)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\")"
+              background-position: "right 0.75rem center"
+              background-repeat: "no-repeat"
+              background-size: "1.5em 1.5em"
+              padding-right: "2.5rem"
+    examples:
+      - title: "Basic Text Input"
+        ast:
+          tag: div
+          props:
+            class: "dg-form-field"
+          children:
+            - tag: label
+              props:
+                class: "dg-form-label"
+              children:
+                - "Email Address"
+            - tag: input
+              props:
+                type: text
+                class: "dg-input"
+                placeholder: "you@example.com"
+      - title: "Input with Helper Text"
+        ast:
+          tag: div
+          props:
+            class: "dg-form-field"
+          children:
+            - tag: label
+              props:
+                class: "dg-form-label"
+              children:
+                - "API Key"
+            - tag: input
+              props:
+                type: text
+                class: "dg-input"
+                placeholder: "Enter your Deepgram API key"
+            - tag: span
+              props:
+                class: "dg-form-helper"
+              children:
+                - "Find your API key in the Deepgram Console"
+      - title: "Input with Error"
+        ast:
+          tag: div
+          props:
+            class: "dg-form-field dg-form-field--error"
+          children:
+            - tag: label
+              props:
+                class: "dg-form-label"
+              children:
+                - "Email"
+            - tag: input
+              props:
+                type: email
+                class: "dg-input"
+                value: "invalid-email"
+            - tag: span
+              props:
+                class: "dg-form-helper"
+              children:
+                - "Please enter a valid email address"
+
+  textarea:
+    metadata:
+      title: "Textarea"
+      description: "Multi-line text input"
+      category: "application-ui"
+      section: "Forms"
+      subsection: "Input Groups"
+      tags: [textarea, input, form]
+    css:
+      ".dg-textarea":
+        apply: "dg-input"
+        properties:
+          min-height: "6.25rem"
+          resize: "vertical"
+          height: "auto"
+    examples:
+      - title: "Textarea"
+        ast:
+          tag: div
+          props:
+            class: "dg-form-field"
+          children:
+            - tag: label
+              props:
+                class: "dg-form-label"
+              children:
+                - "Message"
+            - tag: textarea
+              props:
+                class: "dg-textarea"
+                placeholder: "Enter your message..."
+
+  checkbox:
+    metadata:
+      title: "Checkbox"
+      description: "Checkbox inputs for multi-select options"
+      category: "application-ui"
+      section: "Forms"
+      subsection: "Checkboxes"
+      tags: [checkbox, input, form, select]
+    css:
+      ".dg-checkbox":
+        apply: "appearance-none w-5 h-5 rounded border border-dg-pebble bg-dg-charcoal cursor-pointer transition-all duration-200 flex-shrink-0"
+        properties:
+          position: "relative"
+      ".dg-checkbox:checked":
+        apply: "bg-dg-primary border-dg-primary"
+      ".dg-checkbox:checked::after":
+        properties:
+          content: "\"\""
+          position: "absolute"
+          left: "0.375rem"
+          top: "0.125rem"
+          width: "0.3125rem"
+          height: "0.625rem"
+          border: "solid black"
+          border-width: "0 0.125rem 0.125rem 0"
+          transform: "rotate(45deg)"
+      ".dg-checkbox:focus":
+        apply: "outline-none"
+        properties:
+          box-shadow: "0 0 0 0.125rem theme(colors.dg-primary/50)"
+      ".dg-checkbox-label":
+        apply: "flex items-start gap-2 cursor-pointer text-sm dg-text-fog"
+      ".dg-checkbox-label:hover .dg-checkbox":
+        apply: "border-dg-slate"
+      ".dg-checkbox-description":
+        apply: "flex flex-col gap-2"
+      ".dg-checkbox-group":
+        apply: "flex flex-col gap-3"
+    examples:
+      - title: "Basic Checkbox"
+        ast:
+          tag: label
+          props:
+            class: "dg-checkbox-label"
+          children:
+            - tag: input
+              props:
+                type: checkbox
+                class: "dg-checkbox"
+            - "Enable notifications"
+      - title: "Checkbox Group"
+        ast:
+          tag: div
+          props:
+            class: "dg-checkbox-group"
+          children:
+            - tag: label
+              props:
+                class: "dg-checkbox-label"
+              children:
+                - tag: input
+                  props:
+                    type: checkbox
+                    class: "dg-checkbox"
+                - "Speech-to-Text"
+            - tag: label
+              props:
+                class: "dg-checkbox-label"
+              children:
+                - tag: input
+                  props:
+                    type: checkbox
+                    class: "dg-checkbox"
+                - "Text-to-Speech"
+
+  form-field:
+    metadata:
+      title: "Form Section"
+      description: "Form section container with optional heading"
+      category: "application-ui"
+      section: "Forms"
+      subsection: "Form Layouts"
+      tags: [form, section, layout]
+    css:
+      ".dg-form-field":
+        apply: "flex flex-col gap-3 mb-4 w-full"
+      ".dg-form-field--full":
+        apply: "max-w-none"
+      ".dg-form-field--error .dg-input, .dg-form-field--error .dg-textarea":
+        apply: "border-dg-danger"
+      ".dg-form-field--error .dg-form-helper":
+        apply: "dg-text-danger"
+      ".dg-form-field--success .dg-input, .dg-form-field--success .dg-textarea":
+        apply: "border-dg-success"
+      ".dg-form-field--success .dg-form-helper":
+        apply: "dg-text-success"
+      ".dg-form-label":
+        apply: "text-sm font-medium dg-text-white"
+      ".dg-form-error":
+        apply: "text-xs dg-text-danger block"
+        properties:
+          margin: "0"
+      ".dg-form-helper":
+        apply: "text-xs dg-text-muted block"
+        properties:
+          margin: "0"
+    media:
+      "(min-width: 640px)":
+        ".dg-form-field":
+          apply: "max-w-md"
+    examples:
+      - title: "Simple Form Section"
+        ast:
+          tag: div
+          props:
+            class: "dg-form-field"
+          children:
+            - tag: label
+              props:
+                class: "dg-form-label"
+              children:
+                - "Name"
+            - tag: input
+              props:
+                type: text
+                class: "dg-input"
+                placeholder: "Enter your name"
+
+  drag-drop-zone:
+    metadata:
+      title: "File Upload Zone"
+      description: "Drag-and-drop file upload area with click-to-browse"
+      category: "application-ui"
+      section: "Forms"
+      subsection: "Input Groups"
+      tags: [file, upload, drag-drop, input]
+    css:
+      ".dg-drag-drop-zone":
+        apply: "relative border-2 border-dashed border-dg-pebble rounded-lg bg-dg-charcoal transition-all duration-200 flex flex-col items-center justify-center gap-3 cursor-pointer"
+        properties:
+          padding: "3rem 2rem"
+          min-height: "12.5rem"
+      ".dg-drag-drop-zone:hover":
+        apply: "border-dg-slate bg-dg-background"
+      ".dg-drag-drop-zone.drag-over":
+        apply: "border-dg-primary bg-dg-translucent"
+      ".dg-drag-drop-zone__input":
+        apply: "absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+      ".dg-drag-drop-zone__icon":
+        apply: "text-5xl dg-text-muted"
+      ".dg-drag-drop-zone:hover .dg-drag-drop-zone__icon":
+        apply: "dg-text-primary"
+      ".dg-drag-drop-zone__text":
+        apply: "text-base dg-text-white font-medium"
+      ".dg-drag-drop-zone__hint":
+        apply: "text-sm dg-text-muted"
+    examples:
+      - title: "File Upload Zone"
+        ast:
+          tag: div
+          props:
+            class: "dg-drag-drop-zone"
+          children:
+            - tag: input
+              props:
+                type: file
+                class: "dg-drag-drop-zone__input"
+            - tag: i
+              props:
+                class: "fas fa-cloud-upload-alt dg-drag-drop-zone__icon"
+            - tag: p
+              props:
+                class: "dg-drag-drop-zone__text"
+              children:
+                - "Drop files here or click to browse"
+            - tag: p
+              props:
+                class: "dg-drag-drop-zone__hint"
+              children:
+                - "Supports MP3, WAV, FLAC up to 100MB"
+
+  # ---------------------------------------------------------------------------
+  # STATUS & FEEDBACK
+  # ---------------------------------------------------------------------------
+  status:
+    metadata:
+      title: "Status Banner"
+      description: "Alert/notification banner with different status variants"
+      category: "application-ui"
+      section: "Feedback"
+      subsection: "Alerts"
+      tags: [alert, status, notification, banner]
+    css:
+      ".dg-status":
+        apply: "w-full italic dg-text-fog text-sm leading-snug py-1 my-2"
+    media:
+      "(min-width: 640px)":
+        ".dg-status":
+          apply: "text-base py-2 my-3"
+    variants:
+      info:
+        css:
+          ".dg-status--info":
+            apply: "dg-text-fog"
+      success:
+        css:
+          ".dg-status--success":
+            apply: "dg-text-success"
+      warning:
+        css:
+          ".dg-status--warning":
+            apply: "dg-text-warning"
+      error:
+        css:
+          ".dg-status--error":
+            apply: "dg-text-danger"
+      primary:
+        css:
+          ".dg-status--primary":
+            apply: "dg-text-primary"
+      secondary:
+        css:
+          ".dg-status--secondary":
+            apply: "dg-text-secondary"
+      with-icon:
+        css:
+          ".dg-status--with-icon":
+            apply: "flex items-start gap-1"
+          ".dg-status--with-icon .dg-status__icon":
+            apply: "flex-shrink-0 text-[1em] mt-[0.1em]"
+      compact:
+        css:
+          ".dg-status--compact":
+            apply: "my-1 py-0.5 text-xs"
+        media:
+          "(min-width: 640px)":
+            ".dg-status--compact":
+              apply: "text-sm"
+    examples:
+      - title: "Info Status"
+        ast:
+          tag: div
+          props:
+            class: "dg-status dg-status--info"
+          children:
+            - "Processing your request..."
+      - title: "Success Status"
+        ast:
+          tag: div
+          props:
+            class: "dg-status dg-status--success"
+          children:
+            - "Operation completed successfully!"
+      - title: "Warning Status"
+        ast:
+          tag: div
+          props:
+            class: "dg-status dg-status--warning"
+          children:
+            - "This action cannot be undone."
+      - title: "Error Status"
+        ast:
+          tag: div
+          props:
+            class: "dg-status dg-status--error"
+          children:
+            - "An error occurred. Please try again."
+
+  spinner:
+    metadata:
+      title: "Spinner"
+      description: "Loading spinner animation"
+      category: "application-ui"
+      section: "Feedback"
+      subsection: "Alerts"
+      tags: [spinner, loading, progress]
+    css:
+      ".dg-spinner":
+        apply: "rounded-full size-10 border-[3px] border-dg-pebble border-t-dg-primary mx-auto mb-3 animate-spin"
+      ".dg-processing-title":
+        apply: "font-medium font-dg-noto text-xl dg-text-white mb-1"
+    examples:
+      - title: "Spinner"
+        ast:
+          tag: div
+          props:
+            class: "dg-spinner"
+
+  modal:
+    metadata:
+      title: "Modal"
+      description: "Modal overlay with content"
+      category: "application-ui"
+      section: "Feedback"
+      subsection: "Alerts"
+      tags: [modal, overlay, dialog]
+    css:
+      ".dg-modal-overlay":
+        apply: "hidden fixed inset-0 items-center justify-center bg-black/80 z-50"
+      ".dg-modal-overlay.visible, .dg-modal-overlay--visible":
+        apply: "flex"
+      ".dg-modal-content":
+        apply: "text-center max-w-[25rem] m-3"
+    examples:
+      - title: "Modal"
+        ast:
+          tag: div
+          props:
+            class: "dg-modal-overlay dg-modal-overlay--visible"
+            style: "position: relative; min-height: 200px;"
+          children:
+            - tag: div
+              props:
+                class: "dg-modal-content"
+              children:
+                - tag: div
+                  props:
+                    class: "dg-spinner"
+                - tag: p
+                  props:
+                    class: "dg-processing-title"
+                  children:
+                    - "Processing..."
+
+  # ---------------------------------------------------------------------------
+  # LAYOUT UTILITIES
+  # ---------------------------------------------------------------------------
+  constrain-width:
+    metadata:
+      title: "Constrained Container"
+      description: "Max-width container for readable content areas"
+      category: "application-ui"
+      section: "Layout"
+      subsection: "Containers"
+      tags: [container, layout, max-width]
+    css:
+      ".dg-constrain-width":
+        apply: "w-full"
+      ".dg-center-h":
+        apply: "mx-auto"
+    media:
+      "(min-width: 640px)":
+        ".dg-constrain-width":
+          apply: "max-w-[70rem] mx-auto"
+    examples:
+      - title: "Constrained Container"
+        ast:
+          tag: div
+          props:
+            class: "dg-constrain-width"
+          children:
+            - tag: p
+              props:
+                class: "dg-prose"
+              children:
+                - "Content within a max-width container for readability."
+
+  grid-mobile-stack:
+    metadata:
+      title: "Responsive Grid"
+      description: "Grid that stacks on mobile and displays side-by-side on desktop"
+      category: "application-ui"
+      section: "Layout"
+      subsection: "Containers"
+      tags: [grid, responsive, layout]
+    css:
+      ".dg-grid-mobile-stack":
+        apply: "flex flex-col gap-4"
+      ".dg-grid-mobile-stack > *":
+        apply: "flex-1"
+    media:
+      "(min-width: 640px)":
+        ".dg-grid-mobile-stack":
+          apply: "flex-row gap-4"
+    examples:
+      - title: "Responsive Grid"
+        ast:
+          tag: div
+          props:
+            class: "dg-grid-mobile-stack"
+          children:
+            - tag: div
+              props:
+                class: "dg-card"
+              children:
+                - tag: p
+                  children:
+                    - "Column 1"
+            - tag: div
+              props:
+                class: "dg-card"
+              children:
+                - tag: p
+                  children:
+                    - "Column 2"
+
+  # ---------------------------------------------------------------------------
+  # COLUMNS (THREE-COLUMN LAYOUT)
+  # ---------------------------------------------------------------------------
+  columns:
+    metadata:
+      title: "Three-Column Layout"
+      description: "A simple responsive three-column layout that stacks on mobile"
+      category: "application-ui"
+      section: "Layout"
+      subsection: "Multi-Column Layouts"
+      tags: [layout, three-column, sidebar, responsive]
+    css:
+      ".dg-columns":
+        apply: "flex flex-col w-full"
+      ".dg-columns__wrapper":
+        apply: "flex flex-col flex-1 min-w-0"
+      ".dg-column":
+        apply: "px-4 py-6 min-w-0"
+      ".dg-column--main":
+        apply: "flex-1"
+      ".dg-column--sidebar-left": {}
+      ".dg-column--sidebar-right":
+        properties:
+          position: "relative"
+    media:
+      "(min-width: 640px)":
+        ".dg-column":
+          apply: "px-6"
+      "(min-width: 768px)":
+        ".dg-columns":
+          apply: "flex-row"
+      "(min-width: 768px) and (max-width: 1279px)":
+        ".dg-column--sidebar-right":
+          properties:
+            position: "fixed"
+            top: "65px"
+            right: "0"
+            height: "calc(100vh - 65px)"
+            width: "16rem"
+            flex-shrink: "0"
+            transition: "transform 300ms ease"
+            z-index: "20"
+            box-shadow: "-4px 0 16px rgba(0, 0, 0, 0.5)"
+        ".dg-column--sidebar-right.dg-column--sm":
+          properties:
+            width: "20rem"
+        ".dg-column--sidebar-right.dg-column--lg":
+          properties:
+            width: "24rem"
+        ".dg-column--sidebar-right.dg-column--xl":
+          properties:
+            width: "32rem"
+        ".dg-column--sidebar-right.collapsed":
+          properties:
+            transform: "translateX(calc(100% - 2rem))"
+      "(min-width: 1024px)":
+        ".dg-columns__wrapper":
+          apply: "flex-row"
+        ".dg-column--sidebar-left":
+          apply: "w-48 flex-shrink-0"
+        ".dg-column--sidebar-left.dg-column--sm":
+          apply: "w-64 flex-shrink-0"
+        ".dg-column--sidebar-left.dg-column--lg":
+          apply: "w-96 flex-shrink-0"
+        ".dg-column--sidebar-left.dg-column--xl":
+          apply: "w-128 flex-shrink-0"
+      "(min-width: 1280px)":
+        ".dg-column--sidebar-right":
+          properties:
+            width: "16rem"
+            flex-shrink: "0"
+        ".dg-column--sidebar-right.dg-column--sm":
+          properties:
+            width: "20rem"
+            flex-shrink: "0"
+        ".dg-column--sidebar-right.dg-column--lg":
+          properties:
+            width: "24rem"
+            flex-shrink: "0"
+        ".dg-column--sidebar-right.dg-column--xl":
+          properties:
+            width: "32rem"
+            flex-shrink: "0"
+    examples:
+      - title: "Three-Column Layout"
+        ast:
+          tag: div
+          props:
+            class: "dg-columns"
+            style: "min-height: 300px;"
+          children:
+            - tag: div
+              props:
+                class: "dg-columns__wrapper"
+              children:
+                - tag: aside
+                  props:
+                    class: "dg-column dg-column--sidebar-left"
+                    style: "background: rgba(255,255,255,0.03);"
+                  children:
+                    - tag: p
+                      props:
+                        class: "dg-prose"
+                      children:
+                        - "Left Sidebar"
+                - tag: main
+                  props:
+                    class: "dg-column dg-column--main"
+                  children:
+                    - tag: p
+                      props:
+                        class: "dg-prose"
+                      children:
+                        - "Main Content"
+            - tag: aside
+              props:
+                class: "dg-column dg-column--sidebar-right"
+                style: "background: rgba(255,255,255,0.03);"
+              children:
+                - tag: p
+                  props:
+                    class: "dg-prose"
+                  children:
+                    - "Right Sidebar"
+
+  # ---------------------------------------------------------------------------
+  # APPLICATION SHELLS
+  # ---------------------------------------------------------------------------
+  header:
+    metadata:
+      title: "Header"
+      description: "Application header with logo and navigation"
+      category: "application-ui"
+      section: "Application Shells"
+      subsection: "Stacked Layouts"
+      tags: [header, navigation, layout]
+    css:
+      ".dg-header":
+        apply: "w-full"
+        properties:
+          background: "#050506"
+          padding: "1rem 1.5rem"
+          border-bottom: "1px solid rgba(255, 255, 255, 0.1)"
+      ".dg-header__container":
+        apply: "flex items-center justify-between max-w-screen-2xl mx-auto"
+      ".dg-header__logo":
+        apply: "flex items-center gap-3"
+      ".dg-header__logo-image":
+        apply: "h-8 w-auto"
+      ".dg-header__logo-text":
+        apply: "font-dg-noto font-bold text-xl dg-text-white"
+      ".dg-header__nav":
+        apply: "flex items-center gap-4"
+      ".dg-header__profile-link":
+        apply: "-m-1.5 p-1.5 block"
+      ".dg-header__profile-avatar":
+        apply: "size-8 rounded-full bg-gray-800 outline -outline-offset-1 outline-white/10"
+    media:
+      "(max-width: 768px)":
+        ".dg-header":
+          properties:
+            padding: "0.75rem 1rem"
+        ".dg-header__logo-text":
+          apply: "text-lg"
+    examples:
+      - title: "Simple Header with Logo"
+        ast:
+          tag: header
+          props:
+            class: "dg-header"
+          children:
+            - tag: div
+              props:
+                class: "dg-header__container"
+              children:
+                - tag: div
+                  props:
+                    class: "dg-header__logo"
+                  children:
+                    - tag: span
+                      props:
+                        class: "dg-header__logo-text"
+                      children:
+                        - "Deepgram"
+      - title: "Header with Navigation"
+        ast:
+          tag: header
+          props:
+            class: "dg-header"
+          children:
+            - tag: div
+              props:
+                class: "dg-header__container"
+              children:
+                - tag: div
+                  props:
+                    class: "dg-header__logo"
+                  children:
+                    - tag: span
+                      props:
+                        class: "dg-header__logo-text"
+                      children:
+                        - "Deepgram"
+                - tag: nav
+                  props:
+                    class: "dg-header__nav"
+                  children:
+                    - tag: a
+                      props:
+                        href: "#"
+                        class: "dg-link"
+                      children:
+                        - "Docs"
+                    - tag: a
+                      props:
+                        href: "#"
+                        class: "dg-link"
+                      children:
+                        - "API"
+
+  footer:
+    metadata:
+      title: "Footer"
+      description: "Simple footer for page layouts"
+      category: "application-ui"
+      section: "Application Shells"
+      subsection: "Stacked Layouts"
+      tags: [footer, layout]
+    css:
+      ".dg-footer":
+        apply: "text-center border-t border-dg-pebble mt-16"
+    examples:
+      - title: "Simple Footer"
+        ast:
+          tag: footer
+          props:
+            class: "dg-footer"
+          children:
+            - tag: div
+              props:
+                class: "dg-section"
+              children:
+                - tag: p
+                  props:
+                    class: "dg-text-tagline"
+                  children:
+                    - "© 2024 Deepgram. All rights reserved."
+      - title: "Footer with Links"
+        ast:
+          tag: footer
+          props:
+            class: "dg-footer"
+          children:
+            - tag: div
+              props:
+                class: "dg-section"
+              children:
+                - tag: div
+                  props:
+                    class: "dg-social-links"
+                  children:
+                    - tag: a
+                      props:
+                        href: "#"
+                        class: "dg-social-link"
+                      children:
+                        - tag: i
+                          props:
+                            class: "fab fa-github"
+                    - tag: a
+                      props:
+                        href: "#"
+                        class: "dg-social-link"
+                      children:
+                        - tag: i
+                          props:
+                            class: "fab fa-twitter"
+                - tag: p
+                  props:
+                    class: "dg-text-tagline"
+                  children:
+                    - "© 2024 Deepgram. All rights reserved."
+
+  # ---------------------------------------------------------------------------
+  # LINKS
+  # ---------------------------------------------------------------------------
+  link:
+    metadata:
+      title: "Link"
+      description: "Primary link with hover effect"
+      category: "application-ui"
+      section: "Navigation"
+      subsection: "Navbars"
+      tags: [link, navigation]
+    css:
+      ".dg-link":
+        apply: "dg-text-primary transition-opacity duration-200"
+      ".dg-link:hover":
+        apply: "opacity-80"
+      ".dg-social-link":
+        apply: "dg-text-fog transition-colors duration-200 text-xl"
+      ".dg-social-link:hover":
+        apply: "dg-text-primary"
+    examples:
+      - title: "Link"
+        ast:
+          tag: a
+          props:
+            href: "#"
+            class: "dg-link"
+          children:
+            - "Learn more"
+
+  # ---------------------------------------------------------------------------
+  # TEXT UTILITIES
+  # ---------------------------------------------------------------------------
+  text-utilities:
+    metadata:
+      title: "Text Utilities"
+      description: "Text color and typography utility classes"
+      category: "application-ui"
+      section: "Elements"
+      subsection: "Buttons"
+      tags: [text, color, utility]
+    css:
+      ".dg-text-center":
+        apply: "text-center"
+      ".dg-text-danger":
+        apply: "text-dg-danger"
+      ".dg-text-success":
+        apply: "text-dg-success"
+      ".dg-text-warning":
+        apply: "text-dg-warning"
+      ".dg-text-primary":
+        apply: "text-dg-primary"
+      ".dg-text-secondary":
+        apply: "text-dg-secondary"
+      ".dg-text-muted":
+        apply: "text-dg-muted"
+      ".dg-text-fog":
+        apply: "text-dg-fog"
+      ".dg-text-white":
+        apply: "text-white"
+      ".dg-text-tagline":
+        apply: "text-center dg-text-fog text-sm"
+      ".dg-text-subtitle":
+        apply: "dg-text-fog text-sm"
+      ".dg-text-heading":
+        apply: "dg-text-white text-base font-medium"
+      ".dg-text-heading--with-margin":
+        apply: "dg-text-white text-base font-medium mb-1"
+      ".dg-text-legal":
+        apply: "text-xs dg-text-muted text-center"
+    examples:
+      - title: "Text Colors"
+        ast:
+          tag: div
+          props:
+            class: "dg-prose"
+          children:
+            - tag: span
+              props:
+                class: "dg-text-primary"
+              children:
+                - "Primary "
+            - tag: span
+              props:
+                class: "dg-text-secondary"
+              children:
+                - "Secondary "
+            - tag: span
+              props:
+                class: "dg-text-success"
+              children:
+                - "Success "
+            - tag: span
+              props:
+                class: "dg-text-danger"
+              children:
+                - "Danger"
+
+  # ---------------------------------------------------------------------------
+  # NEWSLETTER
+  # ---------------------------------------------------------------------------
+  newsletter:
+    metadata:
+      title: "Newsletter Signup"
+      description: "Newsletter subscription form with email input and privacy checkbox"
+      category: "application-ui"
+      section: "Forms"
+      subsection: "Form Layouts"
+      tags: [newsletter, form, email, signup, subscription]
+    css:
+      ".dg-newsletter-container":
+        apply: "flex flex-col gap-4"
+      ".dg-newsletter-container--compact":
+        apply: "flex flex-col gap-3"
+      ".dg-newsletter-form":
+        apply: "flex flex-col gap-4"
+      ".dg-newsletter-form--compact":
+        apply: "flex flex-col gap-3"
+      ".dg-newsletter-form--inline":
+        apply: "flex gap-2 w-full"
+      ".dg-newsletter-header":
+        apply: "flex flex-col gap-3 items-start"
+      ".dg-newsletter-header__content":
+        apply: "flex-1"
+      ".dg-newsletter-header__actions":
+        apply: "w-full"
+      ".dg-logo-container":
+        apply: "flex justify-center"
+      ".dg-logo":
+        apply: "h-8 w-auto"
+      ".dg-social-links":
+        apply: "flex justify-center gap-4"
+    media:
+      "(min-width: 640px)":
+        ".dg-newsletter-form--inline":
+          apply: "w-auto"
+        ".dg-newsletter-header":
+          apply: "flex-row items-center"
+        ".dg-newsletter-header__actions":
+          apply: "w-auto"
+    examples:
+      - title: "Simple Newsletter"
+        ast:
+          tag: div
+          props:
+            class: "dg-newsletter-container"
+          children:
+            - tag: h3
+              props:
+                class: "dg-card-heading"
+              children:
+                - "Stay Updated"
+            - tag: p
+              props:
+                class: "dg-prose"
+              children:
+                - "Get the latest news and updates from Deepgram."
+            - tag: form
+              props:
+                class: "dg-newsletter-form"
+              children:
+                - tag: input
+                  props:
+                    type: email
+                    class: "dg-input"
+                    placeholder: "Enter your email"
+                - tag: button
+                  props:
+                    type: submit
+                    class: "dg-btn dg-btn--primary"
+                  children:
+                    - "Subscribe"
+      - title: "Inline Newsletter"
+        ast:
+          tag: div
+          props:
+            class: "dg-newsletter-container"
+          children:
+            - tag: form
+              props:
+                class: "dg-newsletter-form--inline"
+              children:
+                - tag: input
+                  props:
+                    type: email
+                    class: "dg-input"
+                    placeholder: "Enter your email"
+                - tag: button
+                  props:
+                    type: submit
+                    class: "dg-btn dg-btn--primary"
+                  children:
+                    - "Subscribe"