@codecademy/gamut 68.7.1-alpha.89ca82.0 → 68.7.1-alpha.f618c1.0

package/agent-tools/DESIGN.Codecademy.md

@@ -8,13 +8,12 @@ colors:
   hyper-400: '#5533FF'
   navy-900: '#0A0D1C'
   navy-800: '#10162F'
-  navy-700: 'rgba(16, 22, 47, 0.86)'
-  navy-600: 'rgba(16, 22, 47, 0.75)'
-  navy-500: 'rgba(16, 22, 47, 0.63)'
-  navy-400: 'rgba(16, 22, 47, 0.47)'
-  navy-300: 'rgba(16, 22, 47, 0.28)'
-  navy-200: 'rgba(16, 22, 47, 0.12)'
-  navy-100: 'rgba(16, 22, 47, 0.04)'
+  navy-700: '#31374C'
+  navy-600: '#4C5063'
+  navy-500: '#686C7C'
+  navy-300: '#BCBEC5'
+  navy-200: '#E2E3E6'
+  navy-100: '#F5F6F7'
   yellow-500: '#FFD300'
   yellow-400: '#CCA900'
   yellow-0: '#FFFAE5'
@@ -78,6 +77,8 @@ typography:
     fontSize: '2.125rem'
     fontWeight: '700'
     lineHeight: '1.2'
+  hankenGrotesk:
+    fontFamily: '"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
   monospace:
     fontFamily: 'Monaco, Menlo, "Ubuntu Mono", "Droid Sans Mono", Consolas, monospace'
 rounded:
@@ -201,24 +202,24 @@ Codecademy communicates **logic with personality** — structured and trustworth
 
 Codecademy products use one of four Gamut themes, all sharing the same core visual identity. Token aliases resolve to the right values per theme automatically — components require no modification.
 
-| Theme         | Use case                        | Base font             | Dark mode      |
-| ------------- | ------------------------------- | --------------------- | -------------- |
-| **Core**      | Codecademy (default)            | Apercu                | ✓ light + dark |
-| **Admin**     | Codecademy admin tools          | Apercu                | ✓ light + dark |
-| **Platform**  | Codecademy learning environment | Apercu                | ✓ light + dark |
-| **LX Studio** | LX Studio application           | Skillsoft Text / Sans | light only     |
+| Theme         | Use case                        | Base font      | Dark mode      |
+| ------------- | ------------------------------- | -------------- | -------------- |
+| **Core**      | Codecademy (default)            | Apercu         | ✓ light + dark |
+| **Admin**     | Codecademy admin tools          | Apercu         | ✓ light + dark |
+| **Platform**  | Codecademy learning environment | Apercu         | ✓ light + dark |
+| **LX Studio** | LX Studio application           | Hanken Grotesk | light only     |
 
 The active theme is set at the app root via `<GamutProvider>`. When designing, know which theme your screen targets — it affects primary colors, font families, and available color weights.
 
-**Font licensing**: Apercu is licensed for codecademy.com only. LX Studio and Percipio use Skillsoft Text and Skillsoft Sans.
+**Font licensing**: Apercu is licensed for codecademy.com only. LX Studio uses Hanken Grotesk.
 
-For Percipio projects, use `DESIGN.Percipio.md` from the same package instead. For LX Studio, use `DESIGN.LXStudio.md`.
+For Percipio projects, use `DESIGN.Percipio.md` from the same package instead.
 
 ### LX Studio theme overrides
 
 LX Studio extends Core with these differences:
 
-**Font**: `base` → Skillsoft Text; `accent` → Skillsoft Sans (no Apercu, no Suisse). Title weight is **500**, not Core's 700.
+**Font**: All families → `"Hanken Grotesk"` (no Apercu, no Suisse).
 
 **Border radii** (all values shift up one step):
 
@@ -230,15 +231,15 @@ LX Studio extends Core with these differences:
 
 **Semantic color overrides (light mode)**:
 
-| Token                | Core value  | LX Studio value     |
-| -------------------- | ----------- | ------------------- |
-| `primary`            | `hyper-500` | `sapphire`          |
-| `primary-hover`      | `hyper-400` | `navy-800`          |
-| `feedback-success`   | `green-700` | `lxStudioSuccess`   |
-| `background-primary` | `beige`     | `lxStudioBgPrimary` |
-| `shadow-primary`     | navy-800    | navy-200            |
-| `border-primary`     | navy-800    | navy-400            |
-| `border-disabled`    | navy-500    | navy-300            |
+| Token                | Core value          | LX Studio value                 |
+| -------------------- | ------------------- | ------------------------------- |
+| `primary`            | hyper-500 `#3A10E5` | `#5628FE` (lxStudioPurple)      |
+| `primary-hover`      | hyper-400 `#5533FF` | `#7955FC` (lxStudioPurpleHover) |
+| `feedback-success`   | green-700 `#008A27` | `#06844F` (lxStudioSuccess)     |
+| `background-primary` | beige `#FFF0E5`     | `#FAFBFC` (lxStudioBgPrimary)   |
+| `shadow-primary`     | navy-800            | navy-200                        |
+| `border-primary`     | navy-800            | navy-400                        |
+| `border-disabled`    | navy-500            | navy-300                        |
 
 ---
 
