Skip to content
Savoy Docs

06 -- Create Theme Variant / Override

Prompt Template — Savoy Signature Hotels
Use when: A hotel’s base theme exists but needs adjustments — color tweaks, font weight changes, shadow updates, or other token-level modifications.

1. Context Loading

Section titled “1. Context Loading”

Before using this prompt, read the following files so you have full project context:

packages/themes/src/{SITE_KEY}.css                   # The theme file being modified
packages/themes/src/_base.css                        # Shared base tokens for reference
docs/PRD/05_Design_System_and_Theming.md             # Design system specification
docs/dev-frontend-guides/02_DESIGN_TOKENS_EXTRACTION.md   # Token naming and extraction rules
docs/dev-frontend-guides/05_BEM_SASS_THEMING.md      # BEM + SASS theming conventions
packages/ui/src/{AFFECTED_COMPONENTS}                # Components that will be visually affected

2. Prompt Template

Section titled “2. Prompt Template”
I need to update an existing hotel theme with specific token changes. The base theme file already exists and is in use.


**Hotel:** {HOTEL_NAME}
**Site key:** {SITE_KEY}
**Reason for change:** {REASON}


### Token Changes


| Token                 | Current Value       | New Value           |
|-----------------------|---------------------|---------------------|
| {TOKEN_NAME_1}        | {CURRENT_VALUE_1}   | {NEW_VALUE_1}       |
| {TOKEN_NAME_2}        | {CURRENT_VALUE_2}   | {NEW_VALUE_2}       |
| {TOKEN_NAME_3}        | {CURRENT_VALUE_3}   | {NEW_VALUE_3}       |


### Components to Verify


The following components use the changed tokens and must be visually checked in Storybook under all 8 themes after the update:


{COMPONENT_LIST}


### Constraints


- Only modify `packages/themes/src/{SITE_KEY}.css` -- do NOT add hardcoded values in any component SCSS.
- All text/background color pairs must maintain WCAG 2.1 AA contrast (4.5:1 normal text, 3:1 large text).
- If a font family is changing, update `apps/web/src/lib/fonts.ts` accordingly.
- If adding a new token that does not exist in other themes, consider whether it should be added to `_base.css` as a shared default or remain theme-specific.


### Tasks


1. Update `packages/themes/src/{SITE_KEY}.css` with the new token values.
2. If fonts changed, update `apps/web/src/lib/fonts.ts` to load the new font via `next/font/google`.
3. Open Storybook and verify the listed components render correctly with the updated theme.
4. Cross-check the same components under all 8 themes to confirm no regressions (the change should be scoped to `[data-theme="{SITE_KEY}"]` only).
5. Verify color contrast for any changed color pairs.

3. Acceptance Criteria

Section titled “3. Acceptance Criteria”
  • packages/themes/src/{SITE_KEY}.css updated with the new token values
  • No hardcoded color, font, or spacing values introduced in any component SCSS or TSX files
  • All changed tokens remain scoped under [data-theme="{SITE_KEY}"]
  • If a font changed, it is registered in apps/web/src/lib/fonts.ts with display: 'swap'
  • All affected components verified in Storybook under the modified theme
  • All affected components verified in Storybook under the other 7 themes — no regressions
  • Color contrast maintained: all text/background pairs >= 4.5:1 for normal text, >= 3:1 for large text
  • No new tokens introduced that duplicate existing base tokens in _base.css
  • Theme file remains under 5KB gzipped

4. Common Pitfalls

