@deepgram/styles 0.2.9 → 0.2.11

package/design-system.yaml

@@ -11,6 +11,9 @@ tokens:
     "--dg-border-width": "0.125rem"
     "--dg-primary": "#13ef95"
     "--dg-secondary": "#149afb"
+    "--dg-syntax-keyword": "#f97583"
+    "--dg-syntax-variable": "#79b8ff"
+    "--dg-syntax-function": "#b392f0"
 
   colors:
     brand:
@@ -27,6 +30,7 @@ tokens:
       almost-black: "#050506"
       default: "#0b0b0c"
       charcoal: "#1a1a1f"
+      solid: "#ffffff"
       translucent: "rgba(0, 0, 0, 0.5)"
 
     border:
@@ -39,6 +43,7 @@ tokens:
       fog: "#edede2"
       platinum: "#e1e1e5"
       muted: "#949498"
+      on-solid: "#000000"
 
     status:
       success: "#12b76a"
@@ -49,12 +54,60 @@ tokens:
       start: "#008fc1"
       end: "#00f099"
 
+    light:
+      brand:
+        primary: "#047857"
+        secondary: "#0369a1"
+      background:
+        almost-black: "#f8f9fa"
+        default: "#ffffff"
+        charcoal: "#f3f4f6"
+        solid: "#000000"
+        translucent: "rgba(255, 255, 255, 0.5)"
+      border:
+        default: "#d1d5db"
+        pebble: "#9ca3af"
+        slate: "#6b7280"
+      text:
+        default: "#111827"
+        fog: "#1f2937"
+        platinum: "#374151"
+        muted: "#6b7280"
+        on-solid: "#ffffff"
+      status:
+        success: "#15803d"
+        warning: "#a16207"
+        danger: "#b91c1c"
+      gradient:
+        start: "#0369a1"
+        end: "#059669"
+
   fonts:
     sans:
-      family: ["Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif"]
+      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"]
+      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"]
@@ -81,8 +134,41 @@ tokens:
     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"
+    wordmark:
+      path: "assets/logo/wordmark.svg"
+      alt: "Deepgram"
+    wordmark-light:
+      path: "assets/logo/wordmark-light.svg"
+      alt: "Deepgram"
+    wordmark-dark:
+      path: "assets/logo/wordmark-dark.svg"
+      alt: "Deepgram"
+    lettermark:
+      path: "assets/logo/lettermark.svg"
+      alt: "Deepgram"
+    lettermark-light:
+      path: "assets/logo/lettermark-light.svg"
+      alt: "Deepgram"
+    lettermark-dark:
+      path: "assets/logo/lettermark-dark.svg"
+      alt: "Deepgram"
+    lettermark-square:
+      path: "assets/logo/lettermark-square.svg"
+      alt: "Deepgram"
+    lettermark-square-light:
+      path: "assets/logo/lettermark-square-light.svg"
+      alt: "Deepgram"
+    lettermark-square-dark:
+      path: "assets/logo/lettermark-square-dark.svg"
+      alt: "Deepgram"
+    lettermark-circle:
+      path: "assets/logo/lettermark-circle.svg"
+      alt: "Deepgram"
+    lettermark-circle-light:
+      path: "assets/logo/lettermark-circle-light.svg"
+      alt: "Deepgram"
+    lettermark-circle-dark:
+      path: "assets/logo/lettermark-circle-dark.svg"
       alt: "Deepgram"
 
 # =============================================================================
@@ -150,13 +236,13 @@ base:
 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))"
+      backgroundImage: "linear-gradient(var(--color-dg-on-solid), var(--color-dg-on-solid)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, black), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, black), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, black), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, black))"
       backgroundOrigin: "padding-box, border-box"
       backgroundClip: "padding-box, border-box"
       backgroundRepeat: "no-repeat"
       backgroundPosition: "center"
       backgroundSize: "100% 100%"
-      backgroundColor: "rgb(0, 0, 0)"
+      backgroundColor: "var(--color-dg-on-solid)"
   ".dg-bg-reset":
     properties:
       backgroundImage: "none"
@@ -170,13 +256,471 @@ utilities:
       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"
+      boxShadow: "color-mix(in srgb, var(--color-dg-pebble) 5%, transparent) 0 0.0625rem 0.125rem"
+
+# =============================================================================
+# CATEGORIES (navigation hierarchy)
+# =============================================================================
+categories:
+  brand:
+    name: "Brand"
+    description: "Design tokens, colors, typography, spacing, and visual identity"
+    icon: "fa-swatchbook"
+    manual: true
+    sections:
+      foundations:
+        name: "Foundations"
+        icon: "fa-layer-group"
+        skip: true
+        subsections:
+          colors:
+            name: "Colors"
+            description: "Brand palette, backgrounds, borders, text, status, and gradient tokens"
+          typography:
+            name: "Typography"
+            description: "Font families and type scale"
+          spacing:
+            name: "Spacing"
+            description: "Spacing scale for margins, padding, and gaps"
+          effects:
+            name: "Effects"
+            description: "Shadows and border radius tokens"
+          logos:
+            name: "Logos"
+            description: "Logo variants and usage"
+
+  application-ui:
+    name: "Application UI"
+    description: "Forms, tables, navigation, modals, and dashboard components"
+    icon: "fa-palette"
+    sections:
+      application-shells:
+        name: "Application Shells"
+        description: "Complete application layouts and page structures"
+        icon: "fa-window-maximize"
+        skip: true
+        subsections:
+          multi-column-layouts:
+            name: "Multi-Column Layouts"
+            description: "Multi-column layouts for complex interfaces"
+          stacked-layouts:
+            name: "Stacked Layouts"
+            description: "Vertically stacked headers, content, and footers"
+          sidebar-layouts:
+            name: "Sidebar Layouts"
+            description: "Layouts with fixed or collapsible sidebars"
+      headings:
+        name: "Headings"
+        description: "Page, card, and section heading components"
+        icon: "fa-heading"
+        subsections:
+          page-headings:
+            name: "Page Headings"
+            description: "Page headings with titles and actions"
+          card-headings:
+            name: "Card Headings"
+            description: "Card header components"
+          section-headings:
+            name: "Section Headings"
+            description: "Section divider headings"
+      data-display:
+        name: "Data Display"
+        description: "Components for displaying structured information"
+        icon: "fa-chart-bar"
+        subsections:
+          description-lists:
+            name: "Description Lists"
+            description: "Key-value pair displays"
+          stats:
+            name: "Stats"
+            description: "Statistics and metrics displays"
+          calendars:
+            name: "Calendars"
+            description: "Calendar and date picker components"
+      lists:
+        name: "Lists"
+        description: "Various list layouts for displaying collections"
+        icon: "fa-list"
+        subsections:
+          stacked-lists:
+            name: "Stacked Lists"
+            description: "Vertical lists with rich content"
+          tables:
+            name: "Tables"
+            description: "Data tables with sorting and filtering"
+          grid-lists:
+            name: "Grid Lists"
+            description: "Responsive grid layouts"
+          feeds:
+            name: "Feeds"
+            description: "Activity feeds and timelines"
+      forms:
+        name: "Forms"
+        description: "Form inputs and layouts for data collection"
+        icon: "fa-pen-to-square"
+        subsections:
+          form-layouts:
+            name: "Form Layouts"
+            description: "Complete form structures"
+          input-groups:
+            name: "Input Groups"
+            description: "Text inputs with labels and validation"
+          select-menus:
+            name: "Select Menus"
+            description: "Dropdown select components"
+          sign-in-and-registration:
+            name: "Sign-in and Registration"
+            description: "Authentication form layouts"
+          textareas:
+            name: "Textareas"
+            description: "Multi-line text inputs"
+          radio-groups:
+            name: "Radio Groups"
+            description: "Single-choice selection groups"
+          checkboxes:
+            name: "Checkboxes"
+            description: "Multi-select checkbox inputs"
+          toggles:
+            name: "Toggles"
+            description: "Binary toggle switches"
+          action-panels:
+            name: "Action Panels"
+            description: "Complex action and confirmation panels"
+          # comboboxes:
+          #   name: "Comboboxes"
+          #   description: "Searchable select components"
+      feedback:
+        name: "Feedback"
+        description: "Components for user feedback and empty states"
+        icon: "fa-comment"
+        subsections:
+          alerts:
+            name: "Alerts"
+            description: "Success, error, and warning messages"
+          empty-states:
+            name: "Empty States"
+            description: "Helpful empty state displays"
+      navigation:
+        name: "Navigation"
+        description: "Navigation components for wayfinding"
+        icon: "fa-compass"
+        subsections:
+          navbars:
+            name: "Navbars"
+            description: "Application navigation bars"
+          pagination:
+            name: "Pagination"
+            description: "Page navigation components"
+          tabs:
+            name: "Tabs"
+            description: "Tabbed content interfaces"
+          vertical-navigation:
+            name: "Vertical Navigation"
+            description: "Vertical navigation menus"
+          sidebar-navigation:
+            name: "Sidebar Navigation"
+            description: "Fixed sidebar navigation"
+          breadcrumbs:
+            name: "Breadcrumbs"
+            description: "Hierarchical breadcrumb trails"
+          progress-bars:
+            name: "Progress Bars"
+            description: "Progress and loading indicators"
+          command-palettes:
+            name: "Command Palettes"
+            description: "Keyboard-driven command menus"
+      overlays:
+        name: "Overlays"
+        description: "Modal dialogs, drawers, and notifications"
+        icon: "fa-layer-group"
+        subsections:
+          modal-dialogs:
+            name: "Modal Dialogs"
+            description: "Modal dialog components for focused interactions"
+          drawers:
+            name: "Drawers"
+            description: "Slide-out drawer panels for secondary content"
+          notifications:
+            name: "Notifications"
+            description: "Toast and notification components"
+      elements:
+        name: "Elements"
+        description: "Small reusable UI elements"
+        icon: "fa-cube"
+        subsections:
+          avatars:
+            name: "Avatars"
+            description: "User avatar components"
+          badges:
+            name: "Badges"
+            description: "Label and status badges"
+          dropdowns:
+            name: "Dropdowns"
+            description: "Dropdown action menus"
+          buttons:
+            name: "Buttons"
+            description: "Button components"
+          button-groups:
+            name: "Button Groups"
+            description: "Grouped button sets"
+      layout:
+        name: "Layout"
+        description: "Layout and container components"
+        icon: "fa-table-columns"
+        subsections:
+          containers:
+            name: "Containers"
+            description: "Page width containers"
+          cards:
+            name: "Cards"
+            description: "Card container components"
+          list-containers:
+            name: "List Containers"
+            description: "List-specific containers"
+          media-objects:
+            name: "Media Objects"
+            description: "Media object patterns"
+          dividers:
+            name: "Dividers"
+            description: "Content divider components"
+      page-examples:
+        name: "Page Examples"
+        description: "Complete page templates"
+        icon: "fa-file"
+        subsections:
+          home-screens:
+            name: "Home Screens"
+            description: "Dashboard and home pages"
+          detail-screens:
+            name: "Detail Screens"
+            description: "Detail and profile pages"
+          settings-screens:
+            name: "Settings Screens"
+            description: "Settings and preferences pages"
+
+  marketing:
+    name: "Marketing"
+    description: "Hero sections, CTAs, testimonials, pricing, and landing page components"
+    icon: "fa-bullseye"
+    sections:
+      page-sections:
+        name: "Page Sections"
+        description: "Complete sections for building marketing pages"
+        icon: "fa-puzzle-piece"
+        subsections:
+          hero-sections:
+            name: "Hero Sections"
+            description: "Large, attention-grabbing landing page sections"
+          feature-sections:
+            name: "Feature Sections"
+            description: "Showcase product features with layouts and icons"
+          cta-sections:
+            name: "CTA Sections"
+            description: "Drive conversions with compelling calls-to-action"
+          bento-grids:
+            name: "Bento Grids"
+            description: "Modern asymmetric grid layouts"
+          pricing-sections:
+            name: "Pricing Sections"
+            description: "Display pricing tiers and plan comparisons"
+          header-sections:
+            name: "Header Sections"
+            description: "Page headers with titles and breadcrumbs"
+          newsletter-sections:
+            name: "Newsletter Sections"
+            description: "Email signup forms to grow your list"
+          stats:
+            name: "Stats"
+            description: "Statistics and metrics displays"
+          testimonials:
+            name: "Testimonials"
+            description: "Customer reviews and social proof"
+          blog-sections:
+            name: "Blog Sections"
+            description: "Blog post listings and featured content"
+          contact-sections:
+            name: "Contact Sections"
+            description: "Contact forms and information"
+          team-sections:
+            name: "Team Sections"
+            description: "Showcase team members with photos and bios"
+          content-sections:
+            name: "Content Sections"
+            description: "Rich content for articles and documentation"
+          logo-clouds:
+            name: "Logo Clouds"
+            description: "Display client and partner logos"
+          faqs:
+            name: "FAQs"
+            description: "Frequently asked questions sections"
+          footers:
+            name: "Footers"
+            description: "Website footers with navigation and links"
+      elements:
+        name: "Elements"
+        description: "Marketing-specific UI elements"
+        icon: "fa-cube"
+        subsections:
+          headers:
+            name: "Headers"
+            description: "Navigation headers for websites"
+          flyout-menus:
+            name: "Flyout Menus"
+            description: "Dropdown navigation menus"
+          banners:
+            name: "Banners"
+            description: "Announcement and promotion banners"
+      feedback:
+        name: "Feedback"
+        description: "Error pages and status screens"
+        icon: "fa-comment"
+        subsections:
+          404-pages:
+            name: "404 Pages"
+            description: "Creative error pages for missing content"
+      page-examples:
+        name: "Page Examples"
+        description: "Complete marketing page templates"
+        icon: "fa-file"
+        subsections:
+          landing-pages:
+            name: "Landing Pages"
+            description: "Full landing page examples"
+          pricing-pages:
+            name: "Pricing Pages"
+            description: "Complete pricing page templates"
+          about-pages:
+            name: "About Pages"
+            description: "Company story and team pages"
+
+  ecommerce:
+    name: "Ecommerce"
+    description: "Product displays, shopping carts, checkout flows, and reviews"
+    icon: "fa-shopping-cart"
+    sections:
+      components:
+        name: "Components"
+        description: "Essential ecommerce components for online stores"
+        icon: "fa-cube"
+        subsections:
+          product-overviews:
+            name: "Product Overviews"
+            description: "Product cards with images and pricing"
+          product-lists:
+            name: "Product Lists"
+            description: "Product grid and list layouts"
+          category-previews:
+            name: "Category Previews"
+            description: "Category navigation cards"
+          shopping-carts:
+            name: "Shopping Carts"
+            description: "Cart displays with line items"
+          category-filters:
+            name: "Category Filters"
+            description: "Filtering and sorting components"
+          product-quickviews:
+            name: "Product Quickviews"
+            description: "Modal product previews"
+          product-features:
+            name: "Product Features"
+            description: "Feature highlights and specs"
+          store-navigation:
+            name: "Store Navigation"
+            description: "Store navigation menus"
+          promo-sections:
+            name: "Promo Sections"
+            description: "Promotional banners and sales"
+          checkout-forms:
+            name: "Checkout Forms"
+            description: "Multi-step checkout forms"
+          reviews:
+            name: "Reviews"
+            description: "Product ratings and reviews"
+          order-summaries:
+            name: "Order Summaries"
+            description: "Order summary displays"
+          order-history:
+            name: "Order History"
+            description: "Past order listings"
+          incentives:
+            name: "Incentives"
+            description: "Promotional badges and offers"
+      page-examples:
+        name: "Page Examples"
+        description: "Complete ecommerce page templates"
+        icon: "fa-file"
+        subsections:
+          storefront-pages:
+            name: "Storefront Pages"
+            description: "Complete homepage templates"
+          product-pages:
+            name: "Product Pages"
+            description: "Product detail page templates"
+          category-pages:
+            name: "Category Pages"
+            description: "Category browse templates"
+          shopping-cart-pages:
+            name: "Shopping Cart Pages"
+            description: "Cart page templates"
+          checkout-pages:
+            name: "Checkout Pages"
+            description: "Checkout flow templates"
+          order-detail-pages:
+            name: "Order Detail Pages"
+            description: "Order confirmation templates"
+          order-history-pages:
+            name: "Order History Pages"
+            description: "Account order history templates"
+
+  custom:
+    name: "Custom"
+    description: "Deepgram-specific components that don't map to Tailwind Plus categories"
+    icon: "fa-puzzle-piece"
+    sections:
+      page-sections:
+        name: "Page Sections"
+        description: "Complete sections for building pages"
+        icon: "fa-puzzle-piece"
+        subsections:
+          hero-sections:
+            name: "Hero Sections"
+            description: "Large, attention-grabbing landing page sections"
+          footers:
+            name: "Footers"
+            description: "Simple footer components"
+          newsletter-sections:
+            name: "Newsletter Sections"
+            description: "Newsletter signup forms"
+      elements:
+        name: "Elements"
+        description: "Custom UI elements"
+        icon: "fa-cube"
+        subsections:
+          headers:
+            name: "Headers"
+            description: "Application headers with navigation"
+          text-utilities:
+            name: "Text Utilities"
+            description: "Text utility classes for consistent typography"
+      feedback:
+        name: "Feedback"
+        description: "Loading and status components"
+        icon: "fa-comment"
+        subsections:
+          loading:
+            name: "Loading"
+            description: "Loading spinners and skeleton screens"
+
+  documentation:
+    name: "Documentation"
+    description: "Getting started guide, CDN usage, npm installation, and CSS variables"
+    icon: "fa-book"
+    manual: true
 
 # =============================================================================
 # COMPONENTS
 # =============================================================================
 components:
