@deepgram/styles 0.0.1 → 0.0.4

package/lib/deepgram.css

@@ -4,6 +4,12 @@
  * A comprehensive, mobile-first CSS framework for consistent Deepgram starter UIs
  * Built with Tailwind CSS utility classes and custom @apply directives
  *
+ * Features:
+ * - Semantic color tokens via Tailwind theme
+ * - Mobile-first responsive components
+ * - BEM methodology with Tailwind utilities
+ * - Consistent spacing and typography
+ *
  * @version 3.0.0 - Tailwind Migration
  * @author Deepgram Starter UIs Team
  */
@@ -28,19 +34,19 @@
     @apply outline-none w-fit;
     @apply disabled:opacity-50 disabled:cursor-not-allowed;
     gap: 0.5rem;
-    height: 3rem; /* 48px */
+    height: 3rem;
   }
 
   /* Button Modifier: Small */
   .dg-btn--sm {
     @apply px-5 py-2;
     @apply font-bold text-sm;
-    height: 2.25rem; /* 36px */
+    height: 2.25rem;
   }
 
   /* Button Modifier: Primary - Gradient border with glow effect */
   .dg-btn--primary {
-    @apply border border-transparent relative text-white;
+    @apply border border-transparent relative dg-text-white;
     @apply dg-gradient-border dg-glow-cyan-green;
   }
 
@@ -55,14 +61,12 @@
   }
 
   .dg-btn--secondary:hover {
-    @apply border border-white bg-black text-white;
+    @apply border border-white bg-black dg-text-white;
   }
 
   /* Button Modifier: Ghost - Transparent with grey border */
   .dg-btn--ghost {
-    @apply border text-white;
-    background: transparent;
-    border-color: rgb(136, 136, 140);
+    @apply border border-dg-slate bg-transparent dg-text-white;
   }
 
   .dg-btn--ghost:hover {
@@ -72,14 +76,11 @@
 
   /* Button Modifier: Danger Ghost - For destructive actions */
   .dg-btn--danger-ghost {
-    @apply border text-white;
-    background: transparent;
-    border-color: rgb(240, 68, 56); /* --dg-danger */
+    @apply border border-dg-danger bg-transparent dg-text-white;
   }
 
   .dg-btn--danger-ghost:hover {
-    @apply border-transparent text-white;
-    background-color: rgb(240, 68, 56);
+    @apply border-transparent bg-dg-danger dg-text-white;
   }
 
   /* Button Modifier: Icon Only */
@@ -158,22 +159,16 @@
   }
 
   .dg-section--bordered {
-    @apply rounded-lg border;
-    background-color: rgb(26, 26, 31); /* --dg-charcoal */
-    border-color: rgb(78, 78, 82); /* --dg-pebble */
+    @apply rounded-lg border border-dg-pebble bg-dg-charcoal;
   }
 
   .dg-section--elevated {
-    @apply rounded-lg border;
-    background-color: rgb(26, 26, 31); /* --dg-charcoal */
-    border-color: rgb(78, 78, 82); /* --dg-pebble */
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    @apply rounded-lg border border-dg-pebble bg-dg-charcoal shadow-dg-md;
   }
 
   /* Fieldset-style section with legend title */
   .dg-section--fieldset {
-    @apply rounded-lg border relative;
-    border-color: rgb(78, 78, 82); /* --dg-pebble */
+    @apply rounded-lg border border-dg-pebble relative;
     padding-top: 2rem;
   }
 
@@ -184,17 +179,10 @@
   }
 
   .dg-section--fieldset .dg-section-heading {
-    position: absolute;
+    @apply absolute bg-dg-background dg-text-muted uppercase tracking-wide font-semibold;
+    @apply text-base px-2 m-0;
     top: -0.75rem;
     left: 1rem;
-    background-color: rgb(11, 11, 12); /* --dg-black */
-    padding: 0 0.5rem;
-    margin: 0;
-    font-size: 1rem;
-    color: rgb(148, 148, 152); /* --dg-slate */
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    font-weight: 600;
   }
 
   @media (min-width: 640px) {
@@ -205,135 +193,382 @@
 
   /* Card Component */
   .dg-card {
-    @apply w-full rounded-lg border;
-    background-color: rgb(26, 26, 31); /* --dg-charcoal */
-    border-color: rgb(78, 78, 82); /* --dg-pebble */
-    padding: 0.75rem;
-    margin-bottom: 0.75rem;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    transition: box-shadow 200ms;
+    @apply w-full rounded-lg border border-dg-pebble bg-dg-charcoal flex flex-col;
+    @apply p-3 mb-3 shadow-dg-sm transition-shadow duration-200;
   }
 
   @media (min-width: 640px) {
     .dg-card {
-      padding: 1rem;
-      margin-bottom: 1rem;
+      @apply p-4 mb-4;
     }
   }
 
   @media (min-width: 1024px) {
     .dg-card {
-      padding: 1.5rem;
+      @apply p-6;
     }
   }
 
   .dg-card:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    @apply shadow-dg-md;
   }
 
