@deepgram/styles 0.2.10 → 0.2.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (182) hide show
  1. package/LICENSE +12 -19
  2. package/README.md +354 -386
  3. package/design-system.yaml +3742 -3869
  4. package/dist/deepgram.css +1 -1
  5. package/dist/deepgram.expanded.css +750 -1607
  6. package/dist/logo/lettermark-circle-dark.svg +15 -0
  7. package/dist/logo/lettermark-circle-light.svg +15 -0
  8. package/dist/logo/lettermark-circle.svg +27 -0
  9. package/dist/logo/lettermark-dark.svg +3 -0
  10. package/dist/logo/lettermark-light.svg +3 -0
  11. package/dist/logo/lettermark-square-dark.svg +10 -0
  12. package/dist/logo/lettermark-square-light.svg +10 -0
  13. package/dist/logo/lettermark-square.svg +22 -0
  14. package/dist/logo/lettermark.svg +9 -0
  15. package/dist/logo/wordmark-dark.svg +4 -0
  16. package/dist/logo/wordmark-light.svg +4 -0
  17. package/dist/logo/wordmark.svg +10 -0
  18. package/dist/react/ActionGroup.d.ts +4 -0
  19. package/dist/react/ActionGroup.js +9 -0
  20. package/dist/react/Alert.d.ts +34 -0
  21. package/dist/react/Alert.js +71 -0
  22. package/dist/react/Btn.d.ts +11 -0
  23. package/dist/react/Btn.js +16 -0
  24. package/dist/react/BtnCollapse.d.ts +4 -0
  25. package/dist/react/BtnCollapse.js +9 -0
  26. package/dist/react/BtnDangerGhost.d.ts +4 -0
  27. package/dist/react/BtnDangerGhost.js +9 -0
  28. package/dist/react/BtnGhost.d.ts +4 -0
  29. package/dist/react/BtnGhost.js +9 -0
  30. package/dist/react/BtnIcon.d.ts +4 -0
  31. package/dist/react/BtnIcon.js +9 -0
  32. package/dist/react/BtnSecondary.d.ts +4 -0
  33. package/dist/react/BtnSecondary.js +9 -0
  34. package/dist/react/BtnSmall.d.ts +4 -0
  35. package/dist/react/BtnSmall.js +9 -0
  36. package/dist/react/Card.d.ts +26 -0
  37. package/dist/react/Card.js +51 -0
  38. package/dist/react/CardHeading.d.ts +4 -0
  39. package/dist/react/CardHeading.js +9 -0
  40. package/dist/react/CardHeadings.d.ts +7 -0
  41. package/dist/react/CardHeadings.js +16 -0
  42. package/dist/react/Checkbox.d.ts +4 -0
  43. package/dist/react/Checkbox.js +9 -0
  44. package/dist/react/CheckboxDescription.d.ts +4 -0
  45. package/dist/react/CheckboxDescription.js +9 -0
  46. package/dist/react/CheckboxGroup.d.ts +4 -0
  47. package/dist/react/CheckboxGroup.js +9 -0
  48. package/dist/react/CheckboxLabel.d.ts +4 -0
  49. package/dist/react/CheckboxLabel.js +9 -0
  50. package/dist/react/CodeBlock.d.ts +7 -0
  51. package/dist/react/CodeBlock.js +12 -0
  52. package/dist/react/Columns.d.ts +25 -0
  53. package/dist/react/Columns.js +44 -0
  54. package/dist/react/ConstrainWidth.d.ts +4 -0
  55. package/dist/react/ConstrainWidth.js +9 -0
  56. package/dist/react/DragDropZone.d.ts +17 -0
  57. package/dist/react/DragDropZone.js +38 -0
  58. package/dist/react/Footer.d.ts +10 -0
  59. package/dist/react/Footer.js +23 -0
  60. package/dist/react/FormError.d.ts +4 -0
  61. package/dist/react/FormError.js +9 -0
  62. package/dist/react/FormField.d.ts +4 -0
  63. package/dist/react/FormField.js +9 -0
  64. package/dist/react/FormHelper.d.ts +4 -0
  65. package/dist/react/FormHelper.js +9 -0
  66. package/dist/react/FormLabel.d.ts +4 -0
  67. package/dist/react/FormLabel.js +9 -0
  68. package/dist/react/GridMobileStack.d.ts +4 -0
  69. package/dist/react/GridMobileStack.js +9 -0
  70. package/dist/react/Header.d.ts +25 -0
  71. package/dist/react/Header.js +58 -0
  72. package/dist/react/Hero.d.ts +25 -0
  73. package/dist/react/Hero.js +58 -0
  74. package/dist/react/Icon.d.ts +5 -0
  75. package/dist/react/Icon.js +10 -0
  76. package/dist/react/Input.d.ts +6 -0
  77. package/dist/react/Input.js +11 -0
  78. package/dist/react/ItemTitle.d.ts +4 -0
  79. package/dist/react/ItemTitle.js +9 -0
  80. package/dist/react/Link.d.ts +4 -0
  81. package/dist/react/Link.js +9 -0
  82. package/dist/react/Modal.d.ts +8 -0
  83. package/dist/react/Modal.js +17 -0
  84. package/dist/react/Newsletter.d.ts +8 -0
  85. package/dist/react/Newsletter.js +17 -0
  86. package/dist/react/Option.d.ts +4 -0
  87. package/dist/react/Option.js +9 -0
  88. package/dist/react/PageHeading.d.ts +10 -0
  89. package/dist/react/PageHeading.js +23 -0
  90. package/dist/react/PageHeadings.d.ts +13 -0
  91. package/dist/react/PageHeadings.js +30 -0
  92. package/dist/react/Prose.d.ts +6 -0
  93. package/dist/react/Prose.js +11 -0
  94. package/dist/react/Radio.d.ts +4 -0
  95. package/dist/react/Radio.js +9 -0
  96. package/dist/react/RadioDescription.d.ts +7 -0
  97. package/dist/react/RadioDescription.js +16 -0
  98. package/dist/react/RadioGroup.d.ts +4 -0
  99. package/dist/react/RadioGroup.js +9 -0
  100. package/dist/react/RadioLabel.d.ts +4 -0
  101. package/dist/react/RadioLabel.js +9 -0
  102. package/dist/react/Section.d.ts +9 -0
  103. package/dist/react/Section.js +14 -0
  104. package/dist/react/SectionHeading.d.ts +4 -0
  105. package/dist/react/SectionHeading.js +9 -0
  106. package/dist/react/Select.d.ts +4 -0
  107. package/dist/react/Select.js +9 -0
  108. package/dist/react/Spinner.d.ts +7 -0
  109. package/dist/react/Spinner.js +16 -0
  110. package/dist/react/Status.d.ts +12 -0
  111. package/dist/react/Status.js +17 -0
  112. package/dist/react/TextUtilities.d.ts +4 -0
  113. package/dist/react/TextUtilities.js +9 -0
  114. package/dist/react/Textarea.d.ts +4 -0
  115. package/dist/react/Textarea.js +9 -0
  116. package/dist/react/Toggle.d.ts +4 -0
  117. package/dist/react/Toggle.js +9 -0
  118. package/dist/react/ToggleGroup.d.ts +4 -0
  119. package/dist/react/ToggleGroup.js +9 -0
  120. package/dist/react/ToggleLabel.d.ts +4 -0
  121. package/dist/react/ToggleLabel.js +9 -0
  122. package/dist/react/index.d.ts +43 -0
  123. package/dist/react/index.js +43 -0
  124. package/dist/utils.d.ts +16 -0
  125. package/dist/utils.js +50 -0
  126. package/lib/deepgram.css +595 -752
  127. package/lib/tailwind-theme.css +27 -22
  128. package/package.json +54 -3
  129. package/src/react/ActionGroup.tsx +14 -0
  130. package/src/react/Alert.tsx +130 -0
  131. package/src/react/Btn.tsx +28 -0
  132. package/src/react/BtnCollapse.tsx +14 -0
  133. package/src/react/BtnDangerGhost.tsx +14 -0
  134. package/src/react/BtnGhost.tsx +14 -0
  135. package/src/react/BtnIcon.tsx +14 -0
  136. package/src/react/BtnSecondary.tsx +14 -0
  137. package/src/react/BtnSmall.tsx +14 -0
  138. package/src/react/Card.tsx +93 -0
  139. package/src/react/CardHeading.tsx +14 -0
  140. package/src/react/CardHeadings.tsx +27 -0
  141. package/src/react/Checkbox.tsx +14 -0
  142. package/src/react/CheckboxDescription.tsx +14 -0
  143. package/src/react/CheckboxGroup.tsx +14 -0
  144. package/src/react/CheckboxLabel.tsx +14 -0
  145. package/src/react/CodeBlock.tsx +20 -0
  146. package/src/react/Columns.tsx +82 -0
  147. package/src/react/ConstrainWidth.tsx +14 -0
  148. package/src/react/DragDropZone.tsx +68 -0
  149. package/src/react/Footer.tsx +40 -0
  150. package/src/react/FormError.tsx +14 -0
  151. package/src/react/FormField.tsx +14 -0
  152. package/src/react/FormHelper.tsx +14 -0
  153. package/src/react/FormLabel.tsx +14 -0
  154. package/src/react/GridMobileStack.tsx +14 -0
  155. package/src/react/Header.tsx +105 -0
  156. package/src/react/Hero.tsx +105 -0
  157. package/src/react/Icon.tsx +16 -0
  158. package/src/react/Input.tsx +18 -0
  159. package/src/react/ItemTitle.tsx +14 -0
  160. package/src/react/Link.tsx +14 -0
  161. package/src/react/Modal.tsx +29 -0
  162. package/src/react/Newsletter.tsx +29 -0
  163. package/src/react/Option.tsx +14 -0
  164. package/src/react/PageHeading.tsx +40 -0
  165. package/src/react/PageHeadings.tsx +53 -0
  166. package/src/react/Prose.tsx +18 -0
  167. package/src/react/Radio.tsx +14 -0
  168. package/src/react/RadioDescription.tsx +27 -0
  169. package/src/react/RadioGroup.tsx +14 -0
  170. package/src/react/RadioLabel.tsx +14 -0
  171. package/src/react/Section.tsx +24 -0
  172. package/src/react/SectionHeading.tsx +14 -0
  173. package/src/react/Select.tsx +14 -0
  174. package/src/react/Spinner.tsx +27 -0
  175. package/src/react/Status.tsx +30 -0
  176. package/src/react/TextUtilities.tsx +14 -0
  177. package/src/react/Textarea.tsx +14 -0
  178. package/src/react/Toggle.tsx +14 -0
  179. package/src/react/ToggleGroup.tsx +14 -0
  180. package/src/react/ToggleLabel.tsx +14 -0
  181. package/src/react/index.ts +43 -0
  182. package/src/utils.ts +60 -0