-
   # ---------------------------------------------------------------------------
   # BUTTONS
   # ---------------------------------------------------------------------------
@@ -185,8 +729,8 @@ components:
       title: "Primary Button"
       description: "Main call-to-action button with primary brand color"
       category: "application-ui"
-      section: "Elements"
-      subsection: "Buttons"
+      section: "elements"
+      subsection: "buttons"
       tags: [button, primary, cta, action]
     css:
       ".dg-btn":
@@ -204,25 +748,25 @@ components:
       primary:
         css:
           ".dg-btn--primary":
-            apply: "border border-transparent relative text-white dg-gradient-border dg-glow-cyan-green"
+            apply: "border border-transparent relative text-dg-solid dg-gradient-border dg-glow-cyan-green"
           ".dg-btn--primary:hover":
-            apply: "border-transparent text-black dg-bg-reset bg-white dg-shadow-subtle"
+            apply: "border-transparent text-dg-on-solid dg-bg-reset bg-dg-solid dg-shadow-subtle"
       secondary:
         css:
           ".dg-btn--secondary":
-            apply: "border border-transparent bg-white text-black"
+            apply: "border border-transparent bg-dg-solid text-dg-on-solid"
           ".dg-btn--secondary:hover":
-            apply: "border border-white bg-black text-white"
+            apply: "border border-dg-solid bg-dg-on-solid text-dg-solid"
       ghost:
         css:
           ".dg-btn--ghost":
-            apply: "border border-dg-slate bg-transparent text-white"
+            apply: "border border-dg-slate bg-transparent text-dg-solid"
           ".dg-btn--ghost:hover":
-            apply: "border-transparent text-black dg-bg-reset bg-white dg-shadow-subtle"
+            apply: "border-transparent text-dg-on-solid dg-bg-reset bg-dg-solid dg-shadow-subtle"
       danger-ghost:
         css:
           ".dg-btn--danger-ghost":
-            apply: "border border-dg-danger bg-transparent text-white"
+            apply: "border border-dg-danger bg-transparent text-dg-solid"
           ".dg-btn--danger-ghost:hover":
             apply: "border-transparent bg-dg-danger text-white"
       icon-only:
@@ -328,8 +872,8 @@ components:
       title: "Secondary Button"
       description: "Secondary action button with alternative styling"
       category: "application-ui"
-      section: "Elements"
-      subsection: "Buttons"
+      section: "elements"
+      subsection: "buttons"
       tags: [button, secondary, action]
     examples:
       - title: "Secondary Button"
@@ -398,8 +942,8 @@ components:
       title: "Ghost Button"
       description: "Minimal button with transparent background and border"
       category: "application-ui"
-      section: "Elements"
-      subsection: "Buttons"
+      section: "elements"
+      subsection: "buttons"
       tags: [button, ghost, minimal, tertiary]
     examples:
       - title: "Ghost Button"
@@ -468,8 +1012,8 @@ components:
       title: "Danger Ghost Button"
       description: "Destructive action button with ghost styling"
       category: "application-ui"
-      section: "Elements"
-      subsection: "Buttons"
+      section: "elements"
+      subsection: "buttons"
       tags: [button, danger, ghost, destructive, delete]
     examples:
       - title: "Danger Ghost Button"
@@ -521,8 +1065,8 @@ components:
       title: "Icon Button"
       description: "Icon-only button for compact actions"
       category: "application-ui"
-      section: "Elements"
-      subsection: "Buttons"
+      section: "elements"
+      subsection: "buttons"
       tags: [button, icon, compact]
     examples:
       - title: "Icon Button"
@@ -551,8 +1095,8 @@ components:
       title: "Small Button"
       description: "Compact button for tight spaces"
       category: "application-ui"
-      section: "Elements"
-      subsection: "Buttons"
+      section: "elements"
+      subsection: "buttons"
       tags: [button, small, compact]
     examples:
       - title: "Small Primary Button"
@@ -611,8 +1155,8 @@ components:
       title: "Collapse Button"
       description: "Responsive button that expands full-width on mobile"
       category: "application-ui"
-      section: "Elements"
-      subsection: "Buttons"
+      section: "elements"
+      subsection: "buttons"
       tags: [button, responsive, mobile]
     examples:
       - title: "Collapse Primary Button"
@@ -640,8 +1184,8 @@ components:
       title: "Button Group"
       description: "Horizontal group of buttons with consistent spacing"
       category: "application-ui"
-      section: "Elements"
-      subsection: "Button Groups"
+      section: "elements"
+      subsection: "button-groups"
       tags: [button, group, actions]
     css:
       ".dg-action-group":
@@ -728,8 +1272,8 @@ components:
       title: "Section"
       description: "Reusable content section with responsive padding"
       category: "application-ui"
-      section: "Layout"
-      subsection: "Containers"
+      section: "layout"
+      subsection: "containers"
       tags: [section, layout, container]
     css:
       ".dg-section":
@@ -819,8 +1363,8 @@ components:
       title: "Card"
       description: "Flexible card container with multiple variants"
       category: "application-ui"
-      section: "Layout"
-      subsection: "Cards"
+      section: "layout"
+      subsection: "cards"
       tags: [card, container, layout]
     css:
       ".dg-card":
@@ -870,24 +1414,24 @@ components:
               padding: "1.25rem"
           ".dg-card--selectable:hover":
             apply: "border-dg-slate"
-          ".dg-card--selectable:has(input[type=\"radio\"]:checked)":
+          '.dg-card--selectable:has(input[type="radio"]:checked)':
             apply: "border-dg-primary"
             properties:
-              background: "rgba(19, 239, 149, 0.05)"
+              background: "color-mix(in srgb, var(--dg-primary) 5%, transparent)"
           ".dg-sr-only":
             apply: "sr-only"
