@codecademy/gamut
68.7.068.7.1-alpha.1ea5a8.0
~
Modified (5 files)
Index: package/package.json
===================================================================
--- package/package.json
+++ package/package.json
@@ -1,16 +1,16 @@
{
"name": "@codecademy/gamut",
"description": "Styleguide & Component library for Codecademy",
- "version": "68.7.0",
+ "version": "68.7.1-alpha.1ea5a8.0",
"author": "Codecademy Engineering <[email protected]>",
"bin": "./bin/gamut.mjs",
"dependencies": {
- "@codecademy/gamut-icons": "9.57.5",
- "@codecademy/gamut-illustrations": "0.58.11",
- "@codecademy/gamut-patterns": "0.10.30",
- "@codecademy/gamut-styles": "18.0.0",
- "@codecademy/variance": "0.26.1",
+ "@codecademy/gamut-icons": "9.57.6-alpha.1ea5a8.0",
+ "@codecademy/gamut-illustrations": "0.58.12-alpha.1ea5a8.0",
+ "@codecademy/gamut-patterns": "0.10.31-alpha.1ea5a8.0",
+ "@codecademy/gamut-styles": "18.0.1-alpha.1ea5a8.0",
+ "@codecademy/variance": "0.26.2-alpha.1ea5a8.0",
"@formatjs/intl-locale": "5.3.1",
"@react-aria/interactions": "3.25.0",
"@types/marked": "^4.0.8",
"@vidstack/react": "^1.12.12",Index: package/agent-tools/DESIGN.Codecademy.md
===================================================================
--- package/agent-tools/DESIGN.Codecademy.md
+++ package/agent-tools/DESIGN.Codecademy.md
@@ -7,14 +7,15 @@
hyper-500: '#3A10E5'
hyper-400: '#5533FF'
navy-900: '#0A0D1C'
navy-800: '#10162F'
- navy-700: '#31374C'
- navy-600: '#4C5063'
- navy-500: '#686C7C'
- navy-300: '#BCBEC5'
- navy-200: '#E2E3E6'
- navy-100: '#F5F6F7'
+ 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)'
yellow-500: '#FFD300'
yellow-400: '#CCA900'
yellow-0: '#FFFAE5'
yellow-900: '#211B00'
@@ -76,10 +77,8 @@
fontFamily: '"Apercu", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
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:
none: '0px'
@@ -180,8 +179,10 @@
**Figma file**: https://www.figma.com/design/ReGfRNillGABAj5SlITalN/📐-Gamut
**Storybook**: https://gamut.codecademy.com
+> **Other Gamut themes:** This document covers **Codecademy** (Core, Admin, Platform) only. For Percipio or LX Studio, install that product's `DESIGN.md` instead: `gamut plugin install cursor --theme percipio` or `--theme lxstudio` (see `DESIGN.Percipio.md` / `DESIGN.LXStudio.md` in agent-tools).
+
---
## Visual Theme & Atmosphere
@@ -191,114 +192,85 @@
**Design philosophy**:
- Components are color mode–aware by default — never hardcode hex values for adaptive UI
-- Every component works across all themes without modification
+- Every component works across Core, Admin, and Platform without modification
- Mobile-first responsive design built on a 12-column grid
- Accessibility is guaranteed by design: semantic color tokens meet contrast requirements per mode automatically
---
## Themes
-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.
+Codecademy products use **Core**, **Admin**, or **Platform** — the same visual identity with theme-specific palette additions on Platform. Token aliases resolve 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 | Hanken Grotesk | 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 |
-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.
+Set the active theme at the app root via `<GamutProvider theme={coreTheme | adminTheme | platformTheme}>`.
-**Font licensing**: Apercu is licensed for codecademy.com only. LX Studio uses Hanken Grotesk.
+**Font licensing:** Apercu is licensed for codecademy.com only.
-For Percipio projects, use `DESIGN.Percipio.md` from the same package instead.
-
-### LX Studio theme overrides
-
-LX Studio extends Core with these differences:
-
-**Font**: All families → `"Hanken Grotesk"` (no Apercu, no Suisse).
-
-**Border radii** (all values shift up one step):
-
-| Token | Core | LX Studio |
-| ----- | ---- | --------- |
-| `sm` | 2px | 4px |
-| `md` | 4px | 8px |
-| `lg` | 8px | 12px |
-
-**Semantic color overrides (light mode)**:
-
-| 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 |
-
---
## Semantic Color Aliases
Use these token names when specifying colors in designs. They resolve to the correct raw value for the active theme and color mode automatically. **Never hardcode hex values** for anything that needs to adapt across modes.
### Text
-| 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 |
+| 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 |
### Background
-| 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 |
+| 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 |
### 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 |
+| 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 |
### Border
-| 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 |
+| 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 |
### Feedback
-| 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 |
+| 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 |
### Shadow
| Token | Light | Dark |
@@ -313,49 +285,45 @@
All colors available as static tokens regardless of color mode. Use these only when a color should be **fixed** and not adapt to dark mode.
### Core Palette
-| 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` |
+| 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 |
**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` (`#FFFBF8`), `gold` (`#8A7300`), `teal` (`#006D82`), `purple` (`#B3CCFF`)
+`lightBeige`, `gold`, `teal`, `purple` (Platform theme palette)
-### LX Studio additions
-
-`lxStudioPurple` (`#5628FE`), `lxStudioPurpleHover` (`#7955FC`), `lxStudioSuccess` (`#06844F`)
-
---
## Typography
### Typefaces
-| Token | Core / Admin / Platform | LX Studio | Use for |
-| ----------- | -------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------ |
-| `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 |
+| Token | Font stack | Use for |
+| ----------- | -------------------------------------------------------- | ------------------------------------------------ |
+| `base` | Apercu Pro (CSS: `Apercu`) | All default UI text, headlines, body copy |
+| `accent` | Suisse Intl Mono (CSS: `Suisse`); falls back to `Apercu` | Code, captions, labels, lists, technical context |
+| `monospace` | Monaco, Menlo, Ubuntu Mono, Droid Sans Mono, Consolas | Code editor contexts |
+| `system` | System UI fonts | Performance-critical surfaces |
-**Apercu is licensed for codecademy.com only.** LX Studio uses Hanken Grotesk for both `base` and `accent`.
+**Apercu is licensed for codecademy.com only.**
### Rules
- **Apercu Bold** for headlines, sub-headlines, CTAs, and buttons.
@@ -453,19 +421,21 @@
---
## Border Radius Scale
-| Token | Value | Use |
-| ------ | ----- | ------------------------------------------ |
-| `none` | 0px | Square / non-interactive elements |
-| `sm` | 2px | Subtle rounding, tags |
-| `md` | 4px | Default buttons, inputs, interactive cards |
-| `lg` | 8px | Cards, panels |
-| `xl` | 16px | Large cards, modals |
-| `full` | 999px | Pills, avatars, circular elements |
+| Token | Value | Use |
+| ------ | ----- | ------------------------ |
+| `none` | 0px | Non-interactive elements |
+| `sm` | 2px | Overlays |
+| `md` | 4px | Interactive elements |
+| `lg` | 8px | Non-interactive elements |
+| `xl` | 16px | Non-interactive elements |
+| `full` | 999px | Toggles, badges |
---
+---
+
## Responsive Behavior
Mobile-first. Apply styles from the named breakpoint and up.
@@ -602,10 +572,10 @@
Quick color/token reference for generating or specifying UI:
| Scenario | Tokens |
| ---------------------- | ----------------------------------------------------------------------------------------------------- |
-| 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)` |
+| Primary button (light) | `bg: primary`, `color: white`, `hover: primary-hover` |
+| Primary button (dark) | `bg: primary`, `color: text`, `hover: primary-hover` |
| 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` |
| Card default | `bg: background`, `borderRadius: none` — add `isInteractive` for hover shadow + `borderRadius: md` |Index: package/agent-tools/DESIGN.LXStudio.md
===================================================================
--- package/agent-tools/DESIGN.LXStudio.md
+++ package/agent-tools/DESIGN.LXStudio.md
@@ -3,24 +3,23 @@
name: LX Studio Design System
description: Design tokens for the Skillsoft LX Studio authoring platform.
colors:
# LX Studio additions — custom brand tokens
- lxStudioPurple: '#5628FE'
- lxStudioPurpleHover: '#7955FC'
+ sapphire: '#1C50BB'
lxStudioSuccess: '#06844F'
lxStudioBgPrimary: '#FAFBFC'
# core palette — referenced by semantic aliases below
hyper-500: '#3A10E5'
hyper-400: '#5533FF'
navy-900: '#0A0D1C'
navy-800: '#10162F'
- navy-700: '#31374C'
- navy-600: '#4C5063'
- navy-500: '#686C7C'
- navy-400: '#8F919D'
- navy-300: '#BCBEC5'
- navy-200: '#E2E3E6'
- navy-100: '#F5F6F7'
+ 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)'
yellow-500: '#FFD300'
yellow-0: '#FFFAE5'
green-700: '#008A27'
green-0: '#F5FFE3'
@@ -41,10 +40,10 @@
background-disabled: '{colors.navy-200}'
background-success: '{colors.green-0}'
background-warning: '{colors.yellow-0}'
background-error: '{colors.red-0}'
- primary: '{colors.lxStudioPurple}'
- primary-hover: '{colors.lxStudioPurpleHover}'
+ primary: '{colors.sapphire}'
+ primary-hover: '{colors.navy-800}'
primary-inverse: '{colors.yellow-500}'
secondary: '{colors.navy-800}'
secondary-hover: '{colors.navy-700}'
danger: '{colors.red-500}'
@@ -59,21 +58,21 @@
shadow-primary: '{colors.navy-200}'
shadow-secondary: '{colors.navy-600}'
typography:
base:
- fontFamily: '"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
+ fontFamily: '"Skillsoft Text", -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: '"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
+ fontFamily: '"Skillsoft Sans", -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: '"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
+ fontFamily: '"Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
fontSize: '2.125rem'
- fontWeight: '700'
+ fontWeight: '500'
lineHeight: '1.2'
monospace:
fontFamily: 'Monaco, Menlo, "Ubuntu Mono", "Droid Sans Mono", Consolas, monospace'
rounded:
@@ -124,12 +123,14 @@
---
# LX Studio
-This file defines the visual design tokens for the Skillsoft LX Studio authoring platform, implemented using the Gamut design system (`@codecademy/gamut`, `@codecademy/gamut-styles`). LX Studio uses a dedicated Gamut theme that extends Core with its own brand colors, typography, and border radii — all Gamut components work without modification.
+This file defines the visual design tokens for the Skillsoft LX Studio authoring platform, implemented using the Gamut design system (`@codecademy/gamut`, `@codecademy/gamut-styles`). LX Studio uses a dedicated Gamut theme with its own brand colors, typography, and border radii — all Gamut components work without modification.
**Storybook**: https://gamut.codecademy.com
+> **Other Gamut themes:** This document covers **LX Studio** only. For Codecademy (Core/Admin/Platform) or Percipio, install that product's `DESIGN.md` instead: `gamut plugin install cursor --theme core` or `--theme percipio`.
+
---
## Visual Theme & Atmosphere
@@ -138,23 +139,22 @@
**Density**: Medium. Layouts are information-dense but well-spaced; generous border radii and soft shadows reduce visual weight.
**Design philosophy**:
-- Light mode only — no dark mode support
-- Larger border radii than Core give the UI a softer, more modern feel
-- 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)
-- Hanken Grotesk replaces Apercu and Suisse across all font roles
+- Larger border radii (`sm`–`lg`) for a softer, more modern feel
+- Brand blue (`sapphire` / `primary`) drives CTAs, buttons, and links
+- Soft shadows (`shadow-primary` → `navy-200`)
+- Skillsoft Text (`base`) and Skillsoft Sans (`accent`) for all UI typography
---
## Themes
LX Studio uses a single Gamut theme — light mode only.
-| Theme | Use case | Base font | Dark mode |
-| ------------- | -------------------------------------- | -------------- | ---------- |
-| **LX Studio** | Skillsoft LX Studio authoring platform | Hanken Grotesk | light only |
+| Theme | Use case | Base font | Dark mode |
+| ------------- | -------------------------------------- | --------------------- | ---------- |
+| **LX Studio** | Skillsoft LX Studio authoring platform | Skillsoft Text / Sans | light only |
The active theme is set at the app root via `<GamutProvider theme={lxStudioTheme}>`.
---
@@ -164,81 +164,80 @@
Use these token names when specifying colors. LX Studio is light mode only — there are no dark mode counterparts.
### Text
-| 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 |
+| 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 |
### Background
-| 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 |
+| 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 |
### 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 |
+| 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 |
### Border
-| 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 |
+| 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 |
-LX Studio's `border-primary` is mid-gray (navy-400) rather than Core's near-black navy-800 — borders are softer and less prominent.
+`border-primary` resolves to `navy-400` — mid-weight borders for inputs and cards.
### Feedback
-| 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 |
+| 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 |
### Shadow
-| Token | Value |
-| ------------------ | -------------------- |
-| `shadow-primary` | `#E2E3E6` (navy-200) |
-| `shadow-secondary` | `#4C5063` (navy-600) |
+| Token | Resolves to |
+| ------------------ | ----------- |
+| `shadow-primary` | `navy-200` |
+| `shadow-secondary` | `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.
+Use `shadow-primary` for standard elevated surfaces.
---
## LX Studio Color Palette
-LX Studio adds four named colors to the core palette. Use semantic aliases in code, not these raw names.
+LX Studio adds named colors to the core palette. Use semantic aliases in code, not these raw names.
-| Named color | Value | Mapped to |
-| --------------------- | --------- | -------------------- |
-| `lxStudioPurple` | `#5628FE` | `primary` |
-| `lxStudioPurpleHover` | `#7955FC` | `primary-hover` |
-| `lxStudioSuccess` | `#06844F` | `feedback-success` |
-| `lxStudioBgPrimary` | `#FAFBFC` | `background-primary` |
+| Palette token | Semantic alias(es) |
+| ------------------- | -------------------- |
+| `sapphire` | `primary` |
+| `lxStudioSuccess` | `feedback-success` |
+| `lxStudioBgPrimary` | `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.).
---
@@ -246,37 +245,37 @@
## Typography
### Typefaces
-LX Studio uses **Hanken Grotesk** for all font roles. There is no Apercu and no Suisse.
+LX Studio uses **Skillsoft Text** for body and headlines and **Skillsoft Sans** for accent UI.
-| 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 |
+| 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 |
-Hanken Grotesk is served from `https://www.codecademy.com/gamut/` in four variants: regular, italic, bold, bold-italic.
+Skillsoft fonts are loaded via Gamut's asset provider.
### Rules
-- **Hanken Grotesk Bold (700)** for headlines, sub-headlines, CTAs, and buttons.
-- **Hanken Grotesk Regular (400)** for body text, UI labels, and menu items.
+- **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.
- Text is **left-aligned** by default. Center-align only for short marketing headlines. Never right-align.
- Do not adjust letter-spacing.
-- No separate accent typeface — Hanken Grotesk is used uniformly for `base` and `accent`.
+- Skillsoft Sans is the accent face; Skillsoft Text is used for `base` and title styles.
### Font weight scale
-| Token | Value | Use |
-| ------- | ----- | ------------------------ |
-| `base` | 400 | Body text, UI labels |
-| `title` | 700 | Headlines, CTAs, buttons |
+| Token | Value | Use |
+| ------- | ------- | ------------------------ |
+| `base` | 400 | Body text, UI labels |
+| `title` | **500** | Headlines, CTAs, buttons |
### Font size scale
-Shared with Core — all sizes are identical.
+Standard Gamut font size scale:
| Token key | Size | Common use |
| --------- | ---- | ---------------------------- |
| `64` | 64px | Hero / display |
@@ -290,9 +289,9 @@
| `14` | 14px | Small body, captions, labels |
### Line height scale
-Shared with Core.
+Standard Gamut line height scale:
| Token | Value | Use |
| ------------- | ----- | ------------------------------- |
| `base` | 1.5 | Body text |
@@ -306,9 +305,9 @@
---
## Spacing Scale
-Identical to Core. All spacing is multiples of 4px on an 8px grid.
+All spacing is multiples of 4px on an 8px grid.
| Token | Value |
| ----- | ----- |
| `0` | 0 |
@@ -326,24 +325,22 @@
---
## Border Radius Scale
-LX Studio uses larger border radii than Core — everything is one step softer.
+| Token | Value | Use |
+| ------ | ----- | ------------------------ |
+| `none` | 0px | Non-interactive elements |
+| `sm` | 4px | Overlays |
+| `md` | 8px | Interactive elements |
+| `lg` | 12px | Non-interactive elements |
+| `xl` | 16px | Non-interactive elements |
+| `full` | 999px | Toggles, badges |
-| Token | LX Studio | Core | Use |
-| ------ | --------- | ----- | ------------------------------------------ |
-| `none` | 0px | 0px | Square / non-interactive elements |
-| `sm` | **4px** | 2px | Subtle rounding, tags, checkboxes |
-| `md` | **8px** | 4px | Default buttons, inputs, interactive cards |
-| `lg` | **12px** | 8px | Cards, panels |
-| `xl` | 16px | 16px | Large cards, modals |
-| `full` | 999px | 999px | Pills, avatars, circular elements |
-
---
## Responsive Behavior
-Identical to Core. Mobile-first, apply styles from the named breakpoint up.
+Mobile-first; apply styles from the named breakpoint up.
| Token | Min-width | Max content |
| -------- | --------- | ----------- |
| _(base)_ | 0 | 288px |
@@ -366,35 +363,33 @@
---
## Component Library
-Same component library as Codecademy — all atoms, molecules, and organisms apply. Token values resolve differently per theme automatically.
+Gamut atoms, molecules, and organisms all apply. Use semantic tokens below for LX Studio styling.
-Key LX Studio-specific visual differences:
+Key patterns:
-- `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
+- `FillButton` — `bg: primary` (`sapphire`), `hover: primary-hover` (`navy-800`)
+- `Checkbox` / `Toggle` — `primary`, `hover: primary-hover` (same as `FillButton`)
+- Buttons and inputs — `borderRadius: md` (8px)
+- `Card` — `shadow-primary` (`navy-200`); elevated surfaces use `background-primary` (`lxStudioBgPrimary`), not beige
---
## Do's and Don'ts
### Colors
- **Do** use semantic color aliases (`primary`, `text`, `background`, etc.) — never hardcode hex values.
-- **Do** use `lxStudioPurple` (`#5628FE`) via `primary` for buttons and links.
+- **Do** use `primary` (resolves to palette `sapphire`) 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.
+- **Don't** use raw palette swatches for adaptive UI — use semantic aliases.
### Typography
-- **Do** use Hanken Grotesk Bold (700) for headlines, CTAs, and buttons.
+- **Do** use `fontWeight="title"` (500) for headlines, CTAs, and buttons.
- **Do** keep body text at 150–175% line height for readability.
-- **Don't** use Apercu or Suisse — those fonts are not available in LX Studio.
+- **Don't** use fonts outside the LX Studio theme stack (Skillsoft Text, Skillsoft Sans).
- **Don't** right-align or center-align body paragraphs.
- **Don't** adjust letter-spacing.
### Layout & Spacing
@@ -409,29 +404,29 @@
## Agent Prompt Guide
Quick color/token reference for generating or specifying LX Studio UI:
-| 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` |
+| 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` |
### Component token cheatsheet
```
-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
+FillButton → bg: primary, color: white, hover: primary-hover, borderRadius: md
+StrokeButton → bg: transparent, borderColor: secondary
+Checkbox/Toggle → bg: primary, hover: primary-hover, borderRadius: sm
+Card → bg: background, shadow: shadow-primary (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
```Index: package/agent-tools/DESIGN.md
===================================================================
--- package/agent-tools/DESIGN.md
+++ package/agent-tools/DESIGN.md
@@ -1,1 +1,12 @@
-DEPRECATED. Use the appropriate DESIGN.*.md from https://github.com/Codecademy/gamut/pull/3329 instead.
+Product-specific design context lives in this directory. **Use one `DESIGN.md` per app — matched to the Gamut theme that app uses.**
+
+| Source file | Install with `--theme` |
+| ---------------------- | --------------------------------------------------------- |
+| `DESIGN.Codecademy.md` | `core`, `admin`, `platform` (aliases: `codecademy`, `cc`) |
+| `DESIGN.Percipio.md` | `percipio` |
+| `DESIGN.LXStudio.md` | `lxstudio` (alias: `lx-studio`) |
+
+```sh
+gamut plugin install cursor --theme <name>
+# refresh: gamut plugin update cursor --theme <name> --force
+```Index: package/agent-tools/DESIGN.Percipio.md
===================================================================
--- package/agent-tools/DESIGN.Percipio.md
+++ package/agent-tools/DESIGN.Percipio.md
@@ -4,14 +4,14 @@
description: Design tokens for the Skillsoft Percipio platform.
colors:
# palette — raw swatches; set once on :root and then always reference by token name, never use hex values directly in code
percipioTextPrimary: '#222325'
- percipioTextSecondary: '#595A5C'
+ percipioTextSecondary: 'rgba(34, 35, 37, 0.75)'
percipioTextDisabled: '#AFB6C2'
- percipioActionPrimary: '#0073C4'
+ sapphire: '#1C50BB'
percipioActionPrimaryHover: '#141C36'
percipioActionSecondary: '#6A6E75'
- percipioActionSecondaryHover: '#7F8288'
+ percipioActionSecondaryHover: 'rgba(106, 110, 117, 0.86)'
percipioActionDangerHover: '#A52020'
percipioDanger: '#B83C3C'
percipioFeedbackSuccess: '#1B8057'
percipioFeedbackWarning: '#EF5B0D'
@@ -19,12 +19,12 @@
percipioBgSuccess: '#EEF7F3'
percipioBgWarning: '#FFF7E0'
percipioBgError: '#FFF1F5'
navy-800: '#10162F'
- navy-400: '#8F919D'
- navy-300: '#BCBEC5'
- navy-200: '#E2E3E6'
- navy-100: '#F5F6F7'
+ 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)'
white: '#ffffff'
# semantic aliases — use these in code, not palette swatches or hex values
text: '{colors.percipioTextPrimary}'
text-accent: '{colors.percipioTextPrimary}'
@@ -37,9 +37,9 @@
background-disabled: '{colors.navy-200}'
background-success: '{colors.percipioBgSuccess}'
background-warning: '{colors.percipioBgWarning}'
background-error: '{colors.percipioBgError}'
- primary: '{colors.percipioActionPrimary}'
+ primary: '{colors.sapphire}'
primary-hover: '{colors.percipioActionPrimaryHover}'
primary-inverse: '{colors.white}'
secondary: '{colors.percipioActionSecondary}'
secondary-hover: '{colors.percipioActionSecondaryHover}'
@@ -55,19 +55,19 @@
shadow-primary: '{colors.navy-200}'
shadow-secondary: '{colors.navy-400}'
typography:
base:
- fontFamily: '"Roboto", sans-serif'
+ fontFamily: '"Skillsoft Text", -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: '"Roboto", sans-serif'
+ fontFamily: '"Skillsoft Sans", -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: '"Roboto", sans-serif'
+ fontFamily: '"Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
fontSize: '2.125rem'
fontWeight: '500'
lineHeight: '1.2'
monospace:
@@ -117,33 +117,35 @@
This file defines the visual design tokens for the Skillsoft Percipio platform, implemented using the Gamut design system (`@codecademy/gamut`, `@codecademy/gamut-styles`). Percipio uses a dedicated Gamut theme that applies its own colors and typography — all Gamut components work without modification.
**Storybook**: https://gamut.codecademy.com
+> **Other Gamut themes:** This document covers **Percipio** only. For Codecademy (Core/Admin/Platform) or LX Studio, install that product's `DESIGN.md` instead: `gamut plugin install cursor --theme core` or `--theme lxstudio`.
+
---
## Visual Theme & Atmosphere
-Percipio communicates **professional clarity** — clean, trustworthy, and enterprise-ready. The design voice is more neutral and corporate than Codecademy: less playful, more functional. Primary blue drives interactive affordances; neutral grays define text and structure.
+Percipio communicates **professional clarity** — clean, trustworthy, and enterprise-ready. The design voice is neutral and corporate: functional, with clear hierarchy. Brand blue drives interactive affordances; neutral grays define text and structure.
-**Density**: Medium. Consistent with Codecademy layouts but with softer shadows and a lighter overall feel due to the muted neutral palette.
+**Density**: Medium. Information-dense layouts with softer shadows and a muted neutral palette.
**Design philosophy**:
- Light mode only — no dark mode support
-- Primary blue (`percipioActionPrimary`) replaces Codecademy's `hyper-500` for all interactive elements
-- Text is near-black dark gray rather than navy
-- Shadows are soft and minimal (navy at low opacity) rather than hard borders
-- Title font weight is 500 (medium) rather than 700 (bold) — Percipio headlines are less heavy
+- Brand blue (`sapphire` / `primary`) for buttons, links, and focus rings
+- Text uses dedicated Percipio palette tokens (`percipioTextPrimary`, etc.)
+- Shadows are soft and minimal (`shadow-primary` → `navy-200`)
+- Title font weight is **500** via `fontWeight="title"` — use semantic weight, not literal `700`
---
## Themes
Percipio uses a single Gamut theme — light mode only.
-| Theme | Use case | Base font | Dark mode |
-| ------------ | --------------------------- | --------- | ---------- |
-| **Percipio** | Skillsoft Percipio platform | Roboto | light only |
+| Theme | Use case | Base font | Dark mode |
+| ------------ | --------------------------- | --------------------- | ---------- |
+| **Percipio** | Skillsoft Percipio platform | Skillsoft Text / Sans | light only |
The active theme is set at the app root via `<GamutProvider theme={percipioTheme}>`.
---
@@ -153,91 +155,91 @@
Use these token names when specifying colors. Percipio is light mode only — there are no dark mode counterparts.
### Text
-| Token | Value | Use for |
-| ---------------- | --------- | ------------------------------------------------ |
-| `text` | `#222325` | Default body and UI text |
-| `text-accent` | `#222325` | Emphasis text (same value as `text` in Percipio) |
-| `text-secondary` | `#595A5C` | Supporting / secondary copy |
-| `text-disabled` | `#AFB6C2` | Disabled state labels |
+| Token | Resolves to | Use for |
+| ---------------- | ----------------------- | ------------------------------------------------ |
+| `text` | `percipioTextPrimary` | Default body and UI text |
+| `text-accent` | `percipioTextPrimary` | Emphasis text (same value as `text` in Percipio) |
+| `text-secondary` | `percipioTextSecondary` | Supporting / secondary copy |
+| `text-disabled` | `percipioTextDisabled` | Disabled state labels |
### Background
-| Token | Value | Use for |
-| --------------------- | -------------------- | --------------------------------- |
-| `background` | `#ffffff` | Default page/component background |
-| `background-primary` | `#FAFBFC` | Slightly elevated surfaces |
-| `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` | `#EEF7F3` | Success state container |
-| `background-warning` | `#FFF7E0` | Warning state container |
-| `background-error` | `#FFF1F5` | Error state container |
+| Token | Resolves to | Use for |
+| --------------------- | ------------------- | --------------------------------- |
+| `background` | `white` | Default page/component background |
+| `background-primary` | `percipioBgPrimary` | Slightly elevated surfaces |
+| `background-selected` | `navy-100` | Selected row / item |
+| `background-hover` | `navy-200` | Hover state overlay |
+| `background-disabled` | `navy-200` | Disabled surface |
+| `background-success` | `percipioBgSuccess` | Success state container |
+| `background-warning` | `percipioBgWarning` | Warning state container |
+| `background-error` | `percipioBgError` | Error state container |
### Interactive
-| Token | Value | Use for |
-| ----------------- | --------- | ------------------------------------ |
-| `primary` | `#0073C4` | Primary CTA, links, focus rings |
-| `primary-hover` | `#141C36` | Hover state of primary interactive |
-| `primary-inverse` | `#ffffff` | Primary on a colored background |
-| `secondary` | `#6A6E75` | Secondary CTA, ghost buttons |
-| `secondary-hover` | `#7F8288` | Hover state of secondary interactive |
-| `danger` | `#B83C3C` | Destructive actions, error states |
-| `danger-hover` | `#A52020` | Hover on danger interactive |
+| Token | Resolves to | Use for |
+| ----------------- | ------------------------------ | ------------------------------------ |
+| `primary` | `sapphire` | Primary CTA, links, focus rings |
+| `primary-hover` | `percipioActionPrimaryHover` | Hover state of primary interactive |
+| `primary-inverse` | `white` | Primary on a colored background |
+| `secondary` | `percipioActionSecondary` | Secondary CTA, ghost buttons |
+| `secondary-hover` | `percipioActionSecondaryHover` | Hover state of secondary interactive |
+| `danger` | `percipioDanger` | Destructive actions, error states |
+| `danger-hover` | `percipioActionDangerHover` | Hover on danger interactive |
### Border
Percipio's border weights use a non-standard order: `primary` is mid-weight, `secondary` is very light, `tertiary` is the strongest (solid navy). Use them for their semantic intent, not their numeric rank.
-| Token | Value | Use for |
-| ------------------ | -------------------- | ----------------------------------- |
-| `border-primary` | `#8F919D` (navy-400) | Standard input and card borders |
-| `border-secondary` | `#E2E3E6` (navy-200) | Subtle dividers, section separators |
-| `border-tertiary` | `#10162F` (navy-800) | Strong structural borders |
-| `border-disabled` | `#BCBEC5` (navy-300) | Disabled input borders |
+| Token | Resolves to | Use for |
+| ------------------ | ----------- | ----------------------------------- |
+| `border-primary` | `navy-400` | Standard input and card borders |
+| `border-secondary` | `navy-200` | Subtle dividers, section separators |
+| `border-tertiary` | `navy-800` | Strong structural borders |
+| `border-disabled` | `navy-300` | Disabled input borders |
### Feedback
-| Token | Value | Use for |
-| ------------------ | --------- | -------------------------------- |
-| `feedback-error` | `#B83C3C` | Error messages, validation |
-| `feedback-success` | `#1B8057` | Success messages, confirmations |
-| `feedback-warning` | `#EF5B0D` | Warning messages, caution states |
+| Token | Resolves to | Use for |
+| ------------------ | ------------------------- | -------------------------------- |
+| `feedback-error` | `percipioDanger` | Error messages, validation |
+| `feedback-success` | `percipioFeedbackSuccess` | Success messages, confirmations |
+| `feedback-warning` | `percipioFeedbackWarning` | Warning messages, caution states |
### Shadow
-| Token | Value |
-| ------------------ | -------------------- |
-| `shadow-primary` | `#E2E3E6` (navy-200) |
-| `shadow-secondary` | `#8F919D` (navy-400) |
+| Token | Resolves to |
+| ------------------ | ----------- |
+| `shadow-primary` | `navy-200` |
+| `shadow-secondary` | `navy-400` |
-Percipio shadows are softer than Codecademy's — use `shadow-primary` for standard elevated surfaces.
+Use `shadow-primary` for standard elevated surfaces.
---
## Percipio Color Palette
Percipio introduces its own named semantic colors. These are the source values behind the aliases above. Use the semantic aliases in designs, not the raw named colors.
-| Named color | Value | Mapped to |
-| ------------------------------ | --------- | -------------------------- |
-| `percipioTextPrimary` | `#222325` | `text`, `text-accent` |
-| `percipioTextSecondary` | `#595A5C` | `text-secondary` |
-| `percipioTextDisabled` | `#AFB6C2` | `text-disabled` |
-| `percipioActionPrimary` | `#0073C4` | `primary` |
-| `percipioActionPrimaryHover` | `#141C36` | `primary-hover` |
-| `percipioActionSecondary` | `#6A6E75` | `secondary` |
-| `percipioActionSecondaryHover` | `#7F8288` | `secondary-hover` |
-| `percipioActionDangerHover` | `#A52020` | `danger-hover` |
-| `percipioDanger` | `#B83C3C` | `danger`, `feedback-error` |
-| `percipioFeedbackSuccess` | `#1B8057` | `feedback-success` |
-| `percipioFeedbackWarning` | `#EF5B0D` | `feedback-warning` |
-| `percipioBgPrimary` | `#FAFBFC` | `background-primary` |
-| `percipioBgSuccess` | `#EEF7F3` | `background-success` |
-| `percipioBgWarning` | `#FFF7E0` | `background-warning` |
-| `percipioBgError` | `#FFF1F5` | `background-error` |
+| Palette token | Semantic alias(es) |
+| ------------------------------ | -------------------------- |
+| `percipioTextPrimary` | `text`, `text-accent` |
+| `percipioTextSecondary` | `text-secondary` |
+| `percipioTextDisabled` | `text-disabled` |
+| `sapphire` | `primary` |
+| `percipioActionPrimaryHover` | `primary-hover` |
+| `percipioActionSecondary` | `secondary` |
+| `percipioActionSecondaryHover` | `secondary-hover` |
+| `percipioActionDangerHover` | `danger-hover` |
+| `percipioDanger` | `danger`, `feedback-error` |
+| `percipioFeedbackSuccess` | `feedback-success` |
+| `percipioFeedbackWarning` | `feedback-warning` |
+| `percipioBgPrimary` | `background-primary` |
+| `percipioBgSuccess` | `background-success` |
+| `percipioBgWarning` | `background-warning` |
+| `percipioBgError` | `background-error` |
The full core swatch palette (navy, blue, green, yellow, red, etc.) is also available, but the semantic aliases above are how Percipio maps them. Raw swatches should only be used for fixed colors that must not adapt (illustrations, data viz, etc.).
---
@@ -245,36 +247,34 @@
## Typography
### Typefaces
-All font families in Percipio use **Roboto**. There is no separate accent or display typeface.
+Percipio uses **Skillsoft Text** for body and headlines and **Skillsoft Sans** for accent UI. Roboto Mono is used for code; the `system` slot still uses Roboto.
-| Token | Font | Use for |
-| ----------- | -------------------------- | ------------------------------------------- |
-| `base` | `"Roboto", sans-serif` | All default UI text, headlines, body copy |
-| `accent` | `"Roboto", sans-serif` | Labels, captions (same as base in Percipio) |
-| `monospace` | `"Roboto Mono", monospace` | Code editor contexts |
-| `system` | `"Roboto", sans-serif` | Performance-critical surfaces |
+| Token | Font | Use for |
+| ----------- | ------------------------------ | ----------------------------------------- |
+| `base` | `"Skillsoft Text", sans-serif` | All default UI text, headlines, body copy |
+| `accent` | `"Skillsoft Sans", sans-serif` | Labels, captions, accent UI |
+| `monospace` | `"Roboto Mono", monospace` | Code editor contexts |
+| `system` | `"Roboto", sans-serif` | Performance-critical surfaces |
### Rules
-- **Roboto Medium (500)** for headlines, sub-headlines, CTAs, and buttons — not Bold (700).
-- **Roboto Regular (400)** for body text, UI labels, and menu items.
+- **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.
- Text is **left-aligned** by default. Center-align only for short marketing headlines. Never right-align.
- Do not adjust letter-spacing.
### Font weight scale
-Percipio overrides the title weight from Core's 700 to 500 (medium). This gives Percipio a lighter, less heavy headline style.
+| Token | Value | Use |
+| ------- | ------- | ------------------------ |
+| `base` | 400 | Body text, UI labels |
+| `title` | **500** | Headlines, CTAs, buttons |
-| Token | Value | Use |
-| ------- | ------- | ---------------------------------------------------------- |
-| `base` | 400 | Body text, UI labels |
-| `title` | **500** | Headlines, CTAs, buttons _(differs from Codecademy's 700)_ |
-
### Font size scale
-Shared with Core — all sizes are identical.
+Standard Gamut font size scale:
| Token key | Size | Common use |
| --------- | ---- | ---------------------------- |
| `64` | 64px | Hero / display |
@@ -288,9 +288,9 @@
| `14` | 14px | Small body, captions, labels |
### Line height scale
-Shared with Core.
+Standard Gamut line height scale:
| Token | Value | Use |
| ------------- | ----- | ------------------------------- |
| `base` | 1.5 | Body text |
@@ -304,9 +304,9 @@
---
## Spacing Scale
-Identical to Core. All spacing is multiples of 4px on an 8px grid.
+All spacing is multiples of 4px on an 8px grid.
| Token | Value |
| ----- | ----- |
| `0` | 0 |
@@ -324,24 +324,22 @@
---
## Border Radius Scale
-Identical to Core.
+| Token | Value | Use |
+| ------ | ----- | ------------------------ |
+| `none` | 0px | Non-interactive elements |
+| `sm` | 2px | Overlays |
+| `md` | 4px | Interactive elements |
+| `lg` | 8px | Non-interactive elements |
+| `xl` | 16px | Non-interactive elements |
+| `full` | 999px | Toggles, badges |
-| Token | Value | Use |
-| ------ | ----- | ------------------------------------------ |
-| `none` | 0px | Square / non-interactive elements |
-| `sm` | 2px | Subtle rounding, tags |
-| `md` | 4px | Default buttons, inputs, interactive cards |
-| `lg` | 8px | Cards, panels |
-| `xl` | 16px | Large cards, modals |
-| `full` | 999px | Pills, avatars, circular elements |
-
---
## Responsive Behavior
-Identical to Core. Mobile-first, apply styles from the named breakpoint up.
+Mobile-first; apply styles from the named breakpoint up.
| Token | Min-width | Max content |
| -------- | --------- | ----------- |
| _(base)_ | 0 | 288px |
@@ -364,34 +362,31 @@
---
## Component Library
-Same component library as Codecademy — all atoms, molecules, and organisms apply. Token values resolve differently per theme automatically.
+Gamut atoms, molecules, and organisms all apply. Use semantic tokens below for Percipio-specific styling.
-Key Percipio-specific visual differences:
+Key patterns:
-- `FillButton` uses `#0073C4` (blue) instead of hyper-purple
-- `FillButton` hover shifts to near-black `#141C36` rather than a lighter purple
-- `Checkbox` / `Toggle` use the same blue `#0073C4`
-- `Card` has softer shadows (navy-200 vs navy-800 in Codecademy light mode)
-- Card shadow patterns (`patternLeft`, `patternRight`) are available but rarely used in Percipio UIs
+- `FillButton` — `bg: primary`, `hover: primary-hover`
+- `Checkbox` / `Toggle` — `primary`, `hover: primary-hover`
+- `Card` — `shadow-primary` (`navy-200`); `patternLeft` / `patternRight` are available but rarely used
---
## Do's and Don'ts
### Colors
- **Do** use semantic color aliases (`primary`, `text`, `background`, etc.) — never hardcode hex values.
-- **Do** use `#0073C4` blue as the only primary interactive color.
-- **Don't** use Codecademy's hyper-purple or yellow in Percipio contexts.
+- **Do** use `primary` (resolves to palette `sapphire`) as the brand interactive color.
- **Don't** attempt dark mode — Percipio is light only.
### Typography
- **Do** use title weight (500) for headlines, CTAs, and buttons — not 700.
- **Do** keep body text at 150–175% line height for readability.
-- **Don't** use a separate accent typeface — Roboto is used uniformly for base and accent.
+- **Don't** use fonts outside the Percipio theme stack (Skillsoft Text, Skillsoft Sans, Roboto Mono for code).
- **Don't** right-align or center-align body paragraphs.
- **Don't** adjust letter-spacing.
### Layout & Spacing
@@ -405,29 +400,29 @@
## Agent Prompt Guide
Quick color/token reference for generating or specifying Percipio UI:
-| Scenario | Tokens |
-| ---------------- | ------------------------------------------------------------------------------------------------------------ |
-| Primary button | `bg: primary (#0073C4)`, `color: white`, `hover: primary-hover (#141C36)` |
-| Body text | `color: text (#222325)`, `font: Roboto`, `size: 16px`, `weight: 400`, `lineHeight: base (1.5)` |
-| Headline | `color: text (#222325)`, `font: Roboto`, `size: 34–64px`, `weight: title (500)`, `lineHeight: title (1.2)` |
-| Secondary text | `color: text-secondary (#595A5C)` |
-| Disabled text | `color: text-disabled (#AFB6C2)` |
-| Elevated surface | `bg: background-primary (#FAFBFC)` |
-| Card default | `bg: background (#ffffff)`, `borderRadius: none` — add `isInteractive` for hover shadow + `borderRadius: md` |
-| Error state | `color: feedback-error (#B83C3C)`, `bg: background-error (#FFF1F5)`, `border: danger` |
-| Success state | `color: feedback-success (#1B8057)`, `bg: background-success (#EEF7F3)` |
-| Warning state | `color: feedback-warning (#EF5B0D)`, `bg: background-warning (#FFF7E0)` |
-| Disabled state | `color: text-disabled (#AFB6C2)`, `bg: background-disabled (#E2E3E6, navy-200)`, `border: border-disabled` |
+| Scenario | Tokens |
+| ---------------- | -------------------------------------------------------------------------------------------------- |
+| Primary button | `bg: primary`, `color: primary-inverse`, `hover: primary-hover` |
+| Body text | `color: text`, `font: base`, `size: 16`, `weight: 400`, `lineHeight: base` |
+| Headline | `color: text`, `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` |
### Component token cheatsheet
```
-FillButton → bg: primary (#0073C4), color: white, hover: primary-hover (#141C36)
-StrokeButton → bg: transparent, border: secondary (#6A6E75)
-Checkbox/Toggle → primary (#0073C4), hover: primary-hover (#141C36)
-Card → bg: background, shadow: shadow-primary (#E2E3E6, navy-200, soft)
+FillButton → bg: primary, color: primary-inverse, hover: primary-hover
+StrokeButton → bg: transparent, borderColor: secondary, hover: secondary-hover
+Checkbox/Toggle → bg: primary, hover: primary-hover
+Card → bg: background, shadow: shadow-primary (navy-200, soft)
Alert (error) → uses feedback-error + background-error
Alert (success) → uses feedback-success + background-success
Alert (warning) → uses feedback-warning + background-warning
```