+  /* Card Modifiers */
   .dg-card--compact {
-    padding: 0.5rem;
+    @apply p-2;
   }
 
   @media (min-width: 640px) {
     .dg-card--compact {
-      padding: 0.75rem;
+      @apply p-3;
     }
   }
 
   .dg-card--spacious {
-    padding: 1rem;
+    @apply p-4;
   }
 
   @media (min-width: 640px) {
     .dg-card--spacious {
-      padding: 1.5rem;
+      @apply p-6;
     }
   }
 
   @media (min-width: 1024px) {
     .dg-card--spacious {
-      padding: 2rem;
+      @apply p-8;
     }
   }
 
   .dg-card--bordered {
-    border-width: 2px;
-    border-color: rgb(148, 148, 152); /* --dg-slate */
+    @apply border-2 border-dg-slate;
+  }
+
+  /* Card with structured layout (image, header, body, footer) */
+  .dg-card--structured {
+    @apply p-0 justify-between;
+  }
+
+  /* Selectable Card */
+  .dg-card--selectable {
+    @apply cursor-pointer transition-all duration-200;
+    @apply border-2 border-dg-pebble;
+    padding: 1.25rem;
+  }
+
+  .dg-card--selectable:hover {
+    @apply border-dg-slate;
+  }
+
+  .dg-card--selectable:has(input[type="radio"]:checked) {
+    @apply border-dg-primary;
+    background: rgba(19, 239, 149, 0.05);
+  }
+
+  /* Screen reader only utility */
+  .dg-sr-only {
+    @apply sr-only;
+  }
+
+  .dg-card--selectable input[type="radio"] {
+    @apply sr-only;
+  }
+
+  .dg-card--selectable__indicator {
+    @apply hidden;
+  }
+
+  .dg-card--selectable__icon {
+    @apply dg-text-white;
+    margin-right: 0.5rem;
+  }
+
+  .dg-card--selectable__content {
+    @apply flex-1 flex flex-col gap-1;
+  }
+
+  @media (max-width: 767px) {
+    .dg-card--selectable__content {
+      @apply flex-row items-center gap-3;
+    }
+  }
+
+  .dg-card--selectable .dg-item-title {
+    @apply text-base font-semibold dg-text-white;
+    display: flex;
+    align-items: center;
+  }
+
+  @media (max-width: 767px) {
+    .dg-card--selectable .dg-item-title {
+      margin-bottom: 0;
+      flex-shrink: 0;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .dg-card--selectable .dg-item-title {
+      margin-bottom: 0.25rem;
+    }
+  }
+
+  .dg-card--selectable .dg-prose {
+    @apply text-sm dg-text-muted;
+  }
+
+  @media (max-width: 767px) {
+    .dg-card--selectable .dg-prose {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  /* File Upload Card */
+  .dg-card--file-upload {
+    @apply cursor-pointer transition-all duration-200;
+    @apply border-2 border-dashed border-dg-pebble;
+    padding: 1.25rem;
+  }
+
+  .dg-card--file-upload:hover {
+    @apply border-dg-slate;
+  }
+
+  .dg-card--file-upload:has(input[type="checkbox"]:checked) {
+    @apply border-dg-primary border-solid;
+    background: rgba(19, 239, 149, 0.05);
+  }
+
+  .dg-card--file-upload input[type="file"],
+  .dg-card--file-upload input[type="checkbox"] {
+    @apply sr-only;
+  }
+
+  .dg-card--file-upload__icon {
+    @apply dg-text-white;
+    margin-right: 0.5rem;
+  }
+
+  .dg-card--file-upload__content {
+    @apply flex-1 flex flex-col gap-1;
+  }
+
+  @media (max-width: 767px) {
+    .dg-card--file-upload__content {
+      @apply flex-row items-center gap-3;
+    }
+  }
+
+  .dg-card--file-upload .dg-item-title {
+    @apply text-base font-semibold dg-text-white;
+    display: flex;
+    align-items: center;
+  }
+
+  @media (max-width: 767px) {
+    .dg-card--file-upload .dg-item-title {
+      margin-bottom: 0;
+      flex-shrink: 0;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .dg-card--file-upload .dg-item-title {
+      margin-bottom: 0.25rem;
+    }
+  }
+
+  .dg-card--file-upload .dg-prose {
+    @apply text-sm dg-text-muted;
+  }
+
+  @media (max-width: 767px) {
+    .dg-card--file-upload .dg-prose {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  /* Card Image */
+  .dg-card__image {
+    @apply w-full overflow-hidden flex-shrink-0;
+    border-radius: 0.5rem 0.5rem 0 0; /* Rounded top corners only */
+  }
+
+  .dg-card__image img {
+    @apply w-full h-full object-cover block;
+  }
+
+  /* Card Image Size Modifiers */
+  .dg-card__image--small {
+    @apply h-[7.5rem];
+  }
+
+  .dg-card__image--medium {
+    @apply h-[10rem];
+  }
+
+  .dg-card__image--large {
+    @apply h-[15rem];
+  }
+
+  .dg-card__image--aspect-4-3 {
+    @apply aspect-[4/3] h-auto;
+  }
+
+  /* Card Icon */
+  .dg-card__icon {
+    @apply flex items-center p-3 pt-6;
+  }
+
+  @media (min-width: 640px) {
+    .dg-card__icon {
+      @apply p-4 pt-8;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .dg-card__icon {
+      @apply px-6 pb-6 pt-10;
+    }
+  }
+
+  .dg-card__icon i,
+  .dg-card__icon svg {
+    @apply text-5xl dg-text-primary;
+  }
+
+  /* Card Icon Alignment Modifiers */
+  .dg-card__icon--left {
+    @apply justify-start;
+  }
+
+  .dg-card__icon--center {
+    @apply justify-center;
+  }
+
+  .dg-card__icon--right {
+    @apply justify-end;
+  }
+
+  /* Card Header */
+  .dg-card__header {
+    @apply flex flex-col gap-2 p-3;
+  }
+
+  @media (min-width: 640px) {
+    .dg-card__header {
+      @apply p-4;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .dg-card__header {
+      @apply px-6 pt-6 pb-0;
+    }
+  }
+
+  /* Card Body */
+  .dg-card__body {
+    @apply flex flex-col gap-3 p-3 flex-1;
+  }
+
+  @media (min-width: 640px) {
+    .dg-card__body {
+      @apply p-4;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .dg-card__body {
+      @apply px-6 pb-6 pt-0;
+    }
+  }
+
+  /* Card Footer */
+  .dg-card__footer {
+    @apply flex items-center gap-3 p-3 border-t border-transparent mt-auto;
+  }
+
+  @media (min-width: 640px) {
+    .dg-card__footer {
+      @apply p-4;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .dg-card__footer {
+      @apply p-6;
+    }
+  }
+
+  /* Card Footer with Border */
+  .dg-card__footer--bordered {
+    @apply border-t-dg-pebble;
   }
 
   /* Code Block Component */
   .dg-code-block {
-    @apply w-full rounded-lg border overflow-auto;
-    background-color: rgb(26, 26, 31);
-    border-color: rgb(78, 78, 82);
-    padding: 0.5rem;
-    margin: 0.75rem 0;
-    max-height: 200px;
+    @apply w-full rounded-lg border border-dg-pebble bg-dg-charcoal overflow-auto;
+    @apply p-2 my-3 max-h-[12.5rem];
     -webkit-overflow-scrolling: touch;
   }
 
   @media (min-width: 640px) {
     .dg-code-block {
-      padding: 0.75rem;
-      margin: 1rem 0;
-      max-height: 250px;
+      @apply p-3 my-4 max-h-[15.625rem];
     }
   }
 
   @media (min-width: 1024px) {
     .dg-code-block {
-      max-height: 300px;
+      @apply max-h-[18.75rem];
     }
   }
 
   .dg-code-block pre {
-    @apply m-0 p-0;
-    font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
-    font-size: 0.75rem;
+    @apply m-0 p-0 font-dg-mono text-xs dg-text-fog whitespace-pre-wrap break-words;
     line-height: 1.3;
-    color: rgb(237, 237, 242); /* --dg-fog-gray */
-    white-space: pre-wrap;
-    word-wrap: break-word;
   }
 
   @media (min-width: 640px) {
     .dg-code-block pre {
-      font-size: 0.875rem;
+      @apply text-sm;
     }
   }
 
   .dg-code-block--compact {
-    max-height: 120px;
-    padding: 0.25rem;
+    @apply max-h-[7.5rem] p-1;
   }
 
   @media (min-width: 640px) {
     .dg-code-block--compact {
-      max-height: 150px;
-      padding: 0.5rem;
+      @apply max-h-[9.375rem] p-2;
     }
   }
 
   .dg-code-block--tall {
-    max-height: 300px;
+    @apply max-h-[18.75rem];
   }
 
   @media (min-width: 640px) {
     .dg-code-block--tall {
-      max-height: 400px;
+      @apply max-h-[25rem];
     }
   }
 
   @media (min-width: 1024px) {
     .dg-code-block--tall {
-      max-height: 500px;
+      @apply max-h-[31.25rem];
     }
   }
 
   .dg-code-block--no-scroll {
-    @apply overflow-visible;
-    max-height: none;
+    @apply overflow-visible max-h-none;
   }
 
   /* ==========================================================================
@@ -342,156 +577,117 @@
 
   /* Hero Title */
   .dg-hero-title {
-    @apply text-center font-bold;
-    font-family: "Noto Sans", sans-serif;
-    background: linear-gradient(90deg, rgb(20, 154, 251) -30.22%, rgb(19, 239, 149) 78.93%);
-    -webkit-background-clip: text;
+    @apply text-center font-bold font-dg-noto text-5xl leading-tight mb-6;
+    @apply bg-gradient-to-r from-dg-secondary to-dg-primary bg-clip-text;
     -webkit-text-fill-color: transparent;
-    background-clip: text;
     letter-spacing: -0.02em;
     font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "ordn" 0, "ss09", "kern";
     font-kerning: normal;
-    font-size: 3rem;
-    line-height: 1.1;
-    margin: 0 0 1.5rem 0;
   }
 
   @media (max-width: 1024px) {
     .dg-hero-title {
-      font-size: 2.5rem;
+      @apply text-4xl;
     }
   }
 
   @media (max-width: 768px) {
     .dg-hero-title {
-      font-size: 2rem;
+      @apply text-3xl;
     }
   }
 
   @media (max-width: 640px) {
     .dg-hero-title {
-      font-size: 1.75rem;
+      @apply text-2xl;
     }
   }
 
   /* Hero Section Container */
   .dg-hero {
-    @apply w-full text-center;
-    padding: 4rem 1rem;
+    @apply w-full text-center py-16 px-4;
   }
 
   @media (max-width: 768px) {
     .dg-hero {
-      padding: 3rem 1rem;
+      @apply py-12 px-4;
     }
   }
 
   @media (max-width: 640px) {
     .dg-hero {
-      padding: 2rem 1rem;
+      @apply py-8 px-4;
     }
   }
 
   /* Hero Content Container */
   .dg-hero__content {
-    @apply flex flex-col;
-    gap: 1.5rem;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 850px;
+    @apply flex flex-col gap-6 mx-auto max-w-[53.125rem];
   }
 
   @media (max-width: 768px) {
     .dg-hero__content {
-      gap: 1.25rem;
+      @apply gap-5;
     }
   }
 
   /* Hero Announcement Banner */
   .dg-hero__announcement {
-    @apply inline-flex items-center justify-center;
-    @apply rounded-full border;
-    background-color: rgba(0, 0, 0, 0.5);
-    border-color: rgba(148, 148, 152, 0.3);
-    padding: 0.5rem 1.25rem;
-    margin: 0 auto 0.5rem;
-    text-decoration: none;
-    transition: all 200ms;
-    cursor: pointer;
-    width: fit-content;
-    gap: 0.75rem;
+    @apply inline-flex items-center justify-center rounded-full border;
+    @apply bg-dg-translucent border-dg-slate/30 py-2 px-5 mx-auto mb-2;
+    @apply no-underline cursor-pointer w-fit gap-3 transition-all duration-200;
   }
 
   .dg-hero__announcement:hover {
-    border-color: rgb(19, 239, 149);
+    @apply border-dg-primary -translate-y-0.5;
     background-color: rgba(19, 239, 149, 0.1);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(19, 239, 149, 0.15);
+    box-shadow: 0 0.25rem 0.75rem rgba(19, 239, 149, 0.15);
   }
 
   .dg-hero__announcement-text {
-    color: rgb(251, 251, 255);
-    font-size: 0.875rem;
-    font-weight: 400;
-    white-space: nowrap;
+    @apply dg-text-white text-sm font-normal whitespace-nowrap;
   }
 
   @media (max-width: 640px) {
     .dg-hero__announcement-text {
-      font-size: 0.75rem;
-      white-space: normal;
+      @apply text-xs whitespace-normal;
     }
   }
 
   .dg-hero__announcement-cta {
-    @apply inline-flex items-center;
-    color: rgb(20, 154, 251);
-    font-size: 0.875rem;
-    font-weight: 600;
-    gap: 0.5rem;
-    transition: gap 200ms;
+    @apply inline-flex items-center dg-text-secondary text-sm font-semibold gap-2 transition-[gap] duration-200;
   }
 
   .dg-hero__announcement:hover .dg-hero__announcement-cta {
-    gap: 0.75rem;
+    @apply gap-3;
   }
 
   @media (max-width: 640px) {
     .dg-hero__announcement-cta {
-      font-size: 0.75rem;
+      @apply text-xs;
     }
   }
 
   /* Hero Body Text */
   .dg-hero__body {
-    @apply text-center;
-    color: rgb(237, 237, 242);
-    font-size: 1.125rem;
-    line-height: 1.75;
-    font-weight: 400;
-    margin: 0 auto;
-    max-width: 850px;
+    @apply text-center dg-text-fog text-lg leading-7 font-normal mx-auto max-w-[53.125rem];
   }
 
   @media (max-width: 768px) {
     .dg-hero__body {
-      font-size: 1rem;
-      line-height: 1.6;
+      @apply text-base leading-relaxed;
     }
   }
 
   @media (max-width: 640px) {
     .dg-hero__body {
-      font-size: 0.9375rem;
-      line-height: 1.5;
+      @apply text-[0.9375rem] leading-normal;
     }
   }
 
   /* Hero Actions */
   .dg-hero__actions {
-    @apply flex items-center justify-center flex-wrap;
-    gap: 1rem;
-    margin-top: 0.5rem;
+    @apply flex items-center justify-center flex-wrap gap-4 mt-2;
   }
 
   @media (max-width: 640px) {
@@ -506,52 +702,100 @@
 
   /* Section Heading */
   .dg-section-heading {
-    @apply font-semibold;
-    font-family: "Noto Sans", sans-serif;
-    font-size: 1.5rem;
-    color: rgb(251, 251, 255); /* --dg-ghost-white */
-    margin: 0 0 1.5rem 0;
+    @apply font-semibold font-dg-noto text-2xl dg-text-white mb-6;
+    @apply flex flex-wrap items-baseline gap-2;
   }
 
   @media (max-width: 640px) {
     .dg-section-heading {
-      font-size: 1.25rem;
-      margin-bottom: 0.75rem;
+      @apply text-xl mb-3 gap-1.5;
+    }
+  }
+
+  /* Small text within section heading */
+  .dg-section-heading small {
+    @apply font-normal text-base dg-text-muted;
+  }
+
+  @media (max-width: 640px) {
+    .dg-section-heading small {
+      @apply text-sm;
+    }
+  }
+
+  /* Page Heading */
+  .dg-page-heading {
+    @apply mb-8;
+  }
+
+  @media (max-width: 640px) {
+    .dg-page-heading {
+      @apply mb-6;
+    }
+  }
+
+  .dg-page-heading__title {
+    @apply font-semibold font-dg-noto text-4xl dg-text-white mb-2 leading-tight;
+  }
+
+  @media (max-width: 768px) {
+    .dg-page-heading__title {
+      @apply text-3xl;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .dg-page-heading__title {
+      @apply text-2xl;
+    }
+  }
+
+  .dg-page-heading__description {
+    @apply dg-text-muted text-lg leading-relaxed m-0 max-w-[65ch];
+  }
+
+  @media (max-width: 768px) {
+    .dg-page-heading__description {
+      @apply text-base;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .dg-page-heading__description {
+      @apply text-[0.9375rem];
     }
   }
 
   /* Card Heading */
   .dg-card-heading {
-    @apply font-medium;
-    font-family: "Noto Sans", sans-serif;
-    font-size: 1.25rem;
-    color: rgb(251, 251, 255);
-    margin: 0 0 0.75rem 0;
+    @apply font-medium font-dg-noto text-xl dg-text-white mb-3;
+    @apply flex flex-wrap items-baseline gap-1.5;
+  }
+
+  /* Small text within card heading */
+  .dg-card-heading small {
+    @apply font-normal text-sm dg-text-muted;
   }
 
   /* Item Title */
   .dg-item-title {
-    @apply font-medium;
-    font-family: "Noto Sans", sans-serif;
-    font-size: 1rem;
-    color: rgb(251, 251, 255);
-    margin: 0 0 0.25rem 0;
+    @apply font-medium font-dg-noto text-base dg-text-white mb-1;
+    @apply flex flex-wrap items-baseline gap-1;
+  }
+
+  /* Small text within item title */
+  .dg-item-title small {
+    @apply font-normal text-xs dg-text-muted;
   }
 
   /* Prose Text */
   .dg-prose {
-    @apply w-full;
-    color: rgb(237, 237, 242); /* --dg-fog-gray */
-    font-size: 0.875rem;
-    line-height: 1.4;
-    margin-bottom: 0.75rem;
+    @apply w-full dg-text-fog text-sm leading-snug mb-3;
   }
 
   @media (min-width: 640px) {
     .dg-prose {
-      font-size: 1rem;
-      margin-bottom: 1rem;
-      max-width: 65ch;
+      @apply text-base mb-4 max-w-[65ch];
     }
   }
 
@@ -560,110 +804,283 @@
   }
 
   .dg-prose--large {
-    font-size: 1rem;
+    @apply text-base;
   }
 
   @media (min-width: 640px) {
     .dg-prose--large {
-      font-size: 1.125rem;
+      @apply text-lg;
     }
   }
 
   @media (min-width: 1024px) {
     .dg-prose--large {
-      font-size: 1.25rem;
+      @apply text-xl;
     }
   }
 
   .dg-prose--small {
-    font-size: 0.75rem;
-    color: rgb(225, 225, 229); /* --dg-platinum */
+    @apply text-xs dg-text-muted;
   }
 
   @media (min-width: 640px) {
     .dg-prose--small {
-      font-size: 0.875rem;
+      @apply text-sm;
     }
   }
 
+  /* ==========================================================================
+     FORM COMPONENTS
+     ========================================================================== */
+
+  /* Form Input Base Styles */
+  .dg-input {
+    @apply w-full px-4 py-3 rounded border border-dg-pebble bg-dg-charcoal;
+    @apply dg-text-white font-dg-sans text-sm;
+    @apply outline-none transition-all duration-300;
+    @apply shadow-dg-sm;
+    height: 2.75rem;
+  }
+
+  .dg-input::placeholder {
+    @apply dg-text-muted;
+  }
+
+  .dg-input:focus {
+    @apply border-dg-primary;
+    box-shadow: 0 0 0 0.0625rem theme("colors.dg-primary");
+  }
+
+  .dg-input:disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  .dg-input--inline {
+    @apply min-w-[12.5rem];
+  }
+
+  .dg-input--full {
+    @apply max-w-none;
+  }
+
+  /* Select (dropdown) specific */
+  .dg-input[type="select"],
+  select.dg-input {
+    @apply appearance-none;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='rgb(255,255,255)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 0.75rem center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+    padding-right: 2.5rem;
+  }
+
+  /* Textarea */
+  .dg-textarea {
+    @apply dg-input;
+    min-height: 6.25rem;
+    resize: vertical;
+    height: auto;
+  }
+
+  /* Checkbox */
+  .dg-checkbox {
+    @apply appearance-none w-5 h-5 rounded border border-dg-pebble bg-dg-charcoal;
+    @apply cursor-pointer transition-all duration-200;
+    @apply flex-shrink-0;
+    position: relative;
+  }
+
+  .dg-checkbox:checked {
+    @apply bg-dg-primary border-dg-primary;
+  }
+
+  .dg-checkbox:checked::after {
+    content: "";
+    position: absolute;
+    left: 0.375rem;
+    top: 0.125rem;
+    width: 0.3125rem;
+    height: 0.625rem;
+    border: solid black;
+    border-width: 0 0.125rem 0.125rem 0;
+    transform: rotate(45deg);
+  }
+
+  .dg-checkbox:focus {
+    @apply outline-none;
+    box-shadow: 0 0 0 0.125rem theme("colors.dg-primary/50");
+  }
+
+  /* Checkbox Label */
+  .dg-checkbox-label {
+    @apply flex items-start gap-2 cursor-pointer text-sm dg-text-fog;
+  }
+
+  .dg-checkbox-label:hover .dg-checkbox {
+    @apply border-dg-slate;
+  }
+
+  /* Checkbox Description Container */
+  .dg-checkbox-description {
+    @apply flex flex-col gap-2;
+  }
+
+  /* Checkbox Group Container */
+  .dg-checkbox-group {
+    @apply flex flex-col gap-3;
+  }
+
+  /* Form Field */
+  .dg-form-field {
+    @apply flex flex-col gap-3 mb-4 w-full;
+  }
+
+  @media (min-width: 640px) {
+    .dg-form-field {
+      @apply max-w-md;
+    }
+  }
+
+  .dg-form-field--full {
+    @apply max-w-none;
+  }
+
+  /* Form Field Error State */
+  .dg-form-field--error .dg-input,
+  .dg-form-field--error .dg-textarea {
+    @apply border-dg-danger;
+  }
+
+  .dg-form-field--error .dg-form-helper {
+    @apply dg-text-danger;
+  }
+
+  /* Form Field Success State */
+  .dg-form-field--success .dg-input,
+  .dg-form-field--success .dg-textarea {
+    @apply border-dg-success;
+  }
+
+  .dg-form-field--success .dg-form-helper {
+    @apply dg-text-success;
+  }
+
+  /* Form Label */
+  .dg-form-label {
+    @apply text-sm font-medium dg-text-white;
+  }
+
+  /* Form Error Message (deprecated - use dg-form-helper with dg-form-field--error) */
+  .dg-form-error {
+    @apply text-xs dg-text-danger block;
+    margin: 0;
+  }
+
+  /* Form Helper Text */
+  .dg-form-helper {
+    @apply text-xs dg-text-muted block;
+    margin: 0;
+  }
+
+  /* File Upload / Drag & Drop Zone */
+  .dg-drag-drop-zone {
+    @apply relative border-2 border-dashed border-dg-pebble rounded-lg;
+    @apply bg-dg-charcoal transition-all duration-200;
+    @apply flex flex-col items-center justify-center gap-3;
+    @apply cursor-pointer;
+    padding: 3rem 2rem;
+    min-height: 12.5rem;
+  }
+
+  .dg-drag-drop-zone:hover {
+    @apply border-dg-slate bg-dg-background;
+  }
+
+  .dg-drag-drop-zone.drag-over {
+    @apply border-dg-primary bg-dg-translucent;
+  }
+
+  .dg-drag-drop-zone__input {
+    @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
+  }
+
+  .dg-drag-drop-zone__icon {
+    @apply text-5xl dg-text-muted;
+  }
+
+  .dg-drag-drop-zone:hover .dg-drag-drop-zone__icon {
+    @apply dg-text-primary;
+  }
+
+  .dg-drag-drop-zone__text {
+    @apply text-base dg-text-white font-medium;
+  }
+
+  .dg-drag-drop-zone__hint {
+    @apply text-sm dg-text-muted;
+  }
+
   /* ==========================================================================
      STATUS & FEEDBACK COMPONENTS
      ========================================================================== */
 
   /* Status Banner */
   .dg-status {
-    @apply w-full italic;
-    color: rgb(237, 237, 242);
-    padding: 0.25rem 0;
-    margin: 0.5rem 0;
-    font-size: 0.875rem;
-    line-height: 1.3;
+    @apply w-full italic dg-text-fog text-sm leading-snug py-1 my-2;
   }
 
   @media (min-width: 640px) {
     .dg-status {
-      font-size: 1rem;
-      padding: 0.5rem 0;
-      margin: 0.75rem 0;
+      @apply text-base py-2 my-3;
     }
   }
 
   .dg-status--info {
-    color: rgb(237, 237, 242);
+    @apply dg-text-fog;
   }
 
   .dg-status--success {
-    color: rgb(18, 183, 106); /* --dg-success */
+    @apply dg-text-success;
   }
 
   .dg-status--warning {
-    color: rgb(254, 200, 75); /* --dg-warning */
+    @apply dg-text-warning;
   }
 
   .dg-status--error {
-    color: rgb(240, 68, 56); /* --dg-danger */
+    @apply dg-text-danger;
   }
 
   .dg-status--primary {
-    color: rgb(19, 239, 147); /* --dg-primary */
+    @apply dg-text-primary;
   }
 
   .dg-status--secondary {
-    color: rgb(20, 154, 251); /* --dg-secondary */
+    @apply dg-text-secondary;
   }
 
   .dg-status--with-icon {
-    @apply flex items-start;
-    gap: 0.25rem;
+    @apply flex items-start gap-1;
   }
 
   .dg-status--with-icon .dg-status__icon {
-    @apply flex-shrink-0;
-    font-size: 1em;
-    margin-top: 0.1em;
+    @apply flex-shrink-0 text-[1em] mt-[0.1em];
   }
 
   .dg-status--compact {
-    margin: 0.25rem 0;
-    padding: 0.125rem 0;
-    font-size: 0.75rem;
+    @apply my-1 py-0.5 text-xs;
   }
 
   @media (min-width: 640px) {
     .dg-status--compact {
-      font-size: 0.875rem;
+      @apply text-sm;
     }
   }
 
   /* Spinner */
   .dg-spinner {
-    @apply rounded-full;
-    width: 40px;
-    height: 40px;
-    border: 3px solid rgb(78, 78, 82);
-    border-top: 3px solid rgb(19, 239, 147);
-    animation: dg-spin 1s linear infinite;
-    margin: 0 auto 0.75rem;
+    @apply rounded-full size-10 border-[3px] border-dg-pebble border-t-dg-primary;
+    @apply mx-auto mb-3 animate-spin;
   }
 
   @keyframes dg-spin {
@@ -677,18 +1094,12 @@
 
   /* Processing Title */
   .dg-processing-title {
-    @apply font-medium;
-    font-family: "Noto Sans", sans-serif;
-    font-size: 1.25rem;
-    color: rgb(251, 251, 255);
-    margin: 0 0 0.25rem 0;
+    @apply font-medium font-dg-noto text-xl dg-text-white mb-1;
   }
 
   /* Modal Overlay */
   .dg-modal-overlay {
-    @apply hidden fixed inset-0 items-center justify-center;
-    background-color: rgba(0, 0, 0, 0.8);
-    z-index: 50;
+    @apply hidden fixed inset-0 items-center justify-center bg-black/80 z-50;
   }
 
   .dg-modal-overlay.visible,
@@ -697,9 +1108,7 @@
   }
 
   .dg-modal-content {
-    @apply text-center;
-    max-width: 400px;
-    margin: 0.75rem;
+    @apply text-center max-w-[25rem] m-3;
   }
 
   /* ==========================================================================
@@ -713,28 +1122,23 @@
 
   @media (min-width: 640px) {
     .dg-constrain-width {
-      max-width: 960px;
-      margin-left: auto;
-      margin-right: auto;
+      @apply max-w-[70rem] mx-auto;
     }
   }
 
   /* Center Horizontally - Complements dg-constrain-width */
   .dg-center-h {
-    margin-left: auto;
-    margin-right: auto;
+    @apply mx-auto;
   }
 
   /* Responsive Grid */
   .dg-grid-mobile-stack {
-    @apply flex flex-col;
-    gap: 1rem;
+    @apply flex flex-col gap-4;
   }
 
   @media (min-width: 640px) {
     .dg-grid-mobile-stack {
-      @apply flex-row;
-      gap: 1rem;
+      @apply flex-row gap-4;
     }
   }
 
@@ -744,8 +1148,7 @@
 
   /* Action Group */
   .dg-action-group {
-    @apply flex flex-wrap justify-center;
-    gap: 1rem;
+    @apply flex flex-wrap justify-center gap-4;
   }
 
   @media (max-width: 640px) {
@@ -758,15 +1161,328 @@
     }
   }
 
+  /* Header */
+  .dg-header {
+    @apply w-full;
+    background: #050506; /* dg-almost-black */
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .dg-header__container {
+    @apply flex items-center justify-between max-w-screen-2xl mx-auto;
+  }
+
+  .dg-header__logo {
+    @apply flex items-center gap-3;
+  }
+
+  .dg-header__logo-image {
+    @apply h-8 w-auto;
+  }
+
+  .dg-header__logo-text {
+    @apply font-dg-noto font-bold text-xl dg-text-white;
+  }
+
+  .dg-header__nav {
+    @apply flex items-center gap-4;
+  }
+
+  .dg-header__profile-link {
+    @apply -m-1.5 p-1.5 block;
+  }
+
+  .dg-header__profile-avatar {
+    @apply size-8 rounded-full bg-gray-800 outline -outline-offset-1 outline-white/10;
+  }
+
+  @media (max-width: 768px) {
+    .dg-header {
+      padding: 0.75rem 1rem;
+    }
+
+    .dg-header__logo-text {
+      @apply text-lg;
+    }
+  }
+
   /* Footer */
   .dg-footer {
-    @apply text-center border-t;
-    border-color: rgb(78, 78, 82);
-    margin-top: 4rem;
+    @apply text-center border-t border-dg-pebble mt-16;
   }
 
   /* Text Center Utility */
   .dg-text-center {
     @apply text-center;
   }
+
+  /* Text Color Utilities */
+  .dg-text-danger {
+    @apply text-dg-danger;
+  }
+
+  .dg-text-success {
+    @apply text-dg-success;
+  }
+
+  .dg-text-warning {
+    @apply text-dg-warning;
+  }
+
+  .dg-text-primary {
+    @apply text-dg-primary;
+  }
+
+  .dg-text-secondary {
+    @apply text-dg-secondary;
+  }
+
+  .dg-text-muted {
+    @apply text-dg-muted;
+  }
+
+  .dg-text-fog {
+    @apply text-dg-fog;
+  }
+
+  .dg-text-white {
+    @apply text-white;
+  }
+
+  /* Newsletter Layout */
+  .dg-newsletter-container {
+    @apply flex flex-col gap-4;
+  }
+
+  .dg-newsletter-container--compact {
+    @apply flex flex-col gap-3;
+  }
+
+  .dg-newsletter-form {
+    @apply flex flex-col gap-4;
+  }
+
+  .dg-newsletter-form--compact {
+    @apply flex flex-col gap-3;
+  }
+
+  .dg-newsletter-form--inline {
+    @apply flex gap-2 w-full;
+  }
+
+  @media (min-width: 640px) {
+    .dg-newsletter-form--inline {
+      @apply w-auto;
+    }
+  }
+
+  .dg-newsletter-header {
+    @apply flex flex-col gap-3 items-start;
+  }
+
+  @media (min-width: 640px) {
+    .dg-newsletter-header {
+      @apply flex-row items-center;
+    }
+  }
+
+  .dg-newsletter-header__content {
+    @apply flex-1;
+  }
+
+  .dg-newsletter-header__actions {
+    @apply w-full;
+  }
+
+  @media (min-width: 640px) {
+    .dg-newsletter-header__actions {
+      @apply w-auto;
+    }
+  }
+
+  /* Logo Container */
+  .dg-logo-container {
+    @apply flex justify-center;
+  }
+
+  .dg-logo {
+    @apply h-8 w-auto;
+  }
+
+  /* Social Links Container */
+  .dg-social-links {
+    @apply flex justify-center gap-4;
+  }
+
+  /* Typography Utilities */
+  .dg-text-tagline {
+    @apply text-center dg-text-fog text-sm;
+  }
+
+  .dg-text-subtitle {
+    @apply dg-text-fog text-sm;
+  }
+
+  .dg-text-heading {
+    @apply dg-text-white text-base font-medium;
+  }
+
+  .dg-text-heading--with-margin {
+    @apply dg-text-white text-base font-medium mb-1;
+  }
+
+  .dg-text-legal {
+    @apply text-xs dg-text-muted text-center;
+  }
+
+  /* ==========================================================================
+     MULTI-COLUMN LAYOUT COMPONENTS
+
+     Responsive collapse pattern:
+     - Mobile (< 768px): All columns stacked vertically
+     - Tablet (768px+): Right sidebar moves to side, left stacked on top
+     - Desktop (1024px+): All three columns side-by-side
+     ========================================================================== */
+
+  /* Column Container - parent wrapper for all columns */
+  .dg-columns {
+    @apply flex flex-col w-full;
+  }
+
+  /* At tablet: show right sidebar on the side */
+  @media (min-width: 768px) {
+    .dg-columns {
+      @apply flex-row;
+    }
+  }
+
+  /* Column Wrapper - groups left sidebar and main content together */
+  .dg-columns__wrapper {
+    @apply flex flex-col flex-1 min-w-0;
+  }
+
+  /* At desktop: show left sidebar on the side */
+  @media (min-width: 1024px) {
+    .dg-columns__wrapper {
+      @apply flex-row;
+    }
+  }
+
+  /* Base Column - padding for all columns */
+  .dg-column {
+    @apply px-4 py-6 min-w-0;
+  }
+
+  @media (min-width: 640px) {
+    .dg-column {
+      @apply px-6;
+    }
+  }
+
+  /* Main Content Column - always fills available space */
+  .dg-column--main {
+    @apply flex-1;
+  }
+
+  /* Left Sidebar - fixed width on desktop, full width on mobile/tablet */
+  .dg-column--sidebar-left {
+    /* Layout only - no colors */
+  }
+
+  @media (min-width: 1024px) {
+    .dg-column--sidebar-left {
+      @apply w-48 flex-shrink-0;
+    }
+
+    .dg-column--sidebar-left.dg-column--sm {
+      @apply w-64 flex-shrink-0;
+    }
+
+    .dg-column--sidebar-left.dg-column--lg {
+      @apply w-96 flex-shrink-0;
+    }
+
+    .dg-column--sidebar-left.dg-column--xl {
+      @apply w-128 flex-shrink-0;
+    }
+  }
+
+  /* Right Sidebar - fixed width on tablet+, full width on mobile */
+  .dg-column--sidebar-right {
+    /* Layout only - no colors */
+    position: relative;
+  }
+
+  /* Between 768px and 1280px: Floating sidebar with toggle */
+  @media (min-width: 768px) and (max-width: 1279px) {
+    .dg-column--sidebar-right {
+      position: fixed;
+      top: 65px; /* Account for header height */
+      right: 0;
+      height: calc(100vh - 65px);
+      @apply w-64 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 {
+      @apply w-80;
+    }
+
+    .dg-column--sidebar-right.dg-column--lg {
+      @apply w-96;
+    }
+
+    .dg-column--sidebar-right.dg-column--xl {
+      @apply w-128;
+    }
+
+    /* Collapsed state - slide mostly off screen but leave button visible */
+    .dg-column--sidebar-right.collapsed {
+      transform: translateX(calc(100% - 2rem));
+    }
+  }
+
+  /* Above 1280px: Normal sidebar behavior */
+  @media (min-width: 1280px) {
+    .dg-column--sidebar-right {
+      @apply w-64 flex-shrink-0;
+    }
+
+    .dg-column--sidebar-right.dg-column--sm {
+      @apply w-80 flex-shrink-0;
+    }
+
+    .dg-column--sidebar-right.dg-column--lg {
+      @apply w-96 flex-shrink-0;
+    }
+
+    .dg-column--sidebar-right.dg-column--xl {
+      @apply w-128 flex-shrink-0;
+    }
+  }
+
+  /* ==========================================================================
+     LINK COMPONENTS
+     ========================================================================== */
+
+  /* Primary Link with hover effect */
+  .dg-link {
+    @apply dg-text-primary transition-opacity duration-200;
+  }
+
+  .dg-link:hover {
+    @apply opacity-80;
+  }
+
+  /* Social Icon Link */
+  .dg-social-link {
+    @apply dg-text-fog transition-colors duration-200 text-xl;
+  }
+
+  .dg-social-link:hover {
+    @apply dg-text-primary;
+  }
 }