-          ".dg-card--selectable input[type=\"radio\"]":
+          '.dg-card--selectable input[type="radio"]':
             apply: "sr-only"
           ".dg-card--selectable__indicator":
             apply: "hidden"
           ".dg-card--selectable__icon":
-            apply: "text-white"
+            apply: "text-dg-text"
             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 text-white"
+            apply: "text-base font-semibold text-dg-text"
             properties:
               display: "flex"
               align-items: "center"
@@ -919,20 +1463,20 @@ components:
               padding: "1.25rem"
           ".dg-card--file-upload:hover":
             apply: "border-dg-slate"
-          ".dg-card--file-upload:has(input[type=\"checkbox\"]:checked)":
+          '.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\"]":
+              background: "color-mix(in srgb, var(--dg-primary) 5%, transparent)"
+          '.dg-card--file-upload input[type="file"], .dg-card--file-upload input[type="checkbox"]':
             apply: "sr-only"
           ".dg-card--file-upload__icon":
-            apply: "text-white"
+            apply: "text-dg-text"
             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 text-white"
+            apply: "text-base font-semibold text-dg-text"
             properties:
               display: "flex"
               align-items: "center"
@@ -1156,6 +1700,47 @@ components:
                   children:
                     - "Get Started"
 
+      - title: "Link Card with Bordered Footer"
+        description: "Structured card as a link with a bordered footer showing a CTA"
+        ast:
+          tag: a
+          props:
+            class: "dg-card dg-card--structured"
+            href: "#"
+            style: "max-width: 400px; text-decoration: none;"
+          children:
+            - tag: div
+              props:
+                class: "dg-card__header"
+              children:
+                - tag: h3
+                  props:
+                    class: "dg-card-heading"
+                  children:
+                    - "Documentation"
+            - tag: div
+              props:
+                class: "dg-card__body"
+              children:
+                - tag: p
+                  props:
+                    class: "dg-prose"
+                  children:
+                    - "Getting started guides, API references, and integration tutorials."
+            - tag: div
+              props:
+                class: "dg-card__footer dg-card__footer--bordered"
+              children:
+                - tag: span
+                  props:
+                    style: "font-size: 0.875rem; font-weight: 600; color: var(--color-dg-primary);"
+                  children:
+                    - "View docs"
+                - tag: span
+                  props:
+                    style: "font-size: 1.5rem; color: var(--color-dg-primary); margin-left: auto;"
+                  text: "\u2192"
+
   # ---------------------------------------------------------------------------
   # LAYOUT - CODE BLOCK
   # ---------------------------------------------------------------------------
@@ -1164,8 +1749,8 @@ components:
       title: "Code Block"
       description: "Preformatted code/text display with scrolling"
       category: "application-ui"
-      section: "Page Examples"
-      subsection: "Detail Screens"
+      section: "page-examples"
+      subsection: "detail-screens"
       tags: [code, pre, monospace]
     css:
       ".dg-code-block":
@@ -1227,9 +1812,9 @@ components:
     metadata:
       title: "Hero Section"
       description: "Large page header with title, subtitle, and call-to-action buttons"
-      category: "application-ui"
-      section: "Headings"
-      subsection: "Page Headings"
+      category: "custom"
+      section: "page-sections"
+      subsection: "hero-sections"
       tags: [hero, header, heading, cta]
     css:
       ".dg-hero-title":
@@ -1237,7 +1822,7 @@ components:
         properties:
           -webkit-text-fill-color: "transparent"
           letter-spacing: "-0.02em"
-          font-feature-settings: "\"liga\" 0, \"dlig\" 0, \"hlig\" 0, \"ordn\" 0, \"ss09\", \"kern\""
+          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"
@@ -1248,10 +1833,10 @@ components:
       ".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)"
+          background-color: "color-mix(in srgb, var(--dg-primary) 10%, transparent)"
+          box-shadow: "0 0.25rem 0.75rem color-mix(in srgb, var(--dg-primary) 15%, transparent)"
       ".dg-hero__announcement-text":
-        apply: "text-white text-sm font-normal whitespace-nowrap"
+        apply: "text-dg-text text-sm font-normal whitespace-nowrap"
       ".dg-hero__announcement-cta":
         apply: "inline-flex items-center text-dg-secondary text-sm font-semibold gap-2 transition-[gap] duration-200"
       ".dg-hero__announcement:hover .dg-hero__announcement-cta":
@@ -1399,12 +1984,12 @@ components:
       title: "Section Header"
       description: "Consistent section heading with multiple levels"
       category: "application-ui"
-      section: "Headings"
-      subsection: "Section Headings"
+      section: "headings"
+      subsection: "section-headings"
       tags: [heading, section, title]
     css:
       ".dg-section-heading":
-        apply: "font-semibold font-dg-noto text-2xl text-white mb-6 flex flex-wrap items-baseline gap-2"
+        apply: "font-semibold font-dg-noto text-2xl text-dg-text mb-6 flex flex-wrap items-baseline gap-2"
       ".dg-section-heading small":
         apply: "font-normal text-base text-dg-muted"
     media:
@@ -1437,14 +2022,14 @@ components:
       title: "Page Heading"
       description: "Simple page heading with title and optional description"
       category: "application-ui"
-      section: "Headings"
-      subsection: "Page Headings"
+      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 text-white mb-2 leading-tight"
+        apply: "font-semibold font-dg-noto text-4xl text-dg-text mb-2 leading-tight"
       ".dg-page-heading__description":
         apply: "text-dg-muted text-lg leading-relaxed m-0 max-w-[65ch]"
     media:
@@ -1494,8 +2079,8 @@ components:
       title: "Page Headings"
       description: "Page heading with title and action buttons, responsive layout that stacks on mobile"
       category: "application-ui"
-      section: "Headings"
-      subsection: "Page Headings"
+      section: "headings"
+      subsection: "page-headings"
       tags: [heading, page, title, actions, buttons]
     css:
       ".dg-page-headings":
@@ -1503,7 +2088,7 @@ components:
       ".dg-page-headings__title-wrapper":
         apply: "min-w-0 flex-1"
       ".dg-page-headings__title":
-        apply: "text-2xl font-bold text-white sm:truncate sm:text-3xl sm:tracking-tight"
+        apply: "text-2xl font-bold text-dg-text sm:truncate sm:text-3xl sm:tracking-tight"
         properties:
           line-height: "1.75"
       ".dg-page-headings__actions":
@@ -1512,7 +2097,7 @@ components:
       title:
         css:
           ".dg-page-headings__title":
-            apply: "text-2xl font-bold text-white sm:truncate sm:text-3xl sm:tracking-tight"
+            apply: "text-2xl font-bold text-dg-text sm:truncate sm:text-3xl sm:tracking-tight"
             properties:
               line-height: "1.75"
       actions:
@@ -1600,12 +2185,12 @@ components:
       title: "Card Heading"
       description: "Heading for card components"
       category: "application-ui"
-      section: "Headings"
-      subsection: "Section Headings"
+      section: "headings"
+      subsection: "card-headings"
       tags: [heading, card, title]
     css:
       ".dg-card-heading":
-        apply: "font-medium font-dg-noto text-xl text-white mb-3 flex flex-wrap items-baseline gap-1.5"
+        apply: "font-medium font-dg-noto text-xl text-dg-text mb-3 flex flex-wrap items-baseline gap-1.5"
       ".dg-card-heading small":
         apply: "font-normal text-sm text-dg-muted"
     examples:
@@ -1622,14 +2207,14 @@ components:
       title: "Card Headings"
       description: "Card heading container with bottom border and title"
       category: "application-ui"
-      section: "Headings"
-      subsection: "Card Headings"
+      section: "headings"
+      subsection: "card-headings"
       tags: [heading, card, title, border]
     css:
       ".dg-card-headings":
         apply: "border-b border-dg-border px-4 py-5 sm:px-6"
       ".dg-card-headings__title":
-        apply: "text-base font-semibold text-white"
+        apply: "text-base font-semibold text-dg-text"
     examples:
       - title: "Simple Card Heading"
         description: "Basic card heading with bottom border"
@@ -1649,12 +2234,12 @@ components:
       title: "Item Title"
       description: "Title for list items and small components"
       category: "application-ui"
-      section: "Headings"
-      subsection: "Section Headings"
+      section: "headings"
+      subsection: "section-headings"
       tags: [heading, item, title]
     css:
       ".dg-item-title":
-        apply: "font-medium font-dg-noto text-base text-white mb-1 flex flex-wrap items-baseline gap-1"
+        apply: "font-medium font-dg-noto text-base text-dg-text mb-1 flex flex-wrap items-baseline gap-1"
       ".dg-item-title small":
         apply: "font-normal text-xs text-dg-muted"
     examples:
@@ -1674,8 +2259,8 @@ components:
       title: "Prose"
       description: "Body text component with responsive sizing"
       category: "application-ui"
-      section: "Headings"
-      subsection: "Section Headings"
+      section: "headings"
+      subsection: "section-headings"
       tags: [text, prose, body, paragraph]
     css:
       ".dg-prose":
@@ -1723,12 +2308,12 @@ components:
       title: "Input Group"
       description: "Text input fields with labels, placeholders, and validation states"
       category: "application-ui"
-      section: "Forms"
-      subsection: "Input Groups"
+      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 text-white font-dg-sans text-sm outline-none transition-all duration-300 shadow-dg-sm"
+        apply: "w-full px-4 py-3 rounded border border-dg-pebble bg-dg-charcoal text-dg-text font-dg-sans text-sm outline-none transition-all duration-300 shadow-dg-sm"
         properties:
           height: "2.75rem"
       ".dg-input::placeholder":
@@ -1750,10 +2335,10 @@ components:
             apply: "max-w-none"
       select:
         css:
-          ".dg-input[type=\"select\"], select.dg-input":
+          '.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-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"
@@ -1823,12 +2408,12 @@ components:
       title: "Textarea"
       description: "Multi-line text input"
       category: "application-ui"
-      section: "Forms"
-      subsection: "Input Groups"
+      section: "forms"
+      subsection: "textareas"
       tags: [textarea, input, form]
     css:
       ".dg-textarea":
-        apply: "w-full px-4 py-3 rounded border border-dg-pebble bg-dg-charcoal text-white font-dg-sans text-sm outline-none transition-all duration-300 shadow-dg-sm"
+        apply: "w-full px-4 py-3 rounded border border-dg-pebble bg-dg-charcoal text-dg-text font-dg-sans text-sm outline-none transition-all duration-300 shadow-dg-sm"
         properties:
           min-height: "6.25rem"
           resize: "vertical"
@@ -1855,8 +2440,8 @@ components:
       title: "Checkbox"
       description: "Checkbox inputs for multi-select options"
       category: "application-ui"
-      section: "Forms"
-      subsection: "Checkboxes"
+      section: "forms"
+      subsection: "checkboxes"
       tags: [checkbox, input, form, select]
     css:
       ".dg-checkbox":
@@ -1867,13 +2452,13 @@ components:
         apply: "bg-dg-primary border-dg-primary"
       ".dg-checkbox:checked::after":
         properties:
-          content: "\"\""
+          content: '""'
           position: "absolute"
           left: "0.375rem"
           top: "0.125rem"
           width: "0.3125rem"
           height: "0.625rem"
-          border: "solid black"
+          border: "solid var(--color-dg-almost-black)"
           border-width: "0 0.125rem 0.125rem 0"
           transform: "rotate(45deg)"
       ".dg-checkbox:focus":
@@ -1930,8 +2515,8 @@ components:
       title: "Form Section"
       description: "Form section container with optional heading"
       category: "application-ui"