@@ -248,55 +249,55 @@ Use these token names when specifying colors in designs. They resolve to the cor
 
 ### Text
 
-| Token            | Light           | Dark         | Use for                     |
-| ---------------- | --------------- | ------------ | --------------------------- |
-| `text`           | `navy-800`      | `white`      | Default body and UI text    |
-| `text-accent`    | `navy-900`      | `beige`      | Stronger emphasis text      |
-| `text-secondary` | navy-800 at 75% | white at 65% | Supporting / secondary copy |
-| `text-disabled`  | navy-800 at 63% | white at 50% | Disabled state labels       |
+| Token            | Light                      | Dark            | Use for                     |
+| ---------------- | -------------------------- | --------------- | --------------------------- |
+| `text`           | navy-800 `#10162F` at 100% | white `#ffffff` | Default body and UI text    |
+| `text-accent`    | navy-900 `#0A0D1C`         | beige `#FFF0E5` | Stronger emphasis text      |
+| `text-secondary` | navy-800 at 75%            | white at 65%    | Supporting / secondary copy |
+| `text-disabled`  | navy-800 at 63%            | white at 50%    | Disabled state labels       |
 
 ### Background
 
-| Token                 | Light           | Dark         | Use for                           |
-| --------------------- | --------------- | ------------ | --------------------------------- |
-| `background`          | `white`         | `navy-800`   | Default page/component background |
-| `background-primary`  | `beige`         | `navy-900`   | Slightly elevated surfaces        |
-| `background-contrast` | `white`         | `black`      | Maximum contrast surface          |
-| `background-selected` | navy-800 at 4%  | white at 4%  | Selected row / item               |
-| `background-hover`    | navy-800 at 12% | white at 9%  | Hover state overlay               |
-| `background-disabled` | navy-800 at 12% | white at 9%  | Disabled surface                  |
-| `background-success`  | `green-0`       | `green-900`  | Success state container           |
-| `background-warning`  | `yellow-0`      | `yellow-900` | Warning state container           |
-| `background-error`    | `red-0`         | `red-900`    | Error state container             |
+| Token                 | Light              | Dark                 | Use for                           |
+| --------------------- | ------------------ | -------------------- | --------------------------------- |
+| `background`          | white `#ffffff`    | navy-800 `#10162F`   | Default page/component background |
+| `background-primary`  | beige `#FFF0E5`    | navy-900 `#0A0D1C`   | Slightly elevated surfaces        |
+| `background-contrast` | white              | black `#000000`      | Maximum contrast surface          |
+| `background-selected` | navy-800 at 4%     | white at 4%          | Selected row / item               |
+| `background-hover`    | navy-800 at 12%    | white at 9%          | Hover state overlay               |
+| `background-disabled` | navy-800 at 12%    | white at 9%          | Disabled surface                  |
+| `background-success`  | green-0 `#F5FFE3`  | green-900 `#151C07`  | Success state container           |
+| `background-warning`  | yellow-0 `#FFFAE5` | yellow-900 `#211B00` | Warning state container           |
+| `background-error`    | red-0 `#FBF1F0`    | red-900 `#280503`    | Error state container             |
 
 ### Interactive
 
-| Token             | Light           | Dark         | Use for                              |
-| ----------------- | --------------- | ------------ | ------------------------------------ |
-| `primary`         | `hyper-500`     | `yellow-500` | Primary CTA, links, focus rings      |
-| `primary-hover`   | `hyper-400`     | `yellow-400` | Hover state of primary interactive   |
-| `primary-inverse` | `yellow-500`    | `hyper-500`  | Primary on a colored background      |
-| `secondary`       | `navy-800`      | `white`      | Secondary CTA, ghost buttons         |
-| `secondary-hover` | navy-800 at 86% | white at 80% | Hover state of secondary interactive |
-| `danger`          | `red-500`       | `red-300`    | Destructive actions, error states    |
-| `danger-hover`    | `red-600`       | `red-400`    | Hover on danger interactive          |
+| Token             | Light                | Dark                 | Use for                              |
+| ----------------- | -------------------- | -------------------- | ------------------------------------ |
+| `primary`         | hyper-500 `#3A10E5`  | yellow-500 `#FFD300` | Primary CTA, links, focus rings      |
+| `primary-hover`   | hyper-400 `#5533FF`  | yellow-400 `#CCA900` | Hover state of primary interactive   |
+| `primary-inverse` | yellow-500 `#FFD300` | hyper-500 `#3A10E5`  | Primary on a colored background      |
+| `secondary`       | navy-800 `#10162F`   | white `#ffffff`      | Secondary CTA, ghost buttons         |
+| `secondary-hover` | navy-800 at 86%      | white at 80%         | Hover state of secondary interactive |
+| `danger`          | red-500 `#E91C11`    | red-300 `#E85D7F`    | Destructive actions, error states    |
+| `danger-hover`    | red-600 `#BE1809`    | red-400 `#DC5879`    | Hover on danger interactive          |
 
 ### Border
 