Section titled “4. Common Pitfalls”
PitfallHow to Avoid
Changing a token that is used more broadly than expectedSearch the codebase for var({TOKEN_NAME}) before changing — understand all places the token appears
Adding component-level overrides instead of fixing the tokenIf a component looks wrong after a token change, the fix belongs in the theme file (adjusting the token) or in the component’s BEM structure (adjusting which token it references) — never in a hardcoded value
Forgetting to verify other themes after the changeEven though the change is scoped to one [data-theme] selector, component SCSS may have been relying on a specific token relationship (e.g., primary being darker than secondary) — verify all 8 themes
Changing --color-primary without updating --color-text-on-primaryIf the primary color lightens, the text-on-primary may need to change from white to dark to maintain contrast
Not updating shadow tokens when primary color changesShadow tokens often use the primary color with opacity (e.g., rgba(68, 51, 122, 0.08)) — update them to match the new primary
Removing a font without cleaning up fonts.tsIf a heading font changes from Font A to Font B, remove Font A from fonts.ts if no other theme uses it

5. Example

Section titled “5. Example”

Adjusting the Royal Savoy theme — changing accent color and heading font weight

Section titled “Adjusting the Royal Savoy theme — changing accent color and heading font weight”

Context files read:

packages/themes/src/royal-savoy.css
packages/themes/src/_base.css
docs/PRD/05_Design_System_and_Theming.md
docs/dev-frontend-guides/05_BEM_SASS_THEMING.md
packages/ui/src/Button/Button.tsx
packages/ui/src/CardGrid/CardGrid.tsx
packages/ui/src/HeroSlider/HeroSlider.tsx

Filled-in prompt:

I need to update an existing hotel theme with specific token changes. The base theme file already exists and is in use.


**Hotel:** Royal Savoy
**Site key:** royal-savoy
**Reason for change:** Brand refresh -- the client has updated their accent color from deep purple to a warmer plum, and wants bolder heading typography to increase visual weight on hero modules.


### Token Changes


| Token                   | Current Value                      | New Value                          |
|-------------------------|------------------------------------|------------------------------------|
| --color-primary         | #44337a                            | #5b3a7a                            |
| --color-primary-light   | #6b5ca5                            | #7a5a9e                            |
| --color-primary-dark    | #322659                            | #42285e                            |
| --color-text-on-primary | #ffffff                            | #ffffff                            |
| --font-weight-bold      | 700                                | 800                                |
| --shadow-sm             | 0 1px 2px rgba(68, 51, 122, 0.05) | 0 1px 2px rgba(91, 58, 122, 0.05) |
| --shadow-md             | 0 4px 12px rgba(68, 51, 122, 0.08)| 0 4px 12px rgba(91, 58, 122, 0.08)|
| --shadow-lg             | 0 8px 24px rgba(68, 51, 122, 0.12)| 0 8px 24px rgba(91, 58, 122, 0.12)|


### Components to Verify


- **Button** -- uses `--color-primary` for filled variant background and `--font-weight-bold` for label
- **CardGrid** -- card headings use `--font-weight-bold`; card hover shadow uses `--shadow-md`
- **HeroSlider** -- overlay may reference `--color-primary-dark`; heading uses `--font-weight-bold`
- **SectionHeader** -- heading font weight change will be visible here
- **Footer** -- dark background section may use `--color-primary-dark`


### Constraints


- Only modify `packages/themes/src/royal-savoy.css`.
- White text (#ffffff) on new primary (#5b3a7a) must maintain 4.5:1 contrast.
- No font family changes -- only weight is changing, so no `fonts.ts` update needed.
- Shadow tokens must be updated to use the new primary RGB values.


### Tasks


1. Update `packages/themes/src/royal-savoy.css` with the new token values.
2. No font family change, so `fonts.ts` does not need updating.
3. Verify Button, CardGrid, HeroSlider, SectionHeader, and Footer in Storybook under royal-savoy theme.
4. Switch Storybook to each of the other 7 themes and confirm those components are unaffected.
5. Verify contrast: #ffffff on #5b3a7a (should be ~7.2:1, passes AA).

Expected output: The royal-savoy.css file updated with 8 changed token values. No other files modified. All listed components verified in Storybook across all 8 themes with no regressions. Contrast ratio confirmed for the new primary/text-on-primary pair.