-      section: "Forms"
-      subsection: "Form Layouts"
+      section: "forms"
+      subsection: "form-layouts"
       tags: [form, section, layout]
     css:
       ".dg-form-field":
@@ -1947,7 +2532,7 @@ components:
       ".dg-form-field--success .dg-form-helper":
         apply: "text-dg-success"
       ".dg-form-label":
-        apply: "text-sm font-medium text-white"
+        apply: "text-sm font-medium text-dg-text"
       ".dg-form-error":
         apply: "text-xs text-dg-danger block"
         properties:
@@ -1983,8 +2568,8 @@ components:
       title: "File Upload Zone"
       description: "Drag-and-drop file upload area with click-to-browse"
       category: "application-ui"
-      section: "Forms"
-      subsection: "Input Groups"
+      section: "forms"
+      subsection: "input-groups"
       tags: [file, upload, drag-drop, input]
     css:
       ".dg-drag-drop-zone":
@@ -2003,7 +2588,7 @@ components:
       ".dg-drag-drop-zone:hover .dg-drag-drop-zone__icon":
         apply: "text-dg-primary"
       ".dg-drag-drop-zone__text":
-        apply: "text-base text-white font-medium"
+        apply: "text-base text-dg-text font-medium"
       ".dg-drag-drop-zone__hint":
         apply: "text-sm text-dg-muted"
     examples:
@@ -2039,8 +2624,8 @@ components:
       title: "Status Banner"
       description: "Alert/notification banner with different status variants"
       category: "application-ui"
-      section: "Feedback"
-      subsection: "Alerts"
+      section: "feedback"
+      subsection: "alerts"
       tags: [alert, status, notification, banner]
     css:
       ".dg-status":
@@ -2122,15 +2707,15 @@ components:
     metadata:
       title: "Spinner"
       description: "Loading spinner animation"
-      category: "application-ui"
-      section: "Feedback"
-      subsection: "Alerts"
+      category: "custom"
+      section: "feedback"
+      subsection: "loading"
       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 text-white mb-1"
+        apply: "font-medium font-dg-noto text-xl text-dg-text mb-1"
     examples:
       - title: "Spinner"
         ast:
@@ -2143,8 +2728,8 @@ components:
       title: "Modal"
       description: "Modal overlay with content"
       category: "application-ui"
-      section: "Feedback"
-      subsection: "Alerts"
+      section: "overlays"
+      subsection: "modal-dialogs"
       tags: [modal, overlay, dialog]
     css:
       ".dg-modal-overlay":
@@ -2182,8 +2767,8 @@ components:
       title: "Constrained Container"
       description: "Max-width container for readable content areas"
       category: "application-ui"
-      section: "Layout"
-      subsection: "Containers"
+      section: "layout"
+      subsection: "containers"
       tags: [container, layout, max-width]
     css:
       ".dg-constrain-width":
@@ -2212,8 +2797,8 @@ components:
       title: "Responsive Grid"
       description: "Grid that stacks on mobile and displays side-by-side on desktop"
       category: "application-ui"
-      section: "Layout"
-      subsection: "Containers"
+      section: "layout"
+      subsection: "containers"
       tags: [grid, responsive, layout]
     css:
       ".dg-grid-mobile-stack":
@@ -2252,10 +2837,10 @@ components:
   columns:
     metadata:
       title: "Three-Column Layout"
-      description: "A simple responsive three-column layout that stacks on mobile"
+      description: "Responsive multi-column layout with flexbox (default) and fixed-sidebar app shell (--fixed) modes"
       category: "application-ui"
-      section: "Layout"
-      subsection: "Multi-Column Layouts"
+      section: "application-shells"
+      subsection: "multi-column-layouts"
       tags: [layout, three-column, sidebar, responsive]
     css:
       ".dg-columns":
@@ -2274,33 +2859,6 @@ components:
       "(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"
@@ -2313,6 +2871,8 @@ components:
         ".dg-column--sidebar-left.dg-column--xl":
           apply: "w-128 flex-shrink-0"
       "(min-width: 1280px)":
+        ".dg-columns":
+          apply: "flex-row"
         ".dg-column--sidebar-right":
           properties:
             width: "16rem"
@@ -2329,13 +2889,148 @@ components:
           properties:
             width: "32rem"
             flex-shrink: "0"
+    variants:
+      fixed:
+        css:
+          ".dg-columns--fixed":
+            properties:
+              position: "relative"
+              height: "100%"
+              "--dg-sidebar-width": "18rem"
+              "--dg-aside-width": "24rem"
+          ".dg-columns--fixed .dg-column--sidebar-left":
+            apply: "hidden"
+          ".dg-columns--fixed .dg-column--sidebar-right":
+            apply: "hidden"
+        media:
+          "(min-width: 1024px)":
+            ".dg-columns--fixed .dg-column--sidebar-left":
+              properties:
+                display: "flex"
+                flex-direction: "column"
+                position: "fixed"
+                top: "0"
+                bottom: "0"
+                left: "0"
+                z-index: "50"
+                width: "var(--dg-sidebar-width)"
+                overflow-y: "auto"
+                background: "var(--color-dg-almost-black)"
+                border-right: "1px solid var(--color-dg-border)"
+            ".dg-columns--fixed .dg-column--main":
+              properties:
+                padding-left: "var(--dg-sidebar-width)"
+            ".dg-columns--fixed:has(.dg-column--sidebar-left.dg-column--sm)":
+              properties:
+                "--dg-sidebar-width": "16rem"
+            ".dg-columns--fixed:has(.dg-column--sidebar-left.dg-column--lg)":
+              properties:
+                "--dg-sidebar-width": "24rem"
+            ".dg-columns--fixed:has(.dg-column--sidebar-left.dg-column--xl)":
+              properties:
+                "--dg-sidebar-width": "32rem"
+          "(min-width: 1280px)":
+            ".dg-columns--fixed .dg-column--sidebar-right":
+              properties:
+                display: "flex"
+                flex-direction: "column"
+                position: "fixed"
+                top: "0"
+                bottom: "0"
+                left: "var(--dg-sidebar-width)"
+                width: "var(--dg-aside-width)"
+                overflow-y: "auto"
+                border-right: "1px solid var(--color-dg-border)"
+            ".dg-columns--fixed:has(.dg-column--sidebar-right) .dg-column--main":
+              properties:
+                padding-left: "calc(var(--dg-sidebar-width) + var(--dg-aside-width))"
+            ".dg-columns--fixed:has(.dg-column--sidebar-right.dg-column--sm)":
+              properties:
+                "--dg-aside-width": "20rem"
+            ".dg-columns--fixed:has(.dg-column--sidebar-right.dg-column--lg)":
+              properties:
+                "--dg-aside-width": "28rem"
+            ".dg-columns--fixed:has(.dg-column--sidebar-right.dg-column--xl)":
+              properties:
+                "--dg-aside-width": "32rem"
+    elements:
+      mobile-header:
+        css:
+          ".dg-columns__mobile-header":
+            apply: "flex items-center gap-3 px-4 py-2"
+            properties:
+              position: "sticky"
+              top: "0"
+              z-index: "40"
+              background: "var(--color-dg-almost-black)"
+              border-bottom: "1px solid var(--color-dg-border)"
+        media:
+          "(min-width: 1024px)":
+            ".dg-columns__mobile-header":
+              apply: "hidden"
+      sidebar-toggle:
+        css:
+          ".dg-columns__sidebar-toggle":
+            apply: "inline-flex items-center justify-center -m-2.5 p-2.5"
+            properties:
+              color: "var(--color-dg-muted)"
     examples:
       - title: "Three-Column Layout"
+        description: "Responsive layout with left sidebar, main content, and right sidebar"
+        padding: "0"
+
+        styles: |
+          .dg-column {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-top: 2rem;
+            padding-bottom: 2rem;
+          }
+          .dg-column--sidebar-left {
+            background: var(--color-dg-charcoal);
+            border-right: 1px solid var(--color-dg-border);
+            border-bottom: 1px solid var(--color-dg-border);
+          }
+          .dg-column--sidebar-right {
+            background: var(--color-dg-charcoal);
+            border-left: 1px solid var(--color-dg-border);
+            border-top: 1px solid var(--color-dg-border);
+          }
+          .dg-column--main {
+            background-image: repeating-linear-gradient(
+              -45deg,
+              transparent,
+              transparent 5px,
+              color-mix(in srgb, white 3%, transparent) 5px,
+              color-mix(in srgb, white 3%, transparent) 10px
+            );
+          }
+          .dg-prose, .dg-prose--small {
+            font-size: 0.6875rem;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: var(--color-dg-pebble);
+            font-weight: 600;
+          }
+          @media (min-width: 768px) {
+            .dg-column--sidebar-right {
+              border-top: none;
+            }
+          }
+          @media (min-width: 1024px) {
+            .dg-column {
+              min-height: 18rem;
+            }
+            .dg-column--sidebar-left {
+              border-bottom: none;
+            }
+          }
         ast:
           tag: div
           props:
             class: "dg-columns"
-            style: "min-height: 300px;"
+            style: "width: 100%; max-width: 100%;"
           children:
             - tag: div
               props:
@@ -2344,32 +3039,755 @@ components:
                 - 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"
+                        class: "dg-prose dg-prose--small"
                       children:
-                        - "Left Sidebar"
+                        - "Left sidebar"
                 - tag: main
                   props:
                     class: "dg-column dg-column--main"
                   children:
                     - tag: p
                       props:
-                        class: "dg-prose"
+                        class: "dg-prose dg-prose--small"
                       children:
-                        - "Main Content"
+                        - "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"
+                    class: "dg-prose dg-prose--small"
+                  children:
+                    - "Right sidebar"
+
+      - title: "Small Left Sidebar (--sm)"
+        description: "Layout with small left sidebar (256px) using the --sm modifier"
+        padding: "0"
+
+        styles: |
+          .dg-column {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-top: 2rem;
+            padding-bottom: 2rem;
+          }
+          .dg-column--sidebar-left {
+            background: var(--color-dg-charcoal);
+            border-right: 1px solid var(--color-dg-border);
+            border-bottom: 1px solid var(--color-dg-border);
+          }
+          .dg-column--sidebar-right {
+            background: var(--color-dg-charcoal);
+            border-left: 1px solid var(--color-dg-border);
+            border-top: 1px solid var(--color-dg-border);
+          }
+          .dg-column--main {
+            background-image: repeating-linear-gradient(
+              -45deg,
+              transparent,
+              transparent 5px,
+              color-mix(in srgb, white 3%, transparent) 5px,
+              color-mix(in srgb, white 3%, transparent) 10px
+            );
+          }
+          .dg-prose, .dg-prose--small {
+            font-size: 0.6875rem;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: var(--color-dg-pebble);
+            font-weight: 600;
+          }
+          @media (min-width: 768px) {
+            .dg-column--sidebar-right {
+              border-top: none;
+            }
+          }
+          @media (min-width: 1024px) {
+            .dg-column {
+              min-height: 18rem;
+            }
+            .dg-column--sidebar-left {
+              border-bottom: none;
+            }
+          }
+        ast:
+          tag: div
+          props:
+            class: "dg-columns"
+            style: "width: 100%; max-width: 100%;"
+          children:
+            - tag: div
+              props:
+                class: "dg-columns__wrapper"
+              children:
+                - tag: aside
+                  props:
+                    class: "dg-column dg-column--sidebar-left dg-column--sm"
+                  children:
+                    - tag: p
+                      props:
+                        class: "dg-prose dg-prose--small"
+                      children:
+                        - "Small (256px)"
+                - tag: main
+                  props:
+                    class: "dg-column dg-column--main"
                   children:
-                    - "Right Sidebar"
+                    - tag: p
+                      props:
+                        class: "dg-prose dg-prose--small"
+                      children:
+                        - "Main content"
+            - tag: aside
+              props:
+                class: "dg-column dg-column--sidebar-right"
+              children:
+                - tag: p
+                  props:
+                    class: "dg-prose dg-prose--small"
+                  children:
+                    - "Right sidebar"
+
+      - title: "Large Left Sidebar (--lg)"
+        description: "Layout with large left sidebar (384px) using the --lg modifier"
+        padding: "0"
+
+        styles: |
+          .dg-column {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-top: 2rem;
+            padding-bottom: 2rem;
+          }
+          .dg-column--sidebar-left {
+            background: var(--color-dg-charcoal);
+            border-right: 1px solid var(--color-dg-border);
+            border-bottom: 1px solid var(--color-dg-border);
+          }
+          .dg-column--sidebar-right {
+            background: var(--color-dg-charcoal);
+            border-left: 1px solid var(--color-dg-border);
+            border-top: 1px solid var(--color-dg-border);
+          }
+          .dg-column--main {
+            background-image: repeating-linear-gradient(
+              -45deg,
+              transparent,
+              transparent 5px,
+              color-mix(in srgb, white 3%, transparent) 5px,
+              color-mix(in srgb, white 3%, transparent) 10px
+            );
+          }
+          .dg-prose, .dg-prose--small {
+            font-size: 0.6875rem;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: var(--color-dg-pebble);
+            font-weight: 600;
+          }
+          @media (min-width: 768px) {
+            .dg-column--sidebar-right {
+              border-top: none;
+            }
+          }
+          @media (min-width: 1024px) {
+            .dg-column {
+              min-height: 18rem;
+            }
+            .dg-column--sidebar-left {
+              border-bottom: none;
+            }
+          }
+        ast:
+          tag: div
+          props:
+            class: "dg-columns"
+            style: "width: 100%; max-width: 100%;"
+          children:
+            - tag: div
+              props:
+                class: "dg-columns__wrapper"
+              children:
+                - tag: aside
+                  props:
+                    class: "dg-column dg-column--sidebar-left dg-column--lg"
+                  children:
+                    - tag: p
+                      props:
+                        class: "dg-prose dg-prose--small"
+                      children:
+                        - "Large (384px)"
+                - tag: main
+                  props:
+                    class: "dg-column dg-column--main"
+                  children:
+                    - tag: p
+                      props:
+                        class: "dg-prose dg-prose--small"
+                      children:
+                        - "Main content"
+            - tag: aside
+              props:
+                class: "dg-column dg-column--sidebar-right"
+              children:
+                - tag: p
+                  props:
+                    class: "dg-prose dg-prose--small"
+                  children:
+                    - "Right sidebar"
+
+      - title: "Extra Large Left Sidebar (--xl)"
+        description: "Layout with extra large left sidebar (512px) using the --xl modifier"
+        padding: "0"
+
+        styles: |
+          .dg-column {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-top: 2rem;
+            padding-bottom: 2rem;
+          }
+          .dg-column--sidebar-left {
+            background: var(--color-dg-charcoal);
+            border-right: 1px solid var(--color-dg-border);
+            border-bottom: 1px solid var(--color-dg-border);
+          }
+          .dg-column--sidebar-right {
+            background: var(--color-dg-charcoal);
+            border-left: 1px solid var(--color-dg-border);
+            border-top: 1px solid var(--color-dg-border);
+          }
+          .dg-column--main {
+            background-image: repeating-linear-gradient(
+              -45deg,
+              transparent,
+              transparent 5px,
+              color-mix(in srgb, white 3%, transparent) 5px,
+              color-mix(in srgb, white 3%, transparent) 10px
+            );
+          }
+          .dg-prose, .dg-prose--small {
+            font-size: 0.6875rem;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: var(--color-dg-pebble);
+            font-weight: 600;
+          }
+          @media (min-width: 768px) {
+            .dg-column--sidebar-right {
+              border-top: none;
+            }
+          }
+          @media (min-width: 1024px) {
+            .dg-column {
+              min-height: 18rem;
+            }
+            .dg-column--sidebar-left {
+              border-bottom: none;
+            }
+          }
+        ast:
+          tag: div
+          props:
+            class: "dg-columns"
+            style: "width: 100%; max-width: 100%;"
+          children:
+            - tag: div
+              props:
+                class: "dg-columns__wrapper"
+              children:
+                - tag: aside
+                  props:
+                    class: "dg-column dg-column--sidebar-left dg-column--xl"
+                  children:
+                    - tag: p
+                      props:
+                        class: "dg-prose dg-prose--small"
+                      children:
+                        - "Extra Large (512px)"
+                - tag: main
+                  props:
+                    class: "dg-column dg-column--main"
+                  children:
+                    - tag: p
+                      props:
+                        class: "dg-prose dg-prose--small"
+                      children:
+                        - "Main content"
+            - tag: aside
+              props:
+                class: "dg-column dg-column--sidebar-right"
+              children:
+                - tag: p
+                  props:
+                    class: "dg-prose dg-prose--small"
+                  children:
+                    - "Right sidebar"
+
+      - title: "Small Right Sidebar (--sm)"
+        description: "Layout with small right sidebar (320px) using the --sm modifier"
+        padding: "0"
+
+        styles: |
+          .dg-column {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-top: 2rem;
+            padding-bottom: 2rem;
+          }
+          .dg-column--sidebar-left {
+            background: var(--color-dg-charcoal);
+            border-right: 1px solid var(--color-dg-border);
+            border-bottom: 1px solid var(--color-dg-border);
+          }
+          .dg-column--sidebar-right {
+            background: var(--color-dg-charcoal);
+            border-left: 1px solid var(--color-dg-border);
+            border-top: 1px solid var(--color-dg-border);
+          }
+          .dg-column--main {
+            background-image: repeating-linear-gradient(
+              -45deg,
+              transparent,
+              transparent 5px,
+              color-mix(in srgb, white 3%, transparent) 5px,
+              color-mix(in srgb, white 3%, transparent) 10px
+            );
+          }
+          .dg-prose, .dg-prose--small {
+            font-size: 0.6875rem;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: var(--color-dg-pebble);
+            font-weight: 600;
+          }
+          @media (min-width: 768px) {
+            .dg-column--sidebar-right {
+              border-top: none;
+            }
+          }
+          @media (min-width: 1024px) {
+            .dg-column {
+              min-height: 18rem;
+            }
+            .dg-column--sidebar-left {
+              border-bottom: none;
+            }
+          }
+        ast:
+          tag: div
+          props:
+            class: "dg-columns"
+            style: "width: 100%; max-width: 100%;"
+          children:
+            - tag: div
+              props:
+                class: "dg-columns__wrapper"
+              children:
+                - tag: aside
+                  props:
+                    class: "dg-column dg-column--sidebar-left"
+                  children:
+                    - tag: p
+                      props:
+                        class: "dg-prose dg-prose--small"
+                      children:
+                        - "Left sidebar"
+                - tag: main
+                  props:
+                    class: "dg-column dg-column--main"
+                  children:
+                    - tag: p
+                      props:
+                        class: "dg-prose dg-prose--small"
+                      children:
+                        - "Main content"
+            - tag: aside
+              props:
+                class: "dg-column dg-column--sidebar-right dg-column--sm"
+              children:
+                - tag: p
+                  props:
+                    class: "dg-prose dg-prose--small"
+                  children:
+                    - "Small (320px)"
+
+      - title: "Large Right Sidebar (--lg)"
+        description: "Layout with large right sidebar (384px) using the --lg modifier"
+        padding: "0"
+
+        styles: |
+          .dg-column {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-top: 2rem;
+            padding-bottom: 2rem;
+          }
+          .dg-column--sidebar-left {
+            background: var(--color-dg-charcoal);
+            border-right: 1px solid var(--color-dg-border);
+            border-bottom: 1px solid var(--color-dg-border);
+          }
+          .dg-column--sidebar-right {
+            background: var(--color-dg-charcoal);
+            border-left: 1px solid var(--color-dg-border);
+            border-top: 1px solid var(--color-dg-border);
+          }
+          .dg-column--main {
+            background-image: repeating-linear-gradient(
+              -45deg,
+              transparent,
+              transparent 5px,
+              color-mix(in srgb, white 3%, transparent) 5px,
+              color-mix(in srgb, white 3%, transparent) 10px
+            );
+          }
+          .dg-prose, .dg-prose--small {
+            font-size: 0.6875rem;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: var(--color-dg-pebble);
+            font-weight: 600;
+          }
+          @media (min-width: 768px) {
+            .dg-column--sidebar-right {
+              border-top: none;
+            }
+          }
+          @media (min-width: 1024px) {
+            .dg-column {
+              min-height: 18rem;
+            }
+            .dg-column--sidebar-left {
+              border-bottom: none;
+            }
+          }
+        ast:
+          tag: div
+          props:
+            class: "dg-columns"
+            style: "width: 100%; max-width: 100%;"
+          children:
+            - tag: div
+              props:
+                class: "dg-columns__wrapper"
+              children:
+                - tag: aside
+                  props:
+                    class: "dg-column dg-column--sidebar-left"
+                  children:
+                    - tag: p
+                      props:
+                        class: "dg-prose dg-prose--small"
+                      children:
+                        - "Left sidebar"
+                - tag: main
+                  props:
+                    class: "dg-column dg-column--main"
+                  children:
+                    - tag: p
+                      props:
+                        class: "dg-prose dg-prose--small"
+                      children:
+                        - "Main content"
+            - tag: aside
+              props:
+                class: "dg-column dg-column--sidebar-right dg-column--lg"
+              children:
+                - tag: p
+                  props:
+                    class: "dg-prose dg-prose--small"
+                  children:
+                    - "Large (384px)"
+
+      - title: "Extra Large Right Sidebar (--xl)"
+        description: "Layout with extra large right sidebar (512px) using the --xl modifier"
+        padding: "0"
+
+        styles: |
+          .dg-column {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-top: 2rem;
+            padding-bottom: 2rem;
+          }
+          .dg-column--sidebar-left {
+            background: var(--color-dg-charcoal);
+            border-right: 1px solid var(--color-dg-border);
+            border-bottom: 1px solid var(--color-dg-border);
+          }
+          .dg-column--sidebar-right {
+            background: var(--color-dg-charcoal);
+            border-left: 1px solid var(--color-dg-border);
+            border-top: 1px solid var(--color-dg-border);
+          }
+          .dg-column--main {
+            background-image: repeating-linear-gradient(
+              -45deg,
+              transparent,
+              transparent 5px,
+              color-mix(in srgb, white 3%, transparent) 5px,
+              color-mix(in srgb, white 3%, transparent) 10px
+            );
+          }
+          .dg-prose, .dg-prose--small {
+            font-size: 0.6875rem;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: var(--color-dg-pebble);
+            font-weight: 600;
+          }
+          @media (min-width: 768px) {
+            .dg-column--sidebar-right {
+              border-top: none;
+            }
+          }
+          @media (min-width: 1024px) {
+            .dg-column {
+              min-height: 18rem;
+            }
+            .dg-column--sidebar-left {
+              border-bottom: none;
+            }
+          }
+        ast:
+          tag: div
+          props:
+            class: "dg-columns"
+            style: "width: 100%; max-width: 100%;"
+          children:
+            - tag: div
+              props:
+                class: "dg-columns__wrapper"
+              children:
+                - tag: aside
+                  props:
+                    class: "dg-column dg-column--sidebar-left"
+                  children:
+                    - tag: p
+                      props:
+                        class: "dg-prose dg-prose--small"
+                      children:
+                        - "Left sidebar"
+                - tag: main
+                  props:
+                    class: "dg-column dg-column--main"
+                  children:
+                    - tag: p
+                      props:
+                        class: "dg-prose dg-prose--small"
+                      children:
+                        - "Main content"
+            - tag: aside
+              props:
+                class: "dg-column dg-column--sidebar-right dg-column--xl"
+              children:
+                - tag: p
+                  props:
+                    class: "dg-prose dg-prose--small"
+                  children:
+                    - "Extra Large (512px)"
+
+  # columns-fixed:
+  #   metadata:
+  #     title: "Three-Column Layout v2"
+  #     description: "Fixed-sidebar app shell with collapsible mobile header. Left sidebar fixed at lg+, right aside fixed at xl+."
+  #     category: "application-ui"
+  #     section: "application-shells"
+  #     subsection: "multi-column-layouts"
+  #     tags: [layout, fixed-sidebar, app-shell, responsive]
+  #   examples:
+  #     - title: "Fixed Sidebar Layout"
+  #       description: "App shell with fixed left sidebar and collapsible mobile header"
+  #       padding: "0"
+  #       styles: |
+  #         .dg-column--sidebar-left {
+  #           background: var(--color-dg-charcoal);
+  #           border-right: 1px solid var(--color-dg-border);
+  #         }
+  #         .dg-column--main {
+  #           min-height: 18rem;
+  #           display: flex;
+  #           align-items: center;
+  #           justify-content: center;
+  #           background-image: repeating-linear-gradient(
+  #             -45deg,
+  #             transparent,
+  #             transparent 5px,
+  #             color-mix(in srgb, white 3%, transparent) 5px,
+  #             color-mix(in srgb, white 3%, transparent) 10px
+  #           );
+  #         }
+  #         .dg-column--main .dg-prose {
+  #           font-size: 0.6875rem;
+  #           text-transform: uppercase;
+  #           letter-spacing: 0.1em;
+  #           color: var(--color-dg-pebble);
+  #           font-weight: 600;
+  #         }
+  #       ast:
+  #         tag: div
+  #         props:
+  #           class: "dg-columns dg-columns--fixed"
+  #           style: "min-height: 400px;"
+  #         children:
+  #           - tag: div
+  #             props:
+  #               class: "dg-columns__mobile-header"
+  #             children:
+  #               - tag: button
+  #                 props:
+  #                   type: "button"
+  #                   class: "dg-columns__sidebar-toggle"
+  #                 children:
+  #                   - tag: i
+  #                     props:
+  #                       class: "fa-solid fa-bars"
+  #                       aria-hidden: "true"
+  #               - tag: span
+  #                 props:
+  #                   class: "text-sm font-semibold text-dg-text"
+  #                 children:
+  #                   - "Dashboard"
+  #           - tag: aside
+  #             props:
+  #               class: "dg-column dg-column--sidebar-left"
+  #             children:
+  #               - tag: nav
+  #                 props:
+  #                   class: "flex flex-col gap-2"
+  #                 children:
+  #                   - tag: a
+  #                     props:
+  #                       href: "#"
+  #                       class: "text-dg-primary text-sm font-semibold"
+  #                     children:
+  #                       - "Dashboard"
+  #                   - tag: a
+  #                     props:
+  #                       href: "#"
+  #                       class: "text-dg-muted text-sm"
+  #                     children:
+  #                       - "Projects"
+  #                   - tag: a
+  #                     props:
+  #                       href: "#"
+  #                       class: "text-dg-muted text-sm"
+  #                     children:
+  #                       - "Settings"
+  #           - tag: main
+  #             props:
+  #               class: "dg-column dg-column--main"
+  #             children:
+  #               - tag: p
+  #                 props:
+  #                   class: "dg-prose"
+  #                 children:
+  #                   - "Main Content"
+  #     - title: "Fixed Sidebar with Aside"
+  #       description: "App shell with fixed left sidebar and right aside panel"
+  #       padding: "0"
+  #       styles: |
+  #         .dg-column--sidebar-left {
+  #           background: var(--color-dg-charcoal);
+  #           border-right: 1px solid var(--color-dg-border);
+  #         }
+  #         .dg-column--sidebar-right {
+  #           background: var(--color-dg-charcoal);
+  #           border-left: 1px solid var(--color-dg-border);
+  #         }
+  #         .dg-column--main {
+  #           min-height: 18rem;
+  #           display: flex;
+  #           align-items: center;
+  #           justify-content: center;
+  #           background-image: repeating-linear-gradient(
+  #             -45deg,
+  #             transparent,
+  #             transparent 5px,
+  #             color-mix(in srgb, white 3%, transparent) 5px,
+  #             color-mix(in srgb, white 3%, transparent) 10px
+  #           );
+  #         }
+  #         .dg-column--main .dg-prose {
+  #           font-size: 0.6875rem;
+  #           text-transform: uppercase;
+  #           letter-spacing: 0.1em;
+  #           color: var(--color-dg-pebble);
+  #           font-weight: 600;
+  #         }
+  #       ast:
+  #         tag: div
+  #         props:
+  #           class: "dg-columns dg-columns--fixed"
+  #           style: "min-height: 400px;"
+  #         children:
+  #           - tag: div
+  #             props:
+  #               class: "dg-columns__mobile-header"
+  #             children:
+  #               - tag: button
+  #                 props:
+  #                   type: "button"
+  #                   class: "dg-columns__sidebar-toggle"
+  #                 children:
+  #                   - tag: i
+  #                     props:
+  #                       class: "fa-solid fa-bars"
+  #                       aria-hidden: "true"
+  #               - tag: span
+  #                 props:
+  #                   class: "text-sm font-semibold text-dg-text"
+  #                 children:
+  #                   - "Dashboard"
+  #           - tag: aside
+  #             props:
+  #               class: "dg-column dg-column--sidebar-left"
+  #             children:
+  #               - tag: nav
+  #                 props:
+  #                   class: "flex flex-col gap-2"
+  #                 children:
+  #                   - tag: a
+  #                     props:
+  #                       href: "#"
+  #                       class: "text-dg-primary text-sm font-semibold"
+  #                     children:
+  #                       - "Dashboard"
+  #                   - tag: a
+  #                     props:
+  #                       href: "#"
+  #                       class: "text-dg-muted text-sm"
+  #                     children:
+  #                       - "Projects"
+  #           - tag: aside
+  #             props:
+  #               class: "dg-column dg-column--sidebar-right"
+  #             children:
+  #               - tag: p
+  #                 props:
+  #                   class: "dg-prose"
+  #                 children:
+  #                   - "Activity Feed"
+  #           - tag: main
+  #             props:
+  #               class: "dg-column dg-column--main"
+  #             children:
+  #               - tag: p
+  #                 props:
+  #                   class: "dg-prose"
+  #                 children:
+  #                   - "Main Content"
 
   # ---------------------------------------------------------------------------
   # APPLICATION SHELLS