-| Token              | Light           | Dark         | Use for                    |
-| ------------------ | --------------- | ------------ | -------------------------- |
-| `border-primary`   | `navy-800`      | `white`      | Strong borders, dividers   |
-| `border-secondary` | navy-800 at 75% | white at 65% | Medium-weight borders      |
-| `border-tertiary`  | navy-800 at 28% | white at 20% | Subtle borders, separators |
-| `border-disabled`  | navy-800 at 63% | white at 50% | Disabled input borders     |
+| Token              | Light              | Dark            | Use for                    |
+| ------------------ | ------------------ | --------------- | -------------------------- |
+| `border-primary`   | navy-800 `#10162F` | white `#ffffff` | Strong borders, dividers   |
+| `border-secondary` | navy-800 at 75%    | white at 65%    | Medium-weight borders      |
+| `border-tertiary`  | navy-800 at 28%    | white at 20%    | Subtle borders, separators |
+| `border-disabled`  | navy-800 at 63%    | white at 50%    | Disabled input borders     |
 
 ### Feedback
 
-| Token              | Light       | Dark        | Use for                          |
-| ------------------ | ----------- | ----------- | -------------------------------- |
-| `feedback-error`   | `red-600`   | `red-300`   | Error messages, validation       |
-| `feedback-success` | `green-700` | `green-400` | Success messages, confirmations  |
-| `feedback-warning` | `yellow`    | `yellow-0`  | Warning messages, caution states |
+| Token              | Light               | Dark                | Use for                          |
+| ------------------ | ------------------- | ------------------- | -------------------------------- |
+| `feedback-error`   | red-600 `#BE1809`   | red-300 `#E85D7F`   | Error messages, validation       |
+| `feedback-success` | green-700 `#008A27` | green-400 `#AEE938` | Success messages, confirmations  |
+| `feedback-warning` | yellow `#FFD300`    | yellow-0 `#FFFAE5`  | Warning messages, caution states |
 
 ### Shadow
 
@@ -313,32 +314,32 @@ All colors available as static tokens regardless of color mode. Use these only w
 
 ### Core Palette
 
-| Name            | Weights available            | Notes                                                                      |
-| --------------- | ---------------------------- | -------------------------------------------------------------------------- |
-| `navy`          | 100–900                      | 100–700 are rgba transparencies of `navy-800`; 800 and 900 are solid       |
-| `white`         | 100–700                      | rgba transparencies of `white` (no solid white weight — use `white` token) |
-| `blue`          | 0, 100, 300, 400, 500, 800   | named alias `blue` maps to `blue-500`                                      |
-| `hyper`         | 400, 500                     | named alias `hyper` maps to `hyper-500`                                    |
-| `green`         | 0, 100, 400, 700, 900        | named alias `green` maps to `green-700`                                    |
-| `yellow`        | 0, 400, 500, 900             | named alias `yellow` maps to `yellow-500`                                  |
-| `red`           | 0, 300, 400, 500, 600, 900   | named alias `red` maps to `red-500`                                        |
-| `gray`          | 100, 200, 300, 600, 800, 900 |                                                                            |
-| `pink`          | 0, 400                       | named alias `pink` maps to `pink-400`                                      |
-| `orange`        | 100, 500                     | named alias `orange` maps to `orange-500`                                  |
-| `beige`         | 100 (alias: `beige`)         | solid `beige` token                                                        |
-| `black`         | —                            | `black` token                                                              |
-| `white` (solid) | —                            | `white` token                                                              |
+| Name            | Weights available            | Notes                                                                             |
+| --------------- | ---------------------------- | --------------------------------------------------------------------------------- |
+| `navy`          | 100–900                      | 100–700 are rgba transparencies of `#10162F`; 800 = `#10162F`; 900 = `#0A0D1C`    |
+| `white`         | 100–700                      | rgba transparencies of `#ffffff` (no solid white weight — use `white` for `#fff`) |
+| `blue`          | 0, 100, 300, 400, 500, 800   | 500 = `#1557FF`                                                                   |
+| `hyper`         | 400, 500                     | 500 = `#3A10E5` (purple-blue), 400 = `#5533FF`                                    |
+| `green`         | 0, 100, 400, 700, 900        | 700 = `#008A27`                                                                   |
+| `yellow`        | 0, 400, 500, 900             | 500 = `#FFD300`                                                                   |
+| `red`           | 0, 300, 400, 500, 600, 900   | 500 = `#E91C11`                                                                   |
+| `gray`          | 100, 200, 300, 600, 800, 900 |                                                                                   |
+| `pink`          | 0, 400                       | 400 = `#F966FF`                                                                   |
+| `orange`        | 100, 500                     | 500 = `#FF8C00`                                                                   |
+| `beige`         | 100 (alias: `beige`)         | `#FFF0E5`                                                                         |
+| `black`         | —                            | `#000000`                                                                         |
+| `white` (solid) | —                            | `#ffffff`                                                                         |
 
 **Named aliases** (shorthand for common weights):
 `beige`, `blue`, `green`, `hyper`, `lightBlue`, `lightGreen`, `navy`, `orange`, `paleBlue`, `paleGreen`, `palePink`, `paleRed`, `paleYellow`, `pink`, `red`, `yellow`, `black`, `white`
 
 ### Platform-only additions
 