package/README.md CHANGED
@@ -1,28 +1,128 @@
1
1
  # @deepgram/styles
2
2
 
3
- A Tailwind-based design system and styles library for Deepgram design system and demos.
3
+ A comprehensive, YAML-driven design system and CSS component library for building consistent Deepgram applications. Built on Tailwind CSS v4 with automatic light/dark mode, BEM methodology, and zero-config theming.
4
4
 
5
- ## Installation
5
+ ## Features
6
+
7
+ ### Automatic Light/Dark Mode
8
+
9
+ Every color token uses the CSS `light-dark()` function, giving you automatic theme support with zero configuration:
10
+
11
+ - **System-aware**: Follows the user's OS light/dark preference out of the box
12
+ - **Overridable**: Force a specific mode with a single line of CSS (`color-scheme: dark`)
13
+ - **No JS required**: Pure CSS implementation — no class toggling, no build-time config
14
+ - **WCAG-compliant**: Light mode brand colors are tuned for AA contrast ratios on white
15
+
16
+ ### YAML-Driven Design Tokens
17
+
18
+ All tokens, components, and examples are defined in a single `design-system.yaml` source of truth:
19
+
20
+ - **Colors**: Brand, background, border, text, status, and gradient tokens — each with dark and light values
21
+ - **Typography**: Font families, sizes, and weights with Tailwind integration
22
+ - **Spacing**: Consistent spacing scale in `rem` units
23
+ - **Border radius**: Rounded corner presets
24
+ - **Shadows**: Elevation levels from subtle to prominent
25
+ - **Logos**: 12 SVG logo variants (adaptive, light, dark) across wordmark, lettermark, square, and circle types
26
+
27
+ ### CSS Architecture
28
+
29
+ - **Tailwind CSS v4**: CSS-first configuration with `@theme` custom properties
30
+ - **BEM naming**: `.dg-{block}`, `.dg-{block}__{element}`, `.dg-{block}--{modifier}`
31
+ - **Custom utilities**: `dg-gradient-border`, `dg-glow-cyan-green`, `dg-bg-reset`, `dg-shadow-subtle`
32
+ - **Responsive**: Mobile-first breakpoints with progressive enhancement
33
+ - **Adaptive contrast tokens**: `dg-solid` / `dg-on-solid` for elements that invert between modes
34
+
35
+ ### Customizable Brand Colors
36
+
37
+ Two CSS variables control the entire brand palette — gradient borders, glow effects, buttons, links, and highlights all derive from them automatically:
38
+
39
+ ```css
40
+ :root {
41
+ --dg-primary: #ff6b35; /* Your primary brand color */
42
+ --dg-secondary: #4ecdc4; /* Your secondary brand color */
43
+ }
44
+ ```
45
+
46
+ ### Logo Assets
47
+
48
+ 12 production-ready SVG logos included as package exports:
49
+
50
+ | Type | Adaptive | Light | Dark |
51
+ |------|----------|-------|------|
52
+ | Wordmark | `@deepgram/styles/logo/wordmark` | `@deepgram/styles/logo/wordmark-light` | `@deepgram/styles/logo/wordmark-dark` |
53
+ | Lettermark | `@deepgram/styles/logo/lettermark` | `@deepgram/styles/logo/lettermark-light` | `@deepgram/styles/logo/lettermark-dark` |
54
+ | Square | `@deepgram/styles/logo/lettermark-square` | `@deepgram/styles/logo/lettermark-square-light` | `@deepgram/styles/logo/lettermark-square-dark` |
55
+ | Circle | `@deepgram/styles/logo/lettermark-circle` | `@deepgram/styles/logo/lettermark-circle-light` | `@deepgram/styles/logo/lettermark-circle-dark` |
56
+
57
+ Adaptive variants use embedded CSS `@media (prefers-color-scheme)` to switch automatically.
58
+
59
+ ---
60
+
61
+ ## Quick Start
62
+
63
+ You'll need two things: the Deepgram Styles package and [Font Awesome](https://fontawesome.com/search?o=r&m=free) for icons. Choose between CDN (fastest setup) or npm (production-ready).
64
+
65
+ ### Option 1: CDN
66
+
67
+ Add these lines to your HTML `<head>`:
68
+
69
+ ```html
70
+ <!-- Deepgram Styles -->
71
+ <link rel="stylesheet" href="https://unpkg.com/@deepgram/styles/dist/deepgram.css">
72
+
73
+ <!-- Font Awesome for icons -->
74
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer">
75
+ ```
76
+
77
+ Or use jsDelivr for Deepgram Styles:
78
+
79
+ ```html
80
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@deepgram/styles/dist/deepgram.css">
81
+ ```
82
+
83
+ ### Option 2: NPM (Production)
84
+
85
+ Install both packages:
6
86
 
