diff --git a/outputs/hozen/readme.md b/outputs/hozen/readme.md
index 5a02560..e0d2163 100644
--- a/outputs/hozen/readme.md
+++ b/outputs/hozen/readme.md
@@ -1,176 +1,116 @@
 # Color Scheme Documentation
 
-Generated documentation for the color scheme.
+Generated on: 1730946863
+
+## Table of Contents
+
+- [Neutral Shades](#neutral-shades)
+- [Base Colors](#base-colors)
+- [Syntax Highlighting](#syntax-highlighting)
+- [Semantic Colors](#semantic-colors)
+- [Color Scales](#color-scales)
 
 ## Color Preview
 
+### Neutral Shades
+
+| Name | Preview | Hex |
+| ---- | ------- | --- |
+
+| `100` | <span style='display:inline-block; width:50px; height:20px; background:#d9c7a5; border:1px solid #282828;'></span> | `#d9c7a5` |
+| `150` | <span style='display:inline-block; width:50px; height:20px; background:#d4be98; border:1px solid #282828;'></span> | `#d4be98` |
+| `200` | <span style='display:inline-block; width:50px; height:20px; background:#c6b395; border:1px solid #282828;'></span> | `#c6b395` |
+| `250` | <span style='display:inline-block; width:50px; height:20px; background:#b4a288; border:1px solid #282828;'></span> | `#b4a288` |
+| `300` | <span style='display:inline-block; width:50px; height:20px; background:#a49384; border:1px solid #282828;'></span> | `#a49384` |
+| `350` | <span style='display:inline-block; width:50px; height:20px; background:#99897a; border:1px solid #282828;'></span> | `#99897a` |
+| `400` | <span style='display:inline-block; width:50px; height:20px; background:#8b7c6f; border:1px solid #282828;'></span> | `#8b7c6f` |
+| `450` | <span style='display:inline-block; width:50px; height:20px; background:#7d6f64; border:1px solid #282828;'></span> | `#7d6f64` |
+| `50` | <span style='display:inline-block; width:50px; height:20px; background:#dfd2b3; border:1px solid #282828;'></span> | `#dfd2b3` |
+| `500` | <span style='display:inline-block; width:50px; height:20px; background:#716860; border:1px solid #282828;'></span> | `#716860` |
+| `550` | <span style='display:inline-block; width:50px; height:20px; background:#645f59; border:1px solid #282828;'></span> | `#645f59` |
+| `600` | <span style='display:inline-block; width:50px; height:20px; background:#585350; border:1px solid #282828;'></span> | `#585350` |
+| `650` | <span style='display:inline-block; width:50px; height:20px; background:#4d4947; border:1px solid #282828;'></span> | `#4d4947` |
+| `700` | <span style='display:inline-block; width:50px; height:20px; background:#3f3b3b; border:1px solid #282828;'></span> | `#3f3b3b` |
+| `750` | <span style='display:inline-block; width:50px; height:20px; background:#343232; border:1px solid #282828;'></span> | `#343232` |
+| `800` | <span style='display:inline-block; width:50px; height:20px; background:#282828; border:1px solid #555;'></span> | `#282828` |
+| `850` | <span style='display:inline-block; width:50px; height:20px; background:#212121; border:1px solid #282828;'></span> | `#212121` |
+| `900` | <span style='display:inline-block; width:50px; height:20px; background:#1a1a1a; border:1px solid #282828;'></span> | `#1a1a1a` |
+
 ### Base Colors
 
 | Name | Preview | Hex |
 | ---- | ------- | --- |
 
-| `base00` | ![282828](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#282828"/>
-</svg>) | `#282828` |
-| `base01` | ![3f3b3b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#3f3b3b"/>
-</svg>) | `#3f3b3b` |
-| `base02` | ![585350](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#585350"/>
-</svg>) | `#585350` |
-| `base03` | ![7d6f64](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#7d6f64"/>
-</svg>) | `#7d6f64` |
-| `base04` | ![a49384](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a49384"/>
-</svg>) | `#a49384` |
-| `base05` | ![d4be98](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d4be98"/>
-</svg>) | `#d4be98` |
-| `base06` | ![d9c7a5](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d9c7a5"/>
-</svg>) | `#d9c7a5` |
-| `base07` | ![dfd2b3](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#dfd2b3"/>
-</svg>) | `#dfd2b3` |
-| `base08` | ![ea6962](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#ea6962"/>
-</svg>) | `#ea6962` |
-| `base09` | ![e78a4e](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#e78a4e"/>
-</svg>) | `#e78a4e` |
-| `base0A` | ![d8a657](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d8a657"/>
-</svg>) | `#d8a657` |
-| `base0B` | ![a9b665](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a9b665"/>
-</svg>) | `#a9b665` |
-| `base0C` | ![89b482](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#89b482"/>
-</svg>) | `#89b482` |
-| `base0D` | ![7daea3](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#7daea3"/>
-</svg>) | `#7daea3` |
-| `base0E` | ![d3869b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d3869b"/>
-</svg>) | `#d3869b` |
-| `base0F` | ![a87757](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a87757"/>
-</svg>) | `#a87757` |
+| `base00` | <span style='display:inline-block; width:50px; height:20px; background:#282828; border:1px solid #555;'></span> | `#282828` |
+| `base01` | <span style='display:inline-block; width:50px; height:20px; background:#3f3b3b; border:1px solid #282828;'></span> | `#3f3b3b` |
+| `base02` | <span style='display:inline-block; width:50px; height:20px; background:#585350; border:1px solid #282828;'></span> | `#585350` |
+| `base03` | <span style='display:inline-block; width:50px; height:20px; background:#7d6f64; border:1px solid #282828;'></span> | `#7d6f64` |
+| `base04` | <span style='display:inline-block; width:50px; height:20px; background:#a49384; border:1px solid #282828;'></span> | `#a49384` |
+| `base05` | <span style='display:inline-block; width:50px; height:20px; background:#d4be98; border:1px solid #282828;'></span> | `#d4be98` |
+| `base06` | <span style='display:inline-block; width:50px; height:20px; background:#d9c7a5; border:1px solid #282828;'></span> | `#d9c7a5` |
+| `base07` | <span style='display:inline-block; width:50px; height:20px; background:#dfd2b3; border:1px solid #282828;'></span> | `#dfd2b3` |
+| `base08` | <span style='display:inline-block; width:50px; height:20px; background:#ea6962; border:1px solid #282828;'></span> | `#ea6962` |
+| `base09` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
+| `base0A` | <span style='display:inline-block; width:50px; height:20px; background:#d8a657; border:1px solid #282828;'></span> | `#d8a657` |
+| `base0B` | <span style='display:inline-block; width:50px; height:20px; background:#a9b665; border:1px solid #282828;'></span> | `#a9b665` |
+| `base0C` | <span style='display:inline-block; width:50px; height:20px; background:#89b482; border:1px solid #282828;'></span> | `#89b482` |
+| `base0D` | <span style='display:inline-block; width:50px; height:20px; background:#7daea3; border:1px solid #282828;'></span> | `#7daea3` |
+| `base0E` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
+| `base0F` | <span style='display:inline-block; width:50px; height:20px; background:#a87757; border:1px solid #282828;'></span> | `#a87757` |
+| `base10` | <span style='display:inline-block; width:50px; height:20px; background:#212121; border:1px solid #282828;'></span> | `#212121` |
+| `base11` | <span style='display:inline-block; width:50px; height:20px; background:#1a1a1a; border:1px solid #282828;'></span> | `#1a1a1a` |
+| `base12` | <span style='display:inline-block; width:50px; height:20px; background:#e58b86; border:1px solid #282828;'></span> | `#e58b86` |
+| `base13` | <span style='display:inline-block; width:50px; height:20px; background:#d3b17b; border:1px solid #282828;'></span> | `#d3b17b` |
+| `base14` | <span style='display:inline-block; width:50px; height:20px; background:#adb486; border:1px solid #282828;'></span> | `#adb486` |
+| `base15` | <span style='display:inline-block; width:50px; height:20px; background:#a2b59f; border:1px solid #282828;'></span> | `#a2b59f` |
+| `base16` | <span style='display:inline-block; width:50px; height:20px; background:#9bafaa; border:1px solid #282828;'></span> | `#9bafaa` |
+| `base17` | <span style='display:inline-block; width:50px; height:20px; background:#d3a4b1; border:1px solid #282828;'></span> | `#d3a4b1` |
 
 ### Syntax Highlighting
 
 | Name | Preview | Hex |
 | ---- | ------- | --- |
 
-| `boolean` | ![d3869b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d3869b"/>
-</svg>) | `#d3869b` |
-| `comment` | ![a49384](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a49384"/>
-</svg>) | `#a49384` |
-| `constant` | ![89b482](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#89b482"/>
-</svg>) | `#89b482` |
-| `define` | ![d3869b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d3869b"/>
-</svg>) | `#d3869b` |
-| `exception` | ![ea6962](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#ea6962"/>
-</svg>) | `#ea6962` |
-| `float` | ![d3869b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d3869b"/>
-</svg>) | `#d3869b` |
-| `function` | ![a9b665](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a9b665"/>
-</svg>) | `#a9b665` |
-| `identifier` | ![7daea3](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#7daea3"/>
-</svg>) | `#7daea3` |
-| `include` | ![d3869b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d3869b"/>
-</svg>) | `#d3869b` |
-| `label` | ![e78a4e](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#e78a4e"/>
-</svg>) | `#e78a4e` |
-| `macro` | ![89b482](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#89b482"/>
-</svg>) | `#89b482` |
-| `number` | ![d3869b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d3869b"/>
-</svg>) | `#d3869b` |
-| `operator` | ![e78a4e](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#e78a4e"/>
-</svg>) | `#e78a4e` |
-| `preCondit` | ![d3869b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d3869b"/>
-</svg>) | `#d3869b` |
-| `preproc` | ![d3869b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d3869b"/>
-</svg>) | `#d3869b` |
-| `special` | ![d8a657](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d8a657"/>
-</svg>) | `#d8a657` |
-| `specialChar` | ![d8a657](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d8a657"/>
-</svg>) | `#d8a657` |
-| `statement` | ![ea6962](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#ea6962"/>
-</svg>) | `#ea6962` |
-| `storageClass` | ![e78a4e](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#e78a4e"/>
-</svg>) | `#e78a4e` |
-| `string` | ![a9b665](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a9b665"/>
-</svg>) | `#a9b665` |
-| `structure` | ![e78a4e](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#e78a4e"/>
-</svg>) | `#e78a4e` |
-| `tag` | ![89b482](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#89b482"/>
-</svg>) | `#89b482` |
-| `todo` | ![d3869b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d3869b"/>
-</svg>) | `#d3869b` |
-| `type` | ![d8a657](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d8a657"/>
-</svg>) | `#d8a657` |
+| `boolean` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
+| `comment` | <span style='display:inline-block; width:50px; height:20px; background:#a49384; border:1px solid #282828;'></span> | `#a49384` |
+| `constant` | <span style='display:inline-block; width:50px; height:20px; background:#89b482; border:1px solid #282828;'></span> | `#89b482` |
+| `define` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
+| `exception` | <span style='display:inline-block; width:50px; height:20px; background:#ea6962; border:1px solid #282828;'></span> | `#ea6962` |
+| `float` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
+| `function` | <span style='display:inline-block; width:50px; height:20px; background:#a9b665; border:1px solid #282828;'></span> | `#a9b665` |
+| `identifier` | <span style='display:inline-block; width:50px; height:20px; background:#7daea3; border:1px solid #282828;'></span> | `#7daea3` |
+| `include` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
+| `label` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
+| `macro` | <span style='display:inline-block; width:50px; height:20px; background:#89b482; border:1px solid #282828;'></span> | `#89b482` |
+| `number` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
+| `operator` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
+| `preCondit` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
+| `preproc` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
+| `special` | <span style='display:inline-block; width:50px; height:20px; background:#d8a657; border:1px solid #282828;'></span> | `#d8a657` |
+| `specialChar` | <span style='display:inline-block; width:50px; height:20px; background:#d8a657; border:1px solid #282828;'></span> | `#d8a657` |
+| `statement` | <span style='display:inline-block; width:50px; height:20px; background:#ea6962; border:1px solid #282828;'></span> | `#ea6962` |
+| `storageClass` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
+| `string` | <span style='display:inline-block; width:50px; height:20px; background:#a9b665; border:1px solid #282828;'></span> | `#a9b665` |
+| `structure` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
+| `tag` | <span style='display:inline-block; width:50px; height:20px; background:#89b482; border:1px solid #282828;'></span> | `#89b482` |
+| `todo` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
+| `type` | <span style='display:inline-block; width:50px; height:20px; background:#d8a657; border:1px solid #282828;'></span> | `#d8a657` |
 
 ### Semantic Colors
 
 | Name | Preview | Hex |
 | ---- | ------- | --- |
 
-| `body` | ![3f3b3b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#3f3b3b"/>
-</svg>) | `#3f3b3b` |
-| `border` | ![d4be98](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d4be98"/>
-</svg>) | `#d4be98` |
-| `border-active` | ![d4be98](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d4be98"/>
-</svg>) | `#d4be98` |
-| `border-inactive` | ![585350](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#585350"/>
-</svg>) | `#585350` |
-| `footer` | ![282828](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#282828"/>
-</svg>) | `#282828` |
-| `header` | ![282828](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#282828"/>
-</svg>) | `#282828` |
-| `menu` | ![282828](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#282828"/>
-</svg>) | `#282828` |
-| `subtext` | ![a49384](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a49384"/>
-</svg>) | `#a49384` |
-| `text` | ![d4be98](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d4be98"/>
-</svg>) | `#d4be98` |
-| `text-bright` | ![d9c7a5](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d9c7a5"/>
-</svg>) | `#d9c7a5` |
+| `body` | <span style='display:inline-block; width:50px; height:20px; background:#3f3b3b; border:1px solid #282828;'></span> | `#3f3b3b` |
+| `border` | <span style='display:inline-block; width:50px; height:20px; background:#d4be98; border:1px solid #282828;'></span> | `#d4be98` |
+| `border-active` | <span style='display:inline-block; width:50px; height:20px; background:#d4be98; border:1px solid #282828;'></span> | `#d4be98` |
+| `border-inactive` | <span style='display:inline-block; width:50px; height:20px; background:#585350; border:1px solid #282828;'></span> | `#585350` |
+| `footer` | <span style='display:inline-block; width:50px; height:20px; background:#282828; border:1px solid #555;'></span> | `#282828` |
+| `header` | <span style='display:inline-block; width:50px; height:20px; background:#282828; border:1px solid #555;'></span> | `#282828` |
+| `menu` | <span style='display:inline-block; width:50px; height:20px; background:#282828; border:1px solid #555;'></span> | `#282828` |
+| `subtext` | <span style='display:inline-block; width:50px; height:20px; background:#a49384; border:1px solid #282828;'></span> | `#a49384` |
+| `text` | <span style='display:inline-block; width:50px; height:20px; background:#d4be98; border:1px solid #282828;'></span> | `#d4be98` |
+| `text-bright` | <span style='display:inline-block; width:50px; height:20px; background:#d9c7a5; border:1px solid #282828;'></span> | `#d9c7a5` |
 
 ## Color Scales
 
@@ -179,360 +119,192 @@ Generated documentation for the color scheme.
 | Name | Preview | Hex |
 | ---- | ------- | --- |
 
-| `base` | ![ea6962](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#ea6962"/>
-</svg>) | `#ea6962` |
-| `down1` | ![e2615b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#e2615b"/>
-</svg>) | `#e2615b` |
-| `down2` | ![d95a54](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d95a54"/>
-</svg>) | `#d95a54` |
-| `down3` | ![d1544e](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d1544e"/>
-</svg>) | `#d1544e` |
-| `down4` | ![c64f49](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#c64f49"/>
-</svg>) | `#c64f49` |
-| `up1` | ![e77a74](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#e77a74"/>
-</svg>) | `#e77a74` |
-| `up2` | ![e58b86](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#e58b86"/>
-</svg>) | `#e58b86` |
-| `up3` | ![e39b96](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#e39b96"/>
-</svg>) | `#e39b96` |
-| `up4` | ![e3a9a6](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#e3a9a6"/>
-</svg>) | `#e3a9a6` |
+| `base` | <span style='display:inline-block; width:50px; height:20px; background:#ea6962; border:1px solid #282828;'></span> | `#ea6962` |
+| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#e2615b; border:1px solid #282828;'></span> | `#e2615b` |
+| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#d95a54; border:1px solid #282828;'></span> | `#d95a54` |
+| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#d1544e; border:1px solid #282828;'></span> | `#d1544e` |
+| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#c64f49; border:1px solid #282828;'></span> | `#c64f49` |
+| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#e77a74; border:1px solid #282828;'></span> | `#e77a74` |
+| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#e58b86; border:1px solid #282828;'></span> | `#e58b86` |
+| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#e39b96; border:1px solid #282828;'></span> | `#e39b96` |
+| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#e3a9a6; border:1px solid #282828;'></span> | `#e3a9a6` |
 
 ### Color Scale: orange
 
 | Name | Preview | Hex |
 | ---- | ------- | --- |
 
-| `base` | ![e78a4e](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#e78a4e"/>
-</svg>) | `#e78a4e` |
-| `down1` | ![df8247](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#df8247"/>
-</svg>) | `#df8247` |
-| `down2` | ![d57b41](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d57b41"/>
-</svg>) | `#d57b41` |
-| `down3` | ![cc743c](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#cc743c"/>
-</svg>) | `#cc743c` |
-| `down4` | ![bc6e3c](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#bc6e3c"/>
-</svg>) | `#bc6e3c` |
-| `up1` | ![e39461](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#e39461"/>
-</svg>) | `#e39461` |
-| `up2` | ![e19e73](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#e19e73"/>
-</svg>) | `#e19e73` |
-| `up3` | ![dea884](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#dea884"/>
-</svg>) | `#dea884` |
-| `up4` | ![ddb195](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#ddb195"/>
-</svg>) | `#ddb195` |
+| `base` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
+| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#df8247; border:1px solid #282828;'></span> | `#df8247` |
+| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#d57b41; border:1px solid #282828;'></span> | `#d57b41` |
+| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#cc743c; border:1px solid #282828;'></span> | `#cc743c` |
+| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#bc6e3c; border:1px solid #282828;'></span> | `#bc6e3c` |
+| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#e39461; border:1px solid #282828;'></span> | `#e39461` |
+| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#e19e73; border:1px solid #282828;'></span> | `#e19e73` |
+| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#dea884; border:1px solid #282828;'></span> | `#dea884` |
+| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#ddb195; border:1px solid #282828;'></span> | `#ddb195` |
 
 ### Color Scale: yellow
 
 | Name | Preview | Hex |
 | ---- | ------- | --- |
 
-| `base` | ![d8a657](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d8a657"/>
-</svg>) | `#d8a657` |
-| `down1` | ![ce9e52](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#ce9e52"/>
-</svg>) | `#ce9e52` |
-| `down2` | ![c4964c](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#c4964c"/>
-</svg>) | `#c4964c` |
-| `down3` | ![b88d49](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#b88d49"/>
-</svg>) | `#b88d49` |
-| `down4` | ![a7834b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a7834b"/>
-</svg>) | `#a7834b` |
-| `up1` | ![d5ac69](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d5ac69"/>
-</svg>) | `#d5ac69` |
-| `up2` | ![d3b17b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d3b17b"/>
-</svg>) | `#d3b17b` |
-| `up3` | ![d3b78a](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d3b78a"/>
-</svg>) | `#d3b78a` |
-| `up4` | ![d3bc9a](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d3bc9a"/>
-</svg>) | `#d3bc9a` |
+| `base` | <span style='display:inline-block; width:50px; height:20px; background:#d8a657; border:1px solid #282828;'></span> | `#d8a657` |
+| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#ce9e52; border:1px solid #282828;'></span> | `#ce9e52` |
+| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#c4964c; border:1px solid #282828;'></span> | `#c4964c` |
+| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#b88d49; border:1px solid #282828;'></span> | `#b88d49` |
+| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#a7834b; border:1px solid #282828;'></span> | `#a7834b` |
+| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#d5ac69; border:1px solid #282828;'></span> | `#d5ac69` |
+| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#d3b17b; border:1px solid #282828;'></span> | `#d3b17b` |
+| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#d3b78a; border:1px solid #282828;'></span> | `#d3b78a` |
+| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#d3bc9a; border:1px solid #282828;'></span> | `#d3bc9a` |
 
 ### Color Scale: olive
 
 | Name | Preview | Hex |
 | ---- | ------- | --- |
 
-| `base` | ![b9b25f](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#b9b25f"/>
-</svg>) | `#b9b25f` |
-| `down1` | ![ada75b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#ada75b"/>
-</svg>) | `#ada75b` |
-| `down2` | ![9e995b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#9e995b"/>
-</svg>) | `#9e995b` |
-| `down3` | ![8e8a5c](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#8e8a5c"/>
-</svg>) | `#8e8a5c` |
-| `down4` | ![7e7b5d](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#7e7b5d"/>
-</svg>) | `#7e7b5d` |
-| `up1` | ![b8b270](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#b8b270"/>
-</svg>) | `#b8b270` |
-| `up2` | ![b6b280](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#b6b280"/>
-</svg>) | `#b6b280` |
-| `up3` | ![b6b390](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#b6b390"/>
-</svg>) | `#b6b390` |
-| `up4` | ![b8b69e](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#b8b69e"/>
-</svg>) | `#b8b69e` |
+| `base` | <span style='display:inline-block; width:50px; height:20px; background:#b9b25f; border:1px solid #282828;'></span> | `#b9b25f` |
+| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#ada75b; border:1px solid #282828;'></span> | `#ada75b` |
+| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#9e995b; border:1px solid #282828;'></span> | `#9e995b` |
+| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#8e8a5c; border:1px solid #282828;'></span> | `#8e8a5c` |
+| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#7e7b5d; border:1px solid #282828;'></span> | `#7e7b5d` |
+| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#b8b270; border:1px solid #282828;'></span> | `#b8b270` |
+| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#b6b280; border:1px solid #282828;'></span> | `#b6b280` |
+| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#b6b390; border:1px solid #282828;'></span> | `#b6b390` |
+| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#b8b69e; border:1px solid #282828;'></span> | `#b8b69e` |
 
 ### Color Scale: green
 
 | Name | Preview | Hex |
 | ---- | ------- | --- |
 
-| `base` | ![a9b665](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a9b665"/>
-</svg>) | `#a9b665` |
-| `down1` | ![9eaa62](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#9eaa62"/>
-</svg>) | `#9eaa62` |
-| `down2` | ![939c60](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#939c60"/>
-</svg>) | `#939c60` |
-| `down3` | ![858c61](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#858c61"/>
-</svg>) | `#858c61` |
-| `down4` | ![787b62](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#787b62"/>
-</svg>) | `#787b62` |
-| `up1` | ![abb575](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#abb575"/>
-</svg>) | `#abb575` |
-| `up2` | ![adb486](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#adb486"/>
-</svg>) | `#adb486` |
-| `up3` | ![afb594](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#afb594"/>
-</svg>) | `#afb594` |
-| `up4` | ![b3b6a3](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#b3b6a3"/>
-</svg>) | `#b3b6a3` |
+| `base` | <span style='display:inline-block; width:50px; height:20px; background:#a9b665; border:1px solid #282828;'></span> | `#a9b665` |
+| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#9eaa62; border:1px solid #282828;'></span> | `#9eaa62` |
+| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#939c60; border:1px solid #282828;'></span> | `#939c60` |
+| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#858c61; border:1px solid #282828;'></span> | `#858c61` |
+| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#787b62; border:1px solid #282828;'></span> | `#787b62` |
+| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#abb575; border:1px solid #282828;'></span> | `#abb575` |
+| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#adb486; border:1px solid #282828;'></span> | `#adb486` |
+| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#afb594; border:1px solid #282828;'></span> | `#afb594` |
+| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#b3b6a3; border:1px solid #282828;'></span> | `#b3b6a3` |
 
 ### Color Scale: teal
 
 | Name | Preview | Hex |
 | ---- | ------- | --- |
 
-| `base` | ![89b482](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#89b482"/>
-</svg>) | `#89b482` |
-| `down1` | ![85a87e](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#85a87e"/>
-</svg>) | `#85a87e` |
-| `down2` | ![819b7d](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#819b7d"/>
-</svg>) | `#819b7d` |
-| `down3` | ![7e8d7b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#7e8d7b"/>
-</svg>) | `#7e8d7b` |
-| `down4` | ![7b7e7b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#7b7e7b"/>
-</svg>) | `#7b7e7b` |
-| `up1` | ![96b492](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#96b492"/>
-</svg>) | `#96b492` |
-| `up2` | ![a2b59f](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a2b59f"/>
-</svg>) | `#a2b59f` |
-| `up3` | ![aeb7ad](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#aeb7ad"/>
-</svg>) | `#aeb7ad` |
-| `up4` | ![b9bab9](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#b9bab9"/>
-</svg>) | `#b9bab9` |
+| `base` | <span style='display:inline-block; width:50px; height:20px; background:#89b482; border:1px solid #282828;'></span> | `#89b482` |
+| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#85a87e; border:1px solid #282828;'></span> | `#85a87e` |
+| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#819b7d; border:1px solid #282828;'></span> | `#819b7d` |
+| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#7e8d7b; border:1px solid #282828;'></span> | `#7e8d7b` |
+| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#7b7e7b; border:1px solid #282828;'></span> | `#7b7e7b` |
+| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#96b492; border:1px solid #282828;'></span> | `#96b492` |
+| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#a2b59f; border:1px solid #282828;'></span> | `#a2b59f` |
+| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#aeb7ad; border:1px solid #282828;'></span> | `#aeb7ad` |
+| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#b9bab9; border:1px solid #282828;'></span> | `#b9bab9` |
 
 ### Color Scale: blue
 
 | Name | Preview | Hex |
 | ---- | ------- | --- |
 
-| `base` | ![7daea3](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#7daea3"/>
-</svg>) | `#7daea3` |
-| `down1` | ![7ba198](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#7ba198"/>
-</svg>) | `#7ba198` |
-| `down2` | ![79938e](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#79938e"/>
-</svg>) | `#79938e` |
-| `down3` | ![788582](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#788582"/>
-</svg>) | `#788582` |
-| `down4` | ![777777](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#777777"/>
-</svg>) | `#777777` |
-| `up1` | ![8caea7](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#8caea7"/>
-</svg>) | `#8caea7` |
-| `up2` | ![9bafaa](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#9bafaa"/>
-</svg>) | `#9bafaa` |
-| `up3` | ![a8b1af](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a8b1af"/>
-</svg>) | `#a8b1af` |
-| `up4` | ![b4b4b4](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#b4b4b4"/>
-</svg>) | `#b4b4b4` |
+| `base` | <span style='display:inline-block; width:50px; height:20px; background:#7daea3; border:1px solid #282828;'></span> | `#7daea3` |
+| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#7ba198; border:1px solid #282828;'></span> | `#7ba198` |
+| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#79938e; border:1px solid #282828;'></span> | `#79938e` |
+| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#788582; border:1px solid #282828;'></span> | `#788582` |
+| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#777777; border:1px solid #282828;'></span> | `#777777` |
+| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#8caea7; border:1px solid #282828;'></span> | `#8caea7` |
+| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#9bafaa; border:1px solid #282828;'></span> | `#9bafaa` |
+| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#a8b1af; border:1px solid #282828;'></span> | `#a8b1af` |
+| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#b4b4b4; border:1px solid #282828;'></span> | `#b4b4b4` |
 
 ### Color Scale: violet
 
 | Name | Preview | Hex |
 | ---- | ------- | --- |
 
-| `base` | ![d892c1](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d892c1"/>
-</svg>) | `#d892c1` |
-| `down1` | ![cf8cb9](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#cf8cb9"/>
-</svg>) | `#cf8cb9` |
-| `down2` | ![c586b0](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#c586b0"/>
-</svg>) | `#c586b0` |
-| `down3` | ![bb81a8](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#bb81a8"/>
-</svg>) | `#bb81a8` |
-| `down4` | ![af7e9f](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#af7e9f"/>
-</svg>) | `#af7e9f` |
-| `up1` | ![d8a1c6](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d8a1c6"/>
-</svg>) | `#d8a1c6` |
-| `up2` | ![d9b0cc](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d9b0cc"/>
-</svg>) | `#d9b0cc` |
-| `up3` | ![dbbdd1](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#dbbdd1"/>
-</svg>) | `#dbbdd1` |
-| `up4` | ![dec9d7](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#dec9d7"/>
-</svg>) | `#dec9d7` |
+| `base` | <span style='display:inline-block; width:50px; height:20px; background:#d892c1; border:1px solid #282828;'></span> | `#d892c1` |
+| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#cf8cb9; border:1px solid #282828;'></span> | `#cf8cb9` |
+| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#c586b0; border:1px solid #282828;'></span> | `#c586b0` |
+| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#bb81a8; border:1px solid #282828;'></span> | `#bb81a8` |
+| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#af7e9f; border:1px solid #282828;'></span> | `#af7e9f` |
+| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#d8a1c6; border:1px solid #282828;'></span> | `#d8a1c6` |
+| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#d9b0cc; border:1px solid #282828;'></span> | `#d9b0cc` |
+| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#dbbdd1; border:1px solid #282828;'></span> | `#dbbdd1` |
+| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#dec9d7; border:1px solid #282828;'></span> | `#dec9d7` |
 
 ### Color Scale: purple
 
 | Name | Preview | Hex |
 | ---- | ------- | --- |
 
-| `base` | ![d3869b](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d3869b"/>
-</svg>) | `#d3869b` |
-| `down1` | ![ca8094](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#ca8094"/>
-</svg>) | `#ca8094` |
-| `down2` | ![bf7c8e](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#bf7c8e"/>
-</svg>) | `#bf7c8e` |
-| `down3` | ![b47788](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#b47788"/>
-</svg>) | `#b47788` |
-| `down4` | ![a87482](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a87482"/>
-</svg>) | `#a87482` |
-| `up1` | ![d395a6](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d395a6"/>
-</svg>) | `#d395a6` |
-| `up2` | ![d3a4b1](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d3a4b1"/>
-</svg>) | `#d3a4b1` |
-| `up3` | ![d4b3bc](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d4b3bc"/>
-</svg>) | `#d4b3bc` |
-| `up4` | ![d7bfc6](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d7bfc6"/>
-</svg>) | `#d7bfc6` |
+| `base` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
+| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#ca8094; border:1px solid #282828;'></span> | `#ca8094` |
+| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#bf7c8e; border:1px solid #282828;'></span> | `#bf7c8e` |
+| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#b47788; border:1px solid #282828;'></span> | `#b47788` |
+| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#a87482; border:1px solid #282828;'></span> | `#a87482` |
+| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#d395a6; border:1px solid #282828;'></span> | `#d395a6` |
+| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#d3a4b1; border:1px solid #282828;'></span> | `#d3a4b1` |
+| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#d4b3bc; border:1px solid #282828;'></span> | `#d4b3bc` |
+| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#d7bfc6; border:1px solid #282828;'></span> | `#d7bfc6` |
 
 ### Color Scale: pink
 
 | Name | Preview | Hex |
 | ---- | ------- | --- |
 
-| `base` | ![cf91be](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#cf91be"/>
-</svg>) | `#cf91be` |
-| `down1` | ![c58bb6](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#c58bb6"/>
-</svg>) | `#c58bb6` |
-| `down2` | ![bb87ac](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#bb87ac"/>
-</svg>) | `#bb87ac` |
-| `down3` | ![af83a3](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#af83a3"/>
-</svg>) | `#af83a3` |
-| `down4` | ![a28099](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a28099"/>
-</svg>) | `#a28099` |
-| `up1` | ![d0a0c2](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d0a0c2"/>
-</svg>) | `#d0a0c2` |
-| `up2` | ![d0aec7](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d0aec7"/>
-</svg>) | `#d0aec7` |
-| `up3` | ![d3bbcc](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d3bbcc"/>
-</svg>) | `#d3bbcc` |
-| `up4` | ![d6c8d2](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#d6c8d2"/>
-</svg>) | `#d6c8d2` |
+| `base` | <span style='display:inline-block; width:50px; height:20px; background:#cf91be; border:1px solid #282828;'></span> | `#cf91be` |
+| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#c58bb6; border:1px solid #282828;'></span> | `#c58bb6` |
+| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#bb87ac; border:1px solid #282828;'></span> | `#bb87ac` |
+| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#af83a3; border:1px solid #282828;'></span> | `#af83a3` |
+| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#a28099; border:1px solid #282828;'></span> | `#a28099` |
+| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#d0a0c2; border:1px solid #282828;'></span> | `#d0a0c2` |
+| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#d0aec7; border:1px solid #282828;'></span> | `#d0aec7` |
+| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#d3bbcc; border:1px solid #282828;'></span> | `#d3bbcc` |
+| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#d6c8d2; border:1px solid #282828;'></span> | `#d6c8d2` |
 
 ### Color Scale: brown
 
 | Name | Preview | Hex |
 | ---- | ------- | --- |
 
-| `base` | ![a87757](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a87757"/>
-</svg>) | `#a87757` |
-| `down1` | ![977259](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#977259"/>
-</svg>) | `#977259` |
-| `down2` | ![876c5a](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#876c5a"/>
-</svg>) | `#876c5a` |
-| `down3` | ![77665a](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#77665a"/>
-</svg>) | `#77665a` |
-| `down4` | ![695f59](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#695f59"/>
-</svg>) | `#695f59` |
-| `up1` | ![a68168](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a68168"/>
-</svg>) | `#a68168` |
-| `up2` | ![a58a79](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a58a79"/>
-</svg>) | `#a58a79` |
-| `up3` | ![a59388](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a59388"/>
-</svg>) | `#a59388` |
-| `up4` | ![a69d96](<svg xmlns="http://www.w3.org/2000/svg" width="50" height="20" viewBox="0 0 50 20">
-<rect width="50" height="20" fill="#a69d96"/>
-</svg>) | `#a69d96` |
+| `base` | <span style='display:inline-block; width:50px; height:20px; background:#a87757; border:1px solid #282828;'></span> | `#a87757` |
+| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#977259; border:1px solid #282828;'></span> | `#977259` |
+| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#876c5a; border:1px solid #282828;'></span> | `#876c5a` |
+| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#77665a; border:1px solid #282828;'></span> | `#77665a` |
+| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#695f59; border:1px solid #282828;'></span> | `#695f59` |
+| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#a68168; border:1px solid #282828;'></span> | `#a68168` |
+| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#a58a79; border:1px solid #282828;'></span> | `#a58a79` |
+| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#a59388; border:1px solid #282828;'></span> | `#a59388` |
+| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#a69d96; border:1px solid #282828;'></span> | `#a69d96` |
+
+### Color Scale: primary
+
+| Name | Preview | Hex |
+| ---- | ------- | --- |
+
+| `base` | <span style='display:inline-block; width:50px; height:20px; background:#ea6962; border:1px solid #282828;'></span> | `#ea6962` |
+| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#e2615b; border:1px solid #282828;'></span> | `#e2615b` |
+| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#d95a54; border:1px solid #282828;'></span> | `#d95a54` |
+| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#d1544e; border:1px solid #282828;'></span> | `#d1544e` |
+| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#c64f49; border:1px solid #282828;'></span> | `#c64f49` |
+| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#e77a74; border:1px solid #282828;'></span> | `#e77a74` |
+| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#e58b86; border:1px solid #282828;'></span> | `#e58b86` |
+| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#e39b96; border:1px solid #282828;'></span> | `#e39b96` |
+| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#e3a9a6; border:1px solid #282828;'></span> | `#e3a9a6` |
+
+## Usage
+
+This color scheme is generated using Nix. To use these colors, you can:
+
+1. Import the color scheme directly in your Nix configuration
+2. Generate theme files for your preferred applications
+3. Use the hex values in your CSS/HTML
+
+## Notes
+
+- All colors are in hexadecimal format
+- Preview squares show approximate colors (may vary by display)
+- Neutral shades provide a range from lightest (50) to darkest (900)
+- Color scales provide variations for UI elements