-`lightBeige`, `gold`, `teal`, `purple` (Platform theme palette)
+`lightBeige` (`#FFFBF8`), `gold` (`#8A7300`), `teal` (`#006D82`), `purple` (`#B3CCFF`)
 
 ### LX Studio additions
 
-`sapphire`, `lxStudioSuccess`, `lxStudioBgPrimary` (LX Studio theme palette)
+`lxStudioPurple` (`#5628FE`), `lxStudioPurpleHover` (`#7955FC`), `lxStudioSuccess` (`#06844F`)
 
 ---
 
@@ -348,12 +349,12 @@ All colors available as static tokens regardless of color mode. Use these only w
 
 | Token       | Core / Admin / Platform                                  | LX Studio                                             | Use for                                          |
 | ----------- | -------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------ |
-| `base`      | Apercu Pro (CSS: `Apercu`)                               | Skillsoft Text                                        | All default UI text, headlines, body copy        |
-| `accent`    | Suisse Intl Mono (CSS: `Suisse`); falls back to `Apercu` | Skillsoft Sans                                        | Code, captions, labels, lists, technical context |
+| `base`      | Apercu Pro (CSS: `Apercu`)                               | Hanken Grotesk                                        | All default UI text, headlines, body copy        |
+| `accent`    | Suisse Intl Mono (CSS: `Suisse`); falls back to `Apercu` | Hanken Grotesk                                        | Code, captions, labels, lists, technical context |
 | `monospace` | Monaco, Menlo, Ubuntu Mono, Droid Sans Mono, Consolas    | Monaco, Menlo, Ubuntu Mono, Droid Sans Mono, Consolas | Code editor contexts                             |
 | `system`    | System UI fonts                                          | System UI fonts                                       | Performance-critical surfaces                    |
 
-**Apercu is licensed for codecademy.com only.** LX Studio uses Skillsoft Text (`base`) and Skillsoft Sans (`accent`) with title weight 500.
+**Apercu is licensed for codecademy.com only.** LX Studio uses Hanken Grotesk for both `base` and `accent`.
 
 ### Rules
 
@@ -602,8 +603,8 @@ Quick color/token reference for generating or specifying UI:
 
 | Scenario               | Tokens                                                                                                |
 | ---------------------- | ----------------------------------------------------------------------------------------------------- |
-| Primary button (light) | `bg: primary`, `color: white`, `hover: primary-hover`                                                 |
-| Primary button (dark)  | `bg: primary`, `color: text`, `hover: primary-hover`                                                  |
+| Primary button (light) | `bg: primary (#3A10E5)`, `color: white`, `hover: primary-hover (#5533FF)`                             |
+| Primary button (dark)  | `bg: primary (#FFD300)`, `color: navy-800`, `hover: primary-hover (#CCA900)`                          |
 | Body text              | `color: text`, `font: base (Apercu Pro)`, `size: 16px`, `weight: 400`, `lineHeight: base (1.5)`       |
 | Headline               | `color: text-accent`, `font: base`, `size: 34–64px`, `weight: title (700)`, `lineHeight: title (1.2)` |
 | Caption / label        | `color: text-secondary`, `font: accent (Suisse Int'l Mono)`, `size: 14px`                             |

package/agent-tools/DESIGN.LXStudio.md

@@ -4,7 +4,8 @@ name: LX Studio Design System
 description: Design tokens for the Skillsoft LX Studio authoring platform.
 colors:
   # LX Studio additions — custom brand tokens
-  sapphire: '#1C50BB'
+  lxStudioPurple: '#5628FE'
+  lxStudioPurpleHover: '#7955FC'
   lxStudioSuccess: '#06844F'
   lxStudioBgPrimary: '#FAFBFC'
   # core palette — referenced by semantic aliases below
@@ -12,13 +13,13 @@ colors:
   hyper-400: '#5533FF'
   navy-900: '#0A0D1C'
   navy-800: '#10162F'
-  navy-700: 'rgba(16, 22, 47, 0.86)'
-  navy-600: 'rgba(16, 22, 47, 0.75)'
-  navy-500: 'rgba(16, 22, 47, 0.63)'
-  navy-400: 'rgba(16, 22, 47, 0.47)'
-  navy-300: 'rgba(16, 22, 47, 0.28)'
-  navy-200: 'rgba(16, 22, 47, 0.12)'
-  navy-100: 'rgba(16, 22, 47, 0.04)'
+  navy-700: '#31374C'
+  navy-600: '#4C5063'
+  navy-500: '#686C7C'
+  navy-400: '#8F919D'
+  navy-300: '#BCBEC5'
+  navy-200: '#E2E3E6'
+  navy-100: '#F5F6F7'
   yellow-500: '#FFD300'
   yellow-0: '#FFFAE5'
   green-700: '#008A27'