7
87
  ```bash
8
- npm install @deepgram/styles
9
- # or
10
- pnpm add @deepgram/styles
11
- # or
12
- yarn add @deepgram/styles
88
+ npm install @deepgram/styles @fortawesome/fontawesome-free
89
+ ```
90
+
91
+ Then import in your JavaScript/TypeScript entry file:
92
+
93
+ ```javascript
94
+ import '@deepgram/styles';
95
+ import '@fortawesome/fontawesome-free/css/all.min.css';
13
96
  ```
14
97
 
98
+ That's it. Light/dark mode works automatically based on the user's OS preference.
99
+
15
100
  ## Usage
16
101
 
17
- ### Basic Usage (Pre-built CSS)
102
+ Browse the [Component Showcase](https://design.dx.deepgram.com), copy the markup, and use it in your project:
103
+
104
+ ```html
105
+ <button class="dg-btn dg-btn--primary">Get Started</button>
106
+ ```
107
+
108
+ Components use [Font Awesome](https://fontawesome.com/search?o=r&m=free) icons:
109
+
110
+ ```html
111
+ <button class="dg-btn dg-btn--primary">
112
+ <i class="fas fa-play"></i>
113
+ Start Recording
114
+ </button>
115
+ ```
116
+
117
+ ### Pre-built CSS
18
118
 
19
- Import the pre-built, minified CSS in your application:
119
+ The default import provides a minified, production-ready stylesheet:
20
120
 
21
121
  ```javascript
22
122
  import "@deepgram/styles";
23
123
  ```
24
124
 
25
- Or in HTML:
125
+ Or link directly in HTML:
26
126
 
27
127
  ```html
28
128
  <link rel="stylesheet" href="node_modules/@deepgram/styles/dist/deepgram.css" />
@@ -55,275 +155,163 @@ To customize and build the styles yourself:
55
155
  @import "@deepgram/styles/source";
56
156
  ```
57
157
 
158
+ ### Design System YAML
159
+
160
+ Access the raw design tokens programmatically:
161
+
162
+ ```javascript
163
+ import tokens from "@deepgram/styles/design-system";
164
+ ```
165
+
166
+ ---
167
+
58
168
  ## Configuration
59
169
 
60
- ### Base Font Size
170
+ ### Light/Dark Mode
61
171
 
62
- The entire design system is based on `rem` units, which scale relative to the root font size. By default, the base font size is set to `16px`. You can customize this by setting the CSS variable `--dg-base-font-size` in your application:
172
+ The stylesheet sets `color-scheme: light dark` on `:root`, so it follows the OS preference automatically. To force a specific mode:
63
173
 
64
174
  ```css
65
- :root {
66
- --dg-base-font-size: 18px; /* Increase base size to 18px */
67
- }
175
+ /* Force dark mode */
176
+ :root { color-scheme: dark; }
177
+
178
+ /* Force light mode */
179
+ :root { color-scheme: light; }
68
180
  ```
69
181
 
70
- Or target a specific element:
182
+ Or toggle via JavaScript:
71
183
 
72
- ```css
73
- .my-app {
74
- --dg-base-font-size: 14px; /* Decrease base size to 14px */
75
- }
76
- ```
184
+ ```javascript
185
+ // Follow system preference (default)
186
+ document.documentElement.style.removeProperty('color-scheme');
77
187
 
78
- This approach allows for:
188
+ // Force dark
189
+ document.documentElement.style.colorScheme = 'dark';
79
190
 
80
- - **Accessibility**: Users can adjust font sizes in their browser, and all components scale proportionally
81
- - **Responsive Design**: Change the base font size at different breakpoints for better mobile/desktop experiences
82
- - **Consistency**: All spacing, sizing, and typography scale together
191
+ // Force light
192
+ document.documentElement.style.colorScheme = 'light';
193
+ ```
83
194
 
84
- Example for responsive font sizing:
195
+ ### Base Font Size
196
+
197
+ The entire design system uses `rem` units that scale relative to the root font size:
85
198
 
86
199
  ```css
87
200
  :root {
88
- --dg-base-font-size: 14px; /* Smaller on mobile */
201
+ --dg-base-font-size: 18px; /* Scale everything up */
89
202
  }
90
203
 
91
- @media (min-width: 768px) {
204
+ @media (max-width: 768px) {
92
205
  :root {
93
- --dg-base-font-size: 16px; /* Standard on desktop */
206
+ --dg-base-font-size: 14px; /* Smaller on mobile */
94
207
  }
95
208
  }
96
209
  ```
97
210
 
98
- **Note**: The CSS variable defines the base font size, but all measurements internally use `rem` units, ensuring everything scales proportionally when you change this value.
99
-
100
211
  ### Brand Colors
101
212
 
102
- The design system uses two primary brand colors that can be customized by setting CSS variables `--dg-primary` and `--dg-secondary` in your application. The gradient borders and glow effects automatically derive from these colors, so you only need to set two variables:
213
+ Two variables control the entire brand palette:
103
214
 
104
215
  ```css
105
216
  :root {
106
- --dg-primary: #ff6b35; /* Custom orange */
107
- --dg-secondary: #4ecdc4; /* Custom teal */
217
+ --dg-primary: #13ef95; /* Deepgram green */
218
+ --dg-secondary: #149afb; /* Deepgram blue */
108
219
  }
109
220
  ```
110
221
 
111
- Or target a specific element:
222
+ In light mode, brand colors automatically switch to WCAG-compliant darker variants (`#047857` and `#0369a1` by default). Gradient borders, glow effects, buttons, links, and highlights all derive from these two variables.
112
223
 
113
224
  ```css
114
- .my-custom-section {
115
- --dg-primary: #9b59b6; /* Custom purple */
116
- --dg-secondary: #3498db; /* Custom blue */
225
+ /* Theme variations */
226
+ .theme-purple {
227
+ --dg-primary: #a855f7;
228
+ --dg-secondary: #ec4899;
229
+ }
230
+
231
+ .theme-ocean {
232
+ --dg-primary: #16a085;
233
+ --dg-secondary: #3498db;
117
234
  }
118
235
  ```
119
236
 
120
- This allows you to:
237
+ ---
121
238
 
122
- - **Brand Consistency**: Easily apply your brand colors across all Deepgram components
123
- - **Theme Variations**: Create different themes or color schemes for different sections
124
- - **Quick Customization**: Override brand colors without rebuilding or forking the library
125
- - **Automatic Gradients**: Gradient borders and glow effects automatically use your custom colors
239
+ ## Color Tokens
126
240
 
127
- Example for multiple themes:
241
+ All color tokens are available as CSS custom properties and Tailwind utilities:
128
242
 
129
- ```css
130
- /* Default Deepgram theme */
131
- :root {
132
- --dg-primary: #13ef95; /* Deepgram green */
133
- --dg-secondary: #149afb; /* Deepgram blue */
134
- }
243
+ ### Background Colors
135
244
 
136
- /* Purple theme - gradient will be blue to purple */
137
- .theme-purple {
138
- --dg-primary: #a855f7; /* Purple */
139
- --dg-secondary: #ec4899; /* Pink */
140
- }
245
+ | Token | Variable | Dark | Light |
246
+ |-------|----------|------|-------|
247
+ | `dg-almost-black` | `--color-dg-almost-black` | `#050506` | `#f8f9fa` |
248
+ | `dg-background` | `--color-dg-background` | `#0b0b0c` | `#ffffff` |
249
+ | `dg-charcoal` | `--color-dg-charcoal` | `#1a1a1f` | `#f3f4f6` |
250
+ | `dg-solid` | `--color-dg-solid` | `#ffffff` | `#000000` |
141
251
 
142
- /* Ocean theme - gradient will be teal to cyan */
143
- .theme-ocean {
144
- --dg-primary: #16a085; /* Teal */
145
- --dg-secondary: #3498db; /* Ocean Blue */
146
- }
252
+ ### Border Colors
147
253
 
148
- /* Sunset theme - gradient will be orange to golden */
149
- .theme-sunset {
150
- --dg-primary: #ff6b35; /* Orange */
151
- --dg-secondary: #f7931e; /* Golden */
152
- }
153
- ```
254
+ | Token | Variable | Dark | Light |
255
+ |-------|----------|------|-------|
256
+ | `dg-border` | `--color-dg-border` | `#2c2c33` | `#d1d5db` |
257
+ | `dg-pebble` | `--color-dg-pebble` | `#4e4e52` | `#9ca3af` |
258
+ | `dg-slate` | `--color-dg-slate` | `#949498` | `#6b7280` |
154
259
 
155
- **Note**: These colors are used throughout the component library for buttons, links, highlights, gradient borders (secondary → primary), glow effects, and other interactive elements. The primary button's gradient border animates from `--dg-secondary` to `--dg-primary`, creating a cohesive brand experience.
260
+ ### Text Colors
156
261
 
157
- ## Available Components
262
+ | Token | Variable | Dark | Light |
263
+ |-------|----------|------|-------|
264
+ | `dg-text` | `--color-dg-text` | `#fbfbff` | `#111827` |
265
+ | `dg-fog` | `--color-dg-fog` | `#edede2` | `#1f2937` |
266
+ | `dg-platinum` | `--color-dg-platinum` | `#e1e1e5` | `#374151` |
267
+ | `dg-muted` | `--color-dg-muted` | `#949498` | `#6b7280` |
268
+ | `dg-on-solid` | `--color-dg-on-solid` | `#000000` | `#ffffff` |
158
269
 
159
- The library provides a comprehensive set of Tailwind-based components following BEM methodology:
270
+ ### Status Colors
160
271
 
161
- ### Buttons
272
+ | Token | Variable | Dark | Light |
273
+ |-------|----------|------|-------|
274
+ | `dg-success` | `--color-dg-success` | `#12b76a` | `#15803d` |
275
+ | `dg-warning` | `--color-dg-warning` | `#fec84b` | `#a16207` |
276
+ | `dg-danger` | `--color-dg-danger` | `#f04438` | `#b91c1c` |
162
277
 
163
- - `.dg-btn` - Base button component
164
- - `.dg-btn--primary` - Primary action button with gradient border
165
- - `.dg-btn--secondary` - Secondary action button
166
- - `.dg-btn--ghost` - Transparent button with border
167
- - `.dg-btn--danger-ghost` - Destructive action button
168
- - `.dg-btn--icon-only` - Icon-only button
169
- - `.dg-btn--sm` - Small button variant
170
- - `.dg-btn--collapse` - Responsive mobile-adaptive button
278
+ ### Brand Colors
171
279
 
172
- ### Cards
280
+ | Token | Variable | Dark | Light |
281
+ |-------|----------|------|-------|
282
+ | `dg-primary` | `--dg-primary` | `#13ef95` | `#047857` |
283
+ | `dg-secondary` | `--dg-secondary` | `#149afb` | `#0369a1` |
173
284
 
174
- - `.dg-card` - Flexible card container
175
- - `.dg-card--compact` - Card with reduced padding
176
- - `.dg-card--spacious` - Card with increased padding
177
- - `.dg-card--bordered` - Card with enhanced border
178
- - `.dg-card--structured` - Card optimized for image/header/body/footer layout
179
- - `.dg-card__image` - Card image container
180
- - `.dg-card__image--small` - Small height (7.5rem)
181
- - `.dg-card__image--medium` - Medium height (10rem)
182
- - `.dg-card__image--large` - Large height (15rem)
183
- - `.dg-card__image--aspect-4-3` - Responsive 4:3 aspect ratio
184
- - `.dg-card__icon` - Card icon container (for Font Awesome icons)
185
- - `.dg-card__icon--left` - Left-aligned icon (default)
186
- - `.dg-card__icon--center` - Center-aligned icon
187
- - `.dg-card__icon--right` - Right-aligned icon
188
- - `.dg-card__header` - Card header section
189
- - `.dg-card__body` - Card body content section
190
- - `.dg-card__footer` - Card footer actions section
191
- - `.dg-card__footer--bordered` - Footer with top border
285
+ All tokens work with standard Tailwind utility prefixes: `bg-dg-*`, `text-dg-*`, `border-dg-*`, `ring-dg-*`, etc.
192
286
 
193
- ### Layout
287
+ ---
194
288
 
195
- - `.dg-section` - Reusable content section
196
- - `.dg-section--compact` - Section with reduced spacing
197
- - `.dg-section--spacious` - Section with increased spacing
198
- - `.dg-section--bordered` - Section with border and background
199
- - `.dg-section--elevated` - Section with shadow
200
- - `.dg-section--fieldset` - Fieldset-style section with legend
201
- - `.dg-constrain-width` - Constrained width container (60rem max)
202
- - `.dg-center-h` - Center content horizontally
203
- - `.dg-grid-mobile-stack` - Responsive grid that stacks on mobile
204
- - `.dg-action-group` - Action button group
205
-
206
- #### Multi-Column Layouts
207
-
208
- - `.dg-layout-three-column` - Full-height three-column layout with header
209
- - `.dg-layout-three-column__header` - Fixed header section with dark theme
210
- - `.dg-layout-three-column__header-container` - Header inner container (max-width constrained)
211
- - `.dg-layout-three-column__header-logo` - Logo image in header
212
- - `.dg-layout-three-column__header-actions` - Header action buttons container
213
- - `.dg-layout-three-column__header-button` - Icon button in header
214
- - `.dg-layout-three-column__header-profile` - Profile link wrapper
215
- - `.dg-layout-three-column__header-avatar` - Profile avatar image
216
- - `.dg-layout-three-column__main` - Main three-column container
217
- - `.dg-layout-three-column__left-main-wrapper` - Wrapper for left sidebar and main content
218
- - `.dg-layout-three-column__sidebar-left` - Left sidebar (256px on xl screens)
219
- - `.dg-layout-three-column__content` - Main content area (flexible width)
220
- - `.dg-layout-three-column__sidebar-right` - Right sidebar (384px on lg+ screens)
221
-
222
- ### Hero & Typography
223
-
224
- - `.dg-hero` - Hero section container
225
- - `.dg-hero__content` - Hero content wrapper
226
- - `.dg-hero__announcement` - Hero announcement banner
227
- - `.dg-hero__body` - Hero body text
228
- - `.dg-hero__actions` - Hero action buttons
229
- - `.dg-hero-title` - Large gradient hero title
230
- - `.dg-section-heading` - Section heading
231
- - `.dg-card-heading` - Card heading
232
- - `.dg-item-title` - Item title
233
- - `.dg-prose` - Prose text with typography
234
- - `.dg-prose--large` - Larger prose text
235
- - `.dg-prose--small` - Smaller prose text
236
- - `.dg-prose--block` - Full width prose
289
+ ## Components
237
290
 
238
- ### Forms
291
+ All components use BEM naming with the `dg-` prefix.
239
292
 
240
- - `.dg-input` - Base text input field
241
- - Focus state with primary color border
242
- - Disabled state with reduced opacity
243
- - `.dg-input--inline` - Input with minimum width (12.5rem) for inline forms
244
- - `.dg-input--full` - Override for specific width control
245
- - `.dg-textarea` - Multi-line text input
246
- - `.dg-checkbox` - Custom styled checkbox
247
- - Animated checkmark on selection
248
- - Focus state for keyboard navigation
249
- - `.dg-checkbox-label` - Checkbox label wrapper
250
- - Hover states for better UX
251
- - Supports inline links
252
- - `.dg-checkbox-description` - Container for checkbox with description text
253
- - `.dg-checkbox-group` - Container for multiple checkboxes
254
- - `.dg-form-field` - Form field container (label + input + helper)
255
- - Full width on mobile, max-w-md (28rem) on desktop
256
- - `.dg-form-field--full` - Override to make form field full width on all screens
257
- - `.dg-form-field--error` - Error validation state (cascades to children)
258
- - `.dg-form-field--success` - Success validation state (cascades to children)
259
- - `.dg-form-label` - Form field label
260
- - `.dg-form-helper` - Helper or validation message text
261
- - `.dg-form-error` - **Deprecated:** Use `.dg-form-helper` with `.dg-form-field--error` instead
262
- - `.dg-drag-drop-zone` - File upload drag-and-drop area
263
- - Dashed border indicator
264
- - Hover and drag-over states
265
- - Icon, text, and hint sections
266
-
267
- ### Code & Status
268
-
269
- - `.dg-code-block` - Code block container
270
- - `.dg-code-block--compact` - Compact code block
271
- - `.dg-code-block--tall` - Tall code block
272
- - `.dg-code-block--no-scroll` - Code block without scrolling
273
- - `.dg-status` - Status message
274
- - `.dg-status--info` - Info status
275
- - `.dg-status--success` - Success status
276
- - `.dg-status--warning` - Warning status
277
- - `.dg-status--error` - Error status
278
- - `.dg-status--primary` - Primary status
279
- - `.dg-status--secondary` - Secondary status
280
- - `.dg-spinner` - Loading spinner animation
281
- - `.dg-modal-overlay` - Modal overlay backdrop
282
- - `.dg-modal-content` - Modal content container
283
-
284
- ### Newsletter Components
285
-
286
- - `.dg-newsletter-container` - Newsletter container with standard spacing
287
- - `.dg-newsletter-container--compact` - Newsletter container with compact spacing
288
- - `.dg-newsletter-form` - Newsletter form with standard spacing
289
- - `.dg-newsletter-form--compact` - Newsletter form with compact spacing
290
- - `.dg-newsletter-form--inline` - Inline newsletter form (responsive)
291
- - `.dg-newsletter-header` - Newsletter header section (responsive flex layout)
292
- - `.dg-newsletter-header__content` - Newsletter header content area
293
- - `.dg-newsletter-header__actions` - Newsletter header actions area
294
- - `.dg-logo-container` - Centered logo container
295
- - `.dg-logo` - Logo image styling
296
- - `.dg-social-links` - Social links container
297
- - `.dg-social-link` - Individual social link with hover effect
298
-
299
- ### Typography Utilities
300
-
301
- - `.dg-text-tagline` - Centered tagline text (small, muted)
302
- - `.dg-text-subtitle` - Subtitle text (small, muted)
303
- - `.dg-text-heading` - Standard heading text
304
- - `.dg-text-heading--with-margin` - Heading with bottom margin
305
- - `.dg-text-legal` - Legal/fine print text (small, centered)
306
-
307
- ### Links
308
-
309
- - `.dg-link` - Primary link with opacity hover effect
310
-
311
- ### Utilities
312
-
313
- - `.dg-footer` - Page footer
314
- - `.dg-text-center` - Center text alignment
315
- - `.dg-text-danger` - Danger/error text color
316
- - `.dg-text-success` - Success text color
317
- - `.dg-text-warning` - Warning text color
318
- - `.dg-text-primary` - Primary brand color text
319
- - `.dg-text-secondary` - Secondary brand color text
320
- - `.dg-text-muted` - Muted text color
321
- - `.dg-text-fog` - Fog (light gray) text color
322
- - `.dg-text-white` - White text color
323
-
324
- ## Component Examples
325
-
326
- ### Structured Card with Image
293
+ ### Buttons
294
+
295
+ ```html
296
+ <button class="dg-btn dg-btn--primary">Primary Action</button>
297
+ <button class="dg-btn dg-btn--secondary">Secondary</button>
298
+ <button class="dg-btn dg-btn--ghost">Ghost</button>
299
+ <button class="dg-btn dg-btn--danger-ghost">Delete</button>
300
+ <button class="dg-btn dg-btn--icon-only"><i class="fas fa-play"></i></button>
301
+ ```
302
+
303
+ | Class | Description |
304
+ |-------|-------------|
305
+ | `.dg-btn` | Base button with flexbox centering, font styles, and disabled states |
306
+ | `.dg-btn--primary` | Gradient border with brand colors and glow effect |
307
+ | `.dg-btn--secondary` | Solid contrasting fill (white on dark, black on light) |
308
+ | `.dg-btn--ghost` | Transparent with border, text adapts to theme |
309
+ | `.dg-btn--danger-ghost` | Transparent with danger-colored border |
310
+ | `.dg-btn--icon-only` | Square button for icons |
311
+ | `.dg-btn--sm` | Small variant (2.25rem height) |
312
+ | `.dg-btn--collapse` | Full-width on mobile, inline on desktop |
313
+
314
+ ### Cards
327
315
 
328
316
  ```html
329
317
  <div class="dg-card dg-card--structured">
@@ -334,7 +322,7 @@ The library provides a comprehensive set of Tailwind-based components following
334
322
  <h3 class="dg-card-heading">Card Title</h3>
335
323
  </div>
336
324
  <div class="dg-card__body">
337
- <p class="dg-prose">Card body content goes here.</p>
325
+ <p class="dg-prose">Card content.</p>
338
326
  </div>
339
327
  <div class="dg-card__footer">
340
328
  <button class="dg-btn dg-btn--primary">Action</button>
@@ -342,33 +330,46 @@ The library provides a comprehensive set of Tailwind-based components following
342
330
  </div>
343
331
  ```
344
332
 
345
- ### Structured Card with Icon
333
+ | Class | Description |
334
+ |-------|-------------|
335
+ | `.dg-card` | Base card with border, background, and padding |
336
+ | `.dg-card--compact` | Reduced padding |
337
+ | `.dg-card--spacious` | Increased padding |
338
+ | `.dg-card--bordered` | Enhanced border |
339
+ | `.dg-card--structured` | Optimized for image/header/body/footer layout |
340
+ | `.dg-card__image` | Image container with `--small`, `--medium`, `--large`, `--aspect-4-3` sizes |
341
+ | `.dg-card__icon` | Icon container with `--left`, `--center`, `--right` alignment |
342
+ | `.dg-card__header` | Header section |
343
+ | `.dg-card__body` | Body content section |
344
+ | `.dg-card__footer` | Footer actions section with optional `--bordered` |
346
345
 
347
- ```html
348
- <div class="dg-card dg-card--structured">
349
- <div class="dg-card__icon dg-card__icon--left">
350
- <i class="fas fa-rocket"></i>
351
- </div>
352
- <div class="dg-card__header">
353
- <h3 class="dg-card-heading">Feature Title</h3>
354
- </div>
355
- <div class="dg-card__body">
356
- <p class="dg-prose">Feature description goes here.</p>
357
- </div>
358
- <div class="dg-card__footer">
359
- <button class="dg-btn dg-btn--primary">Learn More</button>
360
- </div>
361
- </div>
362
- ```
363
-
364
- Icon alignment options: `--left` (default), `--center`, `--right`
346
+ ### Layout
365
347
 
366
- ### Button Group
348
+ | Class | Description |
349
+ |-------|-------------|
350
+ | `.dg-section` | Content section with margin and padding |
351
+ | `.dg-section--compact` | Reduced spacing |
352
+ | `.dg-section--spacious` | Increased spacing |
353
+ | `.dg-section--bordered` | Border and background |
354
+ | `.dg-section--elevated` | Shadow elevation |
355
+ | `.dg-section--fieldset` | Fieldset-style with legend |
356
+ | `.dg-constrain-width` | Max-width container (60rem) |
357
+ | `.dg-center-h` | Center content horizontally |
358
+ | `.dg-grid-mobile-stack` | Responsive grid, stacks on mobile |
359
+ | `.dg-action-group` | Button group container |
360
+
361
+ ### Multi-Column Layout
367
362
 
368
363
  ```html
369
- <div class="dg-action-group">
370
- <button class="dg-btn dg-btn--ghost">Cancel</button>
371
- <button class="dg-btn dg-btn--primary">Confirm</button>
364
+ <div class="dg-layout-three-column">
365
+ <header class="dg-layout-three-column__header">...</header>
366
+ <div class="dg-layout-three-column__main">
367
+ <div class="dg-layout-three-column__left-main-wrapper">
368
+ <div class="dg-layout-three-column__sidebar-left">...</div>
369
+ <div class="dg-layout-three-column__content">...</div>
370
+ </div>
371
+ <div class="dg-layout-three-column__sidebar-right">...</div>
372
+ </div>
372
373
  </div>
373
374
  ```
374
375
 
@@ -377,6 +378,10 @@ Icon alignment options: `--left` (default), `--center`, `--right`
377
378
  ```html
378
379
  <section class="dg-hero">
379
380
  <div class="dg-hero__content">
381
+ <a href="#" class="dg-hero__announcement">
382
+ <span class="dg-hero__announcement-text">New feature announcement</span>
383
+ <span class="dg-hero__announcement-cta">Learn More</span>
384
+ </a>
380
385
  <h1 class="dg-hero-title">Your Hero Title</h1>
381
386
  <p class="dg-hero__body">Your hero description text.</p>
382
387
  <div class="dg-hero__actions">
@@ -387,158 +392,121 @@ Icon alignment options: `--left` (default), `--center`, `--right`
387
392
  </section>
388
393
  ```
389
394
 
390
- ### Form Input with Label
395
+ ### Typography
396
+
397
+ | Class | Description |
398
+ |-------|-------------|
399
+ | `.dg-hero-title` | Large gradient hero title |
400
+ | `.dg-section-heading` | Section heading |
401
+ | `.dg-card-heading` | Card heading |
402
+ | `.dg-item-title` | Item title |
403
+ | `.dg-prose` | Body text (max-width 65ch) |
404
+ | `.dg-prose--large` | Larger prose |
405
+ | `.dg-prose--small` | Smaller prose |
406
+ | `.dg-prose--block` | Full-width prose (no max-width) |
407
+ | `.dg-text-tagline` | Centered tagline |
408
+ | `.dg-text-subtitle` | Subtitle text |
409
+ | `.dg-text-heading` | Standard heading |
410
+ | `.dg-text-legal` | Fine print |
411
+
412
+ ### Forms
391
413
 
392
414
  ```html
393
415
  <div class="dg-form-field">
394
- <label for="email" class="dg-form-label">Email Address</label>
395
- <input type="email" id="email" name="email" placeholder="you@example.com" class="dg-input" />
416
+ <label class="dg-form-label">Email</label>
417
+ <input type="email" class="dg-input" placeholder="you@example.com" />
396
418
  <p class="dg-form-helper">We'll never share your email.</p>
397
419
  </div>
398
420
  ```
399
421
 
400
- ### Form Input with Error
401
-
402
- ```html
403
- <div class="dg-form-field dg-form-field--error">
404
- <label for="email" class="dg-form-label">Email Address</label>
405
- <input type="email" id="email" name="email" placeholder="you@example.com" class="dg-input" />
406
- <p class="dg-form-helper">Please enter a valid email address.</p>
407
- </div>
408
- ```
409
-
410
- ### Form Input with Success
411
-
412
- ```html
413
- <div class="dg-form-field dg-form-field--success">
414
- <label for="email" class="dg-form-label">Email Address</label>
415
- <input type="email" id="email" name="email" value="user@example.com" class="dg-input" />
416
- <p class="dg-form-helper">Email address is valid.</p>
417
- </div>
418
- ```
419
-
420
- ### Checkbox
421
-
422
- ```html
423
- <label class="dg-checkbox-label">
424
- <input type="checkbox" name="agree" class="dg-checkbox" />
425
- <span>I agree to the terms and conditions</span>
426
- </label>
427
- ```
428
-
429
- ### Checkbox with Link
430
-
431
- ```html
432
- <label class="dg-checkbox-label">
433
- <input type="checkbox" name="privacy" class="dg-checkbox" />
434
- <span>I've read the <a href="/privacy" class="dg-link">Privacy Policy</a></span>
435
- </label>
436
- ```
437
-
438
- ### Checkbox with Description
439
-
440
- ```html
441
- <label class="dg-checkbox-label">
442
- <input type="checkbox" name="notifications" class="dg-checkbox" />
443
- <div class="dg-checkbox-description">
444
- <span>Enable email notifications</span>
445
- <span class="dg-form-helper">Get notified about updates and announcements</span>
446
- </div>
447
- </label>
448
- ```
449
-
450
- ### Newsletter Signup Form
451
-
452
- ```html
453
- <section class="dg-section dg-section--bordered">
454
- <div class="dg-newsletter-container--compact">
455
- <h3 class="dg-text-heading">Subscribe to our newsletter</h3>
456
- <p class="dg-text-subtitle">Get the latest news and updates delivered to your inbox.</p>
457
- <form class="dg-newsletter-form--compact">
458
- <input type="email" placeholder="Enter your email" required class="dg-input" name="email" />
459
- <button type="submit" class="dg-btn dg-btn--primary">Subscribe</button>
460
- </form>
461
- </div>
462
- </section>
463
- ```
464
-
465
- ### File Upload Zone
466
-
467
- ```html
468
- <div class="dg-drag-drop-zone">
469
- <input type="file" id="file-upload" name="file" class="dg-drag-drop-zone__input" />
470
- <div class="dg-drag-drop-zone__icon fas fa-upload"></div>
471
- <div class="dg-drag-drop-zone__text">Drop file here or click to browse</div>
472
- <div class="dg-drag-drop-zone__hint">MP3, WAV, M4A up to 500MB</div>
473
- </div>
474
- ```
475
-
476
- ### Three-Column Layout
477
-
478
- ```html
479
- <div class="dg-layout-three-column">
480
- <header class="dg-layout-three-column__header">
481
- <div class="dg-layout-three-column__header-container">
482
- <img src="logo.svg" alt="Company" class="dg-layout-three-column__header-logo" />
483
- <div class="dg-layout-three-column__header-actions">
484
- <button type="button" class="dg-layout-three-column__header-button">
485
- <span class="dg-sr-only">Notifications</span>
486
- <!-- Icon SVG -->
487
- </button>
488
- <a href="#" class="dg-layout-three-column__header-profile">
489
- <span class="dg-sr-only">Profile</span>
490
- <img src="avatar.jpg" alt="" class="dg-layout-three-column__header-avatar" />
491
- </a>
492
- </div>
493
- </div>
494
- </header>
495
-
496
- <div class="dg-layout-three-column__main">
497
- <div class="dg-layout-three-column__left-main-wrapper">
498
- <div class="dg-layout-three-column__sidebar-left">
499
- <!-- Left sidebar content (navigation, filters, etc.) -->
500
- </div>
501
- <div class="dg-layout-three-column__content">
502
- <!-- Main content area -->
503
- </div>
504
- </div>
505
- <div class="dg-layout-three-column__sidebar-right">
506
- <!-- Right sidebar content (notifications, info, etc.) -->
507
- </div>
508
- </div>
509
- </div>
510
- ```
511
-
512
- ## Theme Colors
513
-
514
- The library includes Deepgram brand colors:
515
-
516
- - **Primary**: Spring Green (#13ef93)
517
- - **Secondary**: Blue (#149afb)
518
- - **Success**: Green (#12b76a)
519
- - **Warning**: Yellow (#fec84b)
520
- - **Danger**: Red (#f04438)
521
- - **Dark Background**: Charcoal (#1a1a1f)
522
- - **Borders**: Pebble (#4e4e52)
422
+ | Class | Description |
423
+ |-------|-------------|
424
+ | `.dg-input` | Text input with focus/disabled states |
425
+ | `.dg-input--inline` | Inline input (min-width 12.5rem) |
426
+ | `.dg-textarea` | Multi-line text input |
427
+ | `.dg-checkbox` | Custom styled checkbox with animation |
428
+ | `.dg-checkbox-label` | Checkbox label wrapper |
429
+ | `.dg-checkbox-description` | Checkbox with description |
430
+ | `.dg-form-field` | Field container (label + input + helper) |
431
+ | `.dg-form-field--error` | Error validation state |
432
+ | `.dg-form-field--success` | Success validation state |
433
+ | `.dg-form-label` | Form label |
434
+ | `.dg-form-helper` | Helper/validation text |
435
+ | `.dg-drag-drop-zone` | File upload drag-and-drop area |
436
+
437
+ ### Feedback
438
+
439
+ | Class | Description |
440
+ |-------|-------------|
441
+ | `.dg-alert` | Alert container with `--info`, `--success`, `--warning`, `--error` variants |
442
+ | `.dg-status` | Status badge with `--info`, `--success`, `--warning`, `--error`, `--primary`, `--secondary` |
443
+ | `.dg-spinner` | Loading spinner animation |
444
+ | `.dg-modal-overlay` | Modal backdrop |
445
+ | `.dg-modal-content` | Modal content container |
446
+
447
+ ### Code
448
+
449
+ | Class | Description |
450
+ |-------|-------------|
451
+ | `.dg-code-block` | Scrollable code block with monospace font |
452
+ | `.dg-code-block--compact` | Reduced height |
453
+ | `.dg-code-block--tall` | Increased height |
454
+ | `.dg-code-block--no-scroll` | No scroll/height limit |
455
+
456
+ ### Navigation
457
+
458
+ | Class | Description |
459
+ |-------|-------------|
460
+ | `.dg-navbar` | Top navigation bar |
461
+ | `.dg-link` | Styled link with hover effect |
462
+ | `.dg-footer` | Page footer |
463
+
464
+ ### Newsletter
465
+
466
+ | Class | Description |
467
+ |-------|-------------|
468
+ | `.dg-newsletter-container` | Newsletter section container |
469
+ | `.dg-newsletter-form` | Form with standard/compact/inline variants |
470
+ | `.dg-newsletter-header` | Header with content and actions areas |
471
+ | `.dg-logo-container` | Centered logo container |
472
+ | `.dg-social-links` | Social links container |
473
+ | `.dg-social-link` | Individual social link |
474
+
475
+ ### Custom Utilities
476
+
477
+ | Utility | Description |
478
+ |---------|-------------|
479
+ | `.dg-gradient-border` | Gradient border using brand colors (adaptive fill) |
480
+ | `.dg-glow-cyan-green` | Box shadow glow with brand colors |
481
+ | `.dg-bg-reset` | Reset background-image properties |
482
+ | `.dg-shadow-subtle` | Subtle box shadow |
483
+
484
+ ---
523
485
 
524
486
  ## Responsive Design
525
487
 
526
- All components are mobile-first and responsive:
488
+ All components are mobile-first with progressive breakpoints:
527
489
 
528
- - Mobile: Single column layouts
529
- - Tablet (md): Two column layouts
530
- - Desktop (lg): Multi-column layouts
490
+ - **Mobile** (default): Single column, stacked layouts
491
+ - **Tablet** (`640px`): Two column layouts, expanded spacing
492
+ - **Desktop** (`1024px`): Multi-column layouts, full features
531
493
 
532
494
  ## Browser Support
533
495
 
534
- - Modern browsers (Chrome, Firefox, Safari, Edge)
535
- - CSS Grid and Flexbox support required
536
- - CSS Custom Properties (CSS Variables) support required
496
+ - Chrome, Firefox, Safari, Edge (latest 2 versions)
497
+ - Requires: CSS Grid, Flexbox, Custom Properties, `light-dark()` function
498
+ - `light-dark()` is supported in Chrome 123+, Firefox 120+, Safari 17.5+
537
499
 
538
500
  ## License
539
501
 
540
- MIT
502
+ ISC
541
503
 
542
504
  ## Contributing
543
505
 
544
506
  See the [main repository](https://github.com/deepgram/dx-design) for contribution guidelines.
507
+
508
+ ## Links
509
+
510
+ - [Component Showcase](https://design.dx.deepgram.com) — Live preview of all components
511
+ - [GitHub Repository](https://github.com/deepgram/dx-design) — Source code and issues
512
+ - [npm Package](https://www.npmjs.com/package/@deepgram/styles) — Published package