diff --git a/core/scss/_props.scss b/core/scss/_props.scss
index d0cc83ed3..2d31aed58 100644
--- a/core/scss/_props.scss
+++ b/core/scss/_props.scss
@@ -42,9 +42,9 @@
     --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
   }
 
-  /** Social colors */
-  @each $name, $color in $social-colors {
-    --#{$prefix}#{$name}: #{$color};
+  /** Gray colors */
+  @each $name, $color in $gray-colors {
+    --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color, white) > $min-contrast-ratio, var(--#{$prefix}white), var(--#{$prefix}body-color))};
   }
 
   /** Spacers */
diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss
index b87e20b8f..913dedcc2 100644
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -279,6 +279,7 @@ $gray-colors: (
   gray-700: $gray-700,
   gray-800: $gray-800,
   gray-900: $gray-900,
+  gray-950: $gray-950,
 ) !default;
 
 $theme-colors: map-merge($theme-colors, map-merge($extra-colors, ()));
diff --git a/core/scss/utils/_colors.scss b/core/scss/utils/_colors.scss
index 94cd1d103..f5111530e 100644
--- a/core/scss/utils/_colors.scss
+++ b/core/scss/utils/_colors.scss
@@ -64,7 +64,7 @@
   }
 
   .text-#{"" + $color}-fg {
-    color: $value !important;
+    color: var(--#{$prefix}#{$color}-fg) !important;
   }
 }
 
@@ -75,7 +75,7 @@
   }
 
   .text-#{"" + $color}-fg {
-    color: $value !important;
+    color: var(--#{$prefix}#{$color}-fg) !important;
   }
 }
 
diff --git a/preview/pages/buttons.html b/preview/pages/buttons.html
index de9ffae34..44b4c2812 100644
--- a/preview/pages/buttons.html
+++ b/preview/pages/buttons.html
@@ -81,7 +81,7 @@ permalink: buttons.html
 				<h3 class="card-title">Icon buttons</h3>
 			</div>
 			<div class="card-body">
-				{% include "parts/buttons-table.html" variants=site.socials hide-labels=true icon-only=true auto-columns=true %}
+				{% include "parts/buttons-table.html" variants=site.socialColors hide-labels=true icon-only=true auto-columns=true %}
 			</div>
 		</div>
 	</div>
@@ -91,7 +91,7 @@ permalink: buttons.html
 				<h3 class="card-title">Social colors</h3>
 			</div>
 			<div class="card-body">
-				{% include "parts/buttons-table.html" variants=site.socials hide-labels=true icon=true auto-columns=true %}
+				{% include "parts/buttons-table.html" variants=site.socialColors hide-labels=true icon=true auto-columns=true %}
 			</div>
 		</div>
 	</div>
diff --git a/preview/pages/colors.html b/preview/pages/colors.html
index ed077613a..bdb6145b4 100644
--- a/preview/pages/colors.html
+++ b/preview/pages/colors.html
@@ -10,63 +10,97 @@ permalink: colors.html
 {% for color in site.colors %}
 {% assign colors = colors | push: color[0] %}
 {% endfor %}
-{% assign colors = colors | push: 'dark' %}
+
 
 <div class="row row-cards">
-	<div class="col-12">
+	<div class="col-3">
 		<div class="card">
 			<div class="card-body">
-				<div class="table-responsive">
-					<table class="table text-center">
-						<tr>
-							{% for color in colors %}
-							<td>
-								<div class="avatar bg-{{ color }} text-{{ color }}-fg" data-demo-color>{{ color | slice: 0, 2 }}
+				<div class="row g-3">
+					{% for color in site.colors %}
+					<div class="col-12">
+						<div class="row align-items-center">
+							<div class="col-auto">
+								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
+									{{ color[1].abbr }}
 								</div>