@@ -41,8 +42,8 @@ colors:
   background-success: '{colors.green-0}'
   background-warning: '{colors.yellow-0}'
   background-error: '{colors.red-0}'
-  primary: '{colors.sapphire}'
-  primary-hover: '{colors.navy-800}'
+  primary: '{colors.lxStudioPurple}'
+  primary-hover: '{colors.lxStudioPurpleHover}'
   primary-inverse: '{colors.yellow-500}'
   secondary: '{colors.navy-800}'
   secondary-hover: '{colors.navy-700}'
@@ -59,19 +60,19 @@ colors:
   shadow-secondary: '{colors.navy-600}'
 typography:
   base:
-    fontFamily: '"Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
+    fontFamily: '"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
     fontSize: '1rem'
     fontWeight: '400'
     lineHeight: '1.5'
   accent:
-    fontFamily: '"Skillsoft Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
+    fontFamily: '"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
     fontSize: '0.875rem'
     fontWeight: '400'
     lineHeight: '1.5'
   title:
-    fontFamily: '"Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
+    fontFamily: '"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
     fontSize: '2.125rem'
-    fontWeight: '500'
+    fontWeight: '700'
     lineHeight: '1.2'
   monospace:
     fontFamily: 'Monaco, Menlo, "Ubuntu Mono", "Droid Sans Mono", Consolas, monospace'
@@ -140,9 +141,9 @@ LX Studio communicates **modern professional craft** — clean, precise, and too
 
 - Light mode only — no dark mode support
 - Larger border radii than Core give the UI a softer, more modern feel
-- Brand blue (`sapphire` / `primary`) drives CTAs, buttons, and links
+- Brand purple (`lxStudioPurple`) via `primary` drives CTAs, buttons, links, checkboxes, and toggles
 - Shadows are soft (navy-200) rather than hard (navy-800 in Core light mode)
-- Skillsoft Text and Skillsoft Sans replace Apercu and Suisse across all font roles
+- Hanken Grotesk replaces Apercu and Suisse across all font roles
 
 ---
 
@@ -150,9 +151,9 @@ LX Studio communicates **modern professional craft** — clean, precise, and too
 
 LX Studio uses a single Gamut theme — light mode only.
 
-| Theme         | Use case                               | Base font             | Dark mode  |
-| ------------- | -------------------------------------- | --------------------- | ---------- |
-| **LX Studio** | Skillsoft LX Studio authoring platform | Skillsoft Text / Sans | light only |
+| Theme         | Use case                               | Base font      | Dark mode  |
+| ------------- | -------------------------------------- | -------------- | ---------- |
+| **LX Studio** | Skillsoft LX Studio authoring platform | Hanken Grotesk | light only |
 
 The active theme is set at the app root via `<GamutProvider theme={lxStudioTheme}>`.
 
@@ -164,64 +165,64 @@ Use these token names when specifying colors. LX Studio is light mode only — t
 
 ### Text
 
-| Token            | Resolves to | Use for                     |
-| ---------------- | ----------- | --------------------------- |
-| `text`           | `navy-800`  | Default body and UI text    |
-| `text-accent`    | `navy-900`  | Stronger emphasis text      |
-| `text-secondary` | `navy-600`  | Supporting / secondary copy |
-| `text-disabled`  | `navy-500`  | Disabled state labels       |
+| Token            | Value                | Use for                     |
+| ---------------- | -------------------- | --------------------------- |
+| `text`           | `#10162F` (navy-800) | Default body and UI text    |
+| `text-accent`    | `#0A0D1C` (navy-900) | Stronger emphasis text      |
+| `text-secondary` | `#4C5063` (navy-600) | Supporting / secondary copy |
+| `text-disabled`  | `#686C7C` (navy-500) | Disabled state labels       |
 
 ### Background
 
