holygrail5 1.0.19 → 1.0.21

package/dist/output.css

@@ -56,9 +56,10 @@ p, h1, h2, h3, h4, h5, h6 {
 }
 /* Variables CSS Compartidas */
 :root {
-  --hg-typo-font-family-primary: arial, sans-serif;
-  --hg-typo-font-family-primary-bold: "Arial Bold", Arial, sans-serif;
-  --hg-typo-font-family-secondary: "ms-serif", serif;
+  --hg-typo-font-family-primary-light: "suisse-light", Arial, Helvetica, sans-serif;
+  --hg-typo-font-family-primary-regular: "suisse-regular", Arial, Helvetica, sans-serif;
+  --hg-typo-font-family-primary-bold: "suisse-semibold", Arial, Helvetica, sans-serif;
+  --hg-typo-font-family-secondary: "suisse-medium", Arial, Helvetica, sans-serif;
   --hg-typo-line-height-1: 1;
   --hg-typo-line-height-1-976: 1.976;
   --hg-typo-line-height-1-2: 1.2;
@@ -68,6 +69,7 @@ p, h1, h2, h3, h4, h5, h6 {
   --hg-typo-line-height-1-3: 1.3;
   --hg-typo-line-height-1-6: 1.6;
   --hg-typo-font-weight-100: 100;
+  --hg-typo-font-weight-300: 300;
   --hg-typo-font-weight-400: 400;
   --hg-typo-font-weight-500: 500;
   --hg-typo-font-weight-600: 600;
@@ -80,6 +82,9 @@ p, h1, h2, h3, h4, h5, h6 {
   --hg-typo-letter-spacing-0-08: 0.08rem;
   --hg-typo-letter-spacing-10: 10rem;
   --hg-typo-letter-spacing-110: 110rem;
+  --hg-typo-letter-spacing-0-16em: 0.16em;
+  --hg-typo-letter-spacing-0-04em: 0.04em;
+  --hg-typo-letter-spacing-0-06em: 0.06em;
   --hg-typo-text-transform-none: none;
   --hg-typo-text-transform-uppercase: uppercase;
   --hg-typo-text-transform-otro: otro;
@@ -94,6 +99,7 @@ p, h1, h2, h3, h4, h5, h6 {
   --hg-typo-font-size-8: 0.5rem;
   --hg-typo-font-size-32: 2rem;
   --hg-typo-font-size-48: 3rem;
+  --hg-typo-font-size-9: 0.5625rem;
   --hg-spacing-0: 0;
   --hg-spacing-4: 0.25rem;
   --hg-spacing-8: 0.5rem;
@@ -137,21 +143,16 @@ p, h1, h2, h3, h4, h5, h6 {
   --hg-color-orange: #B75D0B;
   --hg-color-mustard: #FFE693;
   --hg-color-primary: #000000;
-  --hg-color-error: #b40016;
-  --hg-color-info: #1a32a4;
+  --hg-color-error: #dd2d01;
+  --hg-color-info: #2037a6;
   --hg-color-success: #12882C;
-  --hg-color-warning: #ffc700;
+  --hg-color-warning: #ffce4e;
   --hg-color-feel: #fb9962;
   --hg-color-feel-dark: #c94c07;
-  --hg-color-special: #b99d6b;
-  --hg-color-vanilla: #F4F2ED;
   --hg-color-silver: #87888D;
   --hg-color-gold: #A38A6B;
   --hg-color-platinum: #5B7FA1;
-  --hg-color-charcoal: #1D1D1D;
-  --hg-color-bg-light: #F0F0F0;
-  --hg-color-c-bg-light: #000000;
-  --hg-color-sk-grey: #e3e3e3;
+  --hg-color-bg-light: #f9f9f9;
   --hg-color-bg-cream: #f4f2ed;
 }
 
@@ -1331,6 +1332,8 @@ p, h1, h2, h3, h4, h5, h6 {
 .hg-text-center { text-align: center; }
 .hg-text-right { text-align: right; }
 .hg-text-justify { text-align: justify; }
+.hg-text-underline { text-decoration: underline; }
+.hg-text-none { text-decoration: none; }
 .hg-position-static { position: static; }
 .hg-position-relative { position: relative; }
 .hg-position-absolute { position: absolute; }
@@ -2207,103 +2210,153 @@ p, h1, h2, h3, h4, h5, h6 {
 /* Tipografías - Mobile (min-width: 0.0625rem) */
 @media (min-width: 0.0625rem) {
 
+  .title-xxl {
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
+    font-size: var(--hg-typo-font-size-24);
+    line-height: var(--hg-typo-line-height-1) !important;
+  }
+
   .h2 {
-    font-family: var(--hg-typo-font-family-primary);
-    font-weight: var(--hg-typo-font-weight-900);
+    font-family: var(--hg-typo-font-family-primary-bold);
+    font-weight: var(--hg-typo-font-weight-600);
     font-size: var(--hg-typo-font-size-18);
-    line-height: var(--hg-typo-line-height-1-976);
+    line-height: var(--hg-typo-line-height-1-2) !important;
     letter-spacing: var(--hg-typo-letter-spacing-0);
     text-transform: var(--hg-typo-text-transform-none);
   }
 
   .title-l-b {
-    font-family: var(--hg-typo-font-family-primary);
-    font-weight: var(--hg-typo-font-weight-700);
-    font-size: var(--hg-typo-font-size-14);
-    line-height: var(--hg-typo-line-height-1-2);
-    letter-spacing: var(--hg-typo-letter-spacing-0);
-    text-transform: var(--hg-typo-text-transform-uppercase);
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
+    font-size: var(--hg-typo-font-size-12);
+    line-height: var(--hg-typo-line-height-1-4) !important;
   }
 
   .title-l {
-    font-family: var(--hg-typo-font-family-primary);
+    font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
-    font-size: var(--hg-typo-font-size-14);
-    line-height: var(--hg-typo-line-height-1-4);
+    font-size: var(--hg-typo-font-size-12);
+    line-height: var(--hg-typo-line-height-1-4) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-16em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
   }
 
   .title-m {
-    font-family: var(--hg-typo-font-family-primary);
+    font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-4);
+    line-height: var(--hg-typo-line-height-1-4) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-16em);
+  }
+
+  .title-s-b {
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1-4) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-16em);
   }
 
   .title-s {
-    font-family: var(--hg-typo-font-family-primary);
-    font-weight: var(--hg-typo-font-weight-400);
-    font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-4);
+    font-family: var(--hg-typo-font-family-primary-light);
+    font-weight: var(--hg-typo-font-weight-100);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1-4) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-16em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
   }
 
   .text-l {
-    font-family: var(--hg-typo-font-family-primary);
+    font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
-    font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-5);
+    font-size: var(--hg-typo-font-size-13);
+    line-height: var(--hg-typo-line-height-1-5) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
   .text-m {
-    font-family: var(--hg-typo-font-family-primary);
+    font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-5);
+    line-height: var(--hg-typo-line-height-1-5) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
-  .semantic {
-    font-family: var(--hg-typo-font-family-primary);
+  .p-tag {
+    font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
-    font-size: var(--hg-typo-font-size-13);
-    line-height: var(--hg-typo-line-height-1);
+    font-size: var(--hg-typo-font-size-9);
+    line-height: var(--hg-typo-line-height-1) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-16em);
   }
 
-  .p-tag {
-    font-family: var(--hg-typo-font-family-primary);
+  .hg-body-l {
+    font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
-    font-size: var(--hg-typo-font-size-8);
-    line-height: var(--hg-typo-line-height-1);
+    font-size: var(--hg-typo-font-size-12);
+    line-height: var(--hg-typo-line-height-1-5) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
-  .suisse-1 {
-    font-family: var(--hg-typo-font-family-secondary);
-    font-size: var(--hg-typo-font-size-16);
-    line-height: var(--hg-typo-line-height-1-5);
+  .hg-body-l-b {
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
+    font-size: var(--hg-typo-font-size-12);
+    line-height: var(--hg-typo-line-height-1-5) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
-  .suisse-2 {
-    font-family: var(--hg-typo-font-family-secondary);
-    font-size: var(--hg-typo-font-size-13);
-    line-height: var(--hg-typo-line-height-1-1);
+  .hg-body-m {
+    font-family: var(--hg-typo-font-family-primary-light);
+    font-weight: var(--hg-typo-font-weight-100);
+    font-size: var(--hg-typo-font-size-12);
+    line-height: var(--hg-typo-line-height-1-5) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
-  .suisse-body {
-    font-family: var(--hg-typo-font-family-secondary);
-    font-size: var(--hg-typo-font-size-10);
-    line-height: var(--hg-typo-line-height-1-1);
+  .hg-body-m-b {
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
+    font-size: var(--hg-typo-font-size-12);
+    line-height: var(--hg-typo-line-height-1-5) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
-  .hg-body-m {
-    font-family: var(--hg-typo-font-family-primary);
+  .label-m {
+    font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-5);
+    line-height: var(--hg-typo-line-height-1) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-16em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
   }
 
-  .hg-body-m-b {
-    font-family: var(--hg-typo-font-family-primary);
-    font-weight: var(--hg-typo-font-weight-400);
+  .label-m-b {
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-5);
+    line-height: var(--hg-typo-line-height-1) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-16em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
+  }
+
+  .label-s {
+    font-family: var(--hg-typo-font-family-primary-light);
+    font-weight: var(--hg-typo-font-weight-100);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-06em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
+  }
+
+  .label-s-b {
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-06em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
   }
 
 }
@@ -2311,103 +2364,153 @@ p, h1, h2, h3, h4, h5, h6 {
 /* Tipografías - Desktop (min-width: 62rem) */
 @media (min-width: 62rem) {
 
+  .title-xxl {
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
+    font-size: var(--hg-typo-font-size-24);
+    line-height: var(--hg-typo-line-height-1) !important;
+  }
+
   .h2 {
-    font-family: var(--hg-typo-font-family-primary);
-    font-weight: var(--hg-typo-font-weight-900);
+    font-family: var(--hg-typo-font-family-primary-bold);
+    font-weight: var(--hg-typo-font-weight-600);
     font-size: var(--hg-typo-font-size-24);
-    line-height: var(--hg-typo-line-height-1-2);
+    line-height: var(--hg-typo-line-height-1-2) !important;
     letter-spacing: var(--hg-typo-letter-spacing-0);
     text-transform: var(--hg-typo-text-transform-none);
   }
 
   .title-l-b {
-    font-family: var(--hg-typo-font-family-primary);
-    font-weight: var(--hg-typo-font-weight-700);
-    font-size: var(--hg-typo-font-size-14);
-    line-height: var(--hg-typo-line-height-1-4);
-    letter-spacing: var(--hg-typo-letter-spacing-0);
-    text-transform: var(--hg-typo-text-transform-uppercase);
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
+    font-size: var(--hg-typo-font-size-13);
+    line-height: var(--hg-typo-line-height-1-4) !important;
   }
 
   .title-l {
-    font-family: var(--hg-typo-font-family-primary);
+    font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
-    font-size: var(--hg-typo-font-size-14);
-    line-height: var(--hg-typo-line-height-1-4);
+    font-size: var(--hg-typo-font-size-13);
+    line-height: var(--hg-typo-line-height-1-4) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-16em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
   }
 
   .title-m {
-    font-family: var(--hg-typo-font-family-primary);
+    font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
-    font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-4);
+    font-size: var(--hg-typo-font-size-13);
+    line-height: var(--hg-typo-line-height-1-4) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-16em);
+  }
+
+  .title-s-b {
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1-4) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-16em);
   }
 
   .title-s {
-    font-family: var(--hg-typo-font-family-primary);
-    font-weight: var(--hg-typo-font-weight-400);
-    font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-4);
+    font-family: var(--hg-typo-font-family-primary-light);
+    font-weight: var(--hg-typo-font-weight-100);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1-4) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-16em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
   }
 
   .text-l {
-    font-family: var(--hg-typo-font-family-primary);
+    font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
-    font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-5);
+    font-size: var(--hg-typo-font-size-13);
+    line-height: var(--hg-typo-line-height-1-5) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
   .text-m {
-    font-family: var(--hg-typo-font-family-primary);
+    font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
-    font-size: var(--hg-typo-font-size-13);
-    line-height: var(--hg-typo-line-height-1-5);
+    font-size: var(--hg-typo-font-size-12);
+    line-height: var(--hg-typo-line-height-1-5) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-04em);
+  }
+
+  .p-tag {
+    font-family: var(--hg-typo-font-family-primary-light);
+    font-weight: var(--hg-typo-font-weight-100);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-16em);
   }
 
-  .semantic {
-    font-family: var(--hg-typo-font-family-primary);
+  .hg-body-l {
+    font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-13);
-    line-height: var(--hg-typo-line-height-1);
+    line-height: var(--hg-typo-line-height-1-5) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
-  .p-tag {
-    font-family: var(--hg-typo-font-family-primary);
+  .hg-body-l-b {
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
+    font-size: var(--hg-typo-font-size-13);
+    line-height: var(--hg-typo-line-height-1-5) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-04em);
+  }
+
+  .hg-body-m {
+    font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
-    font-size: var(--hg-typo-font-size-8);
-    line-height: var(--hg-typo-line-height-1);
+    font-size: var(--hg-typo-font-size-12);
+    line-height: var(--hg-typo-line-height-1-5) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
-  .suisse-1 {
-    font-family: var(--hg-typo-font-family-secondary);
-    font-size: var(--hg-typo-font-size-20);
-    line-height: var(--hg-typo-line-height-1-5);
+  .hg-body-m-b {
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
+    font-size: var(--hg-typo-font-size-12);
+    line-height: var(--hg-typo-line-height-1-5) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
-  .suisse-2 {
-    font-family: var(--hg-typo-font-family-secondary);
-    font-size: var(--hg-typo-font-size-14);
-    line-height: var(--hg-typo-line-height-1-1);
+  .label-m {
+    font-family: var(--hg-typo-font-family-primary-light);
+    font-weight: var(--hg-typo-font-weight-100);
+    font-size: var(--hg-typo-font-size-12);
+    line-height: var(--hg-typo-line-height-1) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-16em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
   }
 
-  .suisse-body {
-    font-family: var(--hg-typo-font-family-secondary);
+  .label-m-b {
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-1);
+    line-height: var(--hg-typo-line-height-1) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-16em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
   }
 
-  .hg-body-m {
-    font-family: var(--hg-typo-font-family-primary);
+  .label-s {
+    font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
-    font-size: var(--hg-typo-font-size-13);
-    line-height: var(--hg-typo-line-height-1-5);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-06em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
   }
 
-  .hg-body-m-b {
-    font-family: var(--hg-typo-font-family-primary);
-    font-weight: var(--hg-typo-font-weight-400);
-    font-size: var(--hg-typo-font-size-13);
-    line-height: var(--hg-typo-line-height-1-5);
+  .label-s-b {
+    font-family: var(--hg-typo-font-family-primary-regular);
+    font-weight: var(--hg-typo-font-weight-300);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1) !important;
+    letter-spacing: var(--hg-typo-letter-spacing-0-06em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
   }
 
 }

package/dist/skills.html

@@ -34,7 +34,11 @@
       text-decoration: none; color: #000; width: max-content;
     }
     .guide-nav { display: flex; gap: 1.5rem; align-items: center; }
-    .guide-nav a { font-size: 13px; color: #666; text-decoration: none; transition: color 0.2s; }
+    .guide-nav a {
+      font-family: var(--hg-typo-font-family-primary-regular);
+      font-size: 13px; color: #666; text-decoration: none;
+      transition: color 0.2s; text-transform: uppercase; letter-spacing: 0.05em;
+    }
     .guide-nav a:hover { color: #000; }
     .guide-nav a.active { color: #000; font-weight: 600; }
 
@@ -139,7 +143,9 @@
     <a href="index.html" class="guide-logo" style="text-decoration:none;">HolyGrail5</a>
     <nav class="guide-nav">
       <a href="index.html">Guía</a>
+      <a href="componentes.html">Componentes</a>
       <a href="themes/dutti-demo.html">Tema Dutti</a>
+      <a href="themes/limited-demo.html">Tema Limited</a>
       <a href="skills.html" class="active">Skills</a>
     </nav>
   </div>
@@ -215,12 +221,12 @@ npm run dev</code></div>
 <p class="sk-md-p">Definidos en <code class="sk-inline-code">config.colors</code>. Cada color genera una variable <code class="sk-inline-code">--hg-color-{nombre}</code>.</p>
 <div class="sk-code-block"><code>/* Uso en CSS */
 color: var(--hg-color-primary);
-background: var(--hg-color-vanilla);
+background: var(--hg-color-bg-cream);
 border-color: var(--hg-color-error);
 
 /* Uso inline en HTML (cuando no hay clase específica) */
 &lt;div style="color: var(--hg-color-dark-grey)"&gt;Texto&lt;/div&gt;</code></div>
-<p class="sk-md-p">Colores disponibles por defecto: <code class="sk-inline-code">white</code>, <code class="sk-inline-code">black</code>, <code class="sk-inline-code">dark-grey</code>, <code class="sk-inline-code">middle-grey</code>, <code class="sk-inline-code">light-grey</code>, <code class="sk-inline-code">grey-ultra</code>, <code class="sk-inline-code">orange</code>, <code class="sk-inline-code">mustard</code>, <code class="sk-inline-code">primary</code>, <code class="sk-inline-code">error</code>, <code class="sk-inline-code">info</code>, <code class="sk-inline-code">success</code>, <code class="sk-inline-code">warning</code>, <code class="sk-inline-code">feel</code>, <code class="sk-inline-code">feel-dark</code>, <code class="sk-inline-code">special</code>, <code class="sk-inline-code">vanilla</code>, <code class="sk-inline-code">silver</code>, <code class="sk-inline-code">gold</code>, <code class="sk-inline-code">platinum</code>, <code class="sk-inline-code">charcoal</code>, <code class="sk-inline-code">bg-light</code>, <code class="sk-inline-code">sk-grey</code>, <code class="sk-inline-code">bg-cream</code>.</p>
+<p class="sk-md-p">Colores disponibles por defecto: <code class="sk-inline-code">white</code>, <code class="sk-inline-code">black</code>, <code class="sk-inline-code">dark-grey</code>, <code class="sk-inline-code">middle-grey</code>, <code class="sk-inline-code">light-grey</code>, <code class="sk-inline-code">grey-ultra</code>, <code class="sk-inline-code">orange</code>, <code class="sk-inline-code">mustard</code>, <code class="sk-inline-code">primary</code>, <code class="sk-inline-code">error</code>, <code class="sk-inline-code">info</code>, <code class="sk-inline-code">success</code>, <code class="sk-inline-code">warning</code>, <code class="sk-inline-code">feel</code>, <code class="sk-inline-code">feel-dark</code>, <code class="sk-inline-code">silver</code>, <code class="sk-inline-code">gold</code>, <code class="sk-inline-code">platinum</code>, <code class="sk-inline-code">bg-light</code>, <code class="sk-inline-code">bg-cream</code>.</p>
 <h4 class="sk-md-h3">Spacing</h4>
 <p class="sk-md-p">Definido en <code class="sk-inline-code">config.spacingMap</code>. Cada valor genera <code class="sk-inline-code">--hg-spacing-{key}</code>.</p>
 <div class="sk-code-block"><code>/* Variables de spacing */
@@ -238,7 +244,7 @@ border-color: var(--hg-color-error);
 <p class="sk-md-p">Los valores px se convierten automáticamente a rem (base 16px).</p>
 <h4 class="sk-md-h3">Tipografía</h4>
 <p class="sk-md-p">Las variables tipográficas se generan automáticamente y se deduplicam para evitar repeticiones:</p>
-<div class="sk-code-block"><code>--hg-typo-font-family-primary: arial, sans-serif;
+<div class="sk-code-block"><code>--hg-typo-font-family-primary-regular: arial, sans-serif;
 --hg-typo-font-family-secondary: "ms-serif", serif;
 --hg-typo-font-size-12: 0.75rem;
 --hg-typo-font-size-14: 0.875rem;
@@ -435,7 +441,7 @@ border-color: var(--hg-color-error);
 <p class="sk-md-p">Las clases son mobile-first. Los valores base aplican a mobile y un media query <code class="sk-inline-code">@media (min-width: 992px)</code> sobrescribe para desktop.</p>
 <div class="sk-code-block"><code>/* CSS generado (ejemplo) */
 .hg-h2 {
-  font-family: var(--hg-typo-font-family-primary);
+  font-family: var(--hg-typo-font-family-primary-regular);
   font-weight: var(--hg-typo-font-weight-900);
   font-size: var(--hg-typo-font-size-18);     /* mobile */
   line-height: var(--hg-typo-line-height-1-976);
@@ -585,7 +591,7 @@ border-color: var(--hg-color-error);
 &lt;/div&gt;</code></div>
 <h4 class="sk-md-h3">Navbar sticky</h4>
 <div class="sk-code-block"><code>&lt;header class="hg-position-sticky hg-z-50 hg-d-flex hg-justify-between hg-items-center p-16"
-        style="top: 0; background: var(--hg-color-white); border-bottom: 1px solid var(--hg-color-sk-grey);"&gt;
+        style="top: 0; background: var(--hg-color-white); border-bottom: 1px solid var(--hg-color-middle-grey);"&gt;
   &lt;span class="hg-title-l-b"&gt;Logo&lt;/span&gt;
   &lt;nav class="hg-d-flex hg-gap-24"&gt;
     &lt;a class="hg-text-m" href="#"&gt;Inicio&lt;/a&gt;
@@ -596,7 +602,7 @@ border-color: var(--hg-color-error);
 <h4 class="sk-md-h3">Layout sidebar</h4>
 <div class="sk-code-block"><code>&lt;div class="row"&gt;
   &lt;aside class="col-xs-12 col-md-3 hg-d-none md:hg-d-block p-16"
-         style="border-right: 1px solid var(--hg-color-sk-grey);"&gt;
+         style="border-right: 1px solid var(--hg-color-middle-grey);"&gt;
     &lt;nav class="hg-d-flex hg-flex-column hg-gap-8"&gt;
       &lt;a class="hg-text-m" href="#"&gt;Sección 1&lt;/a&gt;
       &lt;a class="hg-text-m" href="#"&gt;Sección 2&lt;/a&gt;
@@ -608,7 +614,7 @@ border-color: var(--hg-color-error);
   &lt;/main&gt;
 &lt;/div&gt;</code></div>
 <h4 class="sk-md-h3">Footer multicolumna</h4>
-<div class="sk-code-block"><code>&lt;footer class="pt-48 pb-24" style="background: var(--hg-color-charcoal); color: var(--hg-color-white);"&gt;
+<div class="sk-code-block"><code>&lt;footer class="pt-48 pb-24" style="background: var(--hg-color-grey-ultra); color: var(--hg-color-white);"&gt;
   &lt;div class="row hg-px-16 md:hg-px-32 hg-gap-24"&gt;
     &lt;div class="col-xs-12 col-md-4"&gt;
       &lt;h4 class="hg-title-l-b" style="color: var(--hg-color-white);"&gt;Empresa&lt;/h4&gt;