-							</td>
-							{% endfor %}
-						</tr>
-						<tr>
-							{% for color in colors %}
-							<td>
-								<div class="avatar bg-{{ color }}-lt" data-demo-color>{{ color | slice: 0, 2 }}</div>
-							</td>
-							{% endfor %}
-						</tr>
-						<tr>
-							{% for color in colors %}
-							<td>
-								<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}
+							</div>
+							<div class="col">
+								{{ color[1].title }}<br />
+								<code>{{ color[1].hex }}</code>
+							</div>
+						</div>
+					</div>
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-3">
+		<div class="card">
+			<div class="card-body">
+				<div class="row g-3">
+					{% for color in site.lightColors %}
+					<div class="col-12">
+						<div class="row align-items-center">
+							<div class="col-auto">
+								<div class="avatar bg-{{ color[0] }}-lt text-{{ color[0] }}-lt-fg">
+									{{ color[1].abbr }}
 								</div>
-							</td>
-							{% endfor %}
-						</tr>
-						<tr class="bg-surface-tertiary">
-							{% for color in colors %}
-							<td>
-								<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}
+							</div>
+							<div class="col">
+								{{ color[1].title }}<br />
+								<code>{{ color[1].hex }}</code>
+							</div>
+						</div>
+					</div>
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-3">
+		<div class="card">
+			<div class="card-body">
+				<div class="row g-3">
+					{% for color in site.grayColors %}
+					<div class="col-12">
+						<div class="row align-items-center">
+							<div class="col-auto">
+								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
+									{{ color[1].abbr }}
 								</div>