@@ -2378,17 +3796,17 @@ components:
     metadata:
       title: "Header"
       description: "Application header with logo and navigation"
-      category: "application-ui"
-      section: "Application Shells"
-      subsection: "Stacked Layouts"
+      category: "custom"
+      section: "elements"
+      subsection: "headers"
       tags: [header, navigation, layout]
     css:
       ".dg-header":
         apply: "w-full"
         properties:
-          background: "#050506"
+          background: "var(--color-dg-almost-black)"
           padding: "1rem 1.5rem"
-          border-bottom: "1px solid rgba(255, 255, 255, 0.1)"
+          border-bottom: "1px solid color-mix(in srgb, white 10%, transparent)"
       ".dg-header__container":
         apply: "flex items-center justify-between max-w-screen-2xl mx-auto"
       ".dg-header__logo":
@@ -2396,13 +3814,13 @@ components:
       ".dg-header__logo-image":
         apply: "h-8 w-auto"
       ".dg-header__logo-text":
-        apply: "font-dg-noto font-bold text-xl text-white"
+        apply: "font-dg-noto font-bold text-xl text-dg-text"
       ".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"
+        apply: "size-8 rounded-full bg-dg-charcoal outline -outline-offset-1 outline-white/10"
     media:
       "(max-width: 768px)":
         ".dg-header":
@@ -2470,9 +3888,9 @@ components:
     metadata:
       title: "Footer"
       description: "Simple footer for page layouts"
-      category: "application-ui"
-      section: "Application Shells"
-      subsection: "Stacked Layouts"
+      category: "custom"
+      section: "page-sections"
+      subsection: "footers"
       tags: [footer, layout]
     css:
       ".dg-footer":
@@ -2537,8 +3955,8 @@ components:
       title: "Link"
       description: "Primary link with hover effect"
       category: "application-ui"
-      section: "Navigation"
-      subsection: "Navbars"
+      section: "navigation"
+      subsection: "navbars"
       tags: [link, navigation]
     css:
       ".dg-link":
@@ -2566,9 +3984,9 @@ components:
     metadata:
       title: "Text Utilities"
       description: "Text color and typography utility classes"
-      category: "application-ui"
-      section: "Elements"
-      subsection: "Buttons"
+      category: "custom"
+      section: "elements"
+      subsection: "text-utilities"
       tags: [text, color, utility]
     css:
       ".dg-text-center":
@@ -2634,9 +4052,9 @@ components:
     metadata:
       title: "Newsletter Signup"
       description: "Newsletter subscription form with email input and privacy checkbox"
-      category: "application-ui"
-      section: "Forms"
-      subsection: "Form Layouts"
+      category: "custom"
+      section: "page-sections"
+      subsection: "newsletter-sections"
       tags: [newsletter, form, email, signup, subscription]
     css:
       ".dg-newsletter-container":
@@ -2731,8 +4149,8 @@ components:
       title: "Alerts"
       description: "Feedback banners for warnings, errors, success, and informational messages"
       category: "application-ui"
-      section: "Feedback"
-      subsection: "Alerts"
+      section: "feedback"
+      subsection: "alerts"
       tags: [alert, feedback, notification, banner, warning, error, success, info]
     css:
       ".dg-alert":
@@ -2818,7 +4236,7 @@ components:
       dismiss:
         css:
           ".dg-alert__dismiss":
-            apply: "ml-auto pl-3 shrink-0"
+            apply: "ml-auto pl-3 shrink-0 -my-1.5 -mr-1.5"
           ".dg-alert__dismiss button":
             apply: "inline-flex rounded-md p-1.5 text-dg-muted cursor-pointer"
           ".dg-alert__dismiss button:hover":
@@ -3109,399 +4527,399 @@ components:
                               props:
                                 d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
 