-| Token                 | Resolves to         | Use for                           |
-| --------------------- | ------------------- | --------------------------------- |
-| `background`          | `white`             | Default page/component background |
-| `background-primary`  | `lxStudioBgPrimary` | Slightly elevated surfaces        |
-| `background-contrast` | `white`             | Maximum contrast surface          |
-| `background-selected` | `navy-100`          | Selected row / item               |
-| `background-hover`    | `navy-200`          | Hover state overlay               |
-| `background-disabled` | `navy-200`          | Disabled surface                  |
-| `background-success`  | `green-0`           | Success state container           |
-| `background-warning`  | `yellow-0`          | Warning state container           |
-| `background-error`    | `red-0`             | Error state container             |
+| Token                 | Value                         | Use for                           |
+| --------------------- | ----------------------------- | --------------------------------- |
+| `background`          | `#ffffff`                     | Default page/component background |
+| `background-primary`  | `#FAFBFC` (lxStudioBgPrimary) | Slightly elevated surfaces        |
+| `background-contrast` | `#ffffff`                     | Maximum contrast surface          |
+| `background-selected` | `#F5F6F7` (navy-100)          | Selected row / item               |
+| `background-hover`    | `#E2E3E6` (navy-200)          | Hover state overlay               |
+| `background-disabled` | `#E2E3E6` (navy-200)          | Disabled surface                  |
+| `background-success`  | `#F5FFE3` (green-0)           | Success state container           |
+| `background-warning`  | `#FFFAE5` (yellow-0)          | Warning state container           |
+| `background-error`    | `#FBF1F0` (red-0)             | Error state container             |
 
 ### Interactive
 
-| Token             | Resolves to  | Use for                              |
-| ----------------- | ------------ | ------------------------------------ |
-| `primary`         | `sapphire`   | Primary CTA, links, focus rings      |
-| `primary-hover`   | `navy-800`   | Hover state of primary interactive   |
-| `primary-inverse` | `yellow-500` | Primary on a colored background      |
-| `secondary`       | `navy-800`   | Secondary CTA, ghost buttons         |
-| `secondary-hover` | `navy-700`   | Hover state of secondary interactive |
-| `danger`          | `red-500`    | Destructive actions, error states    |
-| `danger-hover`    | `red-600`    | Hover on danger interactive          |
+| Token             | Value                           | Use for                              |
+| ----------------- | ------------------------------- | ------------------------------------ |
+| `primary`         | `#5628FE` (lxStudioPurple)      | Primary CTA, links, focus rings      |
+| `primary-hover`   | `#7955FC` (lxStudioPurpleHover) | Hover state of primary interactive   |
+| `primary-inverse` | `#FFD300` (yellow-500)          | Primary on a colored background      |
+| `secondary`       | `#10162F` (navy-800)            | Secondary CTA, ghost buttons         |
+| `secondary-hover` | `#31374C` (navy-700)            | Hover state of secondary interactive |
+| `danger`          | `#E91C11` (red-500)             | Destructive actions, error states    |
+| `danger-hover`    | `#BE1809` (red-600)             | Hover on danger interactive          |
 
 ### Border
 
-| Token              | Resolves to | Use for                         |
-| ------------------ | ----------- | ------------------------------- |
-| `border-primary`   | `navy-400`  | Standard input and card borders |
-| `border-secondary` | `navy-600`  | Medium-weight borders           |
-| `border-tertiary`  | `navy-800`  | Strong structural borders       |
-| `border-disabled`  | `navy-300`  | Disabled input borders          |
+| Token              | Value                | Use for                         |
+| ------------------ | -------------------- | ------------------------------- |
+| `border-primary`   | `#8F919D` (navy-400) | Standard input and card borders |
+| `border-secondary` | `#4C5063` (navy-600) | Medium-weight borders           |
+| `border-tertiary`  | `#10162F` (navy-800) | Strong structural borders       |
+| `border-disabled`  | `#BCBEC5` (navy-300) | Disabled input borders          |
 
 LX Studio's `border-primary` is mid-gray (navy-400) rather than Core's near-black navy-800 — borders are softer and less prominent.
 
 ### Feedback
 
-| Token              | Resolves to       | Use for                          |
-| ------------------ | ----------------- | -------------------------------- |
-| `feedback-error`   | `red-600`         | Error messages, validation       |
-| `feedback-success` | `lxStudioSuccess` | Success messages, confirmations  |
-| `feedback-warning` | `yellow-500`      | Warning messages, caution states |
+| Token              | Value                       | Use for                          |
+| ------------------ | --------------------------- | -------------------------------- |
+| `feedback-error`   | `#BE1809` (red-600)         | Error messages, validation       |
+| `feedback-success` | `#06844F` (lxStudioSuccess) | Success messages, confirmations  |
+| `feedback-warning` | `#FFD300` (yellow-500)      | Warning messages, caution states |
 
 ### Shadow
 
-| Token              | Resolves to |
-| ------------------ | ----------- |
-| `shadow-primary`   | `navy-200`  |
-| `shadow-secondary` | `navy-600`  |
+| Token              | Value                |
+| ------------------ | -------------------- |
+| `shadow-primary`   | `#E2E3E6` (navy-200) |
+| `shadow-secondary` | `#4C5063` (navy-600) |
 
 LX Studio shadows are soft — use `shadow-primary` for standard elevated surfaces. This matches Percipio's shadow weight, not Core's hard navy-800 shadow.
 
@@ -229,13 +230,14 @@ LX Studio shadows are soft — use `shadow-primary` for standard elevated surfac
 
 ## LX Studio Color Palette
 
-LX Studio adds named colors to the core palette. Use semantic aliases in code, not these raw names.
+LX Studio adds four named colors to the core palette. Use semantic aliases in code, not these raw names.
 