-							</td>
-							{% endfor %}
-						</tr>
-						<tr class="bg-dark text-white">
-							{% for color in colors %}
-							<td>
-								{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
-								<div class="avatar text-{{ c }} bg-transparent" data-demo-color>{{ c | slice: 0, 2 }}</div>
-							</td>
-							{% endfor %}
-						</tr>
-						<tr class="bg-dark text-white">
-							{% for color in colors %}
-							<td>
-								{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
-								<div class="avatar bg-{{ c }}-lt" data-demo-color>{{ c | slice: 0, 2 }}</div>
-								<div class="mt-2" data-demo-color-contrast></div>
-							</td>
-							{% endfor %}
-						</tr>
-					</table>
+							</div>
+							<div class="col">
+								{{ color[1].title }}<br />
+								<code>{{ color[1].hex }}</code>
+							</div>
+						</div>
+					</div>
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-3">
+		<div class="card">
+			<div class="card-body">
+				<div class="row g-3">
+					{% for color in site.socialColors %}
+					<div class="col-12">
+						<div class="row align-items-center">
+							<div class="col-auto">
+								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
+									{% include "ui/icon.html" icon=color[1].icon %}
+								</div>
+							</div>
+							<div class="col">
+								{{ color[1].title }}<br />
+								<code>{{ color[1].hex }}</code>
+							</div>
+						</div>
+					</div>
+					{% endfor %}
 				</div>
 			</div>
 		</div>
@@ -87,7 +121,7 @@ permalink: colors.html
 								<div class="col">
 									<div>
 										<label class="form-label">From</label>
-										<select class="form-select" data-demo-color-select name="color-from">
+										<select class="form-select" name="color-from">
 											{% for color in colors %}
 											<option value="{{ color }}">{{ color }}</option>
 											{% endfor %}
@@ -95,7 +129,7 @@ permalink: colors.html
 									</div>
 									<div class="mt-3">
 										<label class="form-label">To</label>
-										<select class="form-select" data-demo-color-select name="color-to">
+										<select class="form-select" name="color-to">
 											{% for color in colors %}
 											<option value="{{ color }}" {% if color=='transparent' %} selected{% endif %}>
 												{{ color }}
@@ -107,7 +141,7 @@ permalink: colors.html
 								<div class="col">
 									<div>
 										<label class="form-label">Via</label>
-										<select class="form-select" data-demo-color-select name="color-via">
+										<select class="form-select" name="color-via">
 											<option></option>
 											{% for color in colors %}
 											<option value="{{ color }}">{{ color }}</option>
@@ -116,7 +150,7 @@ permalink: colors.html
 									</div>
 									<div class="mt-3">
 										<label class="form-label">Direction</label>
-										<select class="form-select" data-demo-color-select name="color-direction">
+										<select class="form-select" name="color-direction">
 											<option value="to-t">to top</option>
 											<option value="to-te">to top right</option>
 											<option value="to-r" selected>to right</option>
diff --git a/shared/data/site.json b/shared/data/site.json
index 6e6ecf38e..ceb0f9f30 100644
--- a/shared/data/site.json
+++ b/shared/data/site.json
@@ -39,124 +39,148 @@
     "blue": {
       "class": "blue",
       "hex": "var(--tblr-blue)",
-      "title": "Blue"
+      "title": "Blue",
+      "abbr": "bl"
     },
     "azure": {
       "class": "azure",
       "hex": "var(--tblr-azure)",
-      "title": "Azure"
+      "title": "Azure",
+      "abbr": "az"
     },
     "indigo": {
       "class": "indigo",
       "hex": "var(--tblr-indigo)",
-      "title": "Indigo"
+      "title": "Indigo",
+      "abbr": "id"
     },
     "purple": {
       "class": "purple",
       "hex": "var(--tblr-purple)",
-      "title": "Purple"
+      "title": "Purple",
+      "abbr": "pu"
     },
     "pink": {
       "class": "pink",
       "hex": "var(--tblr-pink)",
-      "title": "Pink"
+      "title": "Pink",
+      "abbr": "pk"
     },
     "red": {
       "class": "red",
       "hex": "var(--tblr-red)",
-      "title": "Red"
+      "title": "Red",
+      "abbr": "rd"
     },
     "orange": {
       "class": "orange",
       "hex": "var(--tblr-orange)",
-      "title": "Orange"
+      "title": "Orange",
+      "abbr": "or"
     },
     "yellow": {
       "class": "yellow",
       "hex": "var(--tblr-yellow)",
-      "title": "Yellow"
+      "title": "Yellow",
+      "abbr": "yl"
     },
     "lime": {
       "class": "lime",
       "hex": "var(--tblr-lime)",
-      "title": "Lime"
+      "title": "Lime",
+      "abbr": "lm"
     },
     "green": {
       "class": "green",
       "hex": "var(--tblr-green)",
-      "title": "Green"
+      "title": "Green",
+      "abbr": "gn"
     },
     "teal": {
       "class": "teal",
       "hex": "var(--tblr-teal)",
-      "title": "Teal"
+      "title": "Teal",
+      "abbr": "tl"
     },
     "cyan": {
       "class": "cyan",
       "hex": "var(--tblr-cyan)",
-      "title": "Cyan"
+      "title": "Cyan",
+      "abbr": "cy"
     }
   },
   "lightColors": {
     "blue": {
       "class": "blue",
       "hex": "var(--tblr-blue-lt)",
-      "title": "Blue"
+      "title": "Blue Light",
+      "abbr": "bl"
     },
     "azure": {
       "class": "azure",
       "hex": "var(--tblr-azure-lt)",
-      "title": "Azure"
+      "title": "Azure Light",
+      "abbr": "az"
     },
     "indigo": {
       "class": "indigo",
       "hex": "var(--tblr-indigo-lt)",
-      "title": "Indigo"
+      "title": "Indigo Light",
+      "abbr": "id"
     },
     "purple": {
       "class": "purple",
       "hex": "var(--tblr-purple-lt)",
-      "title": "Purple"
+      "title": "Purple Light",
+      "abbr": "pu"
     },
     "pink": {
       "class": "pink",
       "hex": "var(--tblr-pink-lt)",
-      "title": "Pink"
+      "title": "Pink Light",
+      "abbr": "pk"
     },
     "red": {
       "class": "red",
       "hex": "var(--tblr-red-lt)",
-      "title": "Red"
+      "title": "Red Light",
+      "abbr": "rd"
     },
     "orange": {
       "class": "orange",
       "hex": "var(--tblr-orange-lt)",
-      "title": "Orange"
+      "title": "Orange Light",
+      "abbr": "or"
     },
     "yellow": {
       "class": "yellow",
       "hex": "var(--tblr-yellow-lt)",
-      "title": "Yellow"
+      "title": "Yellow Light",
+      "abbr": "yl"
     },
     "lime": {
       "class": "lime",
       "hex": "var(--tblr-lime-lt)",
-      "title": "Lime"
+      "title": "Lime Light",
+      "abbr": "lm"
     },
     "green": {
       "class": "green",
       "hex": "var(--tblr-green-lt)",
-      "title": "Green"
+      "title": "Green Light",
+      "abbr": "gn"
     },
     "teal": {
       "class": "teal",
       "hex": "var(--tblr-teal-lt)",
-      "title": "Teal"
+      "title": "Teal Light",
+      "abbr": "tl"
     },
     "cyan": {
       "class": "cyan",
       "hex": "var(--tblr-cyan-lt)",
-      "title": "Cyan"
+      "title": "Cyan Light",
+      "abbr": "cy"
     }
   },
   "skinColors": {
@@ -204,109 +228,156 @@
   "socialColors": {
     "facebook": {
       "title": "Facebook",
-      "hex": "#1877F2"
+      "hex": "var(--tblr-facebook)",
+      "abbr": "fb",
+      "icon": "brand-facebook"
     },
     "twitter": {
       "title": "Twitter",
-      "hex": "#1da1f2"
+      "hex": "var(--tblr-twitter)",
+      "abbr": "tw",
+      "icon": "brand-twitter"
+    },
+    "x": {
+      "title": "X",
+      "hex": "var(--tblr-x)",
+      "abbr": "x",
+      "icon": "brand-x"
     },
     "linkedin": {
       "title": "Linkedin",
-      "hex": "#0a66c2"
+      "hex": "var(--tblr-linkedin)",
+      "abbr": "li",
+      "icon": "brand-linkedin"
     },
     "google": {
       "title": "Google",
-      "hex": "#dc4e41"
+      "hex": "var(--tblr-google)",
+      "abbr": "go",
+      "icon": "brand-google"
     },
     "youtube": {
       "title": "Youtube",
-      "hex": "#ff0000"
+      "hex": "var(--tblr-youtube)",
+      "abbr": "yt",
+      "icon": "brand-youtube"
     },
     "vimeo": {
       "title": "Vimeo",
-      "hex": "#1ab7ea"
+      "hex": "var(--tblr-vimeo)",
+      "abbr": "vi",
+      "icon": "brand-vimeo"
     },
     "dribbble": {
       "title": "Dribbble",
-      "hex": "#ea4c89"
+      "hex": "var(--tblr-dribbble)",
+      "abbr": "dr",
+      "icon": "brand-dribbble"
     },
     "github": {
       "title": "Github",
-      "hex": "#181717"
+      "hex": "var(--tblr-github)",
+      "abbr": "gh",
+      "icon": "brand-github"
     },
     "instagram": {
       "title": "Instagram",
-      "hex": "#e4405f"
+      "hex": "var(--tblr-instagram)",
+      "abbr": "ig",
+      "icon": "brand-instagram"
     },
     "pinterest": {
       "title": "Pinterest",
-      "hex": "#bd081c"
+      "hex": "var(--tblr-pinterest)",
+      "abbr": "pt",
+      "icon": "brand-pinterest"
     },
     "vk": {
       "title": "VK",
-      "hex": "#6383a8"
+      "hex": "var(--tblr-vk)",
+      "abbr": "vk",
+      "icon": "brand-vk"
     },
     "rss": {
       "title": "RSS",
-      "hex": "#ffa500"
+      "hex": "var(--tblr-rss)",
+      "abbr": "rs",
+      "icon": "rss"
     },
     "flickr": {
       "title": "Flickr",
-      "hex": "#0063dc"
+      "hex": "var(--tblr-flickr)",
+      "abbr": "fl",
+      "icon": "brand-flickr"
     },
     "bitbucket": {
       "title": "Bitbucket",
-      "hex": "#0052cc"
+      "hex": "var(--tblr-bitbucket)",
+      "abbr": "bb",
+      "icon": "brand-bitbucket"
     },
     "tabler": {
       "title": "Tabler",
-      "hex": "#066fd1"
+      "hex": "var(--tblr-tabler)",
+      "abbr": "tb",
+      "icon": "brand-tabler"
     }
   },
   "grayColors": {
     "gray-50": {
-      "hex": "#f9fafb",
-      "title": "Gray 50"
+      "hex": "var(--tblr-gray-50)",
+      "title": "Gray 50",
+      "abbr": "50"
     },
     "gray-100": {
-      "hex": "#f3f4f6",
-      "title": "Gray 100"
+      "hex": "var(--tblr-gray-100)",
+      "title": "Gray 100",
+      "abbr": "100"
     },
     "gray-200": {
-      "hex": "#e5e7eb",
-      "title": "Gray 200"
+      "hex": "var(--tblr-gray-200)",
+      "title": "Gray 200",
+      "abbr": "200"
     },
     "gray-300": {
-      "hex": "#d1d5db",
-      "title": "Gray 300"
+      "hex": "var(--tblr-gray-300)",
+      "title": "Gray 300",
+      "abbr": "300"
     },
     "gray-400": {
-      "hex": "#9ca3af",
-      "title": "Gray 400"
+      "hex": "var(--tblr-gray-400)",
+      "title": "Gray 400",
+      "abbr": "400"
     },
     "gray-500": {
-      "hex": "#6b7280",
-      "title": "Gray 500"
+      "hex": "var(--tblr-gray-500)",
+      "title": "Gray 500",
+      "abbr": "500"
     },
     "gray-600": {
-      "hex": "#4b5563",
-      "title": "Gray 600"
+      "hex": "var(--tblr-gray-600)",
+      "title": "Gray 600",
+      "abbr": "600"
     },
     "gray-700": {
-      "hex": "#374151",
-      "title": "Gray 700"
+      "hex": "var(--tblr-gray-700)",
+      "title": "Gray 700",
+      "abbr": "700"
     },
     "gray-800": {
-      "hex": "#1f2937",
-      "title": "Gray 800"
+      "hex": "var(--tblr-gray-800)",
+      "title": "Gray 800",
+      "abbr": "800"
     },
     "gray-900": {
-      "hex": "#111827",
-      "title": "Gray 900"
+      "hex": "var(--tblr-gray-900)",
+      "title": "Gray 900",
+      "abbr": "900"
     },
     "gray-950": {
-      "hex": "#030712",
-      "title": "Gray 950"
+      "hex": "var(--tblr-gray-950)",
+      "title": "Gray 950",
+      "abbr": "950"
     }
   },
   "colorsExtra": {
@@ -389,68 +460,6 @@
       "title": "Disabled"
     }
   ],
-  "socials": {
-    "x": {
-      "icon": "brand-x",
-      "title": "X"
-    },
-    "facebook": {
-      "icon": "brand-facebook",
-      "title": "Facebook"
-    },
-    "twitter": {
-      "icon": "brand-twitter",
-      "title": "Twitter"
-    },
-    "google": {
-      "icon": "brand-google",
-      "title": "Google"
-    },
-    "youtube": {
-      "icon": "brand-youtube",
-      "title": "Youtube"
-    },
-    "vimeo": {
-      "icon": "brand-vimeo",
-      "title": "Vimeo"
-    },
-    "dribbble": {
-      "icon": "brand-dribbble",
-      "title": "Dribbble"
-    },
-    "github": {
-      "icon": "brand-github",
-      "title": "Github"
-    },
-    "instagram": {
-      "icon": "brand-instagram",
-      "title": "Instagram"
-    },
-    "pinterest": {
-      "icon": "brand-pinterest",
-      "title": "Pinterest"
-    },
-    "vk": {
-      "icon": "brand-vk",
-      "title": "VK"
-    },
-    "rss": {
-      "icon": "rss",
-      "title": "RSS"
-    },
-    "flickr": {
-      "icon": "brand-flickr",
-      "title": "Flickr"
-    },
-    "bitbucket": {
-      "icon": "brand-bitbucket",
-      "title": "Bitbucket"
-    },
-    "tabler": {
-      "icon": "brand-tabler",
-      "title": "Tabler"
-    }
-  },
   "months-short": [
     "Jan",
     "Feb",