-  combobox:
-    metadata:
-      title: "Comboboxes"
-      description: "Autocomplete combobox inputs with filterable dropdown options"
-      category: "application-ui"
-      section: "Forms"
-      subsection: "Comboboxes"
-      tags: [combobox, autocomplete, select, search, dropdown, form]
-    css:
-      ".dg-combobox":
-        apply: "relative block"
-      ".dg-combobox__label":
-        apply: "block text-sm font-medium text-white"
-        properties:
-          line-height: "1.5rem"
-      ".dg-combobox__wrapper":
-        apply: "relative mt-2 block"
-      ".dg-combobox__input":
-        apply: "block w-full rounded-md bg-white/5 py-1.5 pr-12 pl-3 text-base text-white outline-1 -outline-offset-1 outline-white/10 placeholder:text-dg-slate sm:text-sm"
-        properties:
-          line-height: "1.5rem"
-      ".dg-combobox__input:focus":
-        apply: "outline-2 -outline-offset-2 outline-dg-primary"
-      ".dg-combobox__toggle":
-        apply: "absolute inset-y-0 right-0 flex items-center rounded-r-md px-2"
-      ".dg-combobox__toggle-icon":
-        apply: "size-5 text-dg-muted"
-      ".dg-combobox__options":
-        apply: "max-h-60 overflow-auto rounded-md bg-dg-charcoal py-1 text-base shadow-lg sm:text-sm"
-        properties:
-          outline: "1px solid rgba(255, 255, 255, 0.1)"
-          outline-offset: "-1px"
-      ".dg-combobox__option":
-        apply: "block truncate px-3 py-2 text-dg-platinum select-none cursor-pointer"
-      ".dg-combobox__option:hover":
-        apply: "bg-dg-primary text-white"
-      ".dg-combobox__option.selected":
-        apply: "bg-dg-primary text-white"
-      ".dg-combobox__option-text":
-        apply: "block truncate"
-      ".dg-combobox__check":
-        apply: "absolute inset-y-0 right-0 flex items-center pr-4 text-white"
-      ".dg-combobox__check-icon":
-        apply: "size-5"
-    variants:
-      with-check:
-        css:
-          ".dg-combobox--with-check .dg-combobox__option":
-            apply: "relative pr-9"
-          ".dg-combobox--with-check .dg-combobox__option.selected .dg-combobox__check":
-            apply: "flex"
-      with-avatar:
-        css:
-          ".dg-combobox--with-avatar .dg-combobox__option":
-            apply: "flex items-center"
-            properties:
-              gap: "0.5rem"
-          ".dg-combobox__avatar":
-            apply: "size-6 shrink-0 rounded-full"
-      with-status:
-        css:
-          ".dg-combobox--with-status .dg-combobox__option":
-            apply: "flex items-center"
-            properties:
-              gap: "0.5rem"
-          ".dg-combobox__status":
-            apply: "inline-block size-2 shrink-0 rounded-full"
-          ".dg-combobox__status--online":
-            apply: "bg-dg-success"
-          ".dg-combobox__status--offline":
-            apply: "bg-dg-muted"
-    examples:
-      - title: "Simple Combobox"
-        description: "Basic autocomplete combobox with text options"
-        ast:
-          tag: div
-          props:
-            class: "dg-combobox"
-          children:
-            - tag: label
-              props:
-                class: "dg-combobox__label"
-                for: "combobox-simple"
-              children:
-                - "Assigned to"
-            - tag: div
-              props:
-                class: "dg-combobox__wrapper"
-              children:
-                - tag: input
-                  props:
-                    id: "combobox-simple"
-                    type: text
-                    class: "dg-combobox__input"
-                - tag: button
-                  props:
-                    type: button
-                    class: "dg-combobox__toggle"
-                  children:
-                    - tag: svg
-                      props:
-                        class: "dg-combobox__toggle-icon"
-                        viewBox: "0 0 20 20"
-                        fill: "currentColor"
-                        aria-hidden: "true"
-                      children:
-                        - tag: path
-                          props:
-                            fill-rule: "evenodd"
-                            clip-rule: "evenodd"
-                            d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
-                - tag: ul
-                  props:
-                    class: "dg-combobox__options"
-                    role: "listbox"
-                  children:
-                    - tag: li
-                      props:
-                        class: "dg-combobox__option"
-                        role: "option"
-                      children:
-                        - "Leslie Alexander"
-                    - tag: li
-                      props:
-                        class: "dg-combobox__option"
-                        role: "option"
-                      children:
-                        - "Michael Foster"
-                    - tag: li
-                      props:
-                        class: "dg-combobox__option selected"
-                        role: "option"
-                      children:
-                        - "Dries Vincent"
-      - title: "Combobox with Check Indicator"
-        description: "Combobox showing a checkmark on the selected option"
-        ast:
-          tag: div
-          props:
-            class: "dg-combobox dg-combobox--with-check"
-          children:
-            - tag: label
-              props:
-                class: "dg-combobox__label"
-                for: "combobox-check"
-              children:
-                - "Assigned to"
-            - tag: div
-              props:
-                class: "dg-combobox__wrapper"
-              children:
-                - tag: input
-                  props:
-                    id: "combobox-check"
-                    type: text
-                    class: "dg-combobox__input"
-                - tag: button
-                  props:
-                    type: button
-                    class: "dg-combobox__toggle"
-                  children:
-                    - tag: svg
-                      props:
-                        class: "dg-combobox__toggle-icon"
-                        viewBox: "0 0 20 20"
-                        fill: "currentColor"
-                        aria-hidden: "true"
-                      children:
-                        - tag: path
-                          props:
-                            fill-rule: "evenodd"
-                            clip-rule: "evenodd"
-                            d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
-                - tag: ul
-                  props:
-                    class: "dg-combobox__options"
-                    role: "listbox"
-                  children:
-                    - tag: li
-                      props:
-                        class: "dg-combobox__option"
-                        role: "option"
-                      children:
-                        - tag: span
-                          props:
-                            class: "dg-combobox__option-text"
-                          children:
-                            - "Leslie Alexander"
-                    - tag: li
-                      props:
-                        class: "dg-combobox__option selected"
-                        role: "option"
-                      children:
-                        - tag: span
-                          props:
-                            class: "dg-combobox__option-text"
-                          children:
-                            - "Tom Cook"
-                        - tag: span
-                          props:
-                            class: "dg-combobox__check"
-                          children:
-                            - tag: svg
-                              props:
-                                class: "dg-combobox__check-icon"
-                                viewBox: "0 0 20 20"
-                                fill: "currentColor"
-                                aria-hidden: "true"
-                              children:
-                                - tag: path
-                                  props:
-                                    fill-rule: "evenodd"
-                                    clip-rule: "evenodd"
-                                    d: "M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
-                    - tag: li
-                      props:
-                        class: "dg-combobox__option"
-                        role: "option"
-                      children:
-                        - tag: span
-                          props:
-                            class: "dg-combobox__option-text"
-                          children:
-                            - "Whitney Francis"
-      - title: "Combobox with Avatars"
-        description: "Combobox with user avatars next to each option"
-        ast:
-          tag: div
-          props:
-            class: "dg-combobox dg-combobox--with-avatar"
-          children:
-            - tag: label
-              props:
-                class: "dg-combobox__label"
-                for: "combobox-avatar"
-              children:
-                - "Assigned to"
-            - tag: div
-              props:
-                class: "dg-combobox__wrapper"
-              children:
-                - tag: input
-                  props:
-                    id: "combobox-avatar"
-                    type: text
-                    class: "dg-combobox__input"
-                - tag: button
-                  props:
-                    type: button
-                    class: "dg-combobox__toggle"
-                  children:
-                    - tag: svg
-                      props:
-                        class: "dg-combobox__toggle-icon"
-                        viewBox: "0 0 20 20"
-                        fill: "currentColor"
-                        aria-hidden: "true"
-                      children:
-                        - tag: path
-                          props:
-                            fill-rule: "evenodd"
-                            clip-rule: "evenodd"
-                            d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
-                - tag: ul
-                  props:
-                    class: "dg-combobox__options"
-                    role: "listbox"
-                  children:
-                    - tag: li
-                      props:
-                        class: "dg-combobox__option"
-                        role: "option"
-                      children:
-                        - tag: img
-                          props:
-                            class: "dg-combobox__avatar"
-                            src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                            alt: ""
-                        - tag: span
-                          props:
-                            class: "dg-combobox__option-text"
-                          children:
-                            - "Leslie Alexander"
-                    - tag: li
-                      props:
-                        class: "dg-combobox__option selected"
-                        role: "option"
-                      children:
-                        - tag: img
-                          props:
-                            class: "dg-combobox__avatar"
-                            src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                            alt: ""
-                        - tag: span
-                          props:
-                            class: "dg-combobox__option-text"
-                          children:
-                            - "Tom Cook"
-                    - tag: li
-                      props:
-                        class: "dg-combobox__option"
-                        role: "option"
-                      children:
-                        - tag: img
-                          props:
-                            class: "dg-combobox__avatar"
-                            src: "https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                            alt: ""
-                        - tag: span
-                          props:
-                            class: "dg-combobox__option-text"
-                          children:
-                            - "Whitney Francis"
-      - title: "Combobox with Status Indicators"
-        description: "Combobox with online/offline status indicators"
-        ast:
-          tag: div
-          props:
-            class: "dg-combobox dg-combobox--with-status"
-          children:
-            - tag: label
-              props:
-                class: "dg-combobox__label"
-                for: "combobox-status"
-              children:
-                - "Assigned to"
-            - tag: div
-              props:
-                class: "dg-combobox__wrapper"
-              children:
-                - tag: input
-                  props:
-                    id: "combobox-status"
-                    type: text
-                    class: "dg-combobox__input"
-                - tag: button
-                  props:
-                    type: button
-                    class: "dg-combobox__toggle"
-                  children:
-                    - tag: svg
-                      props:
-                        class: "dg-combobox__toggle-icon"
-                        viewBox: "0 0 20 20"
-                        fill: "currentColor"
-                        aria-hidden: "true"
-                      children:
-                        - tag: path
-                          props:
-                            fill-rule: "evenodd"
-                            clip-rule: "evenodd"
-                            d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
-                - tag: ul
-                  props:
-                    class: "dg-combobox__options"
-                    role: "listbox"
-                  children:
-                    - tag: li
-                      props:
-                        class: "dg-combobox__option"
-                        role: "option"
-                      children:
-                        - tag: span
-                          props:
-                            class: "dg-combobox__status dg-combobox__status--online"
-                        - tag: span
-                          props:
-                            class: "dg-combobox__option-text"
-                          children:
-                            - "Leslie Alexander"
-                    - tag: li
-                      props:
-                        class: "dg-combobox__option"
-                        role: "option"
-                      children:
-                        - tag: span
-                          props:
-                            class: "dg-combobox__status dg-combobox__status--offline"
-                        - tag: span
-                          props:
-                            class: "dg-combobox__option-text"
-                          children:
-                            - "Michael Foster"
-                    - tag: li
-                      props:
-                        class: "dg-combobox__option selected"
-                        role: "option"
-                      children:
-                        - tag: span
-                          props:
-                            class: "dg-combobox__status dg-combobox__status--online"
-                        - tag: span
-                          props:
-                            class: "dg-combobox__option-text"
-                          children:
-                            - "Dries Vincent"
+  # combobox:
+  #   metadata:
+  #     title: "Comboboxes"
+  #     description: "Autocomplete combobox inputs with filterable dropdown options"
+  #     category: "application-ui"
+  #     section: "forms"
+  #     subsection: "comboboxes"
+  #     tags: [combobox, autocomplete, select, search, dropdown, form]
+  #   css:
+  #     ".dg-combobox":
+  #       apply: "relative block bg-transparent p-0 border-0 rounded-none"
+  #     ".dg-combobox__label":
+  #       apply: "block text-sm font-medium text-dg-text"
+  #       properties:
+  #         line-height: "1.5rem"
+  #     ".dg-combobox__wrapper":
+  #       apply: "relative mt-2 block"
+  #     ".dg-combobox__input":
+  #       apply: "block w-full rounded-md bg-white/5 py-1.5 pr-12 pl-3 text-base text-dg-text outline-1 -outline-offset-1 outline-white/10 placeholder:text-dg-slate sm:text-sm"
+  #       properties:
+  #         line-height: "1.5rem"
+  #     ".dg-combobox__input:focus":
+  #       apply: "outline-2 -outline-offset-2 outline-dg-primary"
+  #     ".dg-combobox__toggle":
+  #       apply: "absolute inset-y-0 right-0 flex items-center rounded-r-md px-2"
+  #     ".dg-combobox__toggle-icon":
+  #       apply: "size-5 text-dg-muted"
+  #     ".dg-combobox__options":
+  #       apply: "max-h-60 overflow-auto rounded-md bg-dg-charcoal py-1 text-base shadow-lg sm:text-sm"
+  #       properties:
+  #         outline: "1px solid color-mix(in srgb, white 10%, transparent)"
+  #         outline-offset: "-1px"
+  #     ".dg-combobox__option":
+  #       apply: "block truncate px-3 py-2 text-dg-platinum select-none cursor-pointer"
+  #     ".dg-combobox__option:hover":
+  #       apply: "bg-dg-primary text-dg-text"
+  #     ".dg-combobox__option.selected":
+  #       apply: "bg-dg-primary text-dg-text"
+  #     ".dg-combobox__option-text":
+  #       apply: "block truncate"
+  #     ".dg-combobox__check":
+  #       apply: "absolute inset-y-0 right-0 flex items-center pr-4 text-dg-text"
+  #     ".dg-combobox__check-icon":
+  #       apply: "size-5"
+  #   variants:
+  #     with-check:
+  #       css:
+  #         ".dg-combobox--with-check .dg-combobox__option":
+  #           apply: "relative pr-9"
+  #         ".dg-combobox--with-check .dg-combobox__option.selected .dg-combobox__check":
+  #           apply: "flex"
+  #     with-avatar:
+  #       css:
+  #         ".dg-combobox--with-avatar .dg-combobox__option":
+  #           apply: "flex items-center"
+  #           properties:
+  #             gap: "0.5rem"
+  #         ".dg-combobox__avatar":
+  #           apply: "size-6 shrink-0 rounded-full"
+  #     with-status:
+  #       css:
+  #         ".dg-combobox--with-status .dg-combobox__option":
+  #           apply: "flex items-center"
+  #           properties:
+  #             gap: "0.5rem"
+  #         ".dg-combobox__status":
+  #           apply: "inline-block size-2 shrink-0 rounded-full"
+  #         ".dg-combobox__status--online":
+  #           apply: "bg-dg-success"
+  #         ".dg-combobox__status--offline":
+  #           apply: "bg-dg-muted"
+  #   examples:
+  #     - title: "Simple Combobox"
+  #       description: "Basic autocomplete combobox with text options"
+  #       ast:
+  #         tag: div
+  #         props:
+  #           class: "dg-combobox"
+  #         children:
+  #           - tag: label
+  #             props:
+  #               class: "dg-combobox__label"
+  #               for: "combobox-simple"
+  #             children:
+  #               - "Assigned to"
+  #           - tag: div
+  #             props:
+  #               class: "dg-combobox__wrapper"
+  #             children:
+  #               - tag: input
+  #                 props:
+  #                   id: "combobox-simple"
+  #                   type: text
+  #                   class: "dg-combobox__input"
+  #               - tag: button
+  #                 props:
+  #                   type: button
+  #                   class: "dg-combobox__toggle"
+  #                 children:
+  #                   - tag: svg
+  #                     props:
+  #                       class: "dg-combobox__toggle-icon"
+  #                       viewBox: "0 0 20 20"
+  #                       fill: "currentColor"
+  #                       aria-hidden: "true"
+  #                     children:
+  #                       - tag: path
+  #                         props:
+  #                           fill-rule: "evenodd"
+  #                           clip-rule: "evenodd"
+  #                           d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
+  #               - tag: ul
+  #                 props:
+  #                   class: "dg-combobox__options"
+  #                   role: "listbox"
+  #                 children:
+  #                   - tag: li
+  #                     props:
+  #                       class: "dg-combobox__option"
+  #                       role: "option"
+  #                     children:
+  #                       - "Leslie Alexander"
+  #                   - tag: li
+  #                     props:
+  #                       class: "dg-combobox__option"
+  #                       role: "option"
+  #                     children:
+  #                       - "Michael Foster"
+  #                   - tag: li
+  #                     props:
+  #                       class: "dg-combobox__option selected"
+  #                       role: "option"
+  #                     children:
+  #                       - "Dries Vincent"
+  #     - title: "Combobox with Check Indicator"
+  #       description: "Combobox showing a checkmark on the selected option"
+  #       ast:
+  #         tag: div
+  #         props:
+  #           class: "dg-combobox dg-combobox--with-check"
+  #         children:
+  #           - tag: label
+  #             props:
+  #               class: "dg-combobox__label"
+  #               for: "combobox-check"
+  #             children:
+  #               - "Assigned to"
+  #           - tag: div
+  #             props:
+  #               class: "dg-combobox__wrapper"
+  #             children:
+  #               - tag: input
+  #                 props:
+  #                   id: "combobox-check"
+  #                   type: text
+  #                   class: "dg-combobox__input"
+  #               - tag: button
+  #                 props:
+  #                   type: button
+  #                   class: "dg-combobox__toggle"
+  #                 children:
+  #                   - tag: svg
+  #                     props:
+  #                       class: "dg-combobox__toggle-icon"
+  #                       viewBox: "0 0 20 20"
+  #                       fill: "currentColor"
+  #                       aria-hidden: "true"
+  #                     children:
+  #                       - tag: path
+  #                         props:
+  #                           fill-rule: "evenodd"
+  #                           clip-rule: "evenodd"
+  #                           d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
+  #               - tag: ul
+  #                 props:
+  #                   class: "dg-combobox__options"
+  #                   role: "listbox"
+  #                 children:
+  #                   - tag: li
+  #                     props:
+  #                       class: "dg-combobox__option"
+  #                       role: "option"
+  #                     children:
+  #                       - tag: span
+  #                         props:
+  #                           class: "dg-combobox__option-text"
+  #                         children:
+  #                           - "Leslie Alexander"
+  #                   - tag: li
+  #                     props:
+  #                       class: "dg-combobox__option selected"
+  #                       role: "option"
+  #                     children:
+  #                       - tag: span
+  #                         props:
+  #                           class: "dg-combobox__option-text"
+  #                         children:
+  #                           - "Tom Cook"
+  #                       - tag: span
+  #                         props:
+  #                           class: "dg-combobox__check"
+  #                         children:
+  #                           - tag: svg
+  #                             props:
+  #                               class: "dg-combobox__check-icon"
+  #                               viewBox: "0 0 20 20"
+  #                               fill: "currentColor"
+  #                               aria-hidden: "true"
+  #                             children:
+  #                               - tag: path
+  #                                 props:
+  #                                   fill-rule: "evenodd"
+  #                                   clip-rule: "evenodd"
+  #                                   d: "M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
+  #                   - tag: li
+  #                     props:
+  #                       class: "dg-combobox__option"
+  #                       role: "option"
+  #                     children:
+  #                       - tag: span
+  #                         props:
+  #                           class: "dg-combobox__option-text"
+  #                         children:
+  #                           - "Whitney Francis"
+  #     - title: "Combobox with Avatars"
+  #       description: "Combobox with user avatars next to each option"
+  #       ast:
+  #         tag: div
+  #         props:
+  #           class: "dg-combobox dg-combobox--with-avatar"
+  #         children:
+  #           - tag: label
+  #             props:
+  #               class: "dg-combobox__label"
+  #               for: "combobox-avatar"
+  #             children:
+  #               - "Assigned to"
+  #           - tag: div
+  #             props:
+  #               class: "dg-combobox__wrapper"
+  #             children:
+  #               - tag: input
+  #                 props:
+  #                   id: "combobox-avatar"
+  #                   type: text
+  #                   class: "dg-combobox__input"
+  #               - tag: button
+  #                 props:
+  #                   type: button
+  #                   class: "dg-combobox__toggle"
+  #                 children:
+  #                   - tag: svg
+  #                     props:
+  #                       class: "dg-combobox__toggle-icon"
+  #                       viewBox: "0 0 20 20"
+  #                       fill: "currentColor"
+  #                       aria-hidden: "true"
+  #                     children:
+  #                       - tag: path
+  #                         props:
+  #                           fill-rule: "evenodd"
+  #                           clip-rule: "evenodd"
+  #                           d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
+  #               - tag: ul
+  #                 props:
+  #                   class: "dg-combobox__options"
+  #                   role: "listbox"
+  #                 children:
+  #                   - tag: li
+  #                     props:
+  #                       class: "dg-combobox__option"
+  #                       role: "option"
+  #                     children:
+  #                       - tag: img
+  #                         props:
+  #                           class: "dg-combobox__avatar"
+  #                           src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+  #                           alt: ""
+  #                       - tag: span
+  #                         props:
+  #                           class: "dg-combobox__option-text"
+  #                         children:
+  #                           - "Leslie Alexander"
+  #                   - tag: li
+  #                     props:
+  #                       class: "dg-combobox__option selected"
+  #                       role: "option"
+  #                     children:
+  #                       - tag: img
+  #                         props:
+  #                           class: "dg-combobox__avatar"
+  #                           src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+  #                           alt: ""
+  #                       - tag: span
+  #                         props:
+  #                           class: "dg-combobox__option-text"
+  #                         children:
+  #                           - "Tom Cook"
+  #                   - tag: li
+  #                     props:
+  #                       class: "dg-combobox__option"
+  #                       role: "option"
+  #                     children:
+  #                       - tag: img
+  #                         props:
+  #                           class: "dg-combobox__avatar"
+  #                           src: "https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+  #                           alt: ""
+  #                       - tag: span
+  #                         props:
+  #                           class: "dg-combobox__option-text"
+  #                         children:
+  #                           - "Whitney Francis"
+  #     - title: "Combobox with Status Indicators"
+  #       description: "Combobox with online/offline status indicators"
+  #       ast:
+  #         tag: div
+  #         props:
+  #           class: "dg-combobox dg-combobox--with-status"
+  #         children:
+  #           - tag: label
+  #             props:
+  #               class: "dg-combobox__label"
+  #               for: "combobox-status"
+  #             children:
+  #               - "Assigned to"
+  #           - tag: div
+  #             props:
+  #               class: "dg-combobox__wrapper"
+  #             children:
+  #               - tag: input
+  #                 props:
+  #                   id: "combobox-status"
+  #                   type: text
+  #                   class: "dg-combobox__input"
+  #               - tag: button
+  #                 props:
+  #                   type: button
+  #                   class: "dg-combobox__toggle"
+  #                 children:
+  #                   - tag: svg
+  #                     props:
+  #                       class: "dg-combobox__toggle-icon"
+  #                       viewBox: "0 0 20 20"
+  #                       fill: "currentColor"
+  #                       aria-hidden: "true"
+  #                     children:
+  #                       - tag: path
+  #                         props:
+  #                           fill-rule: "evenodd"
+  #                           clip-rule: "evenodd"
+  #                           d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
+  #               - tag: ul
+  #                 props:
+  #                   class: "dg-combobox__options"
+  #                   role: "listbox"
+  #                 children:
+  #                   - tag: li
+  #                     props:
+  #                       class: "dg-combobox__option"
+  #                       role: "option"
+  #                     children:
+  #                       - tag: span
+  #                         props:
+  #                           class: "dg-combobox__status dg-combobox__status--online"
+  #                       - tag: span
+  #                         props:
+  #                           class: "dg-combobox__option-text"
+  #                         children:
+  #                           - "Leslie Alexander"
+  #                   - tag: li
+  #                     props:
+  #                       class: "dg-combobox__option"
+  #                       role: "option"
+  #                     children:
+  #                       - tag: span
+  #                         props:
+  #                           class: "dg-combobox__status dg-combobox__status--offline"
+  #                       - tag: span
+  #                         props:
+  #                           class: "dg-combobox__option-text"
+  #                         children:
+  #                           - "Michael Foster"
+  #                   - tag: li
+  #                     props:
+  #                       class: "dg-combobox__option selected"
+  #                       role: "option"
+  #                     children:
+  #                       - tag: span
+  #                         props:
+  #                           class: "dg-combobox__status dg-combobox__status--online"
+  #                       - tag: span
+  #                         props:
+  #                           class: "dg-combobox__option-text"
+  #                         children:
+  #                           - "Dries Vincent"