-| Palette token       | Semantic alias(es)   |
-| ------------------- | -------------------- |
-| `sapphire`          | `primary`            |
-| `lxStudioSuccess`   | `feedback-success`   |
-| `lxStudioBgPrimary` | `background-primary` |
+| Named color           | Value     | Mapped to            |
+| --------------------- | --------- | -------------------- |
+| `lxStudioPurple`      | `#5628FE` | `primary`            |
+| `lxStudioPurpleHover` | `#7955FC` | `primary-hover`      |
+| `lxStudioSuccess`     | `#06844F` | `feedback-success`   |
+| `lxStudioBgPrimary`   | `#FAFBFC` | `background-primary` |
 
 The full core swatch palette (navy, hyper, blue, green, yellow, red, etc.) is also available. Raw swatches should only be used for fixed colors that must not adapt (illustrations, data viz, etc.).
 
@@ -245,31 +247,31 @@ The full core swatch palette (navy, hyper, blue, green, yellow, red, etc.) is al
 
 ### Typefaces
 
-LX Studio uses **Skillsoft Text** for body and headlines and **Skillsoft Sans** for accent UI. There is no Apercu and no Suisse.
+LX Studio uses **Hanken Grotesk** for all font roles. There is no Apercu and no Suisse.
 
-| Token       | Font                                                  | Use for                                   |
-| ----------- | ----------------------------------------------------- | ----------------------------------------- |
-| `base`      | `"Skillsoft Text"`, sans-serif fallback               | All default UI text, headlines, body copy |
-| `accent`    | `"Skillsoft Sans"`, sans-serif fallback               | Labels, captions, accent UI               |
-| `monospace` | Monaco, Menlo, Ubuntu Mono, Droid Sans Mono, Consolas | Code editor contexts                      |
-| `system`    | System UI fonts                                       | Performance-critical surfaces             |
+| Token       | Font                                                  | Use for                                                         |
+| ----------- | ----------------------------------------------------- | --------------------------------------------------------------- |
+| `base`      | `"Hanken Grotesk"`, sans-serif fallback               | All default UI text, headlines, body copy                       |
+| `accent`    | `"Hanken Grotesk"`, sans-serif fallback               | Labels, captions, technical context (same as base in LX Studio) |
+| `monospace` | Monaco, Menlo, Ubuntu Mono, Droid Sans Mono, Consolas | Code editor contexts                                            |
+| `system`    | System UI fonts                                       | Performance-critical surfaces                                   |
 
-Skillsoft fonts are loaded via Gamut's asset provider (same stack as Percipio).
+Hanken Grotesk is served from `https://www.codecademy.com/gamut/` in four variants: regular, italic, bold, bold-italic.
 
 ### Rules
 
-- **Skillsoft Text Medium (500)** for headlines, sub-headlines, CTAs, and buttons — use `fontWeight="title"`, not literal `700`.
-- **Skillsoft Text Regular (400)** for body text, UI labels, and menu items.
+- **Hanken Grotesk Bold (700)** for headlines, sub-headlines, CTAs, and buttons.
+- **Hanken Grotesk Regular (400)** for body text, UI labels, and menu items.
 - Text is **left-aligned** by default. Center-align only for short marketing headlines. Never right-align.
 - Do not adjust letter-spacing.
-- Skillsoft Sans is the accent face; Skillsoft Text is used for `base` and title styles.
+- No separate accent typeface — Hanken Grotesk is used uniformly for `base` and `accent`.
 
 ### Font weight scale
 
-| Token   | Value   | Use                                                  |
-| ------- | ------- | ---------------------------------------------------- |
-| `base`  | 400     | Body text, UI labels                                 |
-| `title` | **500** | Headlines, CTAs, buttons _(differs from Core's 700)_ |
+| Token   | Value | Use                      |
+| ------- | ----- | ------------------------ |
+| `base`  | 400   | Body text, UI labels     |
+| `title` | 700   | Headlines, CTAs, buttons |
 
 ### Font size scale
 
@@ -369,9 +371,9 @@ Same component library as Codecademy — all atoms, molecules, and organisms app
 
 Key LX Studio-specific visual differences:
 
-- `FillButton` uses `primary` (`sapphire`) instead of Core `hyper-500`
-- `FillButton` hover uses `primary-hover` (`navy-800`) — darker on hover
-- `Checkbox` / `Toggle` use palette `hyper-500` (not `primary`)
+- `FillButton` uses `#5628FE` (lxStudioPurple) instead of hyper-500
+- `FillButton` hover shifts to `#7955FC` (lxStudioPurpleHover) — lighter, not darker, on hover
+- `Checkbox` / `Toggle` use `hyper-500` (`#3A10E5`) — not the brand purple
 - All interactive elements have `borderRadius: md` (8px) instead of Core's 4px
 - `Card` shadows use navy-200 (soft) rather than navy-800 (hard)
 - No `Card-beige` variant — LX Studio `background-primary` is off-white, not beige
@@ -383,15 +385,15 @@ Key LX Studio-specific visual differences:
 ### Colors
 
 - **Do** use semantic color aliases (`primary`, `text`, `background`, etc.) — never hardcode hex values.
-- **Do** use `primary` (resolves to palette `sapphire`) for buttons and links.
+- **Do** use `lxStudioPurple` (`#5628FE`) via `primary` for buttons and links.
 - **Don't** attempt dark mode — LX Studio is light only.
 - **Don't** use the Percipio or Codecademy primary blue/hyper colors directly; go through semantic aliases.
 
 ### Typography
 
-- **Do** use `fontWeight="title"` (500) for headlines, CTAs, and buttons.
+- **Do** use Hanken Grotesk Bold (700) for headlines, CTAs, and buttons.
 - **Do** keep body text at 150–175% line height for readability.
-- **Don't** use Apercu, Suisse, or Hanken Grotesk — LX Studio uses Skillsoft Text and Skillsoft Sans.
+- **Don't** use Apercu or Suisse — those fonts are not available in LX Studio.
 - **Don't** right-align or center-align body paragraphs.
 - **Don't** adjust letter-spacing.
 
@@ -408,27 +410,27 @@ Key LX Studio-specific visual differences:
 
 Quick color/token reference for generating or specifying LX Studio UI:
 
-| Scenario         | Tokens                                                                                             |
-| ---------------- | -------------------------------------------------------------------------------------------------- |
-| Primary button   | `bg: primary`, `color: white`, `hover: primary-hover`, `borderRadius: md`                          |
-| Body text        | `color: text`, `font: base`, `size: 16`, `weight: 400`, `lineHeight: base`                         |
-| Headline         | `color: text-accent`, `font: base`, `size: 34–64`, `weight: title`, `lineHeight: title`            |
-| Secondary text   | `color: text-secondary`                                                                            |
-| Disabled text    | `color: text-disabled`                                                                             |
-| Elevated surface | `bg: background-primary`                                                                           |
-| Card default     | `bg: background`, `borderRadius: none` — add `isInteractive` for hover shadow + `borderRadius: md` |
-| Error state      | `color: feedback-error`, `bg: background-error`, `borderColor: danger`                             |
-| Success state    | `color: feedback-success`, `bg: background-success`                                                |
-| Warning state    | `color: feedback-warning`, `bg: background-warning`                                                |
-| Disabled state   | `color: text-disabled`, `bg: background-disabled`, `borderColor: border-disabled`                  |
+| Scenario         | Tokens                                                                                                             |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------ |
+| Primary button   | `bg: primary (#5628FE)`, `color: white`, `hover: primary-hover (#7955FC)`, `borderRadius: md (8px)`                |
+| Body text        | `color: text (#10162F)`, `font: Hanken Grotesk`, `size: 16px`, `weight: 400`, `lineHeight: base (1.5)`             |
+| Headline         | `color: text-accent (#0A0D1C)`, `font: Hanken Grotesk`, `size: 34–64px`, `weight: 700`, `lineHeight: title (1.2)`  |
+| Secondary text   | `color: text-secondary (#4C5063)`                                                                                  |
+| Disabled text    | `color: text-disabled (#686C7C)`                                                                                   |
+| Elevated surface | `bg: background-primary (#FAFBFC)`                                                                                 |
+| Card default     | `bg: background (#ffffff)`, `borderRadius: none` — add `isInteractive` for hover shadow + `borderRadius: md (8px)` |
+| Error state      | `color: feedback-error (#BE1809)`, `bg: background-error (#FBF1F0)`, `border: danger`                              |
+| Success state    | `color: feedback-success (#06844F)`, `bg: background-success (#F5FFE3)`                                            |
+| Warning state    | `color: feedback-warning (#FFD300)`, `bg: background-warning (#FFFAE5)`                                            |
+| Disabled state   | `color: text-disabled (#686C7C)`, `bg: background-disabled (#E2E3E6, navy-200)`, `border: border-disabled`         |
 
 ### Component token cheatsheet
 
 ```
-FillButton      → bg: primary,     color: white,    hover: primary-hover, borderRadius: md
-StrokeButton    → bg: transparent, borderColor: secondary
-Checkbox/Toggle → palette hyper-500, hover hyper-400, borderRadius: sm
-Card            → bg: background,  shadow: shadow-primary (navy-200, soft),                  radius: none
+FillButton      → bg: primary (#5628FE),     color: white,    hover: primary-hover (#7955FC), radius: 8px
+StrokeButton    → bg: transparent,            border: secondary (#10162F)
+Checkbox/Toggle → primary (#5628FE),          hover: primary-hover (#7955FC),                radius: 4px
+Card            → bg: background,  shadow: shadow-primary (#E2E3E6, navy-200, soft),         radius: none
 Alert (error)   → uses feedback-error + background-error
 Alert (success) → uses feedback-success + background-success
 Alert (warning) → uses feedback-warning + background-warning