From 1c81f3bd14c1f202eec2341aec1888fb74d956d5 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 12 Mar 2024 12:50:52 +0100
Subject: [PATCH] feat!: Shorten namespaces in theme and tokens (#1125)

---
 .stylelintrc.json                             |  10 +-
 packages/css/README.md                        |   4 +-
 .../css/documentation/coding-conventions.md   |   4 +-
 packages/css/src/common/breakpoint.scss       |   4 +-
 packages/css/src/common/hyphenation.scss      |   6 +-
 packages/css/src/common/size.scss             |   2 +-
 .../src/components/accordion/accordion.scss   |  32 ++--
 packages/css/src/components/alert/alert.scss  |  30 ++--
 .../components/aspect-ratio/aspect-ratio.scss |  26 +--
 packages/css/src/components/badge/badge.scss  |  60 +++----
 .../src/components/blockquote/blockquote.scss |  16 +-
 .../src/components/breadcrumb/breadcrumb.scss |  34 ++--
 .../css/src/components/button/button.scss     |  74 ++++----
 packages/css/src/components/card/card.scss    |  20 +--
 .../css/src/components/checkbox/checkbox.scss | 162 +++++++++---------
 .../css/src/components/column/column.scss     |   8 +-
 .../css/src/components/dialog/dialog.scss     |  42 ++---
 .../css/src/components/fieldset/fieldset.scss |  14 +-
 .../src/components/form-label/form-label.scss |  12 +-
 packages/css/src/components/gap/gap.scss      |   8 +-
 packages/css/src/components/grid/grid.scss    |  82 ++++-----
 .../css/src/components/header/header.scss     |  42 ++---
 .../css/src/components/heading/heading.scss   |  48 +++---
 .../components/icon-button/icon-button.scss   |  36 ++--
 packages/css/src/components/icon/icon.scss    |  46 ++---
 packages/css/src/components/image/image.scss  |   2 +-
 .../src/components/link-list/link-list.scss   |  54 +++---
 packages/css/src/components/link/link.scss    |  64 +++----
 packages/css/src/components/logo/logo.scss    |  16 +-
 .../css/src/components/margin/margin.scss     |   6 +-
 packages/css/src/components/mark/mark.scss    |   4 +-
 .../src/components/mega-menu/mega-menu.scss   |  10 +-
 .../components/ordered-list/ordered-list.scss |  38 ++--
 .../css/src/components/overlap/overlap.scss   |   2 +-
 .../components/page-heading/page-heading.scss |  16 +-
 .../src/components/page-menu/page-menu.scss   |  40 ++---
 .../src/components/pagination/pagination.scss |  34 ++--
 .../src/components/paragraph/paragraph.scss   |  28 +--
 packages/css/src/components/radio/radio.scss  |  96 +++++------
 packages/css/src/components/row/row.scss      |   8 +-
 .../css/src/components/screen/screen.scss     |  10 +-
 .../components/search-field/search-field.scss |  50 +++---
 .../src/components/skip-link/skip-link.scss   |  22 +--
 .../src/components/spotlight/spotlight.scss   |  32 ++--
 .../css/src/components/switch/switch.scss     |  36 ++--
 packages/css/src/components/table/table.scss  |  32 ++--
 packages/css/src/components/tabs/tabs.scss    |  40 ++---
 .../src/components/text-area/text-area.scss   |  54 +++---
 .../src/components/text-input/text-input.scss |  42 ++---
 .../top-task-link/top-task-link.scss          |  40 ++---
 .../unordered-list/unordered-list.scss        |  38 ++--
 .../visually-hidden/visually-hidden.scss      |   2 +-
 .../react/documentation/coding-conventions.md |   2 +-
 .../react/src/Accordion/Accordion.test.tsx    |   6 +-
 packages/react/src/Accordion/Accordion.tsx    |   2 +-
 .../src/Accordion/AccordionSection.test.tsx   |  20 +--
 .../react/src/Accordion/AccordionSection.tsx  |  10 +-
 packages/react/src/Alert/Alert.test.tsx       |  10 +-
 packages/react/src/Alert/Alert.tsx            |  10 +-
 .../src/AspectRatio/AspectRatio.test.tsx      |  14 +-
 .../react/src/AspectRatio/AspectRatio.tsx     |   6 +-
 packages/react/src/Badge/Badge.test.tsx       |   8 +-
 packages/react/src/Badge/Badge.tsx            |   2 +-
 .../react/src/Blockquote/Blockquote.test.tsx  |   6 +-
 packages/react/src/Blockquote/Blockquote.tsx  |   2 +-
 .../react/src/Breadcrumb/Breadcrumb.test.tsx  |   6 +-
 packages/react/src/Breadcrumb/Breadcrumb.tsx  |   4 +-
 .../src/Breadcrumb/BreadcrumbItem.test.tsx    |   6 +-
 .../react/src/Breadcrumb/BreadcrumbItem.tsx   |   4 +-
 packages/react/src/Button/Button.test.tsx     |  10 +-
 packages/react/src/Button/Button.tsx          |   2 +-
 packages/react/src/Card/Card.test.tsx         |   4 +-
 packages/react/src/Card/Card.tsx              |   2 +-
 .../react/src/Card/CardHeadingGroup.test.tsx  |   4 +-
 packages/react/src/Card/CardHeadingGroup.tsx  |   2 +-
 packages/react/src/Card/CardLink.test.tsx     |   4 +-
 packages/react/src/Card/CardLink.tsx          |   2 +-
 packages/react/src/Checkbox/Checkbox.test.tsx |   8 +-
 packages/react/src/Checkbox/Checkbox.tsx      |   8 +-
 packages/react/src/Column/Column.test.tsx     |   6 +-
 packages/react/src/Column/Column.tsx          |   2 +-
 packages/react/src/Dialog/Dialog.test.tsx     |   4 +-
 packages/react/src/Dialog/Dialog.tsx          |  12 +-
 packages/react/src/Fieldset/Fieldset.test.tsx |   6 +-
 packages/react/src/Fieldset/Fieldset.tsx      |   4 +-
 packages/react/src/Footer/Footer.test.tsx     |   4 +-
 packages/react/src/Footer/Footer.tsx          |   2 +-
 .../react/src/Footer/FooterBottom.test.tsx    |   4 +-
 packages/react/src/Footer/FooterBottom.tsx    |   2 +-
 packages/react/src/Footer/FooterTop.test.tsx  |   4 +-
 packages/react/src/Footer/FooterTop.tsx       |   2 +-
 .../react/src/FormLabel/FormLabel.test.tsx    |   4 +-
 packages/react/src/FormLabel/FormLabel.tsx    |   2 +-
 packages/react/src/Grid/Grid.test.tsx         |  16 +-
 packages/react/src/Grid/Grid.tsx              |  10 +-
 packages/react/src/Grid/GridCell.test.tsx     |  22 +--
 packages/react/src/Grid/GridCell.tsx          |   2 +-
 packages/react/src/Grid/gridCellClasses.ts    |  16 +-
 packages/react/src/Header/Header.test.tsx     |   6 +-
 packages/react/src/Header/Header.tsx          |  12 +-
 packages/react/src/Heading/Heading.test.tsx   |  16 +-
 packages/react/src/Heading/Heading.tsx        |   6 +-
 packages/react/src/Icon/Icon.test.tsx         |  14 +-
 packages/react/src/Icon/Icon.tsx              |  12 +-
 .../react/src/IconButton/IconButton.test.tsx  |   8 +-
 packages/react/src/IconButton/IconButton.tsx  |   6 +-
 packages/react/src/Image/Image.test.tsx       |   4 +-
 packages/react/src/Image/Image.tsx            |   2 +-
 packages/react/src/Link/Link.test.tsx         |  10 +-
 packages/react/src/Link/Link.tsx              |  10 +-
 packages/react/src/LinkList/LinkList.test.tsx |   4 +-
 packages/react/src/LinkList/LinkList.tsx      |   2 +-
 .../react/src/LinkList/LinkListLink.test.tsx  |   8 +-
 packages/react/src/LinkList/LinkListLink.tsx  |   6 +-
 packages/react/src/Logo/Logo.test.tsx         |   4 +-
 packages/react/src/Logo/Logo.tsx              |   2 +-
 .../react/src/Logo/brand/LogoAmsterdam.tsx    |   6 +-
 .../react/src/Logo/brand/LogoGgdAmsterdam.tsx |   8 +-
 .../react/src/Logo/brand/LogoMuseumWeesp.tsx  |  12 +-
 .../react/src/Logo/brand/LogoStadsarchief.tsx |   8 +-
 .../src/Logo/brand/LogoStadsbankVanLening.tsx |   8 +-
 .../src/Logo/brand/LogoVgaVerzekeringen.tsx   |   8 +-
 packages/react/src/Mark/Mark.test.tsx         |   4 +-
 packages/react/src/Mark/Mark.tsx              |   2 +-
 packages/react/src/MegaMenu/MegaMenu.test.tsx |   4 +-
 packages/react/src/MegaMenu/MegaMenu.tsx      |   2 +-
 .../MegaMenu/MegaMenuListCategory.test.tsx    |   4 +-
 .../src/MegaMenu/MegaMenuListCategory.tsx     |   2 +-
 .../src/OrderedList/OrderedList.test.tsx      |  10 +-
 .../react/src/OrderedList/OrderedList.tsx     |   6 +-
 .../src/OrderedList/OrderedListItem.test.tsx  |   4 +-
 .../react/src/OrderedList/OrderedListItem.tsx |   2 +-
 packages/react/src/Overlap/Overlap.test.tsx   |   4 +-
 packages/react/src/Overlap/Overlap.tsx        |   2 +-
 .../src/PageHeading/PageHeading.test.tsx      |   6 +-
 .../react/src/PageHeading/PageHeading.tsx     |   2 +-
 packages/react/src/PageMenu/PageMenu.test.tsx |   6 +-
 packages/react/src/PageMenu/PageMenu.tsx      |   6 +-
 .../react/src/PageMenu/PageMenuLink.test.tsx  |   8 +-
 packages/react/src/PageMenu/PageMenuLink.tsx  |   2 +-
 .../react/src/Pagination/Pagination.test.tsx  |   4 +-
 packages/react/src/Pagination/Pagination.tsx  |  12 +-
 .../react/src/Paragraph/Paragraph.test.tsx    |  14 +-
 packages/react/src/Paragraph/Paragraph.tsx    |   6 +-
 packages/react/src/Radio/Radio.test.tsx       |   8 +-
 packages/react/src/Radio/Radio.tsx            |   8 +-
 packages/react/src/Row/Row.test.tsx           |   6 +-
 packages/react/src/Row/Row.tsx                |   2 +-
 packages/react/src/Screen/Screen.test.tsx     |   6 +-
 packages/react/src/Screen/Screen.tsx          |   2 +-
 .../src/SearchField/SearchField.test.tsx      |   4 +-
 .../react/src/SearchField/SearchField.tsx     |   2 +-
 .../src/SearchField/SearchFieldButton.tsx     |   2 +-
 .../src/SearchField/SearchFieldInput.test.tsx |   4 +-
 .../src/SearchField/SearchFieldInput.tsx      |   2 +-
 packages/react/src/SkipLink/SkipLink.test.tsx |   4 +-
 packages/react/src/SkipLink/SkipLink.tsx      |   2 +-
 .../react/src/Spotlight/Spotlight.test.tsx    |   6 +-
 packages/react/src/Spotlight/Spotlight.tsx    |   2 +-
 packages/react/src/Switch/Switch.test.tsx     |   4 +-
 packages/react/src/Switch/Switch.tsx          |  13 +-
 packages/react/src/Table/Table.test.tsx       |   4 +-
 packages/react/src/Table/Table.tsx            |   4 +-
 packages/react/src/Table/TableBody.test.tsx   |   4 +-
 packages/react/src/Table/TableBody.tsx        |   2 +-
 .../react/src/Table/TableCaption.test.tsx     |   4 +-
 packages/react/src/Table/TableCaption.tsx     |   2 +-
 packages/react/src/Table/TableCell.test.tsx   |   4 +-
 packages/react/src/Table/TableCell.tsx        |   2 +-
 packages/react/src/Table/TableFooter.test.tsx |   4 +-
 packages/react/src/Table/TableFooter.tsx      |   2 +-
 packages/react/src/Table/TableHeader.test.tsx |   4 +-
 packages/react/src/Table/TableHeader.tsx      |   2 +-
 .../react/src/Table/TableHeaderCell.test.tsx  |   4 +-
 packages/react/src/Table/TableHeaderCell.tsx  |   2 +-
 packages/react/src/Table/TableRow.test.tsx    |   4 +-
 packages/react/src/Table/TableRow.tsx         |   2 +-
 packages/react/src/Tabs/Tabs.test.tsx         |   4 +-
 packages/react/src/Tabs/Tabs.tsx              |   8 +-
 packages/react/src/Tabs/TabsButton.test.tsx   |   4 +-
 packages/react/src/Tabs/TabsButton.tsx        |   2 +-
 packages/react/src/Tabs/TabsList.test.tsx     |   6 +-
 packages/react/src/Tabs/TabsList.tsx          |   2 +-
 packages/react/src/Tabs/TabsPanel.test.tsx    |   6 +-
 packages/react/src/Tabs/TabsPanel.tsx         |   2 +-
 packages/react/src/TextArea/TextArea.test.tsx |  12 +-
 packages/react/src/TextArea/TextArea.tsx      |   6 +-
 .../react/src/TextInput/TextInput.test.tsx    |   4 +-
 packages/react/src/TextInput/TextInput.tsx    |   2 +-
 .../src/TopTaskLink/TopTaskLink.test.tsx      |   8 +-
 .../react/src/TopTaskLink/TopTaskLink.tsx     |   6 +-
 .../src/UnorderedList/UnorderedList.test.tsx  |  10 +-
 .../react/src/UnorderedList/UnorderedList.tsx |   6 +-
 .../UnorderedList/UnorderedListItem.test.tsx  |   4 +-
 .../src/UnorderedList/UnorderedListItem.tsx   |   2 +-
 .../VisuallyHidden/VisuallyHidden.test.tsx    |   4 +-
 .../src/VisuallyHidden/VisuallyHidden.tsx     |   2 +-
 plop-templates/react.test.tsx.hbs             |   4 +-
 plop-templates/react.tsx.hbs                  |   2 +-
 plop-templates/style.scss.hbs                 |   2 +-
 plop-templates/tokens.json.hbs                |   2 +-
 plopfile.mjs                                  |   2 +-
 proprietary/assets/logo/amsterdam.svg         |   4 +-
 proprietary/assets/logo/ggd-amsterdam.svg     |   6 +-
 proprietary/assets/logo/museum_weesp.svg      |  10 +-
 proprietary/assets/logo/stadsarchief.svg      |   6 +-
 .../assets/logo/stadsbank-van-lening.svg      |   6 +-
 proprietary/assets/logo/vga-verzekeringen.svg |   6 +-
 proprietary/tokens/build.js                   |   2 +-
 .../{amsterdam => ams}/color.tokens.json      |   2 +-
 .../{amsterdam => ams}/proportion.tokens.json |   2 +-
 .../space.compact.tokens.json                 |   2 +-
 .../{amsterdam => ams}/space.tokens.json      |   2 +-
 .../text.compact.tokens.json}                 |   6 +-
 .../text.tokens.json}                         |   6 +-
 .../{amsterdam => ams}/action.tokens.json     |   2 +-
 .../{amsterdam => ams}/border.tokens.json     |   2 +-
 .../{amsterdam => ams}/focus.tokens.json      |   2 +-
 .../hyphenation.tokens.json                   |   2 +-
 .../link-appearance.tokens.json               |  10 +-
 .../src/components/ams/accordion.tokens.json  |  25 +++
 .../src/components/ams/alert.tokens.json      |  29 ++++
 .../components/ams/aspect-ratio.tokens.json   |  12 ++
 .../src/components/ams/badge.tokens.json      |  43 +++++
 .../src/components/ams/blockquote.tokens.json |  12 ++
 .../src/components/ams/breadcrumb.tokens.json |  26 +++
 .../src/components/ams/button.tokens.json     |  59 +++++++
 .../src/components/ams/card.tokens.json       |  17 ++
 .../src/components/ams/checkbox.tokens.json   |  75 ++++++++
 .../src/components/ams/column.tokens.json     |  13 ++
 .../{amsterdam => ams}/dialog.tokens.json     |  14 +-
 .../src/components/ams/fieldset.tokens.json   |  13 ++
 .../src/components/ams/form-label.tokens.json |  11 ++
 .../tokens/src/components/ams/gap.tokens.json |  11 ++
 .../components/ams/grid.compact.tokens.json   |   7 +
 .../src/components/ams/grid.tokens.json       |  25 +++
 .../src/components/ams/header.tokens.json     |  14 ++
 .../src/components/ams/heading.tokens.json    |  36 ++++
 .../components/ams/icon-button.tokens.json    |  37 ++++
 .../src/components/ams/icon.tokens.json       |  22 +++
 .../src/components/ams/link-list.tokens.json  |  45 +++++
 .../src/components/ams/link.tokens.json       |  61 +++++++
 .../src/components/ams/logo.tokens.json       |  10 ++
 .../src/components/ams/margin.tokens.json     |  11 ++
 .../src/components/ams/mark.tokens.json       |   7 +
 .../src/components/ams/mega-menu.tokens.json  |  18 ++
 .../ordered-list.tokens.json                  |  14 +-
 .../components/ams/page-heading.tokens.json   |  12 ++
 .../src/components/ams/page-menu.tokens.json  |  24 +++
 .../src/components/ams/pagination.tokens.json |  25 +++
 .../src/components/ams/paragraph.tokens.json  |  22 +++
 .../{amsterdam => ams}/radio.tokens.json      |  28 +--
 .../tokens/src/components/ams/row.tokens.json |  13 ++
 .../{amsterdam => ams}/screen.tokens.json     |   2 +-
 .../components/ams/search-field.tokens.json   |  45 +++++
 .../src/components/ams/skip-link.tokens.json  |  18 ++
 .../src/components/ams/spotlight.tokens.json  |  30 ++++
 .../src/components/ams/switch.tokens.json     |  24 +++
 .../src/components/ams/table.tokens.json      |  22 +++
 .../src/components/ams/tabs.tokens.json       |  34 ++++
 .../src/components/ams/text-area.tokens.json  |  36 ++++
 .../src/components/ams/text-input.tokens.json |  32 ++++
 .../components/ams/top-task-link.tokens.json  |  28 +++
 .../unordered-list.tokens.json                |  14 +-
 .../amsterdam/accordion.tokens.json           |  25 ---
 .../components/amsterdam/alert.tokens.json    |  29 ----
 .../amsterdam/aspect-ratio.tokens.json        |  12 --
 .../components/amsterdam/badge.tokens.json    |  43 -----
 .../amsterdam/blockquote.tokens.json          |  12 --
 .../amsterdam/breadcrumb.tokens.json          |  26 ---
 .../components/amsterdam/button.tokens.json   |  59 -------
 .../src/components/amsterdam/card.tokens.json |  17 --
 .../components/amsterdam/checkbox.tokens.json |  75 --------
 .../components/amsterdam/column.tokens.json   |  13 --
 .../components/amsterdam/fieldset.tokens.json |  13 --
 .../amsterdam/form-label.tokens.json          |  11 --
 .../src/components/amsterdam/gap.tokens.json  |  11 --
 .../amsterdam/grid.compact.tokens.json        |   7 -
 .../src/components/amsterdam/grid.tokens.json |  25 ---
 .../components/amsterdam/header.tokens.json   |  14 --
 .../components/amsterdam/heading.tokens.json  |  34 ----
 .../amsterdam/icon-button.tokens.json         |  37 ----
 .../src/components/amsterdam/icon.tokens.json |  22 ---
 .../amsterdam/link-list.tokens.json           |  45 -----
 .../src/components/amsterdam/link.tokens.json |  61 -------
 .../src/components/amsterdam/logo.tokens.json |  10 --
 .../components/amsterdam/margin.tokens.json   |  11 --
 .../src/components/amsterdam/mark.tokens.json |   7 -
 .../amsterdam/mega-menu.tokens.json           |  18 --
 .../amsterdam/page-heading.tokens.json        |  12 --
 .../amsterdam/page-menu.tokens.json           |  24 ---
 .../amsterdam/pagination.tokens.json          |  25 ---
 .../amsterdam/paragraph.tokens.json           |  22 ---
 .../src/components/amsterdam/row.tokens.json  |  13 --
 .../amsterdam/search-field.tokens.json        |  45 -----
 .../amsterdam/skip-link.tokens.json           |  18 --
 .../amsterdam/spotlight.tokens.json           |  30 ----
 .../components/amsterdam/switch.tokens.json   |  24 ---
 .../components/amsterdam/table.tokens.json    |  22 ---
 .../src/components/amsterdam/tabs.tokens.json |  34 ----
 .../amsterdam/text-area.tokens.json           |  36 ----
 .../amsterdam/text-input.tokens.json          |  32 ----
 .../amsterdam/top-task-link.tokens.json       |  28 ---
 storybook/config/preview-body.html            |  14 +-
 storybook/config/preview.tsx                  |   2 +-
 .../Blockquote/Blockquote.stories.tsx         |   4 +-
 .../src/components/Column/Column.docs.mdx     |   2 +-
 .../src/components/Column/Column.stories.tsx  |   2 +-
 .../src/components/Dialog/Dialog.docs.mdx     |   2 +-
 .../src/components/Grid/Grid.stories.tsx      |  22 +--
 .../src/components/Header/Header.stories.tsx  |  12 +-
 .../components/Heading/Heading.stories.tsx    |   4 +-
 .../src/components/Logo/Logo.stories.tsx      |   2 +-
 .../OrderedList/OrderedList.stories.tsx       |   2 +-
 .../Paragraph/Paragraph.stories.tsx           |   4 +-
 .../src/components/Screen/Screen.stories.tsx  |   4 +-
 .../UnorderedList/UnorderedList.stories.tsx   |  18 +-
 .../src/components/shared/exampleContent.ts   |   2 +-
 storybook/src/docs/breakpoints.docs.mdx       |   2 +-
 storybook/src/docs/color.docs.mdx             |  30 ++--
 .../src/docs/components/ColorPalette.tsx      |  14 +-
 .../src/docs/components/color-palette.css     |  20 +--
 322 files changed, 2372 insertions(+), 2405 deletions(-)
 rename proprietary/tokens/src/brand/{amsterdam => ams}/color.tokens.json (97%)
 rename proprietary/tokens/src/brand/{amsterdam => ams}/proportion.tokens.json (93%)
 rename proprietary/tokens/src/brand/{amsterdam => ams}/space.compact.tokens.json (97%)
 rename proprietary/tokens/src/brand/{amsterdam => ams}/space.tokens.json (98%)
 rename proprietary/tokens/src/brand/{amsterdam/typography.compact.tokens.json => ams/text.compact.tokens.json} (93%)
 rename proprietary/tokens/src/brand/{amsterdam/typography.tokens.json => ams/text.tokens.json} (95%)
 rename proprietary/tokens/src/common/{amsterdam => ams}/action.tokens.json (95%)
 rename proprietary/tokens/src/common/{amsterdam => ams}/border.tokens.json (88%)
 rename proprietary/tokens/src/common/{amsterdam => ams}/focus.tokens.json (80%)
 rename proprietary/tokens/src/common/{amsterdam => ams}/hyphenation.tokens.json (91%)
 rename proprietary/tokens/src/common/{amsterdam => ams}/link-appearance.tokens.json (71%)
 create mode 100644 proprietary/tokens/src/components/ams/accordion.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/alert.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/aspect-ratio.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/badge.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/blockquote.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/breadcrumb.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/button.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/card.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/checkbox.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/column.tokens.json
 rename proprietary/tokens/src/components/{amsterdam => ams}/dialog.tokens.json (55%)
 create mode 100644 proprietary/tokens/src/components/ams/fieldset.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/form-label.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/gap.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/grid.compact.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/grid.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/header.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/heading.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/icon-button.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/icon.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/link-list.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/link.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/logo.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/margin.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/mark.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/mega-menu.tokens.json
 rename proprietary/tokens/src/components/{amsterdam => ams}/ordered-list.tokens.json (67%)
 create mode 100644 proprietary/tokens/src/components/ams/page-heading.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/page-menu.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/pagination.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/paragraph.tokens.json
 rename proprietary/tokens/src/components/{amsterdam => ams}/radio.tokens.json (65%)
 create mode 100644 proprietary/tokens/src/components/ams/row.tokens.json
 rename proprietary/tokens/src/components/{amsterdam => ams}/screen.tokens.json (90%)
 create mode 100644 proprietary/tokens/src/components/ams/search-field.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/skip-link.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/spotlight.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/switch.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/table.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/tabs.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/text-area.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/text-input.tokens.json
 create mode 100644 proprietary/tokens/src/components/ams/top-task-link.tokens.json
 rename proprietary/tokens/src/components/{amsterdam => ams}/unordered-list.tokens.json (67%)
 delete mode 100644 proprietary/tokens/src/components/amsterdam/accordion.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/alert.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/aspect-ratio.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/badge.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/blockquote.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/button.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/card.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/column.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/fieldset.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/form-label.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/gap.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/grid.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/header.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/heading.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/icon-button.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/icon.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/link-list.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/link.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/logo.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/margin.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/mark.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/page-heading.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/page-menu.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/pagination.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/row.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/search-field.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/skip-link.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/spotlight.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/switch.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/table.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/tabs.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/text-area.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/text-input.tokens.json
 delete mode 100644 proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 30258e3cdd..3fbc98ab7e 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -9,7 +9,7 @@
     "color-function-notation": ["modern"],
     "color-no-invalid-hex": true,
     "comment-no-empty": true,
-    "custom-property-pattern": "^_?(amsterdam|nl|utrecht)-[a-z0-9-]+$",
+    "custom-property-pattern": "^_?(ams|nl|utrecht)-[a-z0-9-]+$",
     "declaration-block-no-duplicate-properties": true,
     "declaration-block-no-redundant-longhand-properties": null,
     "declaration-block-no-shorthand-property-overrides": true,
@@ -33,7 +33,7 @@
     "function-url-quotes": "always",
     "hue-degree-notation": ["number"],
     "keyframe-declaration-no-important": true,
-    "keyframes-name-pattern": "^(amsterdam|nl|utrecht)-[a-z0-9-]+$",
+    "keyframes-name-pattern": "^(ams|nl|utrecht)-[a-z0-9-]+$",
     "length-zero-no-unit": [
       true,
       {
@@ -76,15 +76,15 @@
       }
     ],
     "scss/dollar-variable-pattern": [
-      "^(amsterdam)-[a-z0-9-]+$",
+      "^(ams)-[a-z0-9-]+$",
       {
         "ignore": "local"
       }
     ],
     "scss/operator-no-newline-after": null,
-    "scss/percent-placeholder-pattern": "^(amsterdam|nl|utrecht)-[a-z0-9-]+$",
+    "scss/percent-placeholder-pattern": "^(ams|nl|utrecht)-[a-z0-9-]+$",
     "selector-attribute-quotes": "always",
-    "selector-class-pattern": "^(amsterdam|nl|utrecht)-[a-z0-9_-]+$",
+    "selector-class-pattern": "^(ams|nl|utrecht)-[a-z0-9_-]+$",
     "selector-max-id": [0],
     "selector-pseudo-class-no-unknown": true,
     "selector-pseudo-element-no-unknown": true,
diff --git a/packages/css/README.md b/packages/css/README.md
index 72db8a0eec..086da55fca 100644
--- a/packages/css/README.md
+++ b/packages/css/README.md
@@ -17,7 +17,7 @@ Theoretically you can include the components in your HTML page like so, but this
     <link rel="stylesheet" href="node_modules/@amsterdam/design-system-css" />
   </head>
   <body>
-    <p class="amsterdam-paragraph">Hello, world!</p>
+    <p class="ams-paragraph">Hello, world!</p>
   </body>
 </html>
 ```
@@ -32,7 +32,7 @@ export default class ExamplePage extends React.Component {
   render() {
     return (
       <>
-        <p className={btn["amsterdam-paragraph"]}>Hello, world!</p>
+        <p className={btn["ams-paragraph"]}>Hello, world!</p>
       </>
     );
   }
diff --git a/packages/css/documentation/coding-conventions.md b/packages/css/documentation/coding-conventions.md
index 2b8820b760..c7718c6cab 100644
--- a/packages/css/documentation/coding-conventions.md
+++ b/packages/css/documentation/coding-conventions.md
@@ -11,7 +11,7 @@ This link receives an underline when the user’s pointer hovers over it.
 Still, we define its thickness and offset for the initial state.
 
 ```css
-.amsterdam-link {
+.ams-link {
   text-decoration: none;
   text-decoration-thickness: 2px;
   text-underline-offset: 3px;
@@ -25,7 +25,7 @@ Still, we define its thickness and offset for the initial state.
 ### Do not do this
 
 ```css
-.amsterdam-link {
+.ams-link {
   text-decoration: none;
 
   &:hover {
diff --git a/packages/css/src/common/breakpoint.scss b/packages/css/src/common/breakpoint.scss
index 9ac1920456..aef812e1a6 100644
--- a/packages/css/src/common/breakpoint.scss
+++ b/packages/css/src/common/breakpoint.scss
@@ -9,7 +9,7 @@
  */
 
 /** The breakpoint at which medium screens start. */
-$amsterdam-breakpoint-medium: 36rem;
+$ams-breakpoint-medium: 36rem;
 
 /** The breakpoint at which wide screens start. */
-$amsterdam-breakpoint-wide: 68rem;
+$ams-breakpoint-wide: 68rem;
diff --git a/packages/css/src/common/hyphenation.scss b/packages/css/src/common/hyphenation.scss
index eeb41efa58..24889a457f 100644
--- a/packages/css/src/common/hyphenation.scss
+++ b/packages/css/src/common/hyphenation.scss
@@ -4,7 +4,7 @@
  */
 
 @mixin hyphenation {
-  hyphenate-limit-chars: var(--amsterdam-hyphenation-hyphenate-limit-chars);
-  hyphens: var(--amsterdam-hyphenation-hyphens);
-  overflow-wrap: var(--amsterdam-hyphenation-overflow-wrap);
+  hyphenate-limit-chars: var(--ams-hyphenation-hyphenate-limit-chars);
+  hyphens: var(--ams-hyphenation-hyphens);
+  overflow-wrap: var(--ams-hyphenation-overflow-wrap);
 }
diff --git a/packages/css/src/common/size.scss b/packages/css/src/common/size.scss
index 26f6777caf..077430ca53 100644
--- a/packages/css/src/common/size.scss
+++ b/packages/css/src/common/size.scss
@@ -4,7 +4,7 @@
  */
 
 /** The set of available options for sizing. */
-$amsterdam-sizes: (
+$ams-sizes: (
   "xs": "extra-small",
   "sm": "small",
   "md": "medium",
diff --git a/packages/css/src/components/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss
index a5944a209e..73d0dcae6b 100644
--- a/packages/css/src/components/accordion/accordion.scss
+++ b/packages/css/src/components/accordion/accordion.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-accordion__header {
+.ams-accordion__header {
   display: flex;
   margin-block: 0;
   margin-inline: 0;
@@ -13,27 +13,27 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-accordion__button {
+.ams-accordion__button {
   background-color: transparent;
   border: 0;
-  color: var(--amsterdam-accordion-button-color);
+  color: var(--ams-accordion-button-color);
   cursor: pointer;
   display: flex;
-  font-family: var(--amsterdam-accordion-button-font-family);
-  font-size: var(--amsterdam-accordion-button-font-size);
-  font-weight: var(--amsterdam-accordion-button-font-weight);
+  font-family: var(--ams-accordion-button-font-family);
+  font-size: var(--ams-accordion-button-font-size);
+  font-weight: var(--ams-accordion-button-font-weight);
   justify-content: space-between;
-  line-height: var(--amsterdam-accordion-button-line-height);
-  padding-block: var(--amsterdam-accordion-button-padding-block);
-  padding-inline: var(--amsterdam-accordion-button-padding-inline);
+  line-height: var(--ams-accordion-button-line-height);
+  padding-block: var(--ams-accordion-button-padding-block);
+  padding-inline: var(--ams-accordion-button-padding-inline);
   width: 100%;
 
   &:focus {
-    outline-offset: var(--amsterdam-accordion-button-focus-outline-offset);
+    outline-offset: var(--ams-accordion-button-focus-outline-offset);
   }
 
   &:hover {
-    box-shadow: var(--amsterdam-accordion-button-hover-box-shadow);
+    box-shadow: var(--ams-accordion-button-hover-box-shadow);
   }
 
   svg {
@@ -48,16 +48,16 @@
   @include reset;
 }
 
-.amsterdam-accordion__button[aria-expanded="true"] svg {
+.ams-accordion__button[aria-expanded="true"] svg {
   transform: rotate(180deg);
 }
 
-.amsterdam-accordion__panel {
+.ams-accordion__panel {
   display: none;
-  padding-block: var(--amsterdam-accordion-panel-padding-block);
-  padding-inline: var(--amsterdam-accordion-panel-padding-inline);
+  padding-block: var(--ams-accordion-panel-padding-block);
+  padding-inline: var(--ams-accordion-panel-padding-inline);
 }
 
-.amsterdam-accordion__panel--expanded {
+.ams-accordion__panel--expanded {
   display: block;
 }
diff --git a/packages/css/src/components/alert/alert.scss b/packages/css/src/components/alert/alert.scss
index 85c2b17363..ad2e6f2f1d 100644
--- a/packages/css/src/components/alert/alert.scss
+++ b/packages/css/src/components/alert/alert.scss
@@ -3,34 +3,34 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-alert {
+.ams-alert {
   align-items: flex-start;
-  border-style: var(--amsterdam-alert-border-style);
-  border-width: var(--amsterdam-alert-border-width);
+  border-style: var(--ams-alert-border-style);
+  border-width: var(--ams-alert-border-width);
   display: flex;
   flex-direction: row;
-  gap: var(--amsterdam-alert-gap);
+  gap: var(--ams-alert-gap);
   justify-content: space-between;
-  padding-block: var(--amsterdam-alert-padding-block);
-  padding-inline: var(--amsterdam-alert-padding-inline);
+  padding-block: var(--ams-alert-padding-block);
+  padding-inline: var(--ams-alert-padding-inline);
 }
 
-.amsterdam-alert__content {
+.ams-alert__content {
   flex: auto;
 }
 
-.amsterdam-alert--error {
-  border-color: var(--amsterdam-alert-error-border-color);
+.ams-alert--error {
+  border-color: var(--ams-alert-error-border-color);
 }
 
-.amsterdam-alert--info {
-  border-color: var(--amsterdam-alert-info-border-color);
+.ams-alert--info {
+  border-color: var(--ams-alert-info-border-color);
 }
 
-.amsterdam-alert--success {
-  border-color: var(--amsterdam-alert-success-border-color);
+.ams-alert--success {
+  border-color: var(--ams-alert-success-border-color);
 }
 
-.amsterdam-alert--warning {
-  border-color: var(--amsterdam-alert-warning-border-color);
+.ams-alert--warning {
+  border-color: var(--ams-alert-warning-border-color);
 }
diff --git a/packages/css/src/components/aspect-ratio/aspect-ratio.scss b/packages/css/src/components/aspect-ratio/aspect-ratio.scss
index 17faedfdd2..08fcab0fe0 100644
--- a/packages/css/src/components/aspect-ratio/aspect-ratio.scss
+++ b/packages/css/src/components/aspect-ratio/aspect-ratio.scss
@@ -3,31 +3,31 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-aspect-ratio {
+.ams-aspect-ratio {
   overflow: hidden;
   position: relative;
 }
 
-.amsterdam-aspect-ratio--x-tall {
-  aspect-ratio: var(--amsterdam-aspect-ratio-x-tall);
+.ams-aspect-ratio--x-tall {
+  aspect-ratio: var(--ams-aspect-ratio-x-tall);
 }
 
-.amsterdam-aspect-ratio--tall {
-  aspect-ratio: var(--amsterdam-aspect-ratio-tall);
+.ams-aspect-ratio--tall {
+  aspect-ratio: var(--ams-aspect-ratio-tall);
 }
 
-.amsterdam-aspect-ratio--square {
-  aspect-ratio: var(--amsterdam-aspect-ratio-square);
+.ams-aspect-ratio--square {
+  aspect-ratio: var(--ams-aspect-ratio-square);
 }
 
-.amsterdam-aspect-ratio--wide {
-  aspect-ratio: var(--amsterdam-aspect-ratio-wide);
+.ams-aspect-ratio--wide {
+  aspect-ratio: var(--ams-aspect-ratio-wide);
 }
 
-.amsterdam-aspect-ratio--x-wide {
-  aspect-ratio: var(--amsterdam-aspect-ratio-x-wide);
+.ams-aspect-ratio--x-wide {
+  aspect-ratio: var(--ams-aspect-ratio-x-wide);
 }
 
-.amsterdam-aspect-ratio--2x-wide {
-  aspect-ratio: var(--amsterdam-aspect-ratio-2x-wide);
+.ams-aspect-ratio--2x-wide {
+  aspect-ratio: var(--ams-aspect-ratio-2x-wide);
 }
diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss
index a3de020358..f25fec491b 100644
--- a/packages/css/src/components/badge/badge.scss
+++ b/packages/css/src/components/badge/badge.scss
@@ -3,51 +3,51 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-badge {
+.ams-badge {
   display: inline-block;
-  font-family: var(--amsterdam-badge-font-family);
-  font-size: var(--amsterdam-badge-font-size);
-  font-weight: var(--amsterdam-badge-font-weight);
-  line-height: var(--amsterdam-badge-line-height);
-  padding-inline: var(--amsterdam-badge-padding-inline);
+  font-family: var(--ams-badge-font-family);
+  font-size: var(--ams-badge-font-size);
+  font-weight: var(--ams-badge-font-weight);
+  line-height: var(--ams-badge-line-height);
+  padding-inline: var(--ams-badge-padding-inline);
 }
 
-.amsterdam-badge--blue {
-  background-color: var(--amsterdam-badge-blue-background-color);
-  color: var(--amsterdam-badge-blue-color);
+.ams-badge--blue {
+  background-color: var(--ams-badge-blue-background-color);
+  color: var(--ams-badge-blue-color);
 }
 
-.amsterdam-badge--dark-blue {
-  background-color: var(--amsterdam-badge-dark-blue-background-color);
-  color: var(--amsterdam-badge-dark-blue-color);
+.ams-badge--dark-blue {
+  background-color: var(--ams-badge-dark-blue-background-color);
+  color: var(--ams-badge-dark-blue-color);
 }
 
-.amsterdam-badge--dark-green {
-  background-color: var(--amsterdam-badge-dark-green-background-color);
-  color: var(--amsterdam-badge-dark-green-color);
+.ams-badge--dark-green {
+  background-color: var(--ams-badge-dark-green-background-color);
+  color: var(--ams-badge-dark-green-color);
 }
 
-.amsterdam-badge--green {
-  background-color: var(--amsterdam-badge-green-background-color);
-  color: var(--amsterdam-badge-green-color);
+.ams-badge--green {
+  background-color: var(--ams-badge-green-background-color);
+  color: var(--ams-badge-green-color);
 }
 
-.amsterdam-badge--magenta {
-  background-color: var(--amsterdam-badge-magenta-background-color);
-  color: var(--amsterdam-badge-magenta-color);
+.ams-badge--magenta {
+  background-color: var(--ams-badge-magenta-background-color);
+  color: var(--ams-badge-magenta-color);
 }
 
-.amsterdam-badge--orange {
-  background-color: var(--amsterdam-badge-orange-background-color);
-  color: var(--amsterdam-badge-orange-color);
+.ams-badge--orange {
+  background-color: var(--ams-badge-orange-background-color);
+  color: var(--ams-badge-orange-color);
 }
 
-.amsterdam-badge--purple {
-  background-color: var(--amsterdam-badge-purple-background-color);
-  color: var(--amsterdam-badge-purple-color);
+.ams-badge--purple {
+  background-color: var(--ams-badge-purple-background-color);
+  color: var(--ams-badge-purple-color);
 }
 
-.amsterdam-badge--yellow {
-  background-color: var(--amsterdam-badge-yellow-background-color);
-  color: var(--amsterdam-badge-yellow-color);
+.ams-badge--yellow {
+  background-color: var(--ams-badge-yellow-background-color);
+  color: var(--ams-badge-yellow-color);
 }
diff --git a/packages/css/src/components/blockquote/blockquote.scss b/packages/css/src/components/blockquote/blockquote.scss
index 69b22f5a26..be5cd0e48a 100644
--- a/packages/css/src/components/blockquote/blockquote.scss
+++ b/packages/css/src/components/blockquote/blockquote.scss
@@ -12,13 +12,13 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-blockquote {
+.ams-blockquote {
   break-inside: avoid;
-  color: var(--amsterdam-blockquote-color);
-  font-family: var(--amsterdam-blockquote-font-family);
-  font-size: var(--amsterdam-blockquote-font-size);
-  font-weight: var(--amsterdam-blockquote-font-weight);
-  line-height: var(--amsterdam-blockquote-line-height);
+  color: var(--ams-blockquote-color);
+  font-family: var(--ams-blockquote-font-family);
+  font-size: var(--ams-blockquote-font-size);
+  font-weight: var(--ams-blockquote-font-weight);
+  line-height: var(--ams-blockquote-line-height);
   quotes: "“" "”";
 
   &::before {
@@ -33,6 +33,6 @@
   @include reset;
 }
 
-.amsterdam-blockquote--inverse-color {
-  color: var(--amsterdam-blockquote-inverse-color);
+.ams-blockquote--inverse-color {
+  color: var(--ams-blockquote-inverse-color);
 }
diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss
index fc3f339b2e..f25ed0ff9c 100644
--- a/packages/css/src/components/breadcrumb/breadcrumb.scss
+++ b/packages/css/src/components/breadcrumb/breadcrumb.scss
@@ -10,26 +10,26 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-breadcrumb {
-  font-family: var(--amsterdam-breadcrumb-font-family, inherit);
-  font-size: var(--amsterdam-breadcrumb-font-size);
-  font-weight: var(--amsterdam-breadcrumb-font-weight);
-  line-height: var(--amsterdam-breadcrumb-line-height);
+.ams-breadcrumb {
+  font-family: var(--ams-breadcrumb-font-family, inherit);
+  font-size: var(--ams-breadcrumb-font-size);
+  font-weight: var(--ams-breadcrumb-font-weight);
+  line-height: var(--ams-breadcrumb-line-height);
 }
 
-.amsterdam-breadcrumb__list {
+.ams-breadcrumb__list {
   break-after: avoid;
   break-inside: avoid;
 
   @include reset;
 }
 
-.amsterdam-breadcrumb__item {
+.ams-breadcrumb__item {
   display: inline;
 }
 
-.amsterdam-breadcrumb__item:not(:last-child)::after {
-  background-image: var(--amsterdam-breadcrumb-separator-background-image);
+.ams-breadcrumb__item:not(:last-child)::after {
+  background-image: var(--ams-breadcrumb-separator-background-image);
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
@@ -38,15 +38,15 @@
   width: 1ex;
 }
 
-.amsterdam-breadcrumb__link {
-  color: var(--amsterdam-breadcrumb-item-link-color);
-  outline-offset: var(--amsterdam-breadcrumb-item-link-outline-offset);
-  text-decoration-line: var(--amsterdam-breadcrumb-item-link-text-decoration-line);
-  text-decoration-thickness: var(--amsterdam-breadcrumb-item-link-text-decoration-thickness);
-  text-underline-offset: var(--amsterdam-breadcrumb-item-link-text-underline-offset);
+.ams-breadcrumb__link {
+  color: var(--ams-breadcrumb-item-link-color);
+  outline-offset: var(--ams-breadcrumb-item-link-outline-offset);
+  text-decoration-line: var(--ams-breadcrumb-item-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-breadcrumb-item-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-breadcrumb-item-link-text-underline-offset);
 
   &:hover {
-    color: var(--amsterdam-breadcrumb-item-link-hover-color);
-    text-decoration-line: var(--amsterdam-breadcrumb-item-link-hover-text-decoration-line);
+    color: var(--ams-breadcrumb-item-link-hover-color);
+    text-decoration-line: var(--ams-breadcrumb-item-link-hover-text-decoration-line);
   }
 }
diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
index d8fb0806e5..33ad38792c 100644
--- a/packages/css/src/components/button/button.scss
+++ b/packages/css/src/components/button/button.scss
@@ -7,84 +7,84 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-button {
+.ams-button {
   border: none;
-  cursor: var(--amsterdam-button-cursor);
+  cursor: var(--ams-button-cursor);
   display: inline-flex;
-  font-family: var(--amsterdam-button-font-family);
-  font-size: var(--amsterdam-button-font-size);
-  gap: var(--amsterdam-button-gap);
-  line-height: var(--amsterdam-button-line-height);
-  outline-offset: var(--amsterdam-button-outline-offset);
-  padding-block: var(--amsterdam-button-padding-block);
-  padding-inline: var(--amsterdam-button-padding-inline);
+  font-family: var(--ams-button-font-family);
+  font-size: var(--ams-button-font-size);
+  gap: var(--ams-button-gap);
+  line-height: var(--ams-button-line-height);
+  outline-offset: var(--ams-button-outline-offset);
+  padding-block: var(--ams-button-padding-block);
+  padding-inline: var(--ams-button-padding-inline);
   touch-action: manipulation;
 
   &:disabled,
   &[aria-disabled="true"] {
-    cursor: var(--amsterdam-button-disabled-cursor);
+    cursor: var(--ams-button-disabled-cursor);
   }
 
   @include reset;
 }
 
-@mixin amsterdam-button-forced-color-mode {
+@mixin ams-button-forced-color-mode {
   @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
     border: 2px solid ButtonBorder; // add border because forced colors changes box-shadow to none
   }
 }
 
-.amsterdam-button--primary {
-  background-color: var(--amsterdam-button-primary-background-color);
-  box-shadow: var(--amsterdam-button-primary-box-shadow);
-  color: var(--amsterdam-button-primary-color);
+.ams-button--primary {
+  background-color: var(--ams-button-primary-background-color);
+  box-shadow: var(--ams-button-primary-box-shadow);
+  color: var(--ams-button-primary-color);
 
   &:disabled,
   [aria-disabled="true"] {
-    background-color: var(--amsterdam-button-primary-disabled-background-color);
-    box-shadow: var(--amsterdam-button-primary-disabled-box-shadow);
+    background-color: var(--ams-button-primary-disabled-background-color);
+    box-shadow: var(--ams-button-primary-disabled-box-shadow);
   }
 
   &:hover:not(:disabled, [aria-disabled="true"]) {
-    background-color: var(--amsterdam-button-primary-hover-background-color);
-    box-shadow: var(--amsterdam-button-primary-hover-box-shadow);
+    background-color: var(--ams-button-primary-hover-background-color);
+    box-shadow: var(--ams-button-primary-hover-box-shadow);
   }
 
-  @include amsterdam-button-forced-color-mode;
+  @include ams-button-forced-color-mode;
 }
 
-.amsterdam-button--secondary {
-  background-color: var(--amsterdam-button-secondary-background-color);
-  box-shadow: var(--amsterdam-button-secondary-box-shadow);
-  color: var(--amsterdam-button-secondary-color);
+.ams-button--secondary {
+  background-color: var(--ams-button-secondary-background-color);
+  box-shadow: var(--ams-button-secondary-box-shadow);
+  color: var(--ams-button-secondary-color);
 
   &:disabled,
   [aria-disabled="true"] {
-    background-color: var(--amsterdam-button-secondary-disabled-background-color);
-    box-shadow: var(--amsterdam-button-secondary-disabled-box-shadow);
-    color: var(--amsterdam-button-secondary-disabled-color);
+    background-color: var(--ams-button-secondary-disabled-background-color);
+    box-shadow: var(--ams-button-secondary-disabled-box-shadow);
+    color: var(--ams-button-secondary-disabled-color);
   }
 
   &:hover:not(:disabled, [aria-disabled="true"]) {
-    box-shadow: var(--amsterdam-button-secondary-hover-box-shadow);
-    color: var(--amsterdam-button-secondary-hover-color);
+    box-shadow: var(--ams-button-secondary-hover-box-shadow);
+    color: var(--ams-button-secondary-hover-color);
   }
 
-  @include amsterdam-button-forced-color-mode;
+  @include ams-button-forced-color-mode;
 }
 
-.amsterdam-button--tertiary {
-  background-color: var(--amsterdam-button-tertiary-background-color);
-  color: var(--amsterdam-button-tertiary-color);
+.ams-button--tertiary {
+  background-color: var(--ams-button-tertiary-background-color);
+  color: var(--ams-button-tertiary-color);
 
   &:disabled,
   [aria-disabled="true"] {
-    background-color: var(--amsterdam-button-tertiary-disabled-background-color);
-    color: var(--amsterdam-button-tertiary-disabled-color);
+    background-color: var(--ams-button-tertiary-disabled-background-color);
+    color: var(--ams-button-tertiary-disabled-color);
   }
 
   &:hover:not(:disabled, [aria-disabled="true"]) {
-    box-shadow: var(--amsterdam-button-tertiary-hover-box-shadow);
-    color: var(--amsterdam-button-tertiary-hover-color);
+    box-shadow: var(--ams-button-tertiary-hover-box-shadow);
+    color: var(--ams-button-tertiary-hover-color);
   }
 }
diff --git a/packages/css/src/components/card/card.scss b/packages/css/src/components/card/card.scss
index 09e27bf7f3..156b6f7f1c 100644
--- a/packages/css/src/components/card/card.scss
+++ b/packages/css/src/components/card/card.scss
@@ -3,10 +3,10 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-card {
+.ams-card {
   display: grid;
   gap: 0.5rem;
-  outline-offset: var(--amsterdam-card-outline-offset);
+  outline-offset: var(--ams-card-outline-offset);
   position: relative;
   touch-action: manipulation;
 
@@ -37,20 +37,20 @@
   }
 }
 
-.amsterdam-card__heading-group {
+.ams-card__heading-group {
   display: flex;
   flex-direction: column-reverse;
   gap: 0.5rem;
 }
 
-.amsterdam-card__link {
-  color: var(--amsterdam-card-link-color);
-  text-decoration-line: var(--amsterdam-card-link-text-decoration-line);
-  text-decoration-thickness: var(--amsterdam-card-link-text-decoration-thickness);
-  text-underline-offset: var(--amsterdam-card-link-text-underline-offset);
+.ams-card__link {
+  color: var(--ams-card-link-color);
+  text-decoration-line: var(--ams-card-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-card-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-card-link-text-underline-offset);
 
   &:hover {
-    color: var(--amsterdam-card-link-hover-color);
-    text-decoration-line: var(--amsterdam-card-link-hover-text-decoration-line);
+    color: var(--ams-card-link-hover-color);
+    text-decoration-line: var(--ams-card-link-hover-text-decoration-line);
   }
 }
diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss
index 30c63760f4..b8dd1d61b7 100644
--- a/packages/css/src/components/checkbox/checkbox.scss
+++ b/packages/css/src/components/checkbox/checkbox.scss
@@ -6,23 +6,23 @@
 @import "../../common/input-label-focus";
 @import "../../common/hide-input";
 
-.amsterdam-checkbox__input {
+.ams-checkbox__input {
   @include hide-input;
   @include input-label-focus;
 }
 
-.amsterdam-checkbox__checkmark {
+.ams-checkbox__checkmark {
   align-items: center;
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--amsterdam-checkbox-font-size) * var(--amsterdam-checkbox-line-height));
+  height: calc(var(--ams-checkbox-font-size) * var(--ams-checkbox-line-height));
   width: 1.5rem;
 
   &::after {
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
-    border-color: var(--amsterdam-checkbox-checkmark-border-color);
+    border-color: var(--ams-checkbox-checkmark-border-color);
     border-style: solid;
     border-width: 0.125rem;
     box-sizing: border-box;
@@ -36,25 +36,25 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-checkbox__label {
-  color: var(--amsterdam-checkbox-color);
+.ams-checkbox__label {
+  color: var(--ams-checkbox-color);
   cursor: pointer;
   display: inline-flex;
-  font-family: var(--amsterdam-checkbox-font-family);
-  font-size: var(--amsterdam-checkbox-font-size);
-  font-weight: var(--amsterdam-checkbox-font-weight);
+  font-family: var(--ams-checkbox-font-family);
+  font-size: var(--ams-checkbox-font-size);
+  font-weight: var(--ams-checkbox-font-weight);
   gap: 0.5rem;
-  line-height: var(--amsterdam-checkbox-line-height);
-  outline-offset: var(--amsterdam-checkbox-outline-offset);
+  line-height: var(--ams-checkbox-line-height);
+  outline-offset: var(--ams-checkbox-outline-offset);
 
   &:hover {
-    color: var(--amsterdam-checkbox-hover-color);
+    color: var(--ams-checkbox-hover-color);
     text-decoration-line: underline;
     text-decoration-thickness: 0.125rem;
     text-underline-offset: 0.375rem;
 
-    .amsterdam-checkbox__checkmark::after {
-      border-color: var(--amsterdam-checkbox-checkmark-hover-border-color);
+    .ams-checkbox__checkmark::after {
+      border-color: var(--ams-checkbox-checkmark-hover-border-color);
       border-width: 0.1875rem;
     }
   }
@@ -63,19 +63,19 @@
 }
 
 // Default checked
-.amsterdam-checkbox__input:checked {
-  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
-    background-color: var(--amsterdam-checkbox-checkmark-checked-background-color);
-    background-image: var(--amsterdam-checkbox-checkmark-checked-background-image);
+.ams-checkbox__input:checked {
+  + .ams-checkbox__label .ams-checkbox__checkmark::after {
+    background-color: var(--ams-checkbox-checkmark-checked-background-color);
+    background-image: var(--ams-checkbox-checkmark-checked-background-image);
     border: none;
   }
 }
 
 // Default indeterminate
-.amsterdam-checkbox__input:indeterminate {
-  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
-    background-color: var(--amsterdam-checkbox-checkmark-indeterminate-background-color);
-    background-image: var(--amsterdam-checkbox-checkmark-indeterminate-background-image);
+.ams-checkbox__input:indeterminate {
+  + .ams-checkbox__label .ams-checkbox__checkmark::after {
+    background-color: var(--ams-checkbox-checkmark-indeterminate-background-color);
+    background-image: var(--ams-checkbox-checkmark-indeterminate-background-image);
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
@@ -84,135 +84,133 @@
 }
 
 // Invalid unchecked
-.amsterdam-checkbox__input:invalid,
-.amsterdam-checkbox__input[aria-invalid="true"] {
-  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
-    border-color: var(--amsterdam-checkbox-checkmark-invalid-border-color);
+.ams-checkbox__input:invalid,
+.ams-checkbox__input[aria-invalid="true"] {
+  + .ams-checkbox__label .ams-checkbox__checkmark::after {
+    border-color: var(--ams-checkbox-checkmark-invalid-border-color);
   }
 }
 
 // Disabled unchecked
-.amsterdam-checkbox__input:disabled {
-  + .amsterdam-checkbox__label {
-    color: var(--amsterdam-checkbox-disabled-color);
+.ams-checkbox__input:disabled {
+  + .ams-checkbox__label {
+    color: var(--ams-checkbox-disabled-color);
     cursor: not-allowed;
 
-    .amsterdam-checkbox__checkmark::after {
-      border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
+    .ams-checkbox__checkmark::after {
+      border-color: var(--ams-checkbox-checkmark-disabled-border-color);
       border-width: 0.125rem;
     }
   }
 }
 
 // Invalid checked
-.amsterdam-checkbox__input:invalid:checked,
-.amsterdam-checkbox__input[aria-invalid="true"]:checked {
-  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
-    background-color: var(--amsterdam-checkbox-checkmark-invalid-checked-background-color);
+.ams-checkbox__input:invalid:checked,
+.ams-checkbox__input[aria-invalid="true"]:checked {
+  + .ams-checkbox__label .ams-checkbox__checkmark::after {
+    background-color: var(--ams-checkbox-checkmark-invalid-checked-background-color);
   }
 }
 
 // Invalid indeterminate
-.amsterdam-checkbox__input:invalid:indeterminate,
-.amsterdam-checkbox__input[aria-invalid="true"]:indeterminate {
-  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
-    background-color: var(--amsterdam-checkbox-checkmark-invalid-indeterminate-background-color);
+.ams-checkbox__input:invalid:indeterminate,
+.ams-checkbox__input[aria-invalid="true"]:indeterminate {
+  + .ams-checkbox__label .ams-checkbox__checkmark::after {
+    background-color: var(--ams-checkbox-checkmark-invalid-indeterminate-background-color);
   }
 }
 
 // Disabled label
-.amsterdam-checkbox__input:disabled + .amsterdam-checkbox__label:hover {
+.ams-checkbox__input:disabled + .ams-checkbox__label:hover {
   text-decoration: none;
 }
 
 // Disabled checked
-.amsterdam-checkbox__input:disabled:checked {
-  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
-    background-color: var(--amsterdam-checkbox-checkmark-disabled-checked-background-color);
+.ams-checkbox__input:disabled:checked {
+  + .ams-checkbox__label .ams-checkbox__checkmark::after {
+    background-color: var(--ams-checkbox-checkmark-disabled-checked-background-color);
   }
 }
 
 // Disabled indeterminate
-.amsterdam-checkbox__input:disabled:indeterminate {
-  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
-    background-color: var(--amsterdam-checkbox-checkmark-disabled-indeterminate-background-color);
+.ams-checkbox__input:disabled:indeterminate {
+  + .ams-checkbox__label .ams-checkbox__checkmark::after {
+    background-color: var(--ams-checkbox-checkmark-disabled-indeterminate-background-color);
   }
 }
 
 // Disabled invalid unchecked
-.amsterdam-checkbox__input:invalid:disabled,
-.amsterdam-checkbox__input[aria-invalid="true"]:disabled {
-  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+.ams-checkbox__input:invalid:disabled,
+.ams-checkbox__input[aria-invalid="true"]:disabled {
+  + .ams-checkbox__label .ams-checkbox__checkmark::after {
     // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-    border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
+    border-color: var(--ams-checkbox-checkmark-disabled-border-color);
   }
 }
 
 // HOVER STATES
 
 // Invalid unchecked hover
-:is(.amsterdam-checkbox__input:invalid, .amsterdam-checkbox__input[aria-invalid="true"])
-  + .amsterdam-checkbox__label:hover
-  .amsterdam-checkbox__checkmark::after {
+:is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid="true"])
+  + .ams-checkbox__label:hover
+  .ams-checkbox__checkmark::after {
   // TODO: this should be the (currently non-existent) dark red hover color
-  border-color: var(--amsterdam-checkbox-checkmark-invalid-hover-border-color);
+  border-color: var(--ams-checkbox-checkmark-invalid-hover-border-color);
 }
 
 // Default checked hover
-.amsterdam-checkbox__input:checked + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
-  background-color: var(--amsterdam-checkbox-checkmark-checked-hover-background-color);
+.ams-checkbox__input:checked + .ams-checkbox__label:hover .ams-checkbox__checkmark::after {
+  background-color: var(--ams-checkbox-checkmark-checked-hover-background-color);
 }
 
 // Default indeterminate hover
-.amsterdam-checkbox__input:indeterminate + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
-  background-color: var(--amsterdam-checkbox-checkmark-indeterminate-hover-background-color);
+.ams-checkbox__input:indeterminate + .ams-checkbox__label:hover .ams-checkbox__checkmark::after {
+  background-color: var(--ams-checkbox-checkmark-indeterminate-hover-background-color);
 }
 
 // Invalid checked hover
-:is(.amsterdam-checkbox__input:invalid:checked, .amsterdam-checkbox__input[aria-invalid="true"]:checked)
-  + .amsterdam-checkbox__label:hover
-  .amsterdam-checkbox__checkmark::after {
+:is(.ams-checkbox__input:invalid:checked, .ams-checkbox__input[aria-invalid="true"]:checked)
+  + .ams-checkbox__label:hover
+  .ams-checkbox__checkmark::after {
   // TODO: this should be the (currently non-existent) dark red hover color
-  background-color: var(--amsterdam-checkbox-checkmark-invalid-checked-hover-background-color);
+  background-color: var(--ams-checkbox-checkmark-invalid-checked-hover-background-color);
 }
 
 // Invalid indeterminate hover
-:is(.amsterdam-checkbox__input:invalid:indeterminate, .amsterdam-checkbox__input[aria-invalid="true"]:indeterminate)
-  + .amsterdam-checkbox__label:hover
-  .amsterdam-checkbox__checkmark::after {
+:is(.ams-checkbox__input:invalid:indeterminate, .ams-checkbox__input[aria-invalid="true"]:indeterminate)
+  + .ams-checkbox__label:hover
+  .ams-checkbox__checkmark::after {
   // TODO: this should be the (currently non-existent) dark red hover color
-  background-color: var(--amsterdam-checkbox-checkmark-invalid-indeterminate-hover-background-color);
+  background-color: var(--ams-checkbox-checkmark-invalid-indeterminate-hover-background-color);
 }
 
 // Disabled checked hover
-.amsterdam-checkbox__input:disabled:checked + .amsterdam-checkbox__label:hover .amsterdam-checkbox__checkmark::after {
-  background-color: var(--amsterdam-checkbox-checkmark-disabled-checked-hover-background-color);
+.ams-checkbox__input:disabled:checked + .ams-checkbox__label:hover .ams-checkbox__checkmark::after {
+  background-color: var(--ams-checkbox-checkmark-disabled-checked-hover-background-color);
 }
 
 // Disabled indeterminate hover
-.amsterdam-checkbox__input:disabled:indeterminate
-  + .amsterdam-checkbox__label:hover
-  .amsterdam-checkbox__checkmark::after {
-  background-color: var(--amsterdam-checkbox-checkmark-disabled-indeterminate-hover-background-color);
+.ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label:hover .ams-checkbox__checkmark::after {
+  background-color: var(--ams-checkbox-checkmark-disabled-indeterminate-hover-background-color);
 }
 
 // Disabled invalid unchecked hover
-:is(.amsterdam-checkbox__input:invalid:disabled, .amsterdam-checkbox__input[aria-invalid="true"]:disabled)
-  + .amsterdam-checkbox__label:hover
-  .amsterdam-checkbox__checkmark::after {
+:is(.ams-checkbox__input:invalid:disabled, .ams-checkbox__input[aria-invalid="true"]:disabled)
+  + .ams-checkbox__label:hover
+  .ams-checkbox__checkmark::after {
   // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-  border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
+  border-color: var(--ams-checkbox-checkmark-disabled-border-color);
 }
 
 // DISABLED INVALID STATES
 
 // Disabled invalid checked & indeterminate
-.amsterdam-checkbox__input:invalid:disabled:checked,
-.amsterdam-checkbox__input:invalid:disabled:indeterminate,
-.amsterdam-checkbox__input[aria-invalid="true"]:disabled:checked,
-.amsterdam-checkbox__input[aria-invalid="true"]:disabled:indeterminate {
-  + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
+.ams-checkbox__input:invalid:disabled:checked,
+.ams-checkbox__input:invalid:disabled:indeterminate,
+.ams-checkbox__input[aria-invalid="true"]:disabled:checked,
+.ams-checkbox__input[aria-invalid="true"]:disabled:indeterminate {
+  + .ams-checkbox__label .ams-checkbox__checkmark::after {
     // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-    background-color: var(--amsterdam-checkbox-checkmark-disabled-checked-background-color);
+    background-color: var(--ams-checkbox-checkmark-disabled-checked-background-color);
   }
 }
diff --git a/packages/css/src/components/column/column.scss b/packages/css/src/components/column/column.scss
index 29b951ea43..66ef8e98ce 100644
--- a/packages/css/src/components/column/column.scss
+++ b/packages/css/src/components/column/column.scss
@@ -5,12 +5,12 @@
 
 @import "../../common/size";
 
-.amsterdam-column {
+.ams-column {
   display: grid;
 }
 
-@each $size, $label in $amsterdam-sizes {
-  .amsterdam-column--#{$label} {
-    gap: var(--amsterdam-column-gap-#{$size});
+@each $size, $label in $ams-sizes {
+  .ams-column--#{$label} {
+    gap: var(--ams-column-gap-#{$size});
   }
 }
diff --git a/packages/css/src/components/dialog/dialog.scss b/packages/css/src/components/dialog/dialog.scss
index 30228f5cac..87b3209ad6 100644
--- a/packages/css/src/components/dialog/dialog.scss
+++ b/packages/css/src/components/dialog/dialog.scss
@@ -6,11 +6,11 @@
 @import "../../common/breakpoint";
 @import "../../common/hyphenation";
 
-.amsterdam-dialog {
-  background-color: var(--amsterdam-dialog-background-color);
-  border: var(--amsterdam-dialog-border);
+.ams-dialog {
+  background-color: var(--ams-dialog-background-color);
+  border: var(--ams-dialog-border);
   inset: 0;
-  max-inline-size: var(--amsterdam-dialog-max-inline-size);
+  max-inline-size: var(--ams-dialog-max-inline-size);
   padding-block: 0;
   padding-inline: 0;
   position: fixed;
@@ -21,18 +21,18 @@
   }
 }
 
-.amsterdam-dialog__form {
+.ams-dialog__form {
   display: grid;
-  gap: var(--amsterdam-dialog-form-gap);
+  gap: var(--ams-dialog-form-gap);
   grid-template-rows: auto 1fr auto;
-  max-block-size: var(--amsterdam-dialog-form-max-block-size);
+  max-block-size: var(--ams-dialog-form-max-block-size);
 
   // TODO Decide on these widths
-  padding-block: var(--amsterdam-dialog-form-padding-block);
-  padding-inline: var(--amsterdam-dialog-form-padding-inline);
+  padding-block: var(--ams-dialog-form-padding-block);
+  padding-inline: var(--ams-dialog-form-padding-inline);
 }
 
-.amsterdam-dialog__article {
+.ams-dialog__article {
   display: grid;
   gap: 1.5rem; /* Until we have a consistent way of spacing text elements */
   max-block-size: 100%; /* safari */
@@ -40,34 +40,34 @@
   overscroll-behavior-y: contain;
 }
 
-.amsterdam-dialog__header {
+.ams-dialog__header {
   align-items: flex-start;
   display: flex;
-  gap: var(--amsterdam-dialog-header-gap);
+  gap: var(--ams-dialog-header-gap);
 }
 
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-dialog__title {
-  color: var(--amsterdam-dialog-title-color);
+.ams-dialog__title {
+  color: var(--ams-dialog-title-color);
   flex: auto;
-  font-family: var(--amsterdam-dialog-title-font-family);
-  font-size: var(--amsterdam-dialog-title-font-size);
-  font-weight: var(--amsterdam-dialog-title-font-weight);
-  line-height: var(--amsterdam-dialog-title-line-height);
+  font-family: var(--ams-dialog-title-font-family);
+  font-size: var(--ams-dialog-title-font-size);
+  font-weight: var(--ams-dialog-title-font-weight);
+  line-height: var(--ams-dialog-title-line-height);
 
   @include hyphenation;
   @include reset;
 }
 
-.amsterdam-dialog__footer {
+.ams-dialog__footer {
   display: flex;
   flex-direction: column;
-  grid-gap: var(--amsterdam-dialog-footer-gap);
+  grid-gap: var(--ams-dialog-footer-gap);
 
-  @media screen and (min-width: $amsterdam-breakpoint-medium) {
+  @media screen and (min-width: $ams-breakpoint-medium) {
     flex-direction: row;
     justify-content: end;
   }
diff --git a/packages/css/src/components/fieldset/fieldset.scss b/packages/css/src/components/fieldset/fieldset.scss
index 2ecc82dece..9fb277c170 100644
--- a/packages/css/src/components/fieldset/fieldset.scss
+++ b/packages/css/src/components/fieldset/fieldset.scss
@@ -12,7 +12,7 @@
   padding-inline: 0;
 }
 
-.amsterdam-fieldset {
+.ams-fieldset {
   @include reset;
 }
 
@@ -21,12 +21,12 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-fieldset__legend {
-  color: var(--amsterdam-fieldset-legend-color);
-  font-family: var(--amsterdam-fieldset-legend-font-family);
-  font-size: var(--amsterdam-fieldset-legend-font-size);
-  font-weight: var(--amsterdam-fieldset-legend-font-weight);
-  line-height: var(--amsterdam-fieldset-legend-line-height);
+.ams-fieldset__legend {
+  color: var(--ams-fieldset-legend-color);
+  font-family: var(--ams-fieldset-legend-font-family);
+  font-size: var(--ams-fieldset-legend-font-size);
+  font-weight: var(--ams-fieldset-legend-font-weight);
+  line-height: var(--ams-fieldset-legend-line-height);
   margin-block-end: 1rem; /* Because of a bug in Chrome we can’t use display grid or flex for this gap */
 
   @include hyphenation;
diff --git a/packages/css/src/components/form-label/form-label.scss b/packages/css/src/components/form-label/form-label.scss
index 6d33031723..c95fedf004 100644
--- a/packages/css/src/components/form-label/form-label.scss
+++ b/packages/css/src/components/form-label/form-label.scss
@@ -9,12 +9,12 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-form-label {
-  color: var(--amsterdam-form-label-color);
-  font-family: var(--amsterdam-form-label-font-family);
-  font-size: var(--amsterdam-form-label-font-size);
-  font-weight: var(--amsterdam-form-label-font-weight);
-  line-height: var(--amsterdam-form-label-line-height);
+.ams-form-label {
+  color: var(--ams-form-label-color);
+  font-family: var(--ams-form-label-font-family);
+  font-size: var(--ams-form-label-font-size);
+  font-weight: var(--ams-form-label-font-weight);
+  line-height: var(--ams-form-label-line-height);
 
   @include hyphenation;
   @include reset;
diff --git a/packages/css/src/components/gap/gap.scss b/packages/css/src/components/gap/gap.scss
index 5b103e79fd..fa3da29bb6 100644
--- a/packages/css/src/components/gap/gap.scss
+++ b/packages/css/src/components/gap/gap.scss
@@ -5,12 +5,12 @@
 
 @import "../../common/size";
 
-[class|="amsterdam-gap-"] {
+[class|="ams-gap-"] {
   display: grid !important;
 }
 
-@each $size in map-keys($amsterdam-sizes) {
-  .amsterdam-gap--#{$size} {
-    gap: var(--amsterdam-gap-#{$size}) !important;
+@each $size in map-keys($ams-sizes) {
+  .ams-gap--#{$size} {
+    gap: var(--ams-gap-#{$size}) !important;
   }
 }
diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
index 56d1773427..4bb54dcfab 100644
--- a/packages/css/src/components/grid/grid.scss
+++ b/packages/css/src/components/grid/grid.scss
@@ -5,105 +5,105 @@
 
 @import "../../common/breakpoint";
 
-.amsterdam-grid {
-  column-gap: var(--amsterdam-grid-column-gap);
+.ams-grid {
+  column-gap: var(--ams-grid-column-gap);
   display: grid;
-  grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
-  padding-inline: var(--amsterdam-grid-padding-inline);
-  row-gap: var(--amsterdam-grid-row-gap-md);
+  grid-template-columns: repeat(var(--ams-grid-column-count), 1fr);
+  padding-inline: var(--ams-grid-padding-inline);
+  row-gap: var(--ams-grid-row-gap-md);
 
-  @media screen and (min-width: $amsterdam-breakpoint-medium) {
-    grid-template-columns: repeat(var(--amsterdam-grid-medium-column-count), 1fr);
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    grid-template-columns: repeat(var(--ams-grid-medium-column-count), 1fr);
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-wide) {
-    grid-template-columns: repeat(var(--amsterdam-grid-wide-column-count), 1fr);
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    grid-template-columns: repeat(var(--ams-grid-wide-column-count), 1fr);
   }
 }
 
-.amsterdam-grid--gap-vertical--none {
+.ams-grid--gap-vertical--none {
   row-gap: initial;
 }
 
-.amsterdam-grid--gap-vertical--small {
-  row-gap: var(--amsterdam-grid-row-gap-sm);
+.ams-grid--gap-vertical--small {
+  row-gap: var(--ams-grid-row-gap-sm);
 }
 
-.amsterdam-grid--gap-vertical--large {
-  row-gap: var(--amsterdam-grid-row-gap-lg);
+.ams-grid--gap-vertical--large {
+  row-gap: var(--ams-grid-row-gap-lg);
 }
 
-.amsterdam-grid--padding-bottom--small {
-  padding-block-end: var(--amsterdam-grid-padding-block-sm);
+.ams-grid--padding-bottom--small {
+  padding-block-end: var(--ams-grid-padding-block-sm);
 }
 
-.amsterdam-grid--padding-bottom--medium {
-  padding-block-end: var(--amsterdam-grid-padding-block-md);
+.ams-grid--padding-bottom--medium {
+  padding-block-end: var(--ams-grid-padding-block-md);
 }
 
-.amsterdam-grid--padding-bottom--large {
-  padding-block-end: var(--amsterdam-grid-padding-block-lg);
+.ams-grid--padding-bottom--large {
+  padding-block-end: var(--ams-grid-padding-block-lg);
 }
 
-.amsterdam-grid--padding-top--small {
-  padding-block-start: var(--amsterdam-grid-padding-block-sm);
+.ams-grid--padding-top--small {
+  padding-block-start: var(--ams-grid-padding-block-sm);
 }
 
-.amsterdam-grid--padding-top--medium {
-  padding-block-start: var(--amsterdam-grid-padding-block-md);
+.ams-grid--padding-top--medium {
+  padding-block-start: var(--ams-grid-padding-block-md);
 }
 
-.amsterdam-grid--padding-top--large {
-  padding-block-start: var(--amsterdam-grid-padding-block-lg);
+.ams-grid--padding-top--large {
+  padding-block-start: var(--ams-grid-padding-block-lg);
 }
 
-.amsterdam-grid--padding-vertical--small {
-  padding-block: var(--amsterdam-grid-padding-block-sm);
+.ams-grid--padding-vertical--small {
+  padding-block: var(--ams-grid-padding-block-sm);
 }
 
-.amsterdam-grid--padding-vertical--medium {
-  padding-block: var(--amsterdam-grid-padding-block-md);
+.ams-grid--padding-vertical--medium {
+  padding-block: var(--ams-grid-padding-block-md);
 }
 
-.amsterdam-grid--padding-vertical--large {
-  padding-block: var(--amsterdam-grid-padding-block-lg);
+.ams-grid--padding-vertical--large {
+  padding-block: var(--ams-grid-padding-block-lg);
 }
 
-.amsterdam-grid__cell--span-all {
+.ams-grid__cell--span-all {
   grid-column: 1 / -1;
 }
 
 // The order of the following declaration blocks ensures the intended specificity.
 
 @for $i from 1 through 12 {
-  .amsterdam-grid__cell--span-#{$i} {
+  .ams-grid__cell--span-#{$i} {
     grid-column-end: span $i;
   }
 
-  .amsterdam-grid__cell--start-#{$i} {
+  .ams-grid__cell--start-#{$i} {
     grid-column-start: $i;
   }
 }
 
-@media screen and (min-width: $amsterdam-breakpoint-medium) {
+@media screen and (min-width: $ams-breakpoint-medium) {
   @for $i from 1 through 12 {
-    .amsterdam-grid__cell--span-#{$i}-medium {
+    .ams-grid__cell--span-#{$i}-medium {
       grid-column-end: span $i;
     }
 
-    .amsterdam-grid__cell--start-#{$i}-medium {
+    .ams-grid__cell--start-#{$i}-medium {
       grid-column-start: $i;
     }
   }
 }
 
-@media screen and (min-width: $amsterdam-breakpoint-wide) {
+@media screen and (min-width: $ams-breakpoint-wide) {
   @for $i from 1 through 12 {
-    .amsterdam-grid__cell--span-#{$i}-wide {
+    .ams-grid__cell--span-#{$i}-wide {
       grid-column-end: span $i;
     }
 
-    .amsterdam-grid__cell--start-#{$i}-wide {
+    .ams-grid__cell--start-#{$i}-wide {
       grid-column-start: $i;
     }
   }
diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss
index 9e4ac0d2df..13789b6702 100644
--- a/packages/css/src/components/header/header.scss
+++ b/packages/css/src/components/header/header.scss
@@ -5,56 +5,56 @@
 
 @import "../../common/breakpoint";
 
-.amsterdam-header {
+.ams-header {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  padding-block: var(--amsterdam-header-padding-block);
+  padding-block: var(--ams-header-padding-block);
   row-gap: 1.5rem;
 
-  @media screen and (min-width: $amsterdam-breakpoint-wide) {
-    column-gap: var(--amsterdam-header-column-gap);
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    column-gap: var(--ams-header-column-gap);
     flex-wrap: nowrap;
   }
 }
 
-.amsterdam-header__logo-link {
+.ams-header__logo-link {
   flex: none;
-  outline-offset: var(--amsterdam-header-logo-link-outline-offset);
+  outline-offset: var(--ams-header-logo-link-outline-offset);
 }
 
-.amsterdam-header__links {
+.ams-header__links {
   display: none;
 
-  @media screen and (min-width: $amsterdam-breakpoint-medium) {
+  @media screen and (min-width: $ams-breakpoint-medium) {
     display: block;
     flex: 10 0 auto;
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+  @media screen and (min-width: $ams-breakpoint-wide) {
     order: 3;
   }
 }
 
-.amsterdam-header__menu {
+.ams-header__menu {
   flex: 1;
-  padding-inline-start: var(--amsterdam-page-menu-column-gap); // TODO Don’t use tokens of another component
+  padding-inline-start: var(--ams-page-menu-column-gap); // TODO Don’t use tokens of another component
   text-align: end;
 
-  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+  @media screen and (min-width: $ams-breakpoint-wide) {
     order: 4;
     padding-inline-start: 0;
   }
 }
 
-.amsterdam-header__title {
+.ams-header__title {
   flex: 1 1 100%;
 
-  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+  @media screen and (min-width: $ams-breakpoint-wide) {
     min-width: 0;
     order: 2;
 
-    .amsterdam-header__title-heading {
+    .ams-header__title-heading {
       display: block;
       line-height: 1;
       overflow: hidden;
@@ -66,18 +66,18 @@
 }
 
 // Temporary, will move to megamenu (and/or iconButton)
-.amsterdam-header__menu-button {
+.ams-header__menu-button {
   background-color: transparent;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M0 3.238h32V7.81H0V3.238zm0 10.476h32v4.572H0v-4.572zM0 24.19h32v4.572H0V24.19z'/></svg>");
   background-position: center right;
   background-repeat: no-repeat;
   background-size: 19px 19px;
   border: 0;
-  color: var(--amsterdam-page-menu-item-color);
-  font-family: var(--amsterdam-page-menu-item-font-family);
-  font-size: var(--amsterdam-page-menu-item-font-size);
-  font-weight: var(--amsterdam-page-menu-item-font-weight);
-  line-height: var(--amsterdam-page-menu-item-line-height);
+  color: var(--ams-page-menu-item-color);
+  font-family: var(--ams-page-menu-item-font-family);
+  font-size: var(--ams-page-menu-item-font-size);
+  font-weight: var(--ams-page-menu-item-font-weight);
+  line-height: var(--ams-page-menu-item-line-height);
   margin-block: 0;
   padding-inline: 0 30px;
   text-align: center;
diff --git a/packages/css/src/components/heading/heading.scss b/packages/css/src/components/heading/heading.scss
index 27873a436b..7180d55e75 100644
--- a/packages/css/src/components/heading/heading.scss
+++ b/packages/css/src/components/heading/heading.scss
@@ -11,47 +11,47 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-heading {
+.ams-heading {
   break-after: avoid;
   break-inside: avoid;
-  color: var(--amsterdam-heading-color);
-  font-family: var(--amsterdam-heading-font-family);
-  font-weight: var(--amsterdam-heading-font-weight);
+  color: var(--ams-heading-color);
+  font-family: var(--ams-heading-font-family);
+  font-weight: var(--ams-heading-font-weight);
 
   @include hyphenation;
   @include reset;
 }
 
-.amsterdam-heading--1 {
-  font-size: var(--amsterdam-heading-level-1-font-size);
-  line-height: var(--amsterdam-heading-level-1-line-height);
+.ams-heading--1 {
+  font-size: var(--ams-heading-level-1-font-size);
+  line-height: var(--ams-heading-level-1-line-height);
 }
 
-.amsterdam-heading--2 {
-  font-size: var(--amsterdam-heading-level-2-font-size);
-  line-height: var(--amsterdam-heading-level-2-line-height);
+.ams-heading--2 {
+  font-size: var(--ams-heading-level-2-font-size);
+  line-height: var(--ams-heading-level-2-line-height);
 }
 
-.amsterdam-heading--3 {
-  font-size: var(--amsterdam-heading-level-3-font-size);
-  line-height: var(--amsterdam-heading-level-3-line-height);
+.ams-heading--3 {
+  font-size: var(--ams-heading-level-3-font-size);
+  line-height: var(--ams-heading-level-3-line-height);
 }
 
-.amsterdam-heading--4 {
-  font-size: var(--amsterdam-heading-level-4-font-size);
-  line-height: var(--amsterdam-heading-level-4-line-height);
+.ams-heading--4 {
+  font-size: var(--ams-heading-level-4-font-size);
+  line-height: var(--ams-heading-level-4-line-height);
 }
 
-.amsterdam-heading--5 {
-  font-size: var(--amsterdam-heading-level-5-font-size);
-  line-height: var(--amsterdam-heading-level-5-line-height);
+.ams-heading--5 {
+  font-size: var(--ams-heading-level-5-font-size);
+  line-height: var(--ams-heading-level-5-line-height);
 }
 
-.amsterdam-heading--6 {
-  font-size: var(--amsterdam-heading-level-6-font-size);
-  line-height: var(--amsterdam-heading-level-6-line-height);
+.ams-heading--6 {
+  font-size: var(--ams-heading-level-6-font-size);
+  line-height: var(--ams-heading-level-6-line-height);
 }
 
-.amsterdam-heading--inverse-color {
-  color: var(--amsterdam-heading-inverse-color);
+.ams-heading--inverse-color {
+  color: var(--ams-heading-inverse-color);
 }
diff --git a/packages/css/src/components/icon-button/icon-button.scss b/packages/css/src/components/icon-button/icon-button.scss
index 554adcfdff..7a7de250b4 100644
--- a/packages/css/src/components/icon-button/icon-button.scss
+++ b/packages/css/src/components/icon-button/icon-button.scss
@@ -9,52 +9,52 @@
   padding-inline: 0;
 }
 
-.amsterdam-icon-button {
+.ams-icon-button {
   background-color: transparent;
-  color: var(--amsterdam-icon-button-color);
+  color: var(--ams-icon-button-color);
   cursor: pointer;
-  outline-offset: var(--amsterdam-icon-button-outline-offset);
+  outline-offset: var(--ams-icon-button-outline-offset);
   touch-action: manipulation;
 
   &:hover {
-    background-color: var(--amsterdam-icon-button-hover-background-color);
-    color: var(--amsterdam-icon-button-hover-color);
+    background-color: var(--ams-icon-button-hover-background-color);
+    color: var(--ams-icon-button-hover-color);
   }
 
   &:disabled {
     background-color: transparent;
-    color: var(--amsterdam-icon-button-disabled-color);
+    color: var(--ams-icon-button-disabled-color);
     cursor: not-allowed;
   }
 
   @include reset;
 }
 
-.amsterdam-icon-button--on-background-light {
-  color: var(--amsterdam-icon-button-on-background-light-color);
+.ams-icon-button--on-background-light {
+  color: var(--ams-icon-button-on-background-light-color);
 
   &:hover {
-    background-color: var(--amsterdam-icon-button-on-background-light-hover-background-color);
-    color: var(--amsterdam-icon-button-on-background-light-hover-color);
+    background-color: var(--ams-icon-button-on-background-light-hover-background-color);
+    color: var(--ams-icon-button-on-background-light-hover-color);
   }
 
   &:disabled {
     background-color: transparent;
-    color: var(--amsterdam-icon-button-on-background-light-disabled-color);
+    color: var(--ams-icon-button-on-background-light-disabled-color);
   }
 }
 
-.amsterdam-icon-button--on-background-dark {
-  background-color: var(--amsterdam-icon-button-on-background-dark-background-color);
-  color: var(--amsterdam-icon-button-on-background-dark-color);
+.ams-icon-button--on-background-dark {
+  background-color: var(--ams-icon-button-on-background-dark-background-color);
+  color: var(--ams-icon-button-on-background-dark-color);
 
   &:hover {
-    background-color: var(--amsterdam-icon-button-on-background-dark-hover-background-color);
-    color: var(--amsterdam-icon-button-on-background-dark-hover-color);
+    background-color: var(--ams-icon-button-on-background-dark-hover-background-color);
+    color: var(--ams-icon-button-on-background-dark-hover-color);
   }
 
   &:disabled {
-    background-color: var(--amsterdam-icon-button-on-background-dark-disabled-background-color);
-    color: var(--amsterdam-icon-button-on-background-dark-disabled-color);
+    background-color: var(--ams-icon-button-on-background-dark-disabled-background-color);
+    color: var(--ams-icon-button-on-background-dark-disabled-color);
   }
 }
diff --git a/packages/css/src/components/icon/icon.scss b/packages/css/src/components/icon/icon.scss
index 0d50d2da4d..5b963992ae 100644
--- a/packages/css/src/components/icon/icon.scss
+++ b/packages/css/src/components/icon/icon.scss
@@ -3,52 +3,52 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-icon {
+.ams-icon {
   align-items: center;
   display: inline-flex;
 }
 
-.amsterdam-icon svg {
+.ams-icon svg {
   fill: currentColor;
 }
 
-.amsterdam-icon--square {
+.ams-icon--square {
   aspect-ratio: 1 / 1;
   justify-content: center;
 }
 
-.amsterdam-icon--size-3 {
-  height: calc(var(--amsterdam-icon-size-3-font-size) * var(--amsterdam-icon-size-3-line-height));
+.ams-icon--size-3 {
+  height: calc(var(--ams-icon-size-3-font-size) * var(--ams-icon-size-3-line-height));
 }
 
-.amsterdam-icon--size-3 svg {
-  height: var(--amsterdam-icon-size-3-font-size);
-  width: var(--amsterdam-icon-size-3-font-size);
+.ams-icon--size-3 svg {
+  height: var(--ams-icon-size-3-font-size);
+  width: var(--ams-icon-size-3-font-size);
 }
 
-.amsterdam-icon--size-4 {
-  height: calc(var(--amsterdam-icon-size-4-font-size) * var(--amsterdam-icon-size-4-line-height));
+.ams-icon--size-4 {
+  height: calc(var(--ams-icon-size-4-font-size) * var(--ams-icon-size-4-line-height));
 }
 
-.amsterdam-icon--size-4 svg {
-  height: var(--amsterdam-icon-size-4-font-size);
-  width: var(--amsterdam-icon-size-4-font-size);
+.ams-icon--size-4 svg {
+  height: var(--ams-icon-size-4-font-size);
+  width: var(--ams-icon-size-4-font-size);
 }
 
-.amsterdam-icon--size-5 {
-  height: calc(var(--amsterdam-icon-size-5-font-size) * var(--amsterdam-icon-size-5-line-height));
+.ams-icon--size-5 {
+  height: calc(var(--ams-icon-size-5-font-size) * var(--ams-icon-size-5-line-height));
 }
 
-.amsterdam-icon--size-5 svg {
-  height: var(--amsterdam-icon-size-5-font-size);
-  width: var(--amsterdam-icon-size-5-font-size);
+.ams-icon--size-5 svg {
+  height: var(--ams-icon-size-5-font-size);
+  width: var(--ams-icon-size-5-font-size);
 }
 
-.amsterdam-icon--size-6 {
-  height: calc(var(--amsterdam-icon-size-6-font-size) * var(--amsterdam-icon-size-6-line-height));
+.ams-icon--size-6 {
+  height: calc(var(--ams-icon-size-6-font-size) * var(--ams-icon-size-6-line-height));
 }
 
-.amsterdam-icon--size-6 svg {
-  height: var(--amsterdam-icon-size-6-font-size);
-  width: var(--amsterdam-icon-size-6-font-size);
+.ams-icon--size-6 svg {
+  height: var(--ams-icon-size-6-font-size);
+  width: var(--ams-icon-size-6-font-size);
 }
diff --git a/packages/css/src/components/image/image.scss b/packages/css/src/components/image/image.scss
index afa982e279..9851e30279 100644
--- a/packages/css/src/components/image/image.scss
+++ b/packages/css/src/components/image/image.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-image {
+.ams-image {
   font-style: italic; /* [3] */
   height: auto; /* [1] */
   max-width: 100%; /* [1] */
diff --git a/packages/css/src/components/link-list/link-list.scss b/packages/css/src/components/link-list/link-list.scss
index 746406d46e..f1c6f42988 100644
--- a/packages/css/src/components/link-list/link-list.scss
+++ b/packages/css/src/components/link-list/link-list.scss
@@ -13,57 +13,57 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-link-list {
+.ams-link-list {
   @include reset-list;
 
   display: grid;
-  gap: var(--amsterdam-link-list-gap);
+  gap: var(--ams-link-list-gap);
 }
 
-.amsterdam-link-list__link {
+.ams-link-list__link {
   align-items: flex-start;
-  color: var(--amsterdam-link-list-link-color);
+  color: var(--ams-link-list-link-color);
   display: inline-flex;
-  font-family: var(--amsterdam-link-list-link-font-family);
-  font-size: var(--amsterdam-link-list-link-medium-font-size);
-  font-weight: var(--amsterdam-link-list-link-font-weight);
-  gap: var(--amsterdam-link-list-link-gap);
-  line-height: var(--amsterdam-link-list-link-medium-line-height);
-  outline-offset: var(--amsterdam-link-list-link-outline-offset);
-  text-decoration-line: var(--amsterdam-link-list-link-text-decoration-line);
-  text-decoration-thickness: var(--amsterdam-link-list-link-text-decoration-thickness);
-  text-underline-offset: var(--amsterdam-link-list-link-text-underline-offset);
+  font-family: var(--ams-link-list-link-font-family);
+  font-size: var(--ams-link-list-link-medium-font-size);
+  font-weight: var(--ams-link-list-link-font-weight);
+  gap: var(--ams-link-list-link-gap);
+  line-height: var(--ams-link-list-link-medium-line-height);
+  outline-offset: var(--ams-link-list-link-outline-offset);
+  text-decoration-line: var(--ams-link-list-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-link-list-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-link-list-link-text-underline-offset);
 
   &:hover {
-    color: var(--amsterdam-link-list-link-hover-color);
-    text-decoration-line: var(--amsterdam-link-list-link-hover-text-decoration-line);
+    color: var(--ams-link-list-link-hover-color);
+    text-decoration-line: var(--ams-link-list-link-hover-text-decoration-line);
   }
 }
 
-.amsterdam-link-list__link--small {
-  font-size: var(--amsterdam-link-list-link-small-font-size);
-  line-height: var(--amsterdam-link-list-link-small-line-height);
+.ams-link-list__link--small {
+  font-size: var(--ams-link-list-link-small-font-size);
+  line-height: var(--ams-link-list-link-small-line-height);
 }
 
-.amsterdam-link-list__link--large {
-  font-size: var(--amsterdam-link-list-link-large-font-size);
-  line-height: var(--amsterdam-link-list-link-large-line-height);
+.ams-link-list__link--large {
+  font-size: var(--ams-link-list-link-large-font-size);
+  line-height: var(--ams-link-list-link-large-line-height);
 
   @include hyphenation;
 }
 
-.amsterdam-link-list__link--on-background-dark {
-  color: var(--amsterdam-link-list-link-on-background-dark-color);
+.ams-link-list__link--on-background-dark {
+  color: var(--ams-link-list-link-on-background-dark-color);
 
   &:hover {
-    color: var(--amsterdam-link-list-link-on-background-dark-hover-color);
+    color: var(--ams-link-list-link-on-background-dark-hover-color);
   }
 }
 
-.amsterdam-link-list__link--on-background-light {
-  color: var(--amsterdam-link-list-link-on-background-light-color);
+.ams-link-list__link--on-background-light {
+  color: var(--ams-link-list-link-on-background-light-color);
 
   &:hover {
-    color: var(--amsterdam-link-list-link-on-background-light-hover-color);
+    color: var(--ams-link-list-link-on-background-light-hover-color);
   }
 }
diff --git a/packages/css/src/components/link/link.scss b/packages/css/src/components/link/link.scss
index c01e7d1b4c..3fb8ff2e62 100644
--- a/packages/css/src/components/link/link.scss
+++ b/packages/css/src/components/link/link.scss
@@ -7,71 +7,71 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-link {
-  color: var(--amsterdam-link-color);
-  font-family: var(--amsterdam-link-font-family);
-  font-weight: var(--amsterdam-link-font-weight);
-  outline-offset: var(--amsterdam-link-outline-offset);
+.ams-link {
+  color: var(--ams-link-color);
+  font-family: var(--ams-link-font-family);
+  font-weight: var(--ams-link-font-weight);
+  outline-offset: var(--ams-link-outline-offset);
 
   &:hover {
-    color: var(--amsterdam-link-hover-color);
+    color: var(--ams-link-hover-color);
   }
 
   @include reset;
 }
 
-.amsterdam-link--standalone {
+.ams-link--standalone {
   display: inline-block;
-  font-size: var(--amsterdam-link-standalone-font-size);
-  line-height: var(--amsterdam-link-standalone-line-height);
-  text-decoration-line: var(--amsterdam-link-standalone-text-decoration-line);
-  text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness);
-  text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset);
+  font-size: var(--ams-link-standalone-font-size);
+  line-height: var(--ams-link-standalone-line-height);
+  text-decoration-line: var(--ams-link-standalone-text-decoration-line);
+  text-decoration-thickness: var(--ams-link-standalone-text-decoration-thickness);
+  text-underline-offset: var(--ams-link-standalone-text-underline-offset);
 
   &:hover {
-    text-decoration-thickness: var(--amsterdam-link-standalone-hover-text-decoration-thickness);
-    text-underline-offset: var(--amsterdam-link-standalone-hover-text-underline-offset);
+    text-decoration-thickness: var(--ams-link-standalone-hover-text-decoration-thickness);
+    text-underline-offset: var(--ams-link-standalone-hover-text-underline-offset);
   }
 }
 
-.amsterdam-link--inline {
-  font-family: var(--amsterdam-link-inline-font-family);
-  font-size: var(--amsterdam-link-inline-font-size);
-  line-height: var(--amsterdam-link-inline-line-height);
-  text-decoration-line: var(--amsterdam-link-inline-text-decoration-line);
-  text-decoration-thickness: var(--amsterdam-link-inline-text-decoration-thickness);
-  text-underline-offset: var(--amsterdam-link-inline-text-underline-offset);
+.ams-link--inline {
+  font-family: var(--ams-link-inline-font-family);
+  font-size: var(--ams-link-inline-font-size);
+  line-height: var(--ams-link-inline-line-height);
+  text-decoration-line: var(--ams-link-inline-text-decoration-line);
+  text-decoration-thickness: var(--ams-link-inline-text-decoration-thickness);
+  text-underline-offset: var(--ams-link-inline-text-underline-offset);
 
   &:hover {
-    text-decoration-thickness: var(--amsterdam-link-inline-hover-text-decoration-thickness);
-    text-underline-offset: var(--amsterdam-link-inline-hover-text-underline-offset);
+    text-decoration-thickness: var(--ams-link-inline-hover-text-decoration-thickness);
+    text-underline-offset: var(--ams-link-inline-hover-text-underline-offset);
   }
 
   &:visited {
-    color: var(--amsterdam-link-inline-visited-color);
+    color: var(--ams-link-inline-visited-color);
   }
 }
 
-.amsterdam-link--on-background-dark {
-  color: var(--amsterdam-link-on-background-dark-color);
+.ams-link--on-background-dark {
+  color: var(--ams-link-on-background-dark-color);
 
   &:hover {
-    color: var(--amsterdam-link-on-background-dark-hover-color);
+    color: var(--ams-link-on-background-dark-hover-color);
   }
 
   &:visited {
-    color: var(--amsterdam-link-on-background-dark-visited-color);
+    color: var(--ams-link-on-background-dark-visited-color);
   }
 }
 
-.amsterdam-link--on-background-light {
-  color: var(--amsterdam-link-on-background-light-color);
+.ams-link--on-background-light {
+  color: var(--ams-link-on-background-light-color);
 
   &:hover {
-    color: var(--amsterdam-link-on-background-light-hover-color);
+    color: var(--ams-link-on-background-light-hover-color);
   }
 
   &:visited {
-    color: var(--amsterdam-link-on-background-light-visited-color);
+    color: var(--ams-link-on-background-light-visited-color);
   }
 }
diff --git a/packages/css/src/components/logo/logo.scss b/packages/css/src/components/logo/logo.scss
index d6cb8ee02e..7388462302 100644
--- a/packages/css/src/components/logo/logo.scss
+++ b/packages/css/src/components/logo/logo.scss
@@ -3,19 +3,19 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-logo {
+.ams-logo {
   display: block;
-  height: var(--amsterdam-logo-height);
+  height: var(--ams-logo-height);
 }
 
-.amsterdam-logo__emblem {
-  fill: var(--amsterdam-logo-emblem-color);
+.ams-logo__emblem {
+  fill: var(--ams-logo-emblem-color);
 }
 
-.amsterdam-logo__text-primary {
-  fill: var(--amsterdam-logo-title-color);
+.ams-logo__text-primary {
+  fill: var(--ams-logo-title-color);
 }
 
-.amsterdam-logo__text-secondary {
-  fill: var(--amsterdam-logo-subsite-color);
+.ams-logo__text-secondary {
+  fill: var(--ams-logo-subsite-color);
 }
diff --git a/packages/css/src/components/margin/margin.scss b/packages/css/src/components/margin/margin.scss
index 3a51a66542..2ba5b5c1b1 100644
--- a/packages/css/src/components/margin/margin.scss
+++ b/packages/css/src/components/margin/margin.scss
@@ -5,8 +5,8 @@
 
 @import "../../common/size";
 
-@each $size in map-keys($amsterdam-sizes) {
-  .amsterdam-mb--#{$size} {
-    margin-block-end: var(--amsterdam-margin-#{$size}) !important;
+@each $size in map-keys($ams-sizes) {
+  .ams-mb--#{$size} {
+    margin-block-end: var(--ams-margin-#{$size}) !important;
   }
 }
diff --git a/packages/css/src/components/mark/mark.scss b/packages/css/src/components/mark/mark.scss
index fc58cd172c..08ad8cf6ef 100644
--- a/packages/css/src/components/mark/mark.scss
+++ b/packages/css/src/components/mark/mark.scss
@@ -3,6 +3,6 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-mark {
-  background-color: var(--amsterdam-mark-background-color);
+.ams-mark {
+  background-color: var(--ams-mark-background-color);
 }
diff --git a/packages/css/src/components/mega-menu/mega-menu.scss b/packages/css/src/components/mega-menu/mega-menu.scss
index 2a3ca221fc..4c248b27f2 100644
--- a/packages/css/src/components/mega-menu/mega-menu.scss
+++ b/packages/css/src/components/mega-menu/mega-menu.scss
@@ -3,14 +3,14 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-mega-menu__list-category {
-  column-gap: var(--amsterdam-mega-menu-list-category-column-gap);
-  column-width: var(--amsterdam-mega-menu-list-category-column-width);
+.ams-mega-menu__list-category {
+  column-gap: var(--ams-mega-menu-list-category-column-gap);
+  column-width: var(--ams-mega-menu-list-category-column-width);
 
   // TODO Move to bottom margin of heading
-  padding-block-start: var(--amsterdam-mega-menu-list-category-padding-block-start);
+  padding-block-start: var(--ams-mega-menu-list-category-padding-block-start);
 
   &:not(:last-child) {
-    padding-block-end: var(--amsterdam-mega-menu-list-category-padding-block-end);
+    padding-block-end: var(--ams-mega-menu-list-category-padding-block-end);
   }
 }
diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss
index ce839b6a34..63f5760ad2 100644
--- a/packages/css/src/components/ordered-list/ordered-list.scss
+++ b/packages/css/src/components/ordered-list/ordered-list.scss
@@ -13,39 +13,39 @@
 }
 
 /** A list is a grid column with a gap between items. */
-.amsterdam-ordered-list {
+.ams-ordered-list {
   @include reset;
 
   display: grid;
-  gap: var(--amsterdam-ordered-list-gap);
+  gap: var(--ams-ordered-list-gap);
 }
 
 /** A list with markers sets typography for its text content. */
-.amsterdam-ordered-list:not(.amsterdam-ordered-list--no-markers) {
-  color: var(--amsterdam-ordered-list-color);
-  font-family: var(--amsterdam-ordered-list-font-family);
-  font-size: var(--amsterdam-ordered-list-font-size);
-  font-weight: var(--amsterdam-ordered-list-font-weight);
-  line-height: var(--amsterdam-ordered-list-line-height);
-  list-style-type: var(--amsterdam-ordered-list-list-style-type);
+.ams-ordered-list:not(.ams-ordered-list--no-markers) {
+  color: var(--ams-ordered-list-color);
+  font-family: var(--ams-ordered-list-font-family);
+  font-size: var(--ams-ordered-list-font-size);
+  font-weight: var(--ams-ordered-list-font-weight);
+  line-height: var(--ams-ordered-list-line-height);
+  list-style-type: var(--ams-ordered-list-list-style-type);
 
   /** List items are responsible for indentation and marker positioning. */
-  .amsterdam-ordered-list__item {
-    margin-inline-start: var(--amsterdam-ordered-list-item-margin-inline-start);
-    padding-inline-start: var(--amsterdam-ordered-list-item-padding-inline-start);
+  .ams-ordered-list__item {
+    margin-inline-start: var(--ams-ordered-list-item-margin-inline-start);
+    padding-inline-start: var(--ams-ordered-list-item-padding-inline-start);
   }
 }
 
-.amsterdam-ordered-list--inverse-color:not(.amsterdam-ordered-list--no-markers) {
-  color: var(--amsterdam-ordered-list-inverse-color);
+.ams-ordered-list--inverse-color:not(.ams-ordered-list--no-markers) {
+  color: var(--ams-ordered-list-inverse-color);
 }
 
 /** A nested list has a different marker and less indentation for correct alignment. */
-:is(.amsterdam-ordered-list, .amsterdam-unordered-list) .amsterdam-ordered-list {
-  list-style-type: var(--amsterdam-ordered-list-ordered-list-list-style-type);
+:is(.ams-ordered-list, .ams-unordered-list) .ams-ordered-list {
+  list-style-type: var(--ams-ordered-list-ordered-list-list-style-type);
 
-  .amsterdam-ordered-list__item {
-    margin-inline-start: var(--amsterdam-ordered-list-ordered-list-item-margin-inline-start);
-    padding-inline-start: var(--amsterdam-ordered-list-ordered-list-item-padding-inline-start);
+  .ams-ordered-list__item {
+    margin-inline-start: var(--ams-ordered-list-ordered-list-item-margin-inline-start);
+    padding-inline-start: var(--ams-ordered-list-ordered-list-item-padding-inline-start);
   }
 }
diff --git a/packages/css/src/components/overlap/overlap.scss b/packages/css/src/components/overlap/overlap.scss
index f0395961cf..771dc7414e 100644
--- a/packages/css/src/components/overlap/overlap.scss
+++ b/packages/css/src/components/overlap/overlap.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-overlap {
+.ams-overlap {
   display: grid;
 
   > * {
diff --git a/packages/css/src/components/page-heading/page-heading.scss b/packages/css/src/components/page-heading/page-heading.scss
index 0b9fac778b..2f0454205f 100644
--- a/packages/css/src/components/page-heading/page-heading.scss
+++ b/packages/css/src/components/page-heading/page-heading.scss
@@ -11,19 +11,19 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-page-heading {
+.ams-page-heading {
   break-after: avoid;
   break-inside: avoid;
-  color: var(--amsterdam-page-heading-color);
-  font-family: var(--amsterdam-page-heading-font-family);
-  font-size: var(--amsterdam-page-heading-font-size);
-  font-weight: var(--amsterdam-page-heading-font-weight);
-  line-height: var(--amsterdam-page-heading-line-height);
+  color: var(--ams-page-heading-color);
+  font-family: var(--ams-page-heading-font-family);
+  font-size: var(--ams-page-heading-font-size);
+  font-weight: var(--ams-page-heading-font-weight);
+  line-height: var(--ams-page-heading-line-height);
 
   @include hyphenation;
   @include reset;
 }
 
-.amsterdam-page-heading--inverse-color {
-  color: var(--amsterdam-page-heading-inverse-color);
+.ams-page-heading--inverse-color {
+  color: var(--ams-page-heading-inverse-color);
 }
diff --git a/packages/css/src/components/page-menu/page-menu.scss b/packages/css/src/components/page-menu/page-menu.scss
index fde81a50a2..b6156dff68 100644
--- a/packages/css/src/components/page-menu/page-menu.scss
+++ b/packages/css/src/components/page-menu/page-menu.scss
@@ -14,50 +14,50 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-page-menu {
+.ams-page-menu {
   align-items: center;
-  column-gap: var(--amsterdam-page-menu-column-gap);
+  column-gap: var(--ams-page-menu-column-gap);
   display: flex;
   flex-direction: row;
   list-style: none;
-  row-gap: var(--amsterdam-page-menu-row-gap);
+  row-gap: var(--ams-page-menu-row-gap);
 
   @include reset-list;
 }
 
-.amsterdam-page-menu--align-end {
+.ams-page-menu--align-end {
   justify-content: end;
 }
 
 @mixin page-menu-item {
-  color: var(--amsterdam-page-menu-item-color);
+  color: var(--ams-page-menu-item-color);
   display: inline-flex;
   flex-direction: row;
-  font-family: var(--amsterdam-page-menu-item-font-family);
-  font-size: var(--amsterdam-page-menu-item-font-size);
-  font-weight: var(--amsterdam-page-menu-item-font-weight);
-  gap: var(--amsterdam-page-menu-item-gap);
-  line-height: var(--amsterdam-page-menu-item-line-height);
-  outline-offset: var(--amsterdam-page-menu-item-outline-offset);
+  font-family: var(--ams-page-menu-item-font-family);
+  font-size: var(--ams-page-menu-item-font-size);
+  font-weight: var(--ams-page-menu-item-font-weight);
+  gap: var(--ams-page-menu-item-gap);
+  line-height: var(--ams-page-menu-item-line-height);
+  outline-offset: var(--ams-page-menu-item-outline-offset);
   text-align: center;
-  text-decoration-line: var(--amsterdam-page-menu-item-text-decoration-line);
-  text-decoration-thickness: var(--amsterdam-page-menu-item-text-decoration-thickness);
-  text-underline-offset: var(--amsterdam-page-menu-item-text-underline-offset);
+  text-decoration-line: var(--ams-page-menu-item-text-decoration-line);
+  text-decoration-thickness: var(--ams-page-menu-item-text-decoration-thickness);
+  text-underline-offset: var(--ams-page-menu-item-text-underline-offset);
   touch-action: manipulation;
   white-space: nowrap;
 }
 
-.amsterdam-page-menu__link {
+.ams-page-menu__link {
   @include page-menu-item;
   @include reset-item;
 }
 
-.amsterdam-page-menu__link:hover,
-.amsterdam-page-menu__button:hover {
-  color: var(--amsterdam-page-menu-item-hover-color);
-  text-decoration-line: var(--amsterdam-page-menu-item-hover-text-decoration-line);
+.ams-page-menu__link:hover,
+.ams-page-menu__button:hover {
+  color: var(--ams-page-menu-item-hover-color);
+  text-decoration-line: var(--ams-page-menu-item-hover-text-decoration-line);
 }
 
-.amsterdam-page-menu__link svg {
+.ams-page-menu__link svg {
   color: currentColor;
 }
diff --git a/packages/css/src/components/pagination/pagination.scss b/packages/css/src/components/pagination/pagination.scss
index 9a6f97f9b5..7e2276a021 100644
--- a/packages/css/src/components/pagination/pagination.scss
+++ b/packages/css/src/components/pagination/pagination.scss
@@ -9,15 +9,15 @@
   padding-inline-start: 0;
 }
 
-.amsterdam-pagination__list {
-  color: var(--amsterdam-pagination-color);
+.ams-pagination__list {
+  color: var(--ams-pagination-color);
   display: flex;
   flex-wrap: wrap;
-  font-family: var(--amsterdam-pagination-font-family);
-  font-size: var(--amsterdam-pagination-font-size);
-  font-weight: var(--amsterdam-pagination-font-weight);
+  font-family: var(--ams-pagination-font-family);
+  font-size: var(--ams-pagination-font-size);
+  font-weight: var(--ams-pagination-font-weight);
   justify-content: center;
-  line-height: var(--amsterdam-pagination-line-height);
+  line-height: var(--ams-pagination-line-height);
 
   @include list-reset;
 }
@@ -29,7 +29,7 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-pagination__button {
+.ams-pagination__button {
   /* The reset is included at the top of the block here, if you set it
   at the bottom `all: unset` overrides the `gap` property. */
   @include button-reset;
@@ -37,16 +37,16 @@
   cursor: pointer;
   display: flex;
   gap: 0.5rem;
-  outline-offset: var(--amsterdam-pagination-button-outline-offset);
-  padding-inline: var(--amsterdam-pagination-button-padding-inline);
-  text-decoration-line: var(--amsterdam-pagination-button-text-decoration-line);
-  text-decoration-thickness: var(--amsterdam-pagination-button-text-decoration-thickness);
-  text-underline-offset: var(--amsterdam-pagination-button-text-underline-offset);
+  outline-offset: var(--ams-pagination-button-outline-offset);
+  padding-inline: var(--ams-pagination-button-padding-inline);
+  text-decoration-line: var(--ams-pagination-button-text-decoration-line);
+  text-decoration-thickness: var(--ams-pagination-button-text-decoration-thickness);
+  text-underline-offset: var(--ams-pagination-button-text-underline-offset);
   touch-action: manipulation;
 
   &:hover {
-    color: var(--amsterdam-pagination-button-hover-color);
-    text-decoration-line: var(--amsterdam-pagination-button-hover-text-decoration-line);
+    color: var(--ams-pagination-button-hover-color);
+    text-decoration-line: var(--ams-pagination-button-hover-text-decoration-line);
   }
 
   &:disabled {
@@ -54,15 +54,15 @@
   }
 
   // Override for icon size
-  span.amsterdam-icon svg {
+  span.ams-icon svg {
     height: 1rem;
     width: 1rem;
   }
 }
 
-.amsterdam-pagination__button--current {
+.ams-pagination__button--current {
   cursor: default;
-  font-weight: var(--amsterdam-pagination-button-current-font-weight);
+  font-weight: var(--ams-pagination-button-current-font-weight);
 
   &:hover {
     text-decoration: none;
diff --git a/packages/css/src/components/paragraph/paragraph.scss b/packages/css/src/components/paragraph/paragraph.scss
index 69b6c007ba..d5027d75c6 100644
--- a/packages/css/src/components/paragraph/paragraph.scss
+++ b/packages/css/src/components/paragraph/paragraph.scss
@@ -9,26 +9,26 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-paragraph {
-  color: var(--amsterdam-paragraph-color);
-  font-family: var(--amsterdam-paragraph-font-family);
-  font-size: var(--amsterdam-paragraph-medium-font-size);
-  font-weight: var(--amsterdam-paragraph-font-weight);
-  line-height: var(--amsterdam-paragraph-medium-line-height);
+.ams-paragraph {
+  color: var(--ams-paragraph-color);
+  font-family: var(--ams-paragraph-font-family);
+  font-size: var(--ams-paragraph-medium-font-size);
+  font-weight: var(--ams-paragraph-font-weight);
+  line-height: var(--ams-paragraph-medium-line-height);
 
   @include reset;
 }
 
-.amsterdam-paragraph--small {
-  font-size: var(--amsterdam-paragraph-small-font-size);
-  line-height: var(--amsterdam-paragraph-small-line-height);
+.ams-paragraph--small {
+  font-size: var(--ams-paragraph-small-font-size);
+  line-height: var(--ams-paragraph-small-line-height);
 }
 
-.amsterdam-paragraph--large {
-  font-size: var(--amsterdam-paragraph-large-font-size);
-  line-height: var(--amsterdam-paragraph-large-line-height);
+.ams-paragraph--large {
+  font-size: var(--ams-paragraph-large-font-size);
+  line-height: var(--ams-paragraph-large-line-height);
 }
 
-.amsterdam-paragraph--inverse-color {
-  color: var(--amsterdam-paragraph-inverse-color);
+.ams-paragraph--inverse-color {
+  color: var(--ams-paragraph-inverse-color);
 }
diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss
index ce6602d5cc..3a3a293c19 100644
--- a/packages/css/src/components/radio/radio.scss
+++ b/packages/css/src/components/radio/radio.scss
@@ -6,23 +6,23 @@
 @import "../../common/input-label-focus";
 @import "../../common/hide-input";
 
-.amsterdam-radio__input {
+.ams-radio__input {
   @include hide-input;
   @include input-label-focus;
 }
 
-.amsterdam-radio__circle {
+.ams-radio__circle {
   align-items: center;
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--amsterdam-radio-font-size) * var(--amsterdam-radio-line-height));
+  height: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
   width: 1.5rem;
 
   &::after {
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
-    border-color: var(--amsterdam-radio-circle-border-color);
+    border-color: var(--ams-radio-circle-border-color);
     border-radius: 100%;
     border-style: solid;
     border-width: 0.125rem;
@@ -37,25 +37,25 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-radio__label {
-  color: var(--amsterdam-radio-color);
+.ams-radio__label {
+  color: var(--ams-radio-color);
   cursor: pointer;
   display: inline-flex;
-  font-family: var(--amsterdam-radio-font-family);
-  font-size: var(--amsterdam-radio-font-size);
-  font-weight: var(--amsterdam-radio-font-weight);
+  font-family: var(--ams-radio-font-family);
+  font-size: var(--ams-radio-font-size);
+  font-weight: var(--ams-radio-font-weight);
   gap: 0.5rem;
-  line-height: var(--amsterdam-radio-line-height);
-  outline-offset: var(--amsterdam-radio-outline-offset);
+  line-height: var(--ams-radio-line-height);
+  outline-offset: var(--ams-radio-outline-offset);
 
   &:hover {
-    color: var(--amsterdam-radio-hover-color);
+    color: var(--ams-radio-hover-color);
     text-decoration-line: underline;
     text-decoration-thickness: 0.125rem;
     text-underline-offset: 0.375rem;
 
-    .amsterdam-radio__circle::after {
-      border-color: var(--amsterdam-radio-circle-hover-border-color);
+    .ams-radio__circle::after {
+      border-color: var(--ams-radio-circle-hover-border-color);
     }
   }
 
@@ -63,95 +63,95 @@
 }
 
 // Default checked
-.amsterdam-radio__input:checked {
-  + .amsterdam-radio__label .amsterdam-radio__circle::after {
-    background-image: var(--amsterdam-radio-circle-checked-background-image);
+.ams-radio__input:checked {
+  + .ams-radio__label .ams-radio__circle::after {
+    background-image: var(--ams-radio-circle-checked-background-image);
   }
 }
 
 // Invalid unchecked
-.amsterdam-radio__input[aria-invalid="true"] {
-  + .amsterdam-radio__label .amsterdam-radio__circle::after {
-    border-color: var(--amsterdam-radio-circle-invalid-border-color);
+.ams-radio__input[aria-invalid="true"] {
+  + .ams-radio__label .ams-radio__circle::after {
+    border-color: var(--ams-radio-circle-invalid-border-color);
   }
 }
 
 // Disabled unchecked
-.amsterdam-radio__input:disabled {
-  + .amsterdam-radio__label {
-    color: var(--amsterdam-radio-disabled-color);
+.ams-radio__input:disabled {
+  + .ams-radio__label {
+    color: var(--ams-radio-disabled-color);
     cursor: not-allowed;
 
-    .amsterdam-radio__circle::after {
-      border-color: var(--amsterdam-radio-circle-disabled-border-color);
+    .ams-radio__circle::after {
+      border-color: var(--ams-radio-circle-disabled-border-color);
       border-width: 0.125rem;
     }
   }
 }
 
 // Invalid checked
-.amsterdam-radio__input[aria-invalid="true"]:checked {
-  + .amsterdam-radio__label .amsterdam-radio__circle::after {
-    background-image: var(--amsterdam-radio-circle-invalid-checked-background-image);
+.ams-radio__input[aria-invalid="true"]:checked {
+  + .ams-radio__label .ams-radio__circle::after {
+    background-image: var(--ams-radio-circle-invalid-checked-background-image);
   }
 }
 
 // Disabled label
-.amsterdam-radio__input:disabled + .amsterdam-radio__label:hover {
+.ams-radio__input:disabled + .ams-radio__label:hover {
   text-decoration: none;
 }
 
 // Disabled checked
-.amsterdam-radio__input:disabled:checked {
-  + .amsterdam-radio__label .amsterdam-radio__circle::after {
-    background-image: var(--amsterdam-radio-circle-disabled-checked-background-image);
+.ams-radio__input:disabled:checked {
+  + .ams-radio__label .ams-radio__circle::after {
+    background-image: var(--ams-radio-circle-disabled-checked-background-image);
   }
 }
 
 // Disabled invalid unchecked
-.amsterdam-radio__input[aria-invalid="true"]:disabled {
-  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+.ams-radio__input[aria-invalid="true"]:disabled {
+  + .ams-radio__label .ams-radio__circle::after {
     // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-    border-color: var(--amsterdam-radio-circle-disabled-border-color);
+    border-color: var(--ams-radio-circle-disabled-border-color);
   }
 }
 
 // HOVER STATES
 
 // Invalid unchecked hover
-.amsterdam-radio__input[aria-invalid="true"] + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+.ams-radio__input[aria-invalid="true"] + .ams-radio__label:hover .ams-radio__circle::after {
   // TODO: this should be the (currently non-existent) dark red hover color
-  border-color: var(--amsterdam-radio-circle-invalid-hover-border-color);
+  border-color: var(--ams-radio-circle-invalid-hover-border-color);
 }
 
 // Default checked hover
-.amsterdam-radio__input:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
-  background-image: var(--amsterdam-radio-circle-checked-hover-background-image);
+.ams-radio__input:checked + .ams-radio__label:hover .ams-radio__circle::after {
+  background-image: var(--ams-radio-circle-checked-hover-background-image);
 }
 
 // Invalid checked hover
-.amsterdam-radio__input[aria-invalid="true"]:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+.ams-radio__input[aria-invalid="true"]:checked + .ams-radio__label:hover .ams-radio__circle::after {
   // TODO: this should be the (currently non-existent) dark red hover color
-  background-image: var(--amsterdam-radio-circle-invalid-checked-hover-background-image);
+  background-image: var(--ams-radio-circle-invalid-checked-hover-background-image);
 }
 
 // Disabled checked hover
-.amsterdam-radio__input:disabled:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
-  background-image: var(--amsterdam-radio-circle-disabled-checked-hover-background-image);
+.ams-radio__input:disabled:checked + .ams-radio__label:hover .ams-radio__circle::after {
+  background-image: var(--ams-radio-circle-disabled-checked-hover-background-image);
 }
 
 // Disabled invalid unchecked hover
-.amsterdam-radio__input[aria-invalid="true"]:disabled + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+.ams-radio__input[aria-invalid="true"]:disabled + .ams-radio__label:hover .ams-radio__circle::after {
   // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-  border-color: var(--amsterdam-radio-circle-disabled-border-color);
+  border-color: var(--ams-radio-circle-disabled-border-color);
 }
 
 // DISABLED INVALID STATES
 
 // Disabled invalid checked
-.amsterdam-radio__input[aria-invalid="true"]:disabled:checked {
-  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+.ams-radio__input[aria-invalid="true"]:disabled:checked {
+  + .ams-radio__label .ams-radio__circle::after {
     // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-    background-image: var(--amsterdam-radio-circle-disabled-checked-background-image);
+    background-image: var(--ams-radio-circle-disabled-checked-background-image);
   }
 }
diff --git a/packages/css/src/components/row/row.scss b/packages/css/src/components/row/row.scss
index 088f312fa7..1f328695e2 100644
--- a/packages/css/src/components/row/row.scss
+++ b/packages/css/src/components/row/row.scss
@@ -5,13 +5,13 @@
 
 @import "../../common/size";
 
-.amsterdam-row {
+.ams-row {
   display: flex;
   flex-direction: row;
 }
 
-@each $size, $label in $amsterdam-sizes {
-  .amsterdam-row--#{$label} {
-    gap: var(--amsterdam-row-gap-#{$size});
+@each $size, $label in $ams-sizes {
+  .ams-row--#{$label} {
+    gap: var(--ams-row-gap-#{$size});
   }
 }
diff --git a/packages/css/src/components/screen/screen.scss b/packages/css/src/components/screen/screen.scss
index 7b665e0ea9..2a8f128c2b 100644
--- a/packages/css/src/components/screen/screen.scss
+++ b/packages/css/src/components/screen/screen.scss
@@ -7,16 +7,16 @@
   box-sizing: border-box;
 }
 
-.amsterdam-screen {
+.ams-screen {
   @include reset;
 
   margin-inline: auto;
 }
 
-.amsterdam-screen--wide {
-  max-width: var(--amsterdam-screen-wide-max-width);
+.ams-screen--wide {
+  max-width: var(--ams-screen-wide-max-width);
 }
 
-.amsterdam-screen--x-wide {
-  max-width: var(--amsterdam-screen-x-wide-max-width);
+.ams-screen--x-wide {
+  max-width: var(--ams-screen-x-wide-max-width);
 }
diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss
index 6e26677c24..d762d78ea1 100644
--- a/packages/css/src/components/search-field/search-field.scss
+++ b/packages/css/src/components/search-field/search-field.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-search-field {
+.ams-search-field {
   display: flex;
   isolation: isolate; // create new stacking context, so the input’s z-index doesn’t escape the component
 }
@@ -14,24 +14,24 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-search-field__input {
+.ams-search-field__input {
   border: none;
-  box-shadow: var(--amsterdam-search-field-input-box-shadow);
-  color: var(--amsterdam-search-field-input-color);
-  font-family: var(--amsterdam-search-field-input-font-family);
-  font-size: var(--amsterdam-search-field-input-font-size);
-  font-weight: var(--amsterdam-search-field-input-font-weight);
-  line-height: var(--amsterdam-search-field-input-line-height);
-  outline-offset: var(--amsterdam-search-field-input-outline-offset);
-  padding-block: var(--amsterdam-search-field-input-padding-block);
-  padding-inline: var(--amsterdam-search-field-input-padding-inline);
+  box-shadow: var(--ams-search-field-input-box-shadow);
+  color: var(--ams-search-field-input-color);
+  font-family: var(--ams-search-field-input-font-family);
+  font-size: var(--ams-search-field-input-font-size);
+  font-weight: var(--ams-search-field-input-font-weight);
+  line-height: var(--ams-search-field-input-line-height);
+  outline-offset: var(--ams-search-field-input-outline-offset);
+  padding-block: var(--ams-search-field-input-padding-block);
+  padding-inline: var(--ams-search-field-input-padding-inline);
   touch-action: manipulation;
   width: 100%;
 
   @include reset;
 
   &:hover {
-    box-shadow: var(--amsterdam-search-field-input-hover-box-shadow);
+    box-shadow: var(--ams-search-field-input-hover-box-shadow);
   }
 
   &:focus {
@@ -39,32 +39,32 @@
   }
 }
 
-.amsterdam-search-field__input::placeholder {
-  color: var(--amsterdam-search-field-input-placeholder-color);
+.ams-search-field__input::placeholder {
+  color: var(--ams-search-field-input-placeholder-color);
 }
 
-.amsterdam-search-field__input::-webkit-search-cancel-button {
+.ams-search-field__input::-webkit-search-cancel-button {
   appearance: none;
-  background-image: var(--amsterdam-search-field-input-cancel-button-background-image);
+  background-image: var(--ams-search-field-input-cancel-button-background-image);
   cursor: pointer;
-  height: var(--amsterdam-search-field-input-cancel-button-height);
+  height: var(--ams-search-field-input-cancel-button-height);
   margin-inline-start: 0.5rem;
-  width: var(--amsterdam-search-field-input-cancel-button-width);
+  width: var(--ams-search-field-input-cancel-button-width);
 }
 
-.amsterdam-search-field__button {
-  background-color: var(--amsterdam-search-field-button-background-color);
+.ams-search-field__button {
+  background-color: var(--ams-search-field-button-background-color);
   border: 0;
-  color: var(--amsterdam-search-field-button-color);
+  color: var(--ams-search-field-button-color);
   cursor: pointer;
-  outline-offset: var(--amsterdam-search-field-button-outline-offset);
+  outline-offset: var(--ams-search-field-button-outline-offset);
 
   // TODO Check if these paddings are necessary
-  padding-block: var(--amsterdam-search-field-button-padding-block);
-  padding-inline: var(--amsterdam-search-field-button-padding-inline);
+  padding-block: var(--ams-search-field-button-padding-block);
+  padding-inline: var(--ams-search-field-button-padding-inline);
   touch-action: manipulation;
 
   &:hover {
-    background-color: var(--amsterdam-search-field-button-hover-background-color);
+    background-color: var(--ams-search-field-button-hover-background-color);
   }
 }
diff --git a/packages/css/src/components/skip-link/skip-link.scss b/packages/css/src/components/skip-link/skip-link.scss
index cbb2fab962..2aa0ff049f 100644
--- a/packages/css/src/components/skip-link/skip-link.scss
+++ b/packages/css/src/components/skip-link/skip-link.scss
@@ -3,21 +3,21 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-skip-link {
-  background-color: var(--amsterdam-skip-link-background-color);
-  color: var(--amsterdam-skip-link-color);
+.ams-skip-link {
+  background-color: var(--ams-skip-link-background-color);
+  color: var(--ams-skip-link-color);
   display: block;
-  font-family: var(--amsterdam-skip-link-font-family);
-  font-size: var(--amsterdam-skip-link-font-size);
-  font-weight: var(--amsterdam-skip-link-font-weight);
-  line-height: var(--amsterdam-skip-link-line-height);
-  outline-offset: var(--amsterdam-skip-link-outline-offset);
-  padding-block: var(--amsterdam-skip-link-padding-block);
-  padding-inline: var(--amsterdam-skip-link-padding-inline);
+  font-family: var(--ams-skip-link-font-family);
+  font-size: var(--ams-skip-link-font-size);
+  font-weight: var(--ams-skip-link-font-weight);
+  line-height: var(--ams-skip-link-line-height);
+  outline-offset: var(--ams-skip-link-outline-offset);
+  padding-block: var(--ams-skip-link-padding-block);
+  padding-inline: var(--ams-skip-link-padding-inline);
   text-align: center;
   text-decoration: none;
 
   &:hover {
-    background-color: var(--amsterdam-skip-link-hover-background-color);
+    background-color: var(--ams-skip-link-hover-background-color);
   }
 }
diff --git a/packages/css/src/components/spotlight/spotlight.scss b/packages/css/src/components/spotlight/spotlight.scss
index ee0bba81bf..7ad4f952a3 100644
--- a/packages/css/src/components/spotlight/spotlight.scss
+++ b/packages/css/src/components/spotlight/spotlight.scss
@@ -3,34 +3,34 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-spotlight--blue {
-  background-color: var(--amsterdam-spotlight-blue-background-color);
+.ams-spotlight--blue {
+  background-color: var(--ams-spotlight-blue-background-color);
 }
 
-.amsterdam-spotlight--dark-blue {
-  background-color: var(--amsterdam-spotlight-dark-blue-background-color);
+.ams-spotlight--dark-blue {
+  background-color: var(--ams-spotlight-dark-blue-background-color);
 }
 
-.amsterdam-spotlight--dark-green {
-  background-color: var(--amsterdam-spotlight-dark-green-background-color);
+.ams-spotlight--dark-green {
+  background-color: var(--ams-spotlight-dark-green-background-color);
 }
 
-.amsterdam-spotlight--green {
-  background-color: var(--amsterdam-spotlight-green-background-color);
+.ams-spotlight--green {
+  background-color: var(--ams-spotlight-green-background-color);
 }
 
-.amsterdam-spotlight--magenta {
-  background-color: var(--amsterdam-spotlight-magenta-background-color);
+.ams-spotlight--magenta {
+  background-color: var(--ams-spotlight-magenta-background-color);
 }
 
-.amsterdam-spotlight--orange {
-  background-color: var(--amsterdam-spotlight-orange-background-color);
+.ams-spotlight--orange {
+  background-color: var(--ams-spotlight-orange-background-color);
 }
 
-.amsterdam-spotlight--purple {
-  background-color: var(--amsterdam-spotlight-purple-background-color);
+.ams-spotlight--purple {
+  background-color: var(--ams-spotlight-purple-background-color);
 }
 
-.amsterdam-spotlight--yellow {
-  background-color: var(--amsterdam-spotlight-yellow-background-color);
+.ams-spotlight--yellow {
+  background-color: var(--ams-spotlight-yellow-background-color);
 }
diff --git a/packages/css/src/components/switch/switch.scss b/packages/css/src/components/switch/switch.scss
index a5e1dcdc3c..a8195597f7 100644
--- a/packages/css/src/components/switch/switch.scss
+++ b/packages/css/src/components/switch/switch.scss
@@ -10,51 +10,51 @@
   box-sizing: border-box;
 }
 
-.amsterdam-switch__input {
+.ams-switch__input {
   @include hide-input;
   @include input-label-focus;
 }
 
-.amsterdam-switch__label {
-  background-color: var(--amsterdam-switch-background-color);
-  border-radius: calc(var(--amsterdam-switch-thumb-width) * 2);
+.ams-switch__label {
+  background-color: var(--ams-switch-background-color);
+  border-radius: calc(var(--ams-switch-thumb-width) * 2);
   cursor: pointer;
   display: inline-block;
-  outline-offset: var(--amsterdam-switch-outline-offset);
+  outline-offset: var(--ams-switch-outline-offset);
   padding-block: 1px;
   padding-inline: 1px;
   transition: background-color 0.2s ease-in-out;
-  width: var(--amsterdam-switch-width);
+  width: var(--ams-switch-width);
 
   @include reset;
 }
 
-.amsterdam-switch__label::before {
-  background-color: var(--amsterdam-switch-thumb-background-color);
+.ams-switch__label::before {
+  background-color: var(--ams-switch-thumb-background-color);
   border-radius: 50%;
   content: "";
   display: block;
-  height: var(--amsterdam-switch-thumb-height);
+  height: var(--ams-switch-thumb-height);
   transition-duration: 0.1s;
   transition-property: box-shadow, transform;
   transition-timing-function: ease-in-out;
-  width: var(--amsterdam-switch-thumb-width);
+  width: var(--ams-switch-thumb-width);
 }
 
-.amsterdam-switch__input:checked + .amsterdam-switch__label {
-  background-color: var(--amsterdam-switch-checked-background-color);
+.ams-switch__input:checked + .ams-switch__label {
+  background-color: var(--ams-switch-checked-background-color);
 }
 
-.amsterdam-switch__input:disabled + .amsterdam-switch__label {
-  background-color: var(--amsterdam-switch-disabled-background-color);
+.ams-switch__input:disabled + .ams-switch__label {
+  background-color: var(--ams-switch-disabled-background-color);
   cursor: not-allowed;
 }
 
-.amsterdam-switch__input:checked + .amsterdam-switch__label::before {
+.ams-switch__input:checked + .ams-switch__label::before {
   // The 2px is to account for the 1px padding-inline on the label
-  transform: translate(calc(var(--amsterdam-switch-width) - var(--amsterdam-switch-thumb-width) - 2px));
+  transform: translate(calc(var(--ams-switch-width) - var(--ams-switch-thumb-width) - 2px));
 }
 
-.amsterdam-switch:hover .amsterdam-switch__input:enabled + .amsterdam-switch__label::before {
-  box-shadow: 0 0 0 2px var(--amsterdam-switch-thumb-hover-color);
+.ams-switch:hover .ams-switch__input:enabled + .ams-switch__label::before {
+  box-shadow: 0 0 0 2px var(--ams-switch-thumb-hover-color);
 }
diff --git a/packages/css/src/components/table/table.scss b/packages/css/src/components/table/table.scss
index 733f2cb25c..3d20a1f977 100644
--- a/packages/css/src/components/table/table.scss
+++ b/packages/css/src/components/table/table.scss
@@ -3,34 +3,34 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-table {
+.ams-table {
   overflow-x: auto;
 }
 
-.amsterdam-table__table {
+.ams-table__table {
   border-spacing: 0;
   break-inside: avoid;
-  color: var(--amsterdam-table-color);
-  font-family: var(--amsterdam-table-font-family);
-  font-size: var(--amsterdam-table-font-size);
-  font-weight: var(--amsterdam-table-font-weight);
-  line-height: var(--amsterdam-table-line-height);
+  color: var(--ams-table-color);
+  font-family: var(--ams-table-font-family);
+  font-size: var(--ams-table-font-size);
+  font-weight: var(--ams-table-font-weight);
+  line-height: var(--ams-table-line-height);
 }
 
-.amsterdam-table__caption {
-  font-weight: var(--amsterdam-table-caption-font-weight);
+.ams-table__caption {
+  font-weight: var(--ams-table-caption-font-weight);
   text-align: start;
 }
 
-.amsterdam-table__cell,
-.amsterdam-table__header-cell {
-  border-bottom: var(--amsterdam-table-cell-border-bottom);
-  padding-block: var(--amsterdam-table-cell-padding-block);
-  padding-inline: var(--amsterdam-table-cell-padding-inline);
+.ams-table__cell,
+.ams-table__header-cell {
+  border-bottom: var(--ams-table-cell-border-bottom);
+  padding-block: var(--ams-table-cell-padding-block);
+  padding-inline: var(--ams-table-cell-padding-inline);
   text-align: start;
   vertical-align: top;
 }
 
-.amsterdam-table__header-cell {
-  font-weight: var(--amsterdam-table-header-cell-font-weight);
+.ams-table__header-cell {
+  font-weight: var(--ams-table-header-cell-font-weight);
 }
diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss
index e23466f721..9d3aa76fa9 100644
--- a/packages/css/src/components/tabs/tabs.scss
+++ b/packages/css/src/components/tabs/tabs.scss
@@ -5,37 +5,37 @@
 
 @import "../../common/breakpoint";
 
-.amsterdam-tabs__list {
-  border-bottom: var(--amsterdam-tabs-list-border-bottom);
+.ams-tabs__list {
+  border-bottom: var(--ams-tabs-list-border-bottom);
   display: flex;
   overflow-x: auto;
 }
 
-.amsterdam-tabs__button {
-  background-color: var(--amsterdam-tabs-button-background-color);
-  border: var(--amsterdam-tabs-button-border);
-  color: var(--amsterdam-tabs-button-color);
-  cursor: var(--amsterdam-tabs-button-cursor);
-  font-family: var(--amsterdam-tabs-button-font-family);
-  font-size: var(--amsterdam-tabs-button-font-size);
-  font-weight: var(--amsterdam-tabs-button-font-weight);
-  line-height: var(--amsterdam-tabs-button-line-height);
-  outline-offset: var(--amsterdam-tabs-button-outline-offset);
-  padding-block: var(--amsterdam-tabs-button-padding-block);
-  padding-inline: var(--amsterdam-tabs-button-padding-inline);
+.ams-tabs__button {
+  background-color: var(--ams-tabs-button-background-color);
+  border: var(--ams-tabs-button-border);
+  color: var(--ams-tabs-button-color);
+  cursor: var(--ams-tabs-button-cursor);
+  font-family: var(--ams-tabs-button-font-family);
+  font-size: var(--ams-tabs-button-font-size);
+  font-weight: var(--ams-tabs-button-font-weight);
+  line-height: var(--ams-tabs-button-line-height);
+  outline-offset: var(--ams-tabs-button-outline-offset);
+  padding-block: var(--ams-tabs-button-padding-block);
+  padding-inline: var(--ams-tabs-button-padding-inline);
 
   &:disabled {
-    color: var(--amsterdam-tabs-button-disabled-color);
-    cursor: var(--amsterdam-tab-button-disabled-cursor);
+    color: var(--ams-tabs-button-disabled-color);
+    cursor: var(--ams-tab-button-disabled-cursor);
   }
 
   &:hover:not([aria-selected="true"], [disabled]) {
-    box-shadow: var(--amsterdam-tabs-button-hover-box-shadow);
-    color: var(--amsterdam-tabs-button-hover-color);
+    box-shadow: var(--ams-tabs-button-hover-box-shadow);
+    color: var(--ams-tabs-button-hover-color);
   }
 
   &[aria-selected="true"] {
-    background-color: var(--amsterdam-tabs-button-selected-background-color);
-    color: var(--amsterdam-tabs-button-selected-color);
+    background-color: var(--ams-tabs-button-selected-background-color);
+    color: var(--ams-tabs-button-selected-color);
   }
 }
diff --git a/packages/css/src/components/text-area/text-area.scss b/packages/css/src/components/text-area/text-area.scss
index 995ab27e8f..3b61da8b92 100644
--- a/packages/css/src/components/text-area/text-area.scss
+++ b/packages/css/src/components/text-area/text-area.scss
@@ -9,62 +9,62 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-text-area {
+.ams-text-area {
   border: none;
-  box-shadow: var(--amsterdam-text-area-box-shadow);
-  color: var(--amsterdam-text-area-color);
-  font-family: var(--amsterdam-text-area-font-family);
-  font-size: var(--amsterdam-text-area-font-size);
-  font-weight: var(--amsterdam-text-area-font-weight);
-  line-height: var(--amsterdam-text-area-line-height);
+  box-shadow: var(--ams-text-area-box-shadow);
+  color: var(--ams-text-area-color);
+  font-family: var(--ams-text-area-font-family);
+  font-size: var(--ams-text-area-font-size);
+  font-weight: var(--ams-text-area-font-weight);
+  line-height: var(--ams-text-area-line-height);
   max-width: 100%;
-  min-height: var(--amsterdam-text-area-min-height);
-  outline-offset: var(--amsterdam-text-area-outline-offset);
-  padding-block: var(--amsterdam-text-area-padding-block);
-  padding-inline: var(--amsterdam-text-area-padding-inline);
+  min-height: var(--ams-text-area-min-height);
+  outline-offset: var(--ams-text-area-outline-offset);
+  padding-block: var(--ams-text-area-padding-block);
+  padding-inline: var(--ams-text-area-padding-inline);
   touch-action: manipulation;
   width: 100%;
 
   @include reset;
 
   &:hover {
-    box-shadow: var(--amsterdam-text-area-hover-box-shadow);
+    box-shadow: var(--ams-text-area-hover-box-shadow);
   }
 }
 
-.amsterdam-text-area::placeholder {
-  color: var(--amsterdam-text-area-placeholder-color);
+.ams-text-area::placeholder {
+  color: var(--ams-text-area-placeholder-color);
 }
 
-.amsterdam-text-area:disabled {
-  background-color: var(--amsterdam-text-area-disabled-background-color);
-  box-shadow: var(--amsterdam-text-area-disabled-box-shadow);
-  color: var(--amsterdam-text-area-disabled-color);
-  cursor: var(--amsterdam-text-area-disabled-cursor);
+.ams-text-area:disabled {
+  background-color: var(--ams-text-area-disabled-background-color);
+  box-shadow: var(--ams-text-area-disabled-box-shadow);
+  color: var(--ams-text-area-disabled-color);
+  cursor: var(--ams-text-area-disabled-cursor);
 }
 
-.amsterdam-text-area:invalid,
-.amsterdam-text-area[aria-invalid="true"] {
-  box-shadow: var(--amsterdam-text-area-invalid-box-shadow);
+.ams-text-area:invalid,
+.ams-text-area[aria-invalid="true"] {
+  box-shadow: var(--ams-text-area-invalid-box-shadow);
 
   &:hover {
     // TODO: this should be the (currently non-existent) dark red hover color
-    box-shadow: var(--amsterdam-text-area-invalid-hover-box-shadow);
+    box-shadow: var(--ams-text-area-invalid-hover-box-shadow);
   }
 }
 
-.amsterdam-text-area--resize-none {
+.ams-text-area--resize-none {
   resize: none;
 }
 
-.amsterdam-text-area--resize-horizontal {
+.ams-text-area--resize-horizontal {
   resize: inline;
 }
 
-.amsterdam-text-area--resize-vertical {
+.ams-text-area--resize-vertical {
   resize: block;
 }
 
-.amsterdam-text-area--cols {
+.ams-text-area--cols {
   width: auto;
 }
diff --git a/packages/css/src/components/text-input/text-input.scss b/packages/css/src/components/text-input/text-input.scss
index 288f772046..74b3b369b8 100644
--- a/packages/css/src/components/text-input/text-input.scss
+++ b/packages/css/src/components/text-input/text-input.scss
@@ -9,44 +9,44 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-text-input {
+.ams-text-input {
   border: none;
-  box-shadow: var(--amsterdam-text-input-box-shadow);
-  color: var(--amsterdam-text-input-color);
-  font-family: var(--amsterdam-text-input-font-family);
-  font-size: var(--amsterdam-text-input-font-size);
-  font-weight: var(--amsterdam-text-input-font-weight);
-  line-height: var(--amsterdam-text-input-line-height);
-  outline-offset: var(--amsterdam-text-input-outline-offset);
-  padding-block: var(--amsterdam-text-input-padding-block);
-  padding-inline: var(--amsterdam-text-input-padding-inline);
+  box-shadow: var(--ams-text-input-box-shadow);
+  color: var(--ams-text-input-color);
+  font-family: var(--ams-text-input-font-family);
+  font-size: var(--ams-text-input-font-size);
+  font-weight: var(--ams-text-input-font-weight);
+  line-height: var(--ams-text-input-line-height);
+  outline-offset: var(--ams-text-input-outline-offset);
+  padding-block: var(--ams-text-input-padding-block);
+  padding-inline: var(--ams-text-input-padding-inline);
   touch-action: manipulation;
   width: 100%;
 
   @include reset;
 
   &:hover {
-    box-shadow: var(--amsterdam-text-input-hover-box-shadow);
+    box-shadow: var(--ams-text-input-hover-box-shadow);
   }
 }
 
-.amsterdam-text-input::placeholder {
-  color: var(--amsterdam-text-input-placeholder-color);
+.ams-text-input::placeholder {
+  color: var(--ams-text-input-placeholder-color);
 }
 
-.amsterdam-text-input:disabled {
-  background-color: var(--amsterdam-text-input-disabled-background-color);
-  box-shadow: var(--amsterdam-text-input-disabled-box-shadow);
-  color: var(--amsterdam-text-input-disabled-color);
+.ams-text-input:disabled {
+  background-color: var(--ams-text-input-disabled-background-color);
+  box-shadow: var(--ams-text-input-disabled-box-shadow);
+  color: var(--ams-text-input-disabled-color);
   cursor: not-allowed;
 }
 
-.amsterdam-text-input:invalid,
-.amsterdam-text-input[aria-invalid="true"] {
-  box-shadow: var(--amsterdam-text-input-invalid-box-shadow);
+.ams-text-input:invalid,
+.ams-text-input[aria-invalid="true"] {
+  box-shadow: var(--ams-text-input-invalid-box-shadow);
 
   &:hover {
     // TODO: this should be the (currently non-existent) dark red hover color
-    box-shadow: var(--amsterdam-text-input-invalid-hover-box-shadow);
+    box-shadow: var(--ams-text-input-invalid-hover-box-shadow);
   }
 }
diff --git a/packages/css/src/components/top-task-link/top-task-link.scss b/packages/css/src/components/top-task-link/top-task-link.scss
index 6f8f94dc31..956909b4b2 100644
--- a/packages/css/src/components/top-task-link/top-task-link.scss
+++ b/packages/css/src/components/top-task-link/top-task-link.scss
@@ -5,12 +5,12 @@
 
 @import "../../common/hyphenation";
 
-.amsterdam-top-task-link {
+.ams-top-task-link {
   break-inside: avoid;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  outline-offset: var(--amsterdam-top-task-link-outline-offset);
+  outline-offset: var(--ams-top-task-link-outline-offset);
   text-decoration: none;
 }
 
@@ -19,31 +19,31 @@
   -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-top-task-link__label {
-  color: var(--amsterdam-top-task-link-label-color);
-  font-family: var(--amsterdam-top-task-link-label-font-family);
-  font-size: var(--amsterdam-top-task-link-label-font-size);
-  font-weight: var(--amsterdam-top-task-link-label-font-weight);
-  line-height: var(--amsterdam-top-task-link-label-line-height);
-  text-decoration-line: var(--amsterdam-top-task-link-label-text-decoration-line);
-  text-decoration-thickness: var(--amsterdam-top-task-link-label-text-decoration-thickness);
-  text-underline-offset: var(--amsterdam-top-task-link-label-text-underline-offset);
+.ams-top-task-link__label {
+  color: var(--ams-top-task-link-label-color);
+  font-family: var(--ams-top-task-link-label-font-family);
+  font-size: var(--ams-top-task-link-label-font-size);
+  font-weight: var(--ams-top-task-link-label-font-weight);
+  line-height: var(--ams-top-task-link-label-line-height);
+  text-decoration-line: var(--ams-top-task-link-label-text-decoration-line);
+  text-decoration-thickness: var(--ams-top-task-link-label-text-decoration-thickness);
+  text-underline-offset: var(--ams-top-task-link-label-text-underline-offset);
 
   @include hyphenation;
   @include reset;
 }
 
-.amsterdam-top-task-link:hover .amsterdam-top-task-link__label {
-  color: var(--amsterdam-top-task-link-label-hover-color);
-  text-decoration-line: var(--amsterdam-top-task-link-label-hover-text-decoration-line);
+.ams-top-task-link:hover .ams-top-task-link__label {
+  color: var(--ams-top-task-link-label-hover-color);
+  text-decoration-line: var(--ams-top-task-link-label-hover-text-decoration-line);
 }
 
-.amsterdam-top-task-link__description {
-  color: var(--amsterdam-top-task-link-description-color);
-  font-family: var(--amsterdam-top-task-link-description-font-family);
-  font-size: var(--amsterdam-top-task-link-description-font-size);
-  font-weight: var(--amsterdam-top-task-link-description-font-weight);
-  line-height: var(--amsterdam-top-task-link-description-line-height);
+.ams-top-task-link__description {
+  color: var(--ams-top-task-link-description-color);
+  font-family: var(--ams-top-task-link-description-font-family);
+  font-size: var(--ams-top-task-link-description-font-size);
+  font-weight: var(--ams-top-task-link-description-font-weight);
+  line-height: var(--ams-top-task-link-description-line-height);
 
   @include reset;
 }
diff --git a/packages/css/src/components/unordered-list/unordered-list.scss b/packages/css/src/components/unordered-list/unordered-list.scss
index d837d4d2c3..d75e61e497 100644
--- a/packages/css/src/components/unordered-list/unordered-list.scss
+++ b/packages/css/src/components/unordered-list/unordered-list.scss
@@ -13,39 +13,39 @@
 }
 
 /** A list is a grid column with a gap between items. */
-.amsterdam-unordered-list {
+.ams-unordered-list {
   @include reset;
 
   display: grid;
-  gap: var(--amsterdam-unordered-list-gap);
+  gap: var(--ams-unordered-list-gap);
 }
 
 /** A list with markers sets typography for its text content. */
-.amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) {
-  color: var(--amsterdam-unordered-list-color);
-  font-family: var(--amsterdam-unordered-list-font-family);
-  font-size: var(--amsterdam-unordered-list-font-size);
-  font-weight: var(--amsterdam-unordered-list-font-weight);
-  line-height: var(--amsterdam-unordered-list-line-height);
-  list-style-type: var(--amsterdam-unordered-list-list-style-type);
+.ams-unordered-list:not(.ams-unordered-list--no-markers) {
+  color: var(--ams-unordered-list-color);
+  font-family: var(--ams-unordered-list-font-family);
+  font-size: var(--ams-unordered-list-font-size);
+  font-weight: var(--ams-unordered-list-font-weight);
+  line-height: var(--ams-unordered-list-line-height);
+  list-style-type: var(--ams-unordered-list-list-style-type);
 
   /** List items are responsible for indentation and marker positioning. */
-  .amsterdam-unordered-list__item {
-    margin-inline-start: var(--amsterdam-unordered-list-item-margin-inline-start);
-    padding-inline-start: var(--amsterdam-unordered-list-item-padding-inline-start);
+  .ams-unordered-list__item {
+    margin-inline-start: var(--ams-unordered-list-item-margin-inline-start);
+    padding-inline-start: var(--ams-unordered-list-item-padding-inline-start);
   }
 }
 
-.amsterdam-unordered-list--inverse-color:not(.amsterdam-unordered-list--no-markers) {
-  color: var(--amsterdam-unordered-list-inverse-color);
+.ams-unordered-list--inverse-color:not(.ams-unordered-list--no-markers) {
+  color: var(--ams-unordered-list-inverse-color);
 }
 
 /** A nested list has a different marker and less indentation for correct alignment. */
-:is(.amsterdam-ordered-list, .amsterdam-unordered-list) .amsterdam-unordered-list {
-  list-style-type: var(--amsterdam-unordered-list-unordered-list-list-style-type);
+:is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list {
+  list-style-type: var(--ams-unordered-list-unordered-list-list-style-type);
 
-  .amsterdam-unordered-list__item {
-    margin-inline-start: var(--amsterdam-unordered-list-unordered-list-item-margin-inline-start);
-    padding-inline-start: var(--amsterdam-unordered-list-unordered-list-item-padding-inline-start);
+  .ams-unordered-list__item {
+    margin-inline-start: var(--ams-unordered-list-unordered-list-item-margin-inline-start);
+    padding-inline-start: var(--ams-unordered-list-unordered-list-item-padding-inline-start);
   }
 }
diff --git a/packages/css/src/components/visually-hidden/visually-hidden.scss b/packages/css/src/components/visually-hidden/visually-hidden.scss
index 0b2ea90b59..ea8035d215 100644
--- a/packages/css/src/components/visually-hidden/visually-hidden.scss
+++ b/packages/css/src/components/visually-hidden/visually-hidden.scss
@@ -4,7 +4,7 @@
  */
 
 // Source: https://css-tricks.com/inclusively-hidden/
-.amsterdam-visually-hidden:not(:active, :focus) {
+.ams-visually-hidden:not(:active, :focus) {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
diff --git a/packages/react/documentation/coding-conventions.md b/packages/react/documentation/coding-conventions.md
index 1503f0c172..9e119f795c 100644
--- a/packages/react/documentation/coding-conventions.md
+++ b/packages/react/documentation/coding-conventions.md
@@ -36,6 +36,6 @@ Subcomponents (e.g. `Grid.Cell`) are kept in separate files (e.g. `GridCell.tsx`
 
 ## Text for screen readers only
 
-Use [Visually Hidden](https://amsterdam.github.io/design-system/?path=/docs/react_containers-visually-hidden--docs) or the `amsterdam-visually-hidden` utility class to hide content from sighted users but keep it accessible to non-visual user agents, such as screen readers.
+Use [Visually Hidden](https://amsterdam.github.io/design-system/?path=/docs/react_containers-visually-hidden--docs) or the `ams-visually-hidden` utility class to hide content from sighted users but keep it accessible to non-visual user agents, such as screen readers.
 
 Do not use `aria-label`. Tools for automatic translation often [do not translate its value](https://adrianroselli.com/2019/11/aria-label-does-not-translate.html), and it may get overlooked when doing manual translation.
diff --git a/packages/react/src/Accordion/Accordion.test.tsx b/packages/react/src/Accordion/Accordion.test.tsx
index 1fa08f57a8..0905200da5 100644
--- a/packages/react/src/Accordion/Accordion.test.tsx
+++ b/packages/react/src/Accordion/Accordion.test.tsx
@@ -7,7 +7,7 @@ describe('Accordion', () => {
   it('renders an accordion', () => {
     const { container } = render(<Accordion headingLevel={1} />)
 
-    const accordion = container.querySelector('.amsterdam-accordion')
+    const accordion = container.querySelector('.ams-accordion')
 
     expect(accordion).toBeInTheDocument()
     expect(accordion).toBeVisible()
@@ -16,7 +16,7 @@ describe('Accordion', () => {
   it('renders an additional class name', () => {
     const { container } = render(<Accordion headingLevel={1} className="test" />)
 
-    const accordion = container.querySelector('.amsterdam-accordion')
+    const accordion = container.querySelector('.ams-accordion')
 
     expect(accordion).toHaveClass('test')
   })
@@ -26,7 +26,7 @@ describe('Accordion', () => {
 
     const { container } = render(<Accordion headingLevel={1} ref={ref} />)
 
-    const accordion = container.querySelector('.amsterdam-accordion')
+    const accordion = container.querySelector('.ams-accordion')
 
     expect(ref.current).toBe(accordion)
   })
diff --git a/packages/react/src/Accordion/Accordion.tsx b/packages/react/src/Accordion/Accordion.tsx
index 0dce22f422..805080162f 100644
--- a/packages/react/src/Accordion/Accordion.tsx
+++ b/packages/react/src/Accordion/Accordion.tsx
@@ -31,7 +31,7 @@ export const Accordion = forwardRef(
 
     return (
       <AccordionContext.Provider value={{ headingLevel: headingLevel, section: section }}>
-        <div className={clsx('amsterdam-accordion', className)} onKeyDown={keyDown} ref={innerRef}>
+        <div className={clsx('ams-accordion', className)} onKeyDown={keyDown} ref={innerRef}>
           {children}
         </div>
       </AccordionContext.Provider>
diff --git a/packages/react/src/Accordion/AccordionSection.test.tsx b/packages/react/src/Accordion/AccordionSection.test.tsx
index 994decfb46..2f86a51a2d 100644
--- a/packages/react/src/Accordion/AccordionSection.test.tsx
+++ b/packages/react/src/Accordion/AccordionSection.test.tsx
@@ -10,7 +10,7 @@ describe('Accordion section', () => {
   it('renders an accordion section', () => {
     const { container } = render(<Accordion.Section label={testLabel}>{testContent}</Accordion.Section>)
 
-    const accordionSection = container.querySelector('.amsterdam-accordion__section')
+    const accordionSection = container.querySelector('.ams-accordion__section')
 
     expect(accordionSection).toBeInTheDocument()
     expect(accordionSection).toBeVisible()
@@ -25,10 +25,10 @@ describe('Accordion section', () => {
     const button = screen.getByRole('button', {
       name: testLabel,
     })
-    const section = container.querySelector('.amsterdam-accordion__panel')
+    const section = container.querySelector('.ams-accordion__panel')
 
-    expect(heading).toHaveClass('amsterdam-accordion__header')
-    expect(button).toHaveClass('amsterdam-accordion__button')
+    expect(heading).toHaveClass('ams-accordion__header')
+    expect(button).toHaveClass('ams-accordion__button')
     expect(section).toBeInTheDocument()
   })
 
@@ -40,11 +40,11 @@ describe('Accordion section', () => {
     })
     const sectionContent = getByText(testContent)
 
-    expect(sectionContent).not.toHaveClass('amsterdam-accordion__panel--expanded')
+    expect(sectionContent).not.toHaveClass('ams-accordion__panel--expanded')
     fireEvent.click(button)
-    expect(sectionContent).toHaveClass('amsterdam-accordion__panel--expanded')
+    expect(sectionContent).toHaveClass('ams-accordion__panel--expanded')
     fireEvent.click(button)
-    expect(sectionContent).not.toHaveClass('amsterdam-accordion__panel--expanded')
+    expect(sectionContent).not.toHaveClass('ams-accordion__panel--expanded')
   })
 
   it('adds --expanded class when expanded prop is true', () => {
@@ -56,7 +56,7 @@ describe('Accordion section', () => {
 
     const sectionContent = getByText(testContent)
 
-    expect(sectionContent).toHaveClass('amsterdam-accordion__panel--expanded')
+    expect(sectionContent).toHaveClass('ams-accordion__panel--expanded')
   })
 
   it('renders a section HTML tag by defaultt', () => {
@@ -117,7 +117,7 @@ describe('Accordion section', () => {
       </Accordion.Section>,
     )
 
-    const accordionSection = container.querySelector('.amsterdam-accordion__section')
+    const accordionSection = container.querySelector('.ams-accordion__section')
 
     expect(accordionSection).toHaveClass('test')
   })
@@ -131,7 +131,7 @@ describe('Accordion section', () => {
       </Accordion.Section>,
     )
 
-    const accordionSection = container.querySelector('.amsterdam-accordion__section')
+    const accordionSection = container.querySelector('.ams-accordion__section')
 
     expect(ref.current).toBe(accordionSection)
   })
diff --git a/packages/react/src/Accordion/AccordionSection.tsx b/packages/react/src/Accordion/AccordionSection.tsx
index 28184dd957..f6c942562c 100644
--- a/packages/react/src/Accordion/AccordionSection.tsx
+++ b/packages/react/src/Accordion/AccordionSection.tsx
@@ -30,12 +30,12 @@ export const AccordionSection = forwardRef(
     const panelId = `panel-${id}`
 
     return (
-      <div className={clsx('amsterdam-accordion__section', className)} ref={ref} {...otherProps}>
-        <HeadingX className={'amsterdam-accordion__header'}>
+      <div className={clsx('ams-accordion__section', className)} ref={ref} {...otherProps}>
+        <HeadingX className={'ams-accordion__header'}>
           <button
             aria-controls={panelId}
             aria-expanded={isExpanded}
-            className="amsterdam-accordion__button"
+            className="ams-accordion__button"
             id={buttonId}
             onClick={() => setIsExpanded(!isExpanded)}
             type="button"
@@ -48,7 +48,7 @@ export const AccordionSection = forwardRef(
           <section
             id={panelId}
             aria-labelledby={buttonId}
-            className={clsx('amsterdam-accordion__panel', { 'amsterdam-accordion__panel--expanded': isExpanded })}
+            className={clsx('ams-accordion__panel', { 'ams-accordion__panel--expanded': isExpanded })}
           >
             {children}
           </section>
@@ -56,7 +56,7 @@ export const AccordionSection = forwardRef(
           <div
             id={panelId}
             aria-labelledby={buttonId}
-            className={clsx('amsterdam-accordion__panel', { 'amsterdam-accordion__panel--expanded': isExpanded })}
+            className={clsx('ams-accordion__panel', { 'ams-accordion__panel--expanded': isExpanded })}
           >
             {children}
           </div>
diff --git a/packages/react/src/Alert/Alert.test.tsx b/packages/react/src/Alert/Alert.test.tsx
index de23f9751e..87aee7b0a7 100644
--- a/packages/react/src/Alert/Alert.test.tsx
+++ b/packages/react/src/Alert/Alert.test.tsx
@@ -8,7 +8,7 @@ describe('Alert', () => {
     const { container } = render(<Alert />)
 
     const component = container.querySelector(':only-child')
-    const icon = component?.querySelector('.amsterdam-alert__icon')
+    const icon = component?.querySelector('.ams-alert__icon')
 
     expect(component).toBeInTheDocument()
     expect(component).toBeVisible()
@@ -21,7 +21,7 @@ describe('Alert', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-alert')
+    expect(component).toHaveClass('ams-alert')
   })
 
   it('renders an additional class name', () => {
@@ -29,7 +29,7 @@ describe('Alert', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-alert extra')
+    expect(component).toHaveClass('ams-alert extra')
   })
 
   it('supports ForwardRef in React', () => {
@@ -46,7 +46,7 @@ describe('Alert', () => {
     const { container } = render(<Alert closeable={true} />)
 
     const component = container.querySelector(':only-child')
-    const closeButton = component?.querySelector('.amsterdam-icon-button')
+    const closeButton = component?.querySelector('.ams-icon-button')
 
     expect(closeButton).toBeInTheDocument()
     expect(closeButton).toBeVisible()
@@ -57,7 +57,7 @@ describe('Alert', () => {
     const { container } = render(<Alert closeable={true} onClose={onClose} />)
 
     const component = container.querySelector(':only-child')
-    const closeButton = component?.querySelector('.amsterdam-icon-button')
+    const closeButton = component?.querySelector('.ams-icon-button')
 
     fireEvent.click(closeButton!)
 
diff --git a/packages/react/src/Alert/Alert.tsx b/packages/react/src/Alert/Alert.tsx
index 81ffd60a9a..1c23611006 100644
--- a/packages/react/src/Alert/Alert.tsx
+++ b/packages/react/src/Alert/Alert.tsx
@@ -53,15 +53,11 @@ export const Alert = forwardRef(
     const Tag = title ? 'section' : 'div'
 
     return (
-      <Tag
-        {...restProps}
-        ref={ref}
-        className={clsx('amsterdam-alert', severity && `amsterdam-alert--${severity}`, className)}
-      >
-        <div className="amsterdam-alert__icon">
+      <Tag {...restProps} ref={ref} className={clsx('ams-alert', severity && `ams-alert--${severity}`, className)}>
+        <div className="ams-alert__icon">
           <Icon size={alertSize} svg={iconSvgBySeverity[severity]} />
         </div>
-        <div className="amsterdam-alert__content">
+        <div className="ams-alert__content">
           {title && (
             <Heading level={headingLevel} size="level-4">
               {title}
diff --git a/packages/react/src/AspectRatio/AspectRatio.test.tsx b/packages/react/src/AspectRatio/AspectRatio.test.tsx
index 03df129253..f2063efa63 100644
--- a/packages/react/src/AspectRatio/AspectRatio.test.tsx
+++ b/packages/react/src/AspectRatio/AspectRatio.test.tsx
@@ -24,7 +24,7 @@ describe('Aspect ratio', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-aspect-ratio')
+    expect(component).toHaveClass('ams-aspect-ratio')
   })
 
   it('renders the right size classes', () => {
@@ -34,11 +34,11 @@ describe('Aspect ratio', () => {
     const { container: wide } = render(<AspectRatio ratio="wide" />)
     const { container: xWide } = render(<AspectRatio ratio="x-wide" />)
 
-    expect(xTall.firstChild).toHaveClass('amsterdam-aspect-ratio--x-tall')
-    expect(tall.firstChild).toHaveClass('amsterdam-aspect-ratio--tall')
-    expect(square.firstChild).toHaveClass('amsterdam-aspect-ratio--square')
-    expect(wide.firstChild).toHaveClass('amsterdam-aspect-ratio--wide')
-    expect(xWide.firstChild).toHaveClass('amsterdam-aspect-ratio--x-wide')
+    expect(xTall.firstChild).toHaveClass('ams-aspect-ratio--x-tall')
+    expect(tall.firstChild).toHaveClass('ams-aspect-ratio--tall')
+    expect(square.firstChild).toHaveClass('ams-aspect-ratio--square')
+    expect(wide.firstChild).toHaveClass('ams-aspect-ratio--wide')
+    expect(xWide.firstChild).toHaveClass('ams-aspect-ratio--x-wide')
   })
 
   it('renders an additional class name', () => {
@@ -48,7 +48,7 @@ describe('Aspect ratio', () => {
 
     expect(component).toHaveClass('extra')
 
-    expect(component).toHaveClass('amsterdam-aspect-ratio')
+    expect(component).toHaveClass('ams-aspect-ratio')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/AspectRatio/AspectRatio.tsx b/packages/react/src/AspectRatio/AspectRatio.tsx
index eac10d8356..c0ff00a4bb 100644
--- a/packages/react/src/AspectRatio/AspectRatio.tsx
+++ b/packages/react/src/AspectRatio/AspectRatio.tsx
@@ -15,11 +15,7 @@ export type AspectRatioProps = {
 
 export const AspectRatio = forwardRef(
   ({ children, className, ratio = 'square', ...restProps }: AspectRatioProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div
-      {...restProps}
-      ref={ref}
-      className={clsx('amsterdam-aspect-ratio', `amsterdam-aspect-ratio--${ratio}`, className)}
-    >
+    <div {...restProps} ref={ref} className={clsx('ams-aspect-ratio', `ams-aspect-ratio--${ratio}`, className)}>
       {children}
     </div>
   ),
diff --git a/packages/react/src/Badge/Badge.test.tsx b/packages/react/src/Badge/Badge.test.tsx
index 5d029e2d57..a059070d80 100644
--- a/packages/react/src/Badge/Badge.test.tsx
+++ b/packages/react/src/Badge/Badge.test.tsx
@@ -18,7 +18,7 @@ describe('Badge', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-badge')
+    expect(component).toHaveClass('ams-badge')
   })
 
   it('renders an additional class name', () => {
@@ -26,7 +26,7 @@ describe('Badge', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-badge extra')
+    expect(component).toHaveClass('ams-badge extra')
   })
 
   it('supports ForwardRef in React', () => {
@@ -52,7 +52,7 @@ describe('Badge', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-badge--dark-green')
+    expect(component).toHaveClass('ams-badge--dark-green')
   })
 
   badgeColors.map((color) =>
@@ -61,7 +61,7 @@ describe('Badge', () => {
 
       const component = container.querySelector(':only-child')
 
-      expect(component).toHaveClass(`amsterdam-badge--${color}`)
+      expect(component).toHaveClass(`ams-badge--${color}`)
     }),
   )
 })
diff --git a/packages/react/src/Badge/Badge.tsx b/packages/react/src/Badge/Badge.tsx
index 38133fd59c..f080854094 100644
--- a/packages/react/src/Badge/Badge.tsx
+++ b/packages/react/src/Badge/Badge.tsx
@@ -27,7 +27,7 @@ export type BadgeProps = {
 
 export const Badge = forwardRef(
   ({ label, className, color = 'dark-green', ...restProps }: BadgeProps, ref: ForwardedRef<HTMLElement>) => (
-    <span {...restProps} ref={ref} className={clsx('amsterdam-badge', `amsterdam-badge--${color}`, className)}>
+    <span {...restProps} ref={ref} className={clsx('ams-badge', `ams-badge--${color}`, className)}>
       {label}
     </span>
   ),
diff --git a/packages/react/src/Blockquote/Blockquote.test.tsx b/packages/react/src/Blockquote/Blockquote.test.tsx
index 467023899c..49fbbc97c9 100644
--- a/packages/react/src/Blockquote/Blockquote.test.tsx
+++ b/packages/react/src/Blockquote/Blockquote.test.tsx
@@ -30,7 +30,7 @@ describe('Blockquote', () => {
 
     const quote = container.querySelector(':only-child')
 
-    expect(quote).toHaveClass('amsterdam-blockquote')
+    expect(quote).toHaveClass('ams-blockquote')
   })
 
   it('renders an additional class name', () => {
@@ -40,7 +40,7 @@ describe('Blockquote', () => {
 
     expect(quote).toHaveClass('extra')
 
-    expect(quote).toHaveClass('amsterdam-blockquote')
+    expect(quote).toHaveClass('ams-blockquote')
   })
 
   it('renders the right inverse color class', () => {
@@ -48,7 +48,7 @@ describe('Blockquote', () => {
 
     const quote = container.querySelector('blockquote:only-child')
 
-    expect(quote).toHaveClass('amsterdam-blockquote--inverse-color')
+    expect(quote).toHaveClass('ams-blockquote--inverse-color')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Blockquote/Blockquote.tsx b/packages/react/src/Blockquote/Blockquote.tsx
index d09a8f05c1..2f6dd65728 100644
--- a/packages/react/src/Blockquote/Blockquote.tsx
+++ b/packages/react/src/Blockquote/Blockquote.tsx
@@ -20,7 +20,7 @@ export const Blockquote = forwardRef(
     <blockquote
       {...restProps}
       ref={ref}
-      className={clsx('amsterdam-blockquote', inverseColor && 'amsterdam-blockquote--inverse-color', className)}
+      className={clsx('ams-blockquote', inverseColor && 'ams-blockquote--inverse-color', className)}
     >
       {children}
     </blockquote>
diff --git a/packages/react/src/Breadcrumb/Breadcrumb.test.tsx b/packages/react/src/Breadcrumb/Breadcrumb.test.tsx
index 591dc45b36..148d751efe 100644
--- a/packages/react/src/Breadcrumb/Breadcrumb.test.tsx
+++ b/packages/react/src/Breadcrumb/Breadcrumb.test.tsx
@@ -14,13 +14,13 @@ describe('Breadcrumb', () => {
   it('renders a design system BEM class name', () => {
     render(<Breadcrumb />)
     const component = screen.getByRole('navigation')
-    expect(component).toHaveClass('amsterdam-breadcrumb')
+    expect(component).toHaveClass('ams-breadcrumb')
   })
 
   it('renders an additional class name', () => {
     render(<Breadcrumb className="extra" />)
     const component = screen.getByRole('navigation')
-    expect(component).toHaveClass('amsterdam-breadcrumb extra')
+    expect(component).toHaveClass('ams-breadcrumb extra')
   })
 
   it('renders Breadcrumb component with children', () => {
@@ -41,7 +41,7 @@ describe('Breadcrumb', () => {
     )
 
     const breadcrumb = screen.getByRole('navigation')
-    const breadcrumbs = container.querySelectorAll('.amsterdam-breadcrumb__item')
+    const breadcrumbs = container.querySelectorAll('.ams-breadcrumb__item')
 
     expect(breadcrumb).toBeInTheDocument()
     expect(breadcrumbs.length).toBe(3)
diff --git a/packages/react/src/Breadcrumb/Breadcrumb.tsx b/packages/react/src/Breadcrumb/Breadcrumb.tsx
index 257676fdae..b065fa581d 100644
--- a/packages/react/src/Breadcrumb/Breadcrumb.tsx
+++ b/packages/react/src/Breadcrumb/Breadcrumb.tsx
@@ -16,8 +16,8 @@ type BreadcrumbComponent = {
 
 export const Breadcrumb = forwardRef(
   ({ children, className, ...restProps }: BreadcrumbProps, ref: ForwardedRef<HTMLElement>) => (
-    <nav {...restProps} className={clsx('amsterdam-breadcrumb', className)} ref={ref}>
-      <ol className="amsterdam-breadcrumb__list">{children}</ol>
+    <nav {...restProps} className={clsx('ams-breadcrumb', className)} ref={ref}>
+      <ol className="ams-breadcrumb__list">{children}</ol>
     </nav>
   ),
 ) as BreadcrumbComponent
diff --git a/packages/react/src/Breadcrumb/BreadcrumbItem.test.tsx b/packages/react/src/Breadcrumb/BreadcrumbItem.test.tsx
index d809248871..c171fb29e2 100644
--- a/packages/react/src/Breadcrumb/BreadcrumbItem.test.tsx
+++ b/packages/react/src/Breadcrumb/BreadcrumbItem.test.tsx
@@ -14,16 +14,16 @@ describe('Breadcrumb item', () => {
   it('renders a design system BEM class name', () => {
     render(<BreadcrumbItem href="/" />)
     const item = screen.getByRole('listitem')
-    expect(item).toHaveClass('amsterdam-breadcrumb__item')
+    expect(item).toHaveClass('ams-breadcrumb__item')
 
     const link = screen.getByRole('link')
-    expect(link).toHaveClass('amsterdam-breadcrumb__link')
+    expect(link).toHaveClass('ams-breadcrumb__link')
   })
 
   it('renders an additional class name', () => {
     render(<BreadcrumbItem href="/" className="extra" />)
     const component = screen.getByRole('listitem')
-    expect(component).toHaveClass('amsterdam-breadcrumb__item extra')
+    expect(component).toHaveClass('ams-breadcrumb__item extra')
   })
 
   it('renders the href attribute', () => {
diff --git a/packages/react/src/Breadcrumb/BreadcrumbItem.tsx b/packages/react/src/Breadcrumb/BreadcrumbItem.tsx
index f62b7dda45..07d7c1bbb1 100644
--- a/packages/react/src/Breadcrumb/BreadcrumbItem.tsx
+++ b/packages/react/src/Breadcrumb/BreadcrumbItem.tsx
@@ -13,8 +13,8 @@ export type BreadcrumbItemProps = {
 
 export const BreadcrumbItem = forwardRef(
   ({ children, className, href, ...restProps }: BreadcrumbItemProps, ref: ForwardedRef<HTMLLIElement>) => (
-    <li {...restProps} className={clsx('amsterdam-breadcrumb__item', className)} ref={ref}>
-      <a className="amsterdam-breadcrumb__link" href={href}>
+    <li {...restProps} className={clsx('ams-breadcrumb__item', className)} ref={ref}>
+      <a className="ams-breadcrumb__link" href={href}>
         {children}
       </a>
     </li>
diff --git a/packages/react/src/Button/Button.test.tsx b/packages/react/src/Button/Button.test.tsx
index d628d819ff..10efa743ca 100644
--- a/packages/react/src/Button/Button.test.tsx
+++ b/packages/react/src/Button/Button.test.tsx
@@ -22,7 +22,7 @@ describe('Button', () => {
       name: 'Click me!',
     })
 
-    expect(button).toHaveClass('amsterdam-button extra')
+    expect(button).toHaveClass('ams-button extra')
   })
 
   it('renders a default button with variant primary', () => {
@@ -34,7 +34,7 @@ describe('Button', () => {
 
     expect(button).toBeInTheDocument()
     expect(button).toHaveAttribute('type', 'button')
-    expect(button).toHaveClass('amsterdam-button--primary')
+    expect(button).toHaveClass('ams-button--primary')
   })
 
   it('renders a button with a specified variant', () => {
@@ -59,11 +59,11 @@ describe('Button', () => {
     })
 
     expect(buttonPrimary).toBeInTheDocument()
-    expect(buttonPrimary).toHaveClass('amsterdam-button--primary')
+    expect(buttonPrimary).toHaveClass('ams-button--primary')
     expect(buttonSecondary).toBeInTheDocument()
-    expect(buttonSecondary).toHaveClass('amsterdam-button--secondary')
+    expect(buttonSecondary).toHaveClass('ams-button--secondary')
     expect(buttonTertiary).toBeInTheDocument()
-    expect(buttonTertiary).toHaveClass('amsterdam-button--tertiary')
+    expect(buttonTertiary).toHaveClass('ams-button--tertiary')
   })
 
   it('renders a disabled button with a specified variant', () => {
diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index 23c847cbe0..90421d025a 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -21,7 +21,7 @@ export const Button = forwardRef(
         {...restProps}
         ref={ref}
         disabled={disabled}
-        className={clsx('amsterdam-button', `amsterdam-button--${variant}`, className)}
+        className={clsx('ams-button', `ams-button--${variant}`, className)}
         type={type || 'button'}
       >
         {children}
diff --git a/packages/react/src/Card/Card.test.tsx b/packages/react/src/Card/Card.test.tsx
index cbbd74de48..df98fe9df1 100644
--- a/packages/react/src/Card/Card.test.tsx
+++ b/packages/react/src/Card/Card.test.tsx
@@ -18,7 +18,7 @@ describe('Card', () => {
 
     const component = screen.getByRole('article')
 
-    expect(component).toHaveClass('amsterdam-card')
+    expect(component).toHaveClass('ams-card')
   })
 
   it('renders an additional class name', () => {
@@ -26,7 +26,7 @@ describe('Card', () => {
 
     const component = screen.getByRole('article')
 
-    expect(component).toHaveClass('amsterdam-card extra')
+    expect(component).toHaveClass('ams-card extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Card/Card.tsx b/packages/react/src/Card/Card.tsx
index fb0ca93d6d..9a8ec2b5c8 100644
--- a/packages/react/src/Card/Card.tsx
+++ b/packages/react/src/Card/Card.tsx
@@ -17,7 +17,7 @@ type CardComponent = {
 } & ForwardRefExoticComponent<CardProps & RefAttributes<HTMLElement>>
 
 export const Card = forwardRef(({ children, className, ...restProps }: CardProps, ref: ForwardedRef<HTMLElement>) => (
-  <article {...restProps} ref={ref} className={clsx('amsterdam-card', className)}>
+  <article {...restProps} ref={ref} className={clsx('ams-card', className)}>
     {children}
   </article>
 )) as CardComponent
diff --git a/packages/react/src/Card/CardHeadingGroup.test.tsx b/packages/react/src/Card/CardHeadingGroup.test.tsx
index c31adb0b42..73a19ad8f7 100644
--- a/packages/react/src/Card/CardHeadingGroup.test.tsx
+++ b/packages/react/src/Card/CardHeadingGroup.test.tsx
@@ -18,7 +18,7 @@ describe('Card heading group', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-card__heading-group')
+    expect(component).toHaveClass('ams-card__heading-group')
   })
 
   it('renders an additional class name', () => {
@@ -26,7 +26,7 @@ describe('Card heading group', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-card__heading-group extra')
+    expect(component).toHaveClass('ams-card__heading-group extra')
   })
 
   it('renders a tagline', () => {
diff --git a/packages/react/src/Card/CardHeadingGroup.tsx b/packages/react/src/Card/CardHeadingGroup.tsx
index daecde50d9..114c42b96f 100644
--- a/packages/react/src/Card/CardHeadingGroup.tsx
+++ b/packages/react/src/Card/CardHeadingGroup.tsx
@@ -14,7 +14,7 @@ export type CardHeadingGroupProps = {
 
 export const CardHeadingGroup = forwardRef(
   ({ children, className, tagline, ...restProps }: CardHeadingGroupProps, ref: ForwardedRef<HTMLElement>) => (
-    <hgroup {...restProps} ref={ref} className={clsx('amsterdam-card__heading-group', className)}>
+    <hgroup {...restProps} ref={ref} className={clsx('ams-card__heading-group', className)}>
       {children}
       <Paragraph size="small">{tagline}</Paragraph>
     </hgroup>
diff --git a/packages/react/src/Card/CardLink.test.tsx b/packages/react/src/Card/CardLink.test.tsx
index bc865e41a2..17c19cd337 100644
--- a/packages/react/src/Card/CardLink.test.tsx
+++ b/packages/react/src/Card/CardLink.test.tsx
@@ -18,7 +18,7 @@ describe('Card link', () => {
 
     const component = screen.getByRole('link')
 
-    expect(component).toHaveClass('amsterdam-card__link')
+    expect(component).toHaveClass('ams-card__link')
   })
 
   it('renders an additional class name', () => {
@@ -26,7 +26,7 @@ describe('Card link', () => {
 
     const component = screen.getByRole('link')
 
-    expect(component).toHaveClass('amsterdam-card__link extra')
+    expect(component).toHaveClass('ams-card__link extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Card/CardLink.tsx b/packages/react/src/Card/CardLink.tsx
index c8908e3d79..036545a91e 100644
--- a/packages/react/src/Card/CardLink.tsx
+++ b/packages/react/src/Card/CardLink.tsx
@@ -11,7 +11,7 @@ export type CardLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorEle
 
 export const CardLink = forwardRef(
   ({ children, className, ...otherProps }: CardLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => (
-    <a {...otherProps} ref={ref} className={clsx('amsterdam-card__link', className)}>
+    <a {...otherProps} ref={ref} className={clsx('ams-card__link', className)}>
       {children}
     </a>
   ),
diff --git a/packages/react/src/Checkbox/Checkbox.test.tsx b/packages/react/src/Checkbox/Checkbox.test.tsx
index 2d7625b227..d6afa3f442 100644
--- a/packages/react/src/Checkbox/Checkbox.test.tsx
+++ b/packages/react/src/Checkbox/Checkbox.test.tsx
@@ -28,9 +28,9 @@ describe('Checkbox', () => {
     const input = screen.getByRole('checkbox')
     const label = container.querySelector('label')
 
-    expect(wrapper).toHaveClass('amsterdam-checkbox')
-    expect(input).toHaveClass('amsterdam-checkbox__input')
-    expect(label).toHaveClass('amsterdam-checkbox__label')
+    expect(wrapper).toHaveClass('ams-checkbox')
+    expect(input).toHaveClass('ams-checkbox__input')
+    expect(label).toHaveClass('ams-checkbox__label')
   })
 
   it('renders an additional class name', () => {
@@ -40,7 +40,7 @@ describe('Checkbox', () => {
 
     expect(wrapper).toHaveClass('extra')
 
-    expect(wrapper).toHaveClass('amsterdam-checkbox')
+    expect(wrapper).toHaveClass('ams-checkbox')
   })
 
   // checked state
diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx
index f6134b391b..21813f476d 100644
--- a/packages/react/src/Checkbox/Checkbox.tsx
+++ b/packages/react/src/Checkbox/Checkbox.tsx
@@ -33,17 +33,17 @@ export const Checkbox = forwardRef(
     return (
       // This div is here because NVDA doesn't match the input to the label
       // without a containing element
-      <div className={clsx('amsterdam-checkbox', className)}>
+      <div className={clsx('ams-checkbox', className)}>
         <input
           {...restProps}
           type="checkbox"
-          className="amsterdam-checkbox__input"
+          className="ams-checkbox__input"
           ref={innerRef}
           id={id}
           aria-invalid={invalid || undefined}
         />
-        <label className="amsterdam-checkbox__label" htmlFor={id}>
-          <span className="amsterdam-checkbox__checkmark" />
+        <label className="ams-checkbox__label" htmlFor={id}>
+          <span className="ams-checkbox__checkmark" />
           {children}
         </label>
       </div>
diff --git a/packages/react/src/Column/Column.test.tsx b/packages/react/src/Column/Column.test.tsx
index 3b3c3371ee..a4823ac292 100644
--- a/packages/react/src/Column/Column.test.tsx
+++ b/packages/react/src/Column/Column.test.tsx
@@ -18,7 +18,7 @@ describe('Column', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-column--medium')
+    expect(component).toHaveClass('ams-column--medium')
   })
 
   columnGapSizes.map((size) =>
@@ -27,7 +27,7 @@ describe('Column', () => {
 
       const component = container.querySelector(':only-child')
 
-      expect(component).toHaveClass(`amsterdam-column--${size}`)
+      expect(component).toHaveClass(`ams-column--${size}`)
     }),
   )
 
@@ -36,7 +36,7 @@ describe('Column', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-column--medium extra')
+    expect(component).toHaveClass('ams-column--medium extra')
   })
 
   it('renders with an article tag', () => {
diff --git a/packages/react/src/Column/Column.tsx b/packages/react/src/Column/Column.tsx
index 98155e3fa9..b6f9db7f43 100644
--- a/packages/react/src/Column/Column.tsx
+++ b/packages/react/src/Column/Column.tsx
@@ -24,7 +24,7 @@ export const Column = forwardRef(
     { as: Tag = 'div', children, className, gap = 'medium', ...restProps }: ColumnProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
-    <Tag {...restProps} ref={ref} className={clsx('amsterdam-column', `amsterdam-column--${gap}`, className)}>
+    <Tag {...restProps} ref={ref} className={clsx('ams-column', `ams-column--${gap}`, className)}>
       {children}
     </Tag>
   ),
diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx
index fdd20d4d87..3f827e2697 100644
--- a/packages/react/src/Dialog/Dialog.test.tsx
+++ b/packages/react/src/Dialog/Dialog.test.tsx
@@ -18,7 +18,7 @@ describe('Dialog', () => {
 
     const component = screen.getByRole('dialog', { hidden: true })
 
-    expect(component).toHaveClass('amsterdam-dialog')
+    expect(component).toHaveClass('ams-dialog')
   })
 
   it('renders an additional class name', () => {
@@ -28,7 +28,7 @@ describe('Dialog', () => {
 
     expect(component).toHaveClass('extra')
 
-    expect(component).toHaveClass('amsterdam-dialog')
+    expect(component).toHaveClass('ams-dialog')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index be6a2d1023..abaaa1e936 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -14,14 +14,14 @@ export type DialogProps = {
 
 export const Dialog = forwardRef(
   ({ children, className, title, actions, ...restProps }: DialogProps, ref: ForwardedRef<HTMLDialogElement>) => (
-    <dialog {...restProps} ref={ref} className={clsx('amsterdam-dialog', className)}>
-      <form method="dialog" className="amsterdam-dialog__form">
-        <header className="amsterdam-dialog__header">
-          <span className="amsterdam-dialog__title">{title}</span>
+    <dialog {...restProps} ref={ref} className={clsx('ams-dialog', className)}>
+      <form method="dialog" className="ams-dialog__form">
+        <header className="ams-dialog__header">
+          <span className="ams-dialog__title">{title}</span>
           <IconButton label="Sluiten" formNoValidate />
         </header>
-        <article className="amsterdam-dialog__article">{children}</article>
-        {actions && <footer className="amsterdam-dialog__footer">{actions}</footer>}
+        <article className="ams-dialog__article">{children}</article>
+        {actions && <footer className="ams-dialog__footer">{actions}</footer>}
       </form>
     </dialog>
   ),
diff --git a/packages/react/src/Fieldset/Fieldset.test.tsx b/packages/react/src/Fieldset/Fieldset.test.tsx
index ff5ad29574..bb07860e57 100644
--- a/packages/react/src/Fieldset/Fieldset.test.tsx
+++ b/packages/react/src/Fieldset/Fieldset.test.tsx
@@ -18,7 +18,7 @@ describe('Fieldset', () => {
 
     const component = screen.getByRole('group', { name: 'Test' })
 
-    expect(component).toHaveClass('amsterdam-fieldset')
+    expect(component).toHaveClass('ams-fieldset')
   })
 
   it('renders an additional class name', () => {
@@ -26,7 +26,7 @@ describe('Fieldset', () => {
 
     const component = screen.getByRole('group', { name: 'Test' })
 
-    expect(component).toHaveClass('amsterdam-fieldset extra')
+    expect(component).toHaveClass('ams-fieldset extra')
   })
 
   it('renders the correct legend class name', () => {
@@ -34,7 +34,7 @@ describe('Fieldset', () => {
 
     const component = container.querySelector('legend')
 
-    expect(component).toHaveClass('amsterdam-fieldset__legend')
+    expect(component).toHaveClass('ams-fieldset__legend')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Fieldset/Fieldset.tsx b/packages/react/src/Fieldset/Fieldset.tsx
index 8df184518c..810b3ba440 100644
--- a/packages/react/src/Fieldset/Fieldset.tsx
+++ b/packages/react/src/Fieldset/Fieldset.tsx
@@ -13,8 +13,8 @@ export type FieldsetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement
 
 export const Fieldset = forwardRef(
   ({ children, className, legend, ...restProps }: FieldsetProps, ref: ForwardedRef<HTMLFieldSetElement>) => (
-    <fieldset {...restProps} ref={ref} className={clsx('amsterdam-fieldset', className)}>
-      <legend className="amsterdam-fieldset__legend">{legend}</legend>
+    <fieldset {...restProps} ref={ref} className={clsx('ams-fieldset', className)}>
+      <legend className="ams-fieldset__legend">{legend}</legend>
       {children}
     </fieldset>
   ),
diff --git a/packages/react/src/Footer/Footer.test.tsx b/packages/react/src/Footer/Footer.test.tsx
index 33a649b062..773da0c4ea 100644
--- a/packages/react/src/Footer/Footer.test.tsx
+++ b/packages/react/src/Footer/Footer.test.tsx
@@ -18,7 +18,7 @@ describe('Footer', () => {
 
     const component = screen.getByRole('contentinfo')
 
-    expect(component).toHaveClass('amsterdam-footer')
+    expect(component).toHaveClass('ams-footer')
   })
 
   it('renders an additional class name', () => {
@@ -26,7 +26,7 @@ describe('Footer', () => {
 
     const component = screen.getByRole('contentinfo')
 
-    expect(component).toHaveClass('amsterdam-footer extra')
+    expect(component).toHaveClass('ams-footer extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Footer/Footer.tsx b/packages/react/src/Footer/Footer.tsx
index d94e069cc7..fb9d933609 100644
--- a/packages/react/src/Footer/Footer.tsx
+++ b/packages/react/src/Footer/Footer.tsx
@@ -18,7 +18,7 @@ type FooterComponent = {
 
 export const Footer = forwardRef(
   ({ children, className, ...restProps }: FooterProps, ref: ForwardedRef<HTMLElement>) => (
-    <footer {...restProps} ref={ref} className={clsx('amsterdam-footer', className)}>
+    <footer {...restProps} ref={ref} className={clsx('ams-footer', className)}>
       {children}
     </footer>
   ),
diff --git a/packages/react/src/Footer/FooterBottom.test.tsx b/packages/react/src/Footer/FooterBottom.test.tsx
index 56c136cdb9..872a69ea50 100644
--- a/packages/react/src/Footer/FooterBottom.test.tsx
+++ b/packages/react/src/Footer/FooterBottom.test.tsx
@@ -18,7 +18,7 @@ describe('Footer bottom', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-footer__bottom')
+    expect(component).toHaveClass('ams-footer__bottom')
   })
 
   it('renders an additional class name', () => {
@@ -26,7 +26,7 @@ describe('Footer bottom', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-footer__bottom extra')
+    expect(component).toHaveClass('ams-footer__bottom extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Footer/FooterBottom.tsx b/packages/react/src/Footer/FooterBottom.tsx
index 6e0de022b3..981ff40de8 100644
--- a/packages/react/src/Footer/FooterBottom.tsx
+++ b/packages/react/src/Footer/FooterBottom.tsx
@@ -11,7 +11,7 @@ export type FooterBottomProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>
 
 export const FooterBottom = forwardRef(
   ({ children, className, ...restProps }: FooterBottomProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div {...restProps} ref={ref} className={clsx('amsterdam-footer__bottom', className)}>
+    <div {...restProps} ref={ref} className={clsx('ams-footer__bottom', className)}>
       {children}
     </div>
   ),
diff --git a/packages/react/src/Footer/FooterTop.test.tsx b/packages/react/src/Footer/FooterTop.test.tsx
index e03389be10..20e61d1c4e 100644
--- a/packages/react/src/Footer/FooterTop.test.tsx
+++ b/packages/react/src/Footer/FooterTop.test.tsx
@@ -18,7 +18,7 @@ describe('Footer top', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-footer__top')
+    expect(component).toHaveClass('ams-footer__top')
   })
 
   it('renders an additional class name', () => {
@@ -26,7 +26,7 @@ describe('Footer top', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-footer__top extra')
+    expect(component).toHaveClass('ams-footer__top extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Footer/FooterTop.tsx b/packages/react/src/Footer/FooterTop.tsx
index d577af9632..18a71a3e65 100644
--- a/packages/react/src/Footer/FooterTop.tsx
+++ b/packages/react/src/Footer/FooterTop.tsx
@@ -12,7 +12,7 @@ export type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 export const FooterTop = forwardRef(
   ({ children, className, ...restProps }: FooterTopProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <Spotlight {...restProps} color="dark-blue" ref={ref} className={clsx('amsterdam-footer__top', className)}>
+    <Spotlight {...restProps} color="dark-blue" ref={ref} className={clsx('ams-footer__top', className)}>
       {children}
     </Spotlight>
   ),
diff --git a/packages/react/src/FormLabel/FormLabel.test.tsx b/packages/react/src/FormLabel/FormLabel.test.tsx
index d6a9527ab6..3b6fa3a86e 100644
--- a/packages/react/src/FormLabel/FormLabel.test.tsx
+++ b/packages/react/src/FormLabel/FormLabel.test.tsx
@@ -26,7 +26,7 @@ describe('Form label', () => {
 
     const label = container.querySelector(':only-child')
 
-    expect(label).toHaveClass('amsterdam-form-label')
+    expect(label).toHaveClass('ams-form-label')
   })
 
   it('renders rich text content', () => {
@@ -74,7 +74,7 @@ describe('Form label', () => {
 
     expect(label).toHaveClass('large')
 
-    expect(label).toHaveClass('amsterdam-form-label')
+    expect(label).toHaveClass('ams-form-label')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/FormLabel/FormLabel.tsx b/packages/react/src/FormLabel/FormLabel.tsx
index c914531baa..601b74ec6a 100644
--- a/packages/react/src/FormLabel/FormLabel.tsx
+++ b/packages/react/src/FormLabel/FormLabel.tsx
@@ -13,7 +13,7 @@ export const FormLabel = forwardRef(
     { children, className, ...restProps }: PropsWithChildren<LabelHTMLAttributes<HTMLLabelElement>>,
     ref: ForwardedRef<HTMLLabelElement>,
   ) => (
-    <label {...restProps} ref={ref} className={clsx('amsterdam-form-label', className)}>
+    <label {...restProps} ref={ref} className={clsx('ams-form-label', className)}>
       {children}
     </label>
   ),
diff --git a/packages/react/src/Grid/Grid.test.tsx b/packages/react/src/Grid/Grid.test.tsx
index f59d1f4771..ca916c8ec8 100644
--- a/packages/react/src/Grid/Grid.test.tsx
+++ b/packages/react/src/Grid/Grid.test.tsx
@@ -22,7 +22,7 @@ describe('Grid', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-grid')
+    expect(component).toHaveClass('ams-grid')
   })
 
   it('renders an additional class name', () => {
@@ -32,7 +32,7 @@ describe('Grid', () => {
 
     expect(component).toHaveClass('extra')
 
-    expect(component).toHaveClass('amsterdam-grid')
+    expect(component).toHaveClass('ams-grid')
   })
 
   it('renders the correct class name for a zero gap', () => {
@@ -40,7 +40,7 @@ describe('Grid', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-grid--gap-vertical--none')
+    expect(component).toHaveClass('ams-grid--gap-vertical--none')
   })
 
   it(`renders the correct class name for a small gap`, () => {
@@ -48,7 +48,7 @@ describe('Grid', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-grid--gap-vertical--small')
+    expect(component).toHaveClass('ams-grid--gap-vertical--small')
   })
 
   it(`renders the correct class name for a large gap`, () => {
@@ -56,7 +56,7 @@ describe('Grid', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-grid--gap-vertical--large')
+    expect(component).toHaveClass('ams-grid--gap-vertical--large')
   })
 
   paddingSizes.forEach((size) => {
@@ -65,7 +65,7 @@ describe('Grid', () => {
 
       const component = container.querySelector(':only-child')
 
-      expect(component).toHaveClass(`amsterdam-grid--padding-bottom--${size}`)
+      expect(component).toHaveClass(`ams-grid--padding-bottom--${size}`)
     })
   })
 
@@ -75,7 +75,7 @@ describe('Grid', () => {
 
       const component = container.querySelector(':only-child')
 
-      expect(component).toHaveClass(`amsterdam-grid--padding-top--${size}`)
+      expect(component).toHaveClass(`ams-grid--padding-top--${size}`)
     })
   })
 
@@ -85,7 +85,7 @@ describe('Grid', () => {
 
       const component = container.querySelector(':only-child')
 
-      expect(component).toHaveClass(`amsterdam-grid--padding-vertical--${size}`)
+      expect(component).toHaveClass(`ams-grid--padding-vertical--${size}`)
     })
   })
 
diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
index 0bd9ba9e17..c9bff7ecfc 100644
--- a/packages/react/src/Grid/Grid.tsx
+++ b/packages/react/src/Grid/Grid.tsx
@@ -47,15 +47,15 @@ const paddingClasses = (
   const classes = [] as string[]
 
   if (paddingVertical) {
-    return [`amsterdam-grid--padding-vertical--${paddingVertical}`]
+    return [`ams-grid--padding-vertical--${paddingVertical}`]
   }
 
   if (paddingBottom) {
-    classes.push(`amsterdam-grid--padding-bottom--${paddingBottom}`)
+    classes.push(`ams-grid--padding-bottom--${paddingBottom}`)
   }
 
   if (paddingTop) {
-    classes.push(`amsterdam-grid--padding-top--${paddingTop}`)
+    classes.push(`ams-grid--padding-top--${paddingTop}`)
   }
 
   return classes
@@ -74,8 +74,8 @@ export const Grid = forwardRef(
       {...restProps}
       ref={ref}
       className={clsx(
-        'amsterdam-grid',
-        gapVertical && `amsterdam-grid--gap-vertical--${gapVertical}`,
+        'ams-grid',
+        gapVertical && `ams-grid--gap-vertical--${gapVertical}`,
         paddingClasses(paddingBottom, paddingTop, paddingVertical),
         className,
       )}
diff --git a/packages/react/src/Grid/GridCell.test.tsx b/packages/react/src/Grid/GridCell.test.tsx
index ccaf0b9972..cc68321449 100644
--- a/packages/react/src/Grid/GridCell.test.tsx
+++ b/packages/react/src/Grid/GridCell.test.tsx
@@ -14,13 +14,13 @@ describe('Grid cell', () => {
   it('renders a design system BEM class name', () => {
     const { container } = render(<Grid.Cell />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid__cell')
+    expect(component).toHaveClass('ams-grid__cell')
   })
 
   it('renders an additional class name', () => {
     const { container } = render(<Grid.Cell className="extra" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid__cell extra')
+    expect(component).toHaveClass('ams-grid__cell extra')
   })
 
   it('supports ForwardRef in React', () => {
@@ -32,8 +32,8 @@ describe('Grid cell', () => {
 
   it('renders no class names for undefined values for start and span', () => {
     const { container } = render(<Grid.Cell />)
-    const elementWithSpanClass = container.querySelector('[class*="amsterdam-grid__cell--span"]')
-    const elementWithStartClass = container.querySelector('[class*="amsterdam-grid__cell--start"]')
+    const elementWithSpanClass = container.querySelector('[class*="ams-grid__cell--span"]')
+    const elementWithStartClass = container.querySelector('[class*="ams-grid__cell--start"]')
     expect(elementWithSpanClass).not.toBeInTheDocument()
     expect(elementWithStartClass).not.toBeInTheDocument()
   })
@@ -41,26 +41,26 @@ describe('Grid cell', () => {
   it('renders class names for single number values for start and span', () => {
     const { container } = render(<Grid.Cell span={4} start={2} />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid__cell--span-4 amsterdam-grid__cell--start-2')
+    expect(component).toHaveClass('ams-grid__cell--span-4 ams-grid__cell--start-2')
   })
 
   it('renders class names for a single number value for start', () => {
     const { container } = render(<Grid.Cell span={8} />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid__cell--span-8')
+    expect(component).toHaveClass('ams-grid__cell--span-8')
   })
 
   it('renders class names for a single number value for span', () => {
     const { container } = render(<Grid.Cell start={6} />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid__cell--start-6')
+    expect(component).toHaveClass('ams-grid__cell--start-6')
   })
 
   it('renders class names for a single number for span and array values for start', () => {
     const { container } = render(<Grid.Cell span={8} start={{ narrow: 2, medium: 4, wide: 6 }} />)
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass(
-      'amsterdam-grid__cell--span-8 amsterdam-grid__cell--start-2 amsterdam-grid__cell--start-4-medium amsterdam-grid__cell--start-6-wide',
+      'ams-grid__cell--span-8 ams-grid__cell--start-2 ams-grid__cell--start-4-medium ams-grid__cell--start-6-wide',
     )
   })
 
@@ -68,7 +68,7 @@ describe('Grid cell', () => {
     const { container } = render(<Grid.Cell span={{ narrow: 3, medium: 5, wide: 7 }} start={2} />)
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass(
-      'amsterdam-grid__cell--span-3 amsterdam-grid__cell--span-5-medium amsterdam-grid__cell--span-7-wide amsterdam-grid__cell--start-2',
+      'ams-grid__cell--span-3 ams-grid__cell--span-5-medium ams-grid__cell--span-7-wide ams-grid__cell--start-2',
     )
   })
 
@@ -78,14 +78,14 @@ describe('Grid cell', () => {
     )
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass(
-      'amsterdam-grid__cell--span-2 amsterdam-grid__cell--span-4-medium amsterdam-grid__cell--span-6-wide amsterdam-grid__cell--start-1 amsterdam-grid__cell--start-3-medium amsterdam-grid__cell--start-5-wide',
+      'ams-grid__cell--span-2 ams-grid__cell--span-4-medium ams-grid__cell--span-6-wide ams-grid__cell--start-1 ams-grid__cell--start-3-medium ams-grid__cell--start-5-wide',
     )
   })
 
   it('renders the correct class name for the “all” value of span', () => {
     const { container } = render(<Grid.Cell span="all" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid__cell--span-all')
+    expect(component).toHaveClass('ams-grid__cell--span-all')
   })
 
   it('renders a custom tag', () => {
diff --git a/packages/react/src/Grid/GridCell.tsx b/packages/react/src/Grid/GridCell.tsx
index c4927ca5f8..ecade6d998 100644
--- a/packages/react/src/Grid/GridCell.tsx
+++ b/packages/react/src/Grid/GridCell.tsx
@@ -31,7 +31,7 @@ export const GridCell = forwardRef(
     { as: Tag = 'div', children, className, span, start, ...restProps }: GridCellProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
-    <Tag {...restProps} ref={ref} className={clsx('amsterdam-grid__cell', gridCellClasses(span, start), className)}>
+    <Tag {...restProps} ref={ref} className={clsx('ams-grid__cell', gridCellClasses(span, start), className)}>
       {children}
     </Tag>
   ),
diff --git a/packages/react/src/Grid/gridCellClasses.ts b/packages/react/src/Grid/gridCellClasses.ts
index 12811087ae..97de65d7f0 100644
--- a/packages/react/src/Grid/gridCellClasses.ts
+++ b/packages/react/src/Grid/gridCellClasses.ts
@@ -13,24 +13,24 @@ export const gridCellClasses = (span?: GridCellProps['span'], start?: GridCellPr
   const classes = [] as string[]
 
   if (span === 'all' || typeof span === 'number') {
-    classes.push(`amsterdam-grid__cell--span-${span}`)
+    classes.push(`ams-grid__cell--span-${span}`)
   } else if (span) {
     const { narrow, medium, wide } = span
     classes.push(
-      `amsterdam-grid__cell--span-${narrow}`,
-      `amsterdam-grid__cell--span-${medium}-medium`,
-      `amsterdam-grid__cell--span-${wide}-wide`,
+      `ams-grid__cell--span-${narrow}`,
+      `ams-grid__cell--span-${medium}-medium`,
+      `ams-grid__cell--span-${wide}-wide`,
     )
   }
 
   if (typeof start === 'number') {
-    classes.push(`amsterdam-grid__cell--start-${start}`)
+    classes.push(`ams-grid__cell--start-${start}`)
   } else if (start) {
     const { narrow, medium, wide } = start
     classes.push(
-      `amsterdam-grid__cell--start-${narrow}`,
-      `amsterdam-grid__cell--start-${medium}-medium`,
-      `amsterdam-grid__cell--start-${wide}-wide`,
+      `ams-grid__cell--start-${narrow}`,
+      `ams-grid__cell--start-${medium}-medium`,
+      `ams-grid__cell--start-${wide}-wide`,
     )
   }
 
diff --git a/packages/react/src/Header/Header.test.tsx b/packages/react/src/Header/Header.test.tsx
index 2c3a3dfac4..c2e40c5f68 100644
--- a/packages/react/src/Header/Header.test.tsx
+++ b/packages/react/src/Header/Header.test.tsx
@@ -18,7 +18,7 @@ describe('Header', () => {
 
     const component = screen.getByRole('banner')
 
-    expect(component).toHaveClass('amsterdam-header')
+    expect(component).toHaveClass('ams-header')
   })
 
   it('renders an additional class name', () => {
@@ -27,7 +27,7 @@ describe('Header', () => {
     const component = screen.getByRole('banner')
 
     expect(component).toHaveClass('extra')
-    expect(component).toHaveClass('amsterdam-header')
+    expect(component).toHaveClass('ams-header')
   })
 
   it('supports ForwardRef in React', () => {
@@ -59,7 +59,7 @@ describe('Header', () => {
   it('renders with links', () => {
     const { container } = render(<Header links={<div>Menu Content</div>} />)
 
-    const menu = container.querySelector('.amsterdam-header__links')
+    const menu = container.querySelector('.ams-header__links')
 
     expect(menu).toBeInTheDocument()
     expect(menu).toHaveTextContent('Menu Content')
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index ac44555b0e..c902e81f81 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -36,16 +36,16 @@ export const Header = forwardRef(
   ) => {
     return (
       <>
-        <header {...restProps} ref={ref} className={clsx('amsterdam-header', className)}>
-          <a href={logoLink} className="amsterdam-header__logo-link">
+        <header {...restProps} ref={ref} className={clsx('ams-header', className)}>
+          <a href={logoLink} className="ams-header__logo-link">
             <VisuallyHidden>{logoLinkTitle}</VisuallyHidden>
             <Logo brand={logoBrand} />
           </a>
-          {links && <div className="amsterdam-header__links">{links}</div>}
-          {menu && <div className="amsterdam-header__menu">{menu}</div>}
+          {links && <div className="ams-header__links">{links}</div>}
+          {menu && <div className="ams-header__menu">{menu}</div>}
           {title && (
-            <div className="amsterdam-header__title">
-              <Heading level={1} size="level-3" className="amsterdam-header__title-heading">
+            <div className="ams-header__title">
+              <Heading level={1} size="level-3" className="ams-header__title-heading">
                 {title}
               </Heading>
             </div>
diff --git a/packages/react/src/Heading/Heading.test.tsx b/packages/react/src/Heading/Heading.test.tsx
index 85299ada96..41cb78769f 100644
--- a/packages/react/src/Heading/Heading.test.tsx
+++ b/packages/react/src/Heading/Heading.test.tsx
@@ -96,12 +96,12 @@ describe('Heading', () => {
       level: 1,
     })
 
-    expect(sizeLevel1).toHaveClass('amsterdam-heading--1')
-    expect(sizeLevel2).toHaveClass('amsterdam-heading--2')
-    expect(sizeLevel3).toHaveClass('amsterdam-heading--3')
-    expect(sizeLevel4).toHaveClass('amsterdam-heading--4')
-    expect(sizeLevel5).toHaveClass('amsterdam-heading--5')
-    expect(sizeLevel6).toHaveClass('amsterdam-heading--6')
+    expect(sizeLevel1).toHaveClass('ams-heading--1')
+    expect(sizeLevel2).toHaveClass('ams-heading--2')
+    expect(sizeLevel3).toHaveClass('ams-heading--3')
+    expect(sizeLevel4).toHaveClass('ams-heading--4')
+    expect(sizeLevel5).toHaveClass('ams-heading--5')
+    expect(sizeLevel6).toHaveClass('ams-heading--6')
   })
 
   it('renders the right inverse color class', () => {
@@ -109,7 +109,7 @@ describe('Heading', () => {
 
     const heading = screen.getByRole('heading', { name: 'Heading' })
 
-    expect(heading).toHaveClass('amsterdam-heading--inverse-color')
+    expect(heading).toHaveClass('ams-heading--inverse-color')
   })
 
   it('renders rich text content', () => {
@@ -134,7 +134,7 @@ describe('Heading', () => {
     const heading = container.querySelector(':only-child')
 
     expect(heading).toHaveClass('large')
-    expect(heading).toHaveClass('amsterdam-heading')
+    expect(heading).toHaveClass('ams-heading')
   })
 
   it('is able to pass a React ref', () => {
diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
index fdaf4a8f03..f22914038c 100644
--- a/packages/react/src/Heading/Heading.tsx
+++ b/packages/react/src/Heading/Heading.tsx
@@ -53,9 +53,9 @@ export const Heading = forwardRef(
       <HeadingX
         ref={ref}
         className={clsx(
-          'amsterdam-heading',
-          `amsterdam-heading--${sizeOrLevel}`,
-          inverseColor && 'amsterdam-heading--inverse-color',
+          'ams-heading',
+          `ams-heading--${sizeOrLevel}`,
+          inverseColor && 'ams-heading--inverse-color',
           className,
         )}
         {...restProps}
diff --git a/packages/react/src/Icon/Icon.test.tsx b/packages/react/src/Icon/Icon.test.tsx
index fb7b3e5b35..9b45bf22be 100644
--- a/packages/react/src/Icon/Icon.test.tsx
+++ b/packages/react/src/Icon/Icon.test.tsx
@@ -18,7 +18,7 @@ describe('Icon', () => {
 
     const icon = container.querySelector(':only-child')
 
-    expect(icon).toHaveClass('amsterdam-icon')
+    expect(icon).toHaveClass('ams-icon')
   })
 
   it('renders an svg child', () => {
@@ -35,10 +35,10 @@ describe('Icon', () => {
     const { container: level5 } = render(<Icon svg={AlertIcon} size="level-5" />)
     const { container: level6 } = render(<Icon svg={AlertIcon} size="level-6" />)
 
-    expect(level3.firstChild).toHaveClass('amsterdam-icon--size-3')
-    expect(level4.firstChild).toHaveClass('amsterdam-icon--size-4')
-    expect(level5.firstChild).toHaveClass('amsterdam-icon--size-5')
-    expect(level6.firstChild).toHaveClass('amsterdam-icon--size-6')
+    expect(level3.firstChild).toHaveClass('ams-icon--size-3')
+    expect(level4.firstChild).toHaveClass('ams-icon--size-4')
+    expect(level5.firstChild).toHaveClass('ams-icon--size-5')
+    expect(level6.firstChild).toHaveClass('ams-icon--size-6')
   })
 
   it('renders the right square class', () => {
@@ -46,7 +46,7 @@ describe('Icon', () => {
 
     const icon = container.querySelector('span:only-child')
 
-    expect(icon).toHaveClass('amsterdam-icon--square')
+    expect(icon).toHaveClass('ams-icon--square')
   })
 
   it('renders an additional class name', () => {
@@ -55,7 +55,7 @@ describe('Icon', () => {
     const icon = container.querySelector(':only-child')
 
     expect(icon).toHaveClass('large')
-    expect(icon).toHaveClass('amsterdam-icon')
+    expect(icon).toHaveClass('ams-icon')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Icon/Icon.tsx b/packages/react/src/Icon/Icon.tsx
index 01cc7a718e..f385447cf0 100644
--- a/packages/react/src/Icon/Icon.tsx
+++ b/packages/react/src/Icon/Icon.tsx
@@ -20,12 +20,12 @@ export const Icon = forwardRef(
     <span
       ref={ref}
       className={clsx(
-        'amsterdam-icon',
-        size === 'level-3' && 'amsterdam-icon--size-3',
-        size === 'level-4' && 'amsterdam-icon--size-4',
-        size === 'level-5' && 'amsterdam-icon--size-5',
-        size === 'level-6' && 'amsterdam-icon--size-6',
-        square && 'amsterdam-icon--square',
+        'ams-icon',
+        size === 'level-3' && 'ams-icon--size-3',
+        size === 'level-4' && 'ams-icon--size-4',
+        size === 'level-5' && 'ams-icon--size-5',
+        size === 'level-6' && 'ams-icon--size-6',
+        square && 'ams-icon--square',
         className,
       )}
       {...otherProps}
diff --git a/packages/react/src/IconButton/IconButton.test.tsx b/packages/react/src/IconButton/IconButton.test.tsx
index e5129c7b07..2e8be603a4 100644
--- a/packages/react/src/IconButton/IconButton.test.tsx
+++ b/packages/react/src/IconButton/IconButton.test.tsx
@@ -18,7 +18,7 @@ describe('Icon button', () => {
 
     const component = screen.getByRole('button')
 
-    expect(component).toHaveClass('amsterdam-icon-button')
+    expect(component).toHaveClass('ams-icon-button')
   })
 
   it('renders an additional class name', () => {
@@ -26,7 +26,7 @@ describe('Icon button', () => {
 
     const component = screen.getByRole('button')
 
-    expect(component).toHaveClass('amsterdam-icon-button extra')
+    expect(component).toHaveClass('ams-icon-button extra')
   })
 
   it('renders an accessible label', () => {
@@ -42,7 +42,7 @@ describe('Icon button', () => {
 
     const component = screen.getByRole('button')
 
-    expect(component).toHaveClass('amsterdam-icon-button--on-background-light')
+    expect(component).toHaveClass('ams-icon-button--on-background-light')
   })
 
   it('renders the right on background dark class', () => {
@@ -50,7 +50,7 @@ describe('Icon button', () => {
 
     const component = screen.getByRole('button')
 
-    expect(component).toHaveClass('amsterdam-icon-button--on-background-dark')
+    expect(component).toHaveClass('ams-icon-button--on-background-dark')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/IconButton/IconButton.tsx b/packages/react/src/IconButton/IconButton.tsx
index c798136a30..ba4e483f27 100644
--- a/packages/react/src/IconButton/IconButton.tsx
+++ b/packages/react/src/IconButton/IconButton.tsx
@@ -26,9 +26,9 @@ export const IconButton = forwardRef(
       {...restProps}
       ref={ref}
       className={clsx(
-        'amsterdam-icon-button',
-        onBackground === 'light' && 'amsterdam-icon-button--on-background-light',
-        onBackground === 'dark' && 'amsterdam-icon-button--on-background-dark',
+        'ams-icon-button',
+        onBackground === 'light' && 'ams-icon-button--on-background-light',
+        onBackground === 'dark' && 'ams-icon-button--on-background-dark',
         className,
       )}
     >
diff --git a/packages/react/src/Image/Image.test.tsx b/packages/react/src/Image/Image.test.tsx
index 6f07a7932f..77184015f7 100644
--- a/packages/react/src/Image/Image.test.tsx
+++ b/packages/react/src/Image/Image.test.tsx
@@ -14,14 +14,14 @@ describe('Image', () => {
   it('renders a design system BEM class name', () => {
     const { container } = render(<Image />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-image')
+    expect(component).toHaveClass('ams-image')
   })
 
   it('renders an additional class name', () => {
     const { container } = render(<Image className="extra" />)
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass('extra')
-    expect(component).toHaveClass('amsterdam-image')
+    expect(component).toHaveClass('ams-image')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Image/Image.tsx b/packages/react/src/Image/Image.tsx
index 2f323eabf7..e094ab83e7 100644
--- a/packages/react/src/Image/Image.tsx
+++ b/packages/react/src/Image/Image.tsx
@@ -13,7 +13,7 @@ export type ImageProps = {
 
 export const Image = forwardRef(
   ({ className, cover = false, ...restProps }: ImageProps, ref: ForwardedRef<HTMLImageElement>) => (
-    <img {...restProps} ref={ref} className={clsx('amsterdam-image', cover && 'amsterdam-image--cover', className)} />
+    <img {...restProps} ref={ref} className={clsx('ams-image', cover && 'ams-image--cover', className)} />
   ),
 )
 
diff --git a/packages/react/src/Link/Link.test.tsx b/packages/react/src/Link/Link.test.tsx
index ecf5bdfa4a..296838ae23 100644
--- a/packages/react/src/Link/Link.test.tsx
+++ b/packages/react/src/Link/Link.test.tsx
@@ -15,7 +15,7 @@ describe('Link', () => {
   it('renders standalone variant', () => {
     const { container } = render(<Link href="#">{linktext}</Link>)
     const link = container.querySelector('a:only-child')
-    expect(link).toHaveClass('amsterdam-link')
+    expect(link).toHaveClass('ams-link')
   })
 
   it('renders inline variant', () => {
@@ -25,7 +25,7 @@ describe('Link', () => {
       </Link>,
     )
     const link = container.querySelector('a:only-child')
-    expect(link).toHaveClass('amsterdam-link amsterdam-link--inline')
+    expect(link).toHaveClass('ams-link ams-link--inline')
   })
 
   it('renders light background color', () => {
@@ -35,7 +35,7 @@ describe('Link', () => {
       </Link>,
     )
     const link = container.querySelector('a:only-child')
-    expect(link).toHaveClass('amsterdam-link amsterdam-link--on-background-light')
+    expect(link).toHaveClass('ams-link ams-link--on-background-light')
   })
 
   it('renders dark background color', () => {
@@ -45,14 +45,14 @@ describe('Link', () => {
       </Link>,
     )
     const link = container.querySelector('a:only-child')
-    expect(link).toHaveClass('amsterdam-link amsterdam-link--on-background-dark')
+    expect(link).toHaveClass('ams-link ams-link--on-background-dark')
   })
 
   it('renders an additional class name', () => {
     const { container } = render(<Link className="large" />)
     const link = container.querySelector(':only-child')
     expect(link).toHaveClass('large')
-    expect(link).toHaveClass('amsterdam-link')
+    expect(link).toHaveClass('ams-link')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx
index 5e2a1341b3..9f2a637461 100644
--- a/packages/react/src/Link/Link.tsx
+++ b/packages/react/src/Link/Link.tsx
@@ -24,12 +24,12 @@ export const Link = forwardRef(
       {...otherProps}
       ref={ref}
       className={clsx(
-        'amsterdam-link',
+        'ams-link',
         {
-          'amsterdam-link--standalone': variant === 'standalone',
-          'amsterdam-link--inline': variant === 'inline',
-          'amsterdam-link--on-background-light': onBackground === 'light',
-          'amsterdam-link--on-background-dark': onBackground === 'dark',
+          'ams-link--standalone': variant === 'standalone',
+          'ams-link--inline': variant === 'inline',
+          'ams-link--on-background-light': onBackground === 'light',
+          'ams-link--on-background-dark': onBackground === 'dark',
         },
         className,
       )}
diff --git a/packages/react/src/LinkList/LinkList.test.tsx b/packages/react/src/LinkList/LinkList.test.tsx
index 87ae1ac04b..7c2c5d5783 100644
--- a/packages/react/src/LinkList/LinkList.test.tsx
+++ b/packages/react/src/LinkList/LinkList.test.tsx
@@ -18,7 +18,7 @@ describe('Link list', () => {
 
     const component = screen.getByRole('list')
 
-    expect(component).toHaveClass('amsterdam-link-list')
+    expect(component).toHaveClass('ams-link-list')
   })
 
   it('renders an additional class name', () => {
@@ -26,7 +26,7 @@ describe('Link list', () => {
 
     const component = screen.getByRole('list')
 
-    expect(component).toHaveClass('amsterdam-link-list extra')
+    expect(component).toHaveClass('ams-link-list extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/LinkList/LinkList.tsx b/packages/react/src/LinkList/LinkList.tsx
index 4b56a97829..07581d63e6 100644
--- a/packages/react/src/LinkList/LinkList.tsx
+++ b/packages/react/src/LinkList/LinkList.tsx
@@ -18,7 +18,7 @@ type LinkListComponent = {
 export const LinkList = forwardRef(
   ({ children, className, ...restProps }: LinkListProps, ref: ForwardedRef<HTMLUListElement>) => {
     return (
-      <ul ref={ref} className={clsx('amsterdam-link-list', className)} {...restProps}>
+      <ul ref={ref} className={clsx('ams-link-list', className)} {...restProps}>
         {children}
       </ul>
     )
diff --git a/packages/react/src/LinkList/LinkListLink.test.tsx b/packages/react/src/LinkList/LinkListLink.test.tsx
index 24407748d0..523a0325ba 100644
--- a/packages/react/src/LinkList/LinkListLink.test.tsx
+++ b/packages/react/src/LinkList/LinkListLink.test.tsx
@@ -24,7 +24,7 @@ describe('Link list link', () => {
 
     const component = screen.getByRole('link')
 
-    expect(component).toHaveClass('amsterdam-link-list__link')
+    expect(component).toHaveClass('ams-link-list__link')
   })
 
   it('renders an additional class name', () => {
@@ -32,7 +32,7 @@ describe('Link list link', () => {
 
     const component = screen.getByRole('link')
 
-    expect(component).toHaveClass('amsterdam-link-list__link extra')
+    expect(component).toHaveClass('ams-link-list__link extra')
   })
 
   it('renders a class name for the small size', () => {
@@ -40,7 +40,7 @@ describe('Link list link', () => {
 
     const component = screen.getByRole('link')
 
-    expect(component).toHaveClass('amsterdam-link-list__link--small')
+    expect(component).toHaveClass('ams-link-list__link--small')
   })
 
   it('renders a class name for the background color', () => {
@@ -48,7 +48,7 @@ describe('Link list link', () => {
 
     const component = screen.getByRole('link')
 
-    expect(component).toHaveClass('amsterdam-link-list__link--on-background-dark')
+    expect(component).toHaveClass('ams-link-list__link--on-background-dark')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/LinkList/LinkListLink.tsx b/packages/react/src/LinkList/LinkListLink.tsx
index 627da84f59..33ec0379be 100644
--- a/packages/react/src/LinkList/LinkListLink.tsx
+++ b/packages/react/src/LinkList/LinkListLink.tsx
@@ -52,9 +52,9 @@ export const LinkListLink = forwardRef(
       <li>
         <a
           className={clsx(
-            'amsterdam-link-list__link',
-            onBackground && `amsterdam-link-list__link--on-background-${onBackground}`,
-            size && `amsterdam-link-list__link--${size}`,
+            'ams-link-list__link',
+            onBackground && `ams-link-list__link--on-background-${onBackground}`,
+            size && `ams-link-list__link--${size}`,
             className,
           )}
           href={href}
diff --git a/packages/react/src/Logo/Logo.test.tsx b/packages/react/src/Logo/Logo.test.tsx
index f178a597dd..e609a2150c 100644
--- a/packages/react/src/Logo/Logo.test.tsx
+++ b/packages/react/src/Logo/Logo.test.tsx
@@ -18,7 +18,7 @@ describe('Logo', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-logo')
+    expect(component).toHaveClass('ams-logo')
   })
 
   it('renders an additional class name', () => {
@@ -28,7 +28,7 @@ describe('Logo', () => {
 
     expect(component).toHaveClass('extra')
 
-    expect(component).toHaveClass('amsterdam-logo')
+    expect(component).toHaveClass('ams-logo')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Logo/Logo.tsx b/packages/react/src/Logo/Logo.tsx
index ed8a8e8af2..efe163af87 100644
--- a/packages/react/src/Logo/Logo.tsx
+++ b/packages/react/src/Logo/Logo.tsx
@@ -43,7 +43,7 @@ export const Logo = forwardRef(
   ({ brand = 'amsterdam', className, ...restProps }: LogoProps, ref: ForwardedRef<SVGSVGElement>) => {
     const LogoComponent = logoConfig[brand]
 
-    return <LogoComponent {...restProps} ref={ref} className={clsx('amsterdam-logo', className)} />
+    return <LogoComponent {...restProps} ref={ref} className={clsx('ams-logo', className)} />
   },
 )
 
diff --git a/packages/react/src/Logo/brand/LogoAmsterdam.tsx b/packages/react/src/Logo/brand/LogoAmsterdam.tsx
index 9be9da5ed2..b1eacab71d 100644
--- a/packages/react/src/Logo/brand/LogoAmsterdam.tsx
+++ b/packages/react/src/Logo/brand/LogoAmsterdam.tsx
@@ -3,7 +3,7 @@ import type { ForwardedRef, SVGProps } from 'react'
 
 const LogoAmsterdam = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg
-    className="amsterdam-logo"
+    className="ams-logo"
     aria-hidden="true"
     focusable="false"
     ref={ref}
@@ -12,12 +12,12 @@ const LogoAmsterdam = forwardRef((props: SVGProps<SVGSVGElement>, ref: Forwarded
     {...props}
   >
     <path
-      className="amsterdam-logo__text-primary"
+      className="ams-logo__text-primary"
       fill="#EC0000"
       d="M16.435 8.581c0-3.752 2.63-6.4 6.344-6.4 1.886 0 3.466.61 4.59 1.829L25.731 5.57c-.704-.78-1.714-1.238-2.915-1.238-2.248 0-3.81 1.752-3.81 4.248 0 2.496 1.524 4.324 3.715 4.324 2 0 3.391-1.143 3.391-2.8v-.323h-2.99V7.705h5.505V9.63c0 3.162-2.457 5.39-5.981 5.39s-6.21-2.666-6.21-6.438ZM30.225 10.086c0-2.915 1.962-4.934 4.762-4.934s4.743 2 4.743 4.876c0 .229-.037.59-.076.839h-7.048C32.778 12.143 33.863 13 35.254 13c1.029 0 1.924-.381 2.514-1.067l1.428 1.391c-.857 1.106-2.343 1.696-4.057 1.696-2.895 0-4.915-2.038-4.915-4.934h.001Zm2.381-.952h4.743c-.152-1.238-1.105-2.077-2.38-2.077-1.276 0-2.229.839-2.363 2.077ZM43.902 5.382v1.275h.038c.476-.97 1.314-1.505 2.4-1.505 1.219 0 2.132.534 2.704 1.6.571-1.028 1.62-1.6 2.952-1.6 2.324 0 3.448 1.296 3.448 3.943v5.696h-2.362V9.495c0-1.543-.534-2.286-1.638-2.286-1.104 0-1.696.82-1.696 2.362v5.22h-2.362V9.495c0-1.562-.514-2.286-1.638-2.286-1.124 0-1.695.838-1.695 2.362v5.22H41.69V5.38h2.212ZM57.312 10.086c0-2.915 1.963-4.934 4.762-4.934 2.8 0 4.744 2 4.744 4.876 0 .229-.038.59-.077.839h-7.048C59.865 12.143 60.95 13 62.341 13c1.03 0 1.924-.381 2.514-1.067l1.429 1.391c-.857 1.106-2.344 1.696-4.058 1.696-2.895 0-4.915-2.038-4.915-4.934h.001Zm2.381-.952h4.743c-.152-1.238-1.105-2.077-2.38-2.077-1.276 0-2.229.839-2.363 2.077ZM68.189 10.086c0-2.915 1.962-4.934 4.762-4.934s4.743 2 4.743 4.876c0 .229-.038.59-.077.839H70.57C70.74 12.143 71.827 13 73.218 13c1.028 0 1.923-.381 2.513-1.067l1.429 1.391c-.857 1.106-2.343 1.696-4.058 1.696-2.895 0-4.915-2.038-4.915-4.934h.002Zm2.38-.952h4.744c-.153-1.238-1.105-2.077-2.381-2.077-1.276 0-2.228.839-2.362 2.077ZM81.883 5.382v1.275h.038c.438-.933 1.39-1.505 2.495-1.505 2.362 0 3.582 1.353 3.582 3.943v5.696h-2.363V9.552c0-1.6-.571-2.343-1.772-2.343-1.2 0-1.847.838-1.847 2.4v5.18h-2.362V5.382h2.23ZM91.026 11.42V7.342h-1.619V5.381h.858c.78 0 1.085-.305 1.085-1.086V2.83h2.019v2.553h2.285v1.962H93.37v4.077c0 .915.476 1.428 1.352 1.428.267 0 .59-.037.78-.095v1.981c-.285.077-.819.133-1.238.133-2.133 0-3.238-1.18-3.238-3.447l.001-.002ZM96.817 10.086c0-2.915 1.963-4.934 4.762-4.934 2.8 0 4.744 2 4.744 4.876 0 .229-.038.59-.077.839h-7.048c.172 1.276 1.257 2.133 2.648 2.133 1.029 0 1.924-.381 2.514-1.067l1.429 1.391c-.857 1.106-2.344 1.696-4.058 1.696-2.895 0-4.915-2.038-4.915-4.934h.001Zm2.381-.952h4.744c-.153-1.238-1.106-2.077-2.382-2.077-1.275 0-2.228.839-2.362 2.077ZM23.73 25.267l4.952 12.381h-2.647l-1.03-2.724H19.5l-1.028 2.724h-2.553l4.953-12.38h2.858Zm-3.486 7.6h4l-1.982-5.219h-.037l-1.981 5.22ZM32.454 28.24v1.275h.038c.476-.97 1.315-1.505 2.4-1.505 1.22 0 2.133.534 2.704 1.6.572-1.028 1.62-1.6 2.953-1.6 2.323 0 3.447 1.296 3.447 3.944v5.696h-2.362v-5.296c0-1.543-.534-2.286-1.638-2.286-1.104 0-1.695.82-1.695 2.362v5.22h-2.363v-5.296c0-1.562-.514-2.286-1.638-2.286-1.124 0-1.695.838-1.695 2.362v5.22h-2.362v-9.41h2.211ZM48.34 33.706c-1.275-.381-2.513-1.067-2.513-2.78 0-1.715 1.447-2.916 3.6-2.916 1.448 0 2.572.514 3.2 1.466l-1.351 1.353c-.477-.59-1.124-.915-1.829-.915-.8 0-1.296.362-1.296.933 0 .762.8.895 1.963 1.257 1.276.381 2.514 1.067 2.514 2.781 0 1.715-1.524 2.99-3.772 2.99-1.466 0-2.648-.514-3.334-1.486l1.353-1.352c.513.609 1.2.934 1.962.934.915 0 1.466-.381 1.466-1.01 0-.762-.8-.895-1.962-1.258v.003ZM55.122 34.277v-4.076h-1.62v-1.963h.858c.78 0 1.085-.304 1.085-1.085v-1.466h2.019v2.552h2.286v1.963h-2.286v4.076c0 .915.476 1.43 1.352 1.43.267 0 .59-.038.78-.096v1.981c-.285.077-.819.133-1.237.133-2.133 0-3.238-1.18-3.238-3.447v-.002ZM60.911 32.944c0-2.915 1.963-4.934 4.763-4.934s4.743 2 4.743 4.876c0 .228-.038.59-.077.839h-7.048c.172 1.276 1.257 2.133 2.648 2.133 1.03 0 1.924-.381 2.514-1.067l1.429 1.391c-.857 1.105-2.343 1.696-4.058 1.696-2.895 0-4.915-2.038-4.915-4.934h.001Zm2.381-.952h4.744c-.153-1.239-1.106-2.077-2.381-2.077-1.276 0-2.229.838-2.363 2.077ZM74.607 28.24V29.8h.038c.457-1.066 1.296-1.638 2.4-1.638.285 0 .685.038.838.095v2.248c-.267-.076-.78-.132-1.162-.132-1.2 0-1.98.914-1.98 2.323v4.953h-2.363v-9.41h2.23ZM78.551 32.983c0-2.915 1.924-4.972 4.648-4.972 1.257 0 2.286.553 2.934 1.562h.037V23.84h2.362v13.81h-2.228v-1.467h-.037c-.61 1.067-1.752 1.696-3.067 1.696-2.724 0-4.648-2.038-4.648-4.895l-.001-.001Zm7.62-.038c0-1.695-1.048-2.82-2.591-2.82-1.543 0-2.61 1.143-2.61 2.82 0 1.677 1.049 2.82 2.61 2.82s2.59-1.124 2.59-2.82ZM90.34 34.963c0-1.81 1.506-2.895 4.02-2.915l1.828-.019v-.304c0-1.106-.704-1.677-1.981-1.677-.838 0-1.581.323-2.095.915l-1.429-1.391c.82-1.01 2.133-1.562 3.752-1.562 2.514 0 4.114 1.371 4.114 3.562v3.733c0 .343.153.495.534.495h.172v1.847H98.15c-.895 0-1.506-.418-1.696-1.105h-.038c-.59.857-1.561 1.333-2.743 1.333-1.981 0-3.333-1.18-3.333-2.914v.002Zm5.848-.82v-.534l-1.561.02c-1.238.018-1.905.457-1.905 1.275 0 .724.571 1.238 1.37 1.238 1.239 0 2.096-.82 2.096-2v.001ZM103.312 28.24v1.275h.038c.476-.97 1.315-1.505 2.4-1.505 1.219 0 2.133.534 2.704 1.6.572-1.028 1.619-1.6 2.953-1.6 2.323 0 3.447 1.296 3.447 3.944v5.696h-2.362v-5.296c0-1.543-.534-2.286-1.638-2.286-1.104 0-1.695.82-1.695 2.362v5.22h-2.363v-5.296c0-1.562-.513-2.286-1.638-2.286-1.124 0-1.695.838-1.695 2.362v5.22h-2.362v-9.41h2.211Z"
     />
     <path
-      className="amsterdam-logo__emblem"
+      className="ams-logo__emblem"
       fill="#EC0000"
       d="m0 37.648 3.527-3.527L0 30.593l2.352-2.351 3.527 3.527 3.528-3.527 2.351 2.351-3.527 3.528 3.527 3.527L9.407 40l-3.528-3.527L2.352 40 0 37.648ZM0 23.54l3.527-3.528L0 16.485l2.352-2.352 3.527 3.528 3.528-3.528 2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.527 3.527L0 23.54ZM0 9.407l3.527-3.528L0 2.352 2.352 0l3.527 3.527L9.407 0l2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.526 3.527L0 9.407Z"
     />
diff --git a/packages/react/src/Logo/brand/LogoGgdAmsterdam.tsx b/packages/react/src/Logo/brand/LogoGgdAmsterdam.tsx
index 10b8348ce2..70d397141c 100644
--- a/packages/react/src/Logo/brand/LogoGgdAmsterdam.tsx
+++ b/packages/react/src/Logo/brand/LogoGgdAmsterdam.tsx
@@ -3,7 +3,7 @@ import type { ForwardedRef, SVGProps } from 'react'
 
 const LogoGgdAmsterdam = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg
-    className="amsterdam-logo"
+    className="ams-logo"
     aria-hidden="true"
     focusable="false"
     ref={ref}
@@ -12,17 +12,17 @@ const LogoGgdAmsterdam = forwardRef((props: SVGProps<SVGSVGElement>, ref: Forwar
     {...props}
   >
     <path
-      className="amsterdam-logo__emblem"
+      className="ams-logo__emblem"
       fill="#EC0000"
       d="m0 37.648 3.527-3.527L0 30.593l2.352-2.351 3.527 3.527 3.528-3.527 2.351 2.351-3.527 3.528 3.527 3.527L9.407 40l-3.528-3.527L2.352 40 0 37.648ZM0 23.54l3.527-3.528L0 16.485l2.352-2.352 3.527 3.528 3.528-3.528 2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.527 3.527L0 23.54ZM0 9.407l3.527-3.528L0 2.352 2.352 0l3.527 3.527L9.407 0l2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.526 3.527L0 9.407Z"
     />
     <path
-      className="amsterdam-logo__text-primary"
+      className="ams-logo__text-primary"
       fill="#EC0000"
       d="m23.73 25.267 4.952 12.381h-2.647l-1.03-2.724H19.5l-1.028 2.724h-2.553l4.953-12.381h2.858Zm-3.486 7.6h4l-1.982-5.219h-.037l-1.981 5.22ZM32.454 28.24v1.275h.038c.476-.971 1.315-1.505 2.4-1.505 1.22 0 2.133.534 2.704 1.6.572-1.028 1.62-1.6 2.953-1.6 2.323 0 3.447 1.296 3.447 3.944v5.696h-2.362v-5.296c0-1.543-.534-2.286-1.638-2.286-1.104 0-1.695.82-1.695 2.362v5.22h-2.363v-5.296c0-1.562-.514-2.286-1.638-2.286-1.124 0-1.695.838-1.695 2.362v5.22h-2.362v-9.41h2.211ZM48.34 33.706c-1.275-.381-2.513-1.067-2.513-2.78 0-1.715 1.447-2.916 3.6-2.916 1.448 0 2.572.514 3.2 1.466l-1.351 1.353c-.477-.59-1.124-.915-1.829-.915-.8 0-1.296.362-1.296.933 0 .762.8.895 1.963 1.257 1.276.381 2.514 1.067 2.514 2.781 0 1.715-1.524 2.99-3.772 2.99-1.466 0-2.648-.514-3.334-1.486l1.353-1.352c.513.609 1.2.934 1.962.934.915 0 1.466-.381 1.466-1.01 0-.762-.8-.895-1.962-1.258v.003ZM55.122 34.277v-4.076h-1.62v-1.963h.858c.78 0 1.085-.304 1.085-1.085v-1.466h2.019v2.552h2.286v1.963h-2.286v4.076c0 .915.476 1.43 1.352 1.43.267 0 .59-.038.78-.096v1.981c-.285.076-.819.133-1.237.133-2.133 0-3.238-1.18-3.238-3.447v-.002ZM60.911 32.944c0-2.915 1.963-4.934 4.763-4.934s4.743 2 4.743 4.876c0 .228-.038.59-.077.839h-7.048c.172 1.275 1.257 2.133 2.648 2.133 1.03 0 1.924-.381 2.514-1.067l1.429 1.391c-.857 1.105-2.343 1.696-4.058 1.696-2.895 0-4.915-2.038-4.915-4.934h.001Zm2.381-.953h4.744c-.153-1.238-1.106-2.076-2.381-2.076-1.276 0-2.229.838-2.363 2.076ZM74.607 28.24V29.8h.038c.457-1.066 1.296-1.638 2.4-1.638.285 0 .685.038.838.095v2.248c-.267-.076-.78-.132-1.162-.132-1.2 0-1.98.914-1.98 2.323v4.953h-2.363v-9.41h2.23ZM78.551 32.983c0-2.915 1.924-4.972 4.648-4.972 1.257 0 2.286.553 2.934 1.562h.037V23.84h2.362v13.81h-2.228v-1.467h-.037c-.61 1.067-1.752 1.696-3.067 1.696-2.724 0-4.648-2.038-4.648-4.895l-.001-.001Zm7.62-.038c0-1.695-1.048-2.82-2.591-2.82-1.543 0-2.61 1.143-2.61 2.82 0 1.677 1.049 2.82 2.61 2.82s2.59-1.124 2.59-2.82ZM90.34 34.963c0-1.81 1.506-2.895 4.02-2.915l1.828-.019v-.304c0-1.106-.704-1.677-1.981-1.677-.838 0-1.581.323-2.095.915l-1.429-1.391c.82-1.01 2.133-1.562 3.752-1.562 2.514 0 4.114 1.371 4.114 3.562v3.733c0 .343.153.495.534.495h.172v1.847H98.15c-.895 0-1.506-.418-1.696-1.105h-.038c-.59.857-1.561 1.333-2.743 1.333-1.981 0-3.333-1.18-3.333-2.915v.003Zm5.848-.82v-.534l-1.561.02c-1.238.018-1.905.457-1.905 1.275 0 .724.571 1.238 1.37 1.238 1.239 0 2.096-.82 2.096-2v.001ZM103.312 28.24v1.275h.038c.476-.971 1.315-1.505 2.4-1.505 1.219 0 2.133.534 2.704 1.6.572-1.028 1.619-1.6 2.953-1.6 2.323 0 3.447 1.296 3.447 3.944v5.696h-2.362v-5.296c0-1.543-.534-2.286-1.638-2.286-1.104 0-1.695.82-1.695 2.362v5.22h-2.363v-5.296c0-1.562-.513-2.286-1.638-2.286-1.124 0-1.695.838-1.695 2.362v5.22h-2.362v-9.41h2.211Z"
     />
     <path
-      className="amsterdam-logo__text-secondary"
+      className="ams-logo__text-secondary"
       fill="#000"
       d="M16.436 8.581c0-3.752 2.629-6.4 6.343-6.4 1.886 0 3.466.61 4.59 1.829L25.732 5.57c-.705-.78-1.715-1.238-2.915-1.238-2.248 0-3.81 1.752-3.81 4.248 0 2.496 1.524 4.324 3.714 4.324 2 0 3.392-1.143 3.392-2.8v-.323h-2.99V7.705h5.505V9.63c0 3.162-2.458 5.39-5.982 5.39s-6.21-2.666-6.21-6.438ZM30.34 8.581c0-3.752 2.63-6.4 6.344-6.4 1.886 0 3.467.61 4.59 1.829L39.638 5.57c-.705-.78-1.715-1.238-2.915-1.238-2.248 0-3.81 1.752-3.81 4.248 0 2.496 1.524 4.324 3.715 4.324 2 0 3.39-1.143 3.39-2.8v-.323h-2.99V7.705h5.506V9.63c0 3.162-2.458 5.39-5.982 5.39s-6.21-2.666-6.21-6.438ZM44.836 2.41h4.61c3.809 0 6.343 2.476 6.343 6.19 0 3.714-2.59 6.19-6.363 6.19h-4.59V2.41Zm4.419 10.229c2.38 0 3.942-1.543 3.942-4.02 0-2.475-1.524-4.057-3.923-4.057H47.35v8.077h1.905Z"
     />
diff --git a/packages/react/src/Logo/brand/LogoMuseumWeesp.tsx b/packages/react/src/Logo/brand/LogoMuseumWeesp.tsx
index caefa90333..2e76c117f9 100644
--- a/packages/react/src/Logo/brand/LogoMuseumWeesp.tsx
+++ b/packages/react/src/Logo/brand/LogoMuseumWeesp.tsx
@@ -3,7 +3,7 @@ import type { ForwardedRef, SVGProps } from 'react'
 
 const LogoMuseumWeesp = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg
-    className="amsterdam-logo"
+    className="ams-logo"
     aria-hidden="true"
     focusable="false"
     ref={ref}
@@ -13,27 +13,27 @@ const LogoMuseumWeesp = forwardRef((props: SVGProps<SVGSVGElement>, ref: Forward
     {...props}
   >
     <path
-      className="amsterdam-logo__text-secondary"
+      className="ams-logo__text-secondary"
       d="M18.085 30.527H20.669L23.051 35.26H23.08L25.46 30.527H28.045V39.964H26.187V32.69H26.157L23.82 37.336H22.31L19.973 32.69H19.943V39.964H18.085V30.527ZM29.976 37.133V32.792H31.776V36.799C31.776 38.004 32.197 38.57 33.068 38.57C33.954 38.57 34.448 37.917 34.448 36.755V32.792H36.248V39.964H34.55V38.991H34.521C34.173 39.688 33.418 40.138 32.605 40.138C30.848 40.138 29.976 39.137 29.976 37.133ZM39.63 36.959C38.658 36.669 37.714 36.146 37.714 34.839C37.714 33.518 38.818 32.618 40.458 32.618C41.562 32.618 42.418 33.009 42.898 33.735L41.867 34.766C41.504 34.316 41.01 34.069 40.473 34.069C39.863 34.069 39.486 34.345 39.486 34.781C39.486 35.361 40.096 35.463 40.981 35.739C41.954 36.029 42.898 36.552 42.898 37.859C42.898 39.209 41.736 40.139 40.023 40.139C38.905 40.139 38.005 39.746 37.482 39.006L38.512 37.975C38.6925 38.1976 38.9205 38.3771 39.1794 38.5001C39.4383 38.6231 39.7214 38.6866 40.008 38.686C40.705 38.686 41.126 38.396 41.126 37.917C41.126 37.337 40.515 37.235 39.63 36.959ZM45.7 35.652H49.315C49.199 34.708 48.473 34.069 47.5 34.069C46.527 34.069 45.801 34.709 45.7 35.652ZM43.885 36.378C43.885 34.157 45.38 32.618 47.515 32.618C49.649 32.618 51.13 34.142 51.13 36.334C51.13 36.509 51.1 36.784 51.072 36.974H45.699C45.83 37.946 46.658 38.599 47.718 38.599C48.502 38.599 49.184 38.309 49.634 37.786L50.724 38.846C50.07 39.688 48.937 40.138 47.631 40.138C45.424 40.138 43.885 38.585 43.885 36.378ZM52.523 37.133V32.792H54.323V36.799C54.323 38.004 54.745 38.57 55.616 38.57C56.502 38.57 56.996 37.917 56.996 36.755V32.792H58.796V39.964H57.096V38.991H57.068C56.72 39.688 55.964 40.138 55.151 40.138C53.395 40.138 52.523 39.137 52.523 37.133ZM60.741 32.792H62.425V33.765H62.455C62.817 33.024 63.456 32.618 64.284 32.618C65.213 32.618 65.91 33.024 66.345 33.838C66.781 33.053 67.58 32.618 68.595 32.618C70.367 32.618 71.224 33.605 71.224 35.623V39.964H69.424V35.928C69.424 34.752 69.017 34.186 68.174 34.186C67.333 34.186 66.883 34.81 66.883 35.986V39.964H65.083V35.928C65.083 34.738 64.69 34.186 63.833 34.186C63.006 34.186 62.541 34.824 62.541 35.986V39.964H60.741V32.792ZM84.683 39.964L82.853 32.908H82.824L80.994 39.964H78.774L76 30.527H78.033L79.891 37.67H79.921L81.793 30.527H83.884L85.757 37.67H85.787L87.645 30.527H89.677L86.904 39.964H84.683ZM91.71 35.652H95.325C95.209 34.708 94.483 34.069 93.51 34.069C92.537 34.069 91.812 34.709 91.71 35.652ZM89.895 36.378C89.895 34.157 91.39 32.618 93.525 32.618C95.659 32.618 97.14 34.142 97.14 36.334C97.14 36.509 97.11 36.784 97.082 36.974H91.71C91.84 37.946 92.668 38.599 93.728 38.599C94.512 38.599 95.194 38.309 95.645 37.786L96.733 38.846C96.08 39.688 94.948 40.138 93.641 40.138C91.434 40.138 89.895 38.585 89.895 36.378ZM100 35.652H103.616C103.499 34.708 102.773 34.069 101.801 34.069C100.828 34.069 100.1 34.709 100 35.652ZM98.185 36.378C98.185 34.157 99.681 32.618 101.815 32.618C103.949 32.618 105.43 34.142 105.43 36.334C105.43 36.509 105.401 36.784 105.372 36.974H100C100.13 37.946 100.958 38.599 102.018 38.599C102.802 38.599 103.485 38.309 103.935 37.786L105.024 38.846C104.37 39.688 103.238 40.138 101.931 40.138C99.724 40.138 98.185 38.585 98.185 36.378ZM108.363 36.959C107.39 36.669 106.446 36.146 106.446 34.839C106.446 33.518 107.55 32.618 109.191 32.618C110.294 32.618 111.151 33.009 111.63 33.735L110.599 34.766C110.236 34.316 109.742 34.069 109.205 34.069C108.595 34.069 108.218 34.345 108.218 34.781C108.218 35.361 108.828 35.463 109.713 35.739C110.686 36.029 111.63 36.552 111.63 37.859C111.63 39.209 110.468 40.139 108.755 40.139C107.637 40.139 106.737 39.746 106.215 39.006L107.245 37.975C107.426 38.1976 107.654 38.3771 107.912 38.5001C108.171 38.6231 108.454 38.6866 108.741 38.686C109.437 38.686 109.859 38.396 109.859 37.917C109.859 37.337 109.249 37.235 108.363 36.959ZM118.83 36.378C118.83 35.086 118.033 34.229 116.857 34.229C115.68 34.229 114.867 35.1 114.867 36.378C114.867 37.656 115.68 38.527 116.857 38.527C118.033 38.527 118.831 37.67 118.831 36.377L118.83 36.378ZM113.067 32.792H114.78V33.91H114.81C115.245 33.097 116.116 32.618 117.162 32.618C119.209 32.618 120.675 34.171 120.675 36.348C120.675 38.556 119.209 40.138 117.162 40.138C116.189 40.138 115.39 39.718 114.896 38.948H114.867V42.65H113.067V32.792Z"
       fill="#000"
     />
     <path
-      className="amsterdam-logo__text-primary"
+      className="ams-logo__text-primary"
       d="M20.539 22.287H23.588L22.078 18.309H22.048L20.539 22.287ZM21.018 16.494H23.196L26.971 25.931H24.953L24.169 23.855H19.973L19.189 25.931H17.243L21.018 16.494ZM28.161 18.759H29.845V19.732H29.875C30.237 18.992 30.876 18.584 31.704 18.584C32.633 18.584 33.33 18.991 33.765 19.804C34.201 19.02 35 18.584 36.015 18.584C37.787 18.584 38.644 19.572 38.644 21.59V25.931H36.844V21.895C36.844 20.719 36.437 20.152 35.594 20.152C34.753 20.152 34.303 20.777 34.303 21.952V25.932H32.503V21.895C32.503 20.705 32.11 20.152 31.253 20.152C30.426 20.152 29.961 20.792 29.961 21.952V25.932H28.161V18.759ZM41.954 22.926C40.981 22.636 40.037 22.113 40.037 20.806C40.037 19.485 41.141 18.584 42.781 18.584C43.885 18.584 44.741 18.977 45.221 19.702L44.19 20.733C43.827 20.283 43.333 20.036 42.796 20.036C42.186 20.036 41.809 20.312 41.809 20.748C41.809 21.328 42.419 21.43 43.304 21.706C44.277 21.996 45.221 22.519 45.221 23.826C45.221 25.176 44.059 26.106 42.346 26.106C41.228 26.106 40.328 25.713 39.806 24.973L40.836 23.942C41.0164 24.1645 41.2443 24.3439 41.5029 24.4669C41.7616 24.5899 42.0446 24.6535 42.331 24.653C43.028 24.653 43.449 24.363 43.449 23.884C43.449 23.304 42.839 23.202 41.954 22.926ZM47.122 23.361V20.254H45.888V18.76H46.542C47.137 18.76 47.369 18.527 47.369 17.932V16.814H48.909V18.76H50.651V20.255H48.908V23.362C48.908 24.059 49.271 24.452 49.939 24.452C50.142 24.452 50.389 24.422 50.534 24.379V25.889C50.2243 25.9569 49.9081 25.9907 49.591 25.99C47.965 25.99 47.122 25.089 47.122 23.361ZM53.351 21.619H56.966C56.85 20.675 56.124 20.036 55.151 20.036C54.179 20.036 53.453 20.676 53.351 21.619ZM51.536 22.345C51.536 20.124 53.032 18.585 55.166 18.585C57.3 18.585 58.781 20.109 58.781 22.301C58.781 22.476 58.752 22.751 58.723 22.941H53.351C53.481 23.913 54.309 24.566 55.369 24.566C56.153 24.566 56.836 24.276 57.286 23.753L58.375 24.813C57.721 25.655 56.589 26.105 55.282 26.105C53.075 26.105 51.536 24.552 51.536 22.345ZM60.277 18.759H61.975V19.949H62.005C62.353 19.136 62.992 18.701 63.834 18.701C64.051 18.701 64.356 18.73 64.472 18.773V20.487C64.1819 20.4194 63.8849 20.3852 63.587 20.385C62.672 20.385 62.077 21.082 62.077 22.156V25.931H60.277V18.759ZM70.788 22.345C70.788 21.053 69.99 20.196 68.814 20.196C67.623 20.196 66.824 21.067 66.824 22.346C66.824 23.623 67.623 24.494 68.814 24.494C69.99 24.494 70.788 23.637 70.788 22.345ZM64.981 22.374C64.981 20.152 66.447 18.584 68.523 18.584C69.481 18.584 70.265 19.006 70.759 19.775H70.789V15.405H72.589V25.93H70.889V24.812H70.861C70.396 25.625 69.525 26.104 68.523 26.104C66.447 26.104 64.981 24.552 64.981 22.374ZM78.425 23.26V22.853L77.235 22.868C76.291 22.882 75.783 23.216 75.783 23.841C75.783 24.392 76.218 24.784 76.828 24.784C77.771 24.784 78.425 24.16 78.425 23.26ZM73.968 23.884C73.968 22.504 75.115 21.677 77.031 21.663L78.425 21.648V21.416C78.425 20.574 77.888 20.138 76.915 20.138C76.276 20.138 75.71 20.385 75.318 20.835L74.229 19.775C74.853 19.005 75.855 18.585 77.089 18.585C79.006 18.585 80.225 19.63 80.225 21.3V24.145C80.225 24.407 80.341 24.523 80.632 24.523H80.762V25.931H79.92C79.238 25.931 78.773 25.611 78.628 25.089H78.6C78.15 25.743 77.41 26.105 76.51 26.105C75 26.105 73.969 25.205 73.969 23.885L73.968 23.884ZM82.17 18.759H83.855V19.732H83.884C84.247 18.992 84.886 18.584 85.714 18.584C86.642 18.584 87.339 18.991 87.774 19.804C88.21 19.02 89.009 18.584 90.025 18.584C91.797 18.584 92.653 19.572 92.653 21.59V25.931H90.853V21.895C90.853 20.719 90.446 20.152 89.604 20.152C88.762 20.152 88.312 20.777 88.312 21.952V25.932H86.512V21.895C86.512 20.705 86.12 20.152 85.263 20.152C84.436 20.152 83.971 20.792 83.971 21.952V25.932H82.171L82.17 18.759ZM17.644 6.97998C17.644 4.11998 19.647 2.09998 22.479 2.09998C23.916 2.09998 25.121 2.56498 25.978 3.49398L24.729 4.68398C24.192 4.08898 23.422 3.74098 22.508 3.74098C20.795 3.74098 19.604 5.07698 19.604 6.97898C19.604 8.92398 20.765 10.274 22.435 10.274C23.96 10.274 25.02 9.40398 25.02 8.13998V7.89298H22.74V6.31198H26.936V7.77798C26.936 10.188 25.063 11.887 22.377 11.887C19.604 11.887 17.644 9.85398 17.644 6.97998ZM29.97 7.39998H33.586C33.469 6.45698 32.743 5.81798 31.771 5.81798C30.798 5.81798 30.072 6.45698 29.971 7.40098L29.97 7.39998ZM28.155 8.12698C28.155 5.90498 29.651 4.36698 31.785 4.36698C33.92 4.36698 35.4 5.89098 35.4 8.08298C35.4 8.25698 35.372 8.53298 35.342 8.72198H29.97C30.101 9.69498 30.929 10.348 31.988 10.348C32.773 10.348 33.455 10.058 33.905 9.53498L34.994 10.595C34.341 11.437 33.208 11.887 31.901 11.887C29.694 11.887 28.155 10.333 28.155 8.12698ZM36.896 4.53998H38.58V5.51298H38.609C38.972 4.77298 39.611 4.36598 40.439 4.36598C41.368 4.36598 42.065 4.77298 42.5 5.58598C42.936 4.80198 43.734 4.36598 44.75 4.36598C46.522 4.36598 47.379 5.35398 47.379 7.37198V11.712H45.579V7.67698C45.579 6.50198 45.172 5.93498 44.329 5.93498C43.488 5.93498 43.037 6.55998 43.037 7.73498V11.714H41.237V7.67598C41.237 6.48598 40.845 5.93398 39.988 5.93398C39.161 5.93398 38.696 6.57398 38.696 7.73398V11.713H36.896V4.53998ZM50.616 7.39998H54.231C54.115 6.45698 53.389 5.81798 52.417 5.81798C51.444 5.81798 50.717 6.45698 50.617 7.40098L50.616 7.39998ZM48.801 8.12698C48.801 5.90498 50.297 4.36698 52.431 4.36698C54.565 4.36698 56.046 5.89098 56.046 8.08298C56.046 8.25698 56.017 8.53298 55.988 8.72198H50.616C50.746 9.69498 51.574 10.348 52.634 10.348C53.418 10.348 54.101 10.058 54.551 9.53498L55.64 10.595C54.986 11.437 53.854 11.887 52.547 11.887C50.34 11.887 48.801 10.333 48.801 8.12698ZM58.906 7.39998H62.522C62.406 6.45698 61.68 5.81798 60.707 5.81798C59.734 5.81798 59.008 6.45698 58.907 7.40098L58.906 7.39998ZM57.092 8.12698C57.092 5.90498 58.587 4.36698 60.722 4.36698C62.856 4.36698 64.337 5.89098 64.337 8.08298C64.337 8.25698 64.307 8.53298 64.279 8.72198H58.906C59.037 9.69498 59.865 10.348 60.925 10.348C61.708 10.348 62.391 10.058 62.841 9.53498L63.93 10.595C63.277 11.437 62.144 11.887 60.837 11.887C58.631 11.887 57.092 10.333 57.092 8.12698ZM65.832 4.53998H67.531V5.51298H67.56C67.894 4.80198 68.62 4.36598 69.462 4.36598C71.262 4.36598 72.192 5.39698 72.192 7.37198V11.712H70.39V7.71998C70.39 6.49998 69.955 5.93398 69.04 5.93398C68.125 5.93398 67.631 6.57398 67.631 7.76398V11.713H65.831L65.832 4.53998ZM74.5 9.14298V6.03598H73.266V4.53998H73.919C74.514 4.53998 74.747 4.30798 74.747 3.71298V2.59498H76.286V4.53998H78.028V6.03598H76.286V9.14298C76.286 9.83998 76.648 10.232 77.316 10.232C77.52 10.232 77.766 10.202 77.912 10.159V11.669C77.602 11.7372 77.2855 11.7714 76.968 11.771C75.342 11.771 74.5 10.871 74.5 9.14298ZM80.728 7.39998H84.344C84.227 6.45698 83.501 5.81798 82.529 5.81798C81.556 5.81798 80.83 6.45698 80.729 7.40098L80.728 7.39998ZM78.913 8.12698C78.913 5.90498 80.409 4.36698 82.543 4.36698C84.678 4.36698 86.158 5.89098 86.158 8.08298C86.158 8.25698 86.129 8.53298 86.1 8.72198H80.728C80.859 9.69498 81.687 10.348 82.747 10.348C83.531 10.348 84.213 10.058 84.663 9.53498L85.752 10.595C85.099 11.437 83.966 11.887 82.659 11.887C80.452 11.887 78.913 10.333 78.913 8.12698Z"
       fill="#EC0000"
     />
     <path
-      className="amsterdam-logo__emblem"
+      className="ams-logo__emblem"
       d="M0 38.3642L3.6 34.9356L0 31.507L2.4 29.2213L6 32.6499L9.6 29.2213L12 31.507L8.4 34.9356L12 38.3642L9.6 40.6499L6 37.2213L2.4 40.6499L0 38.3642Z"
       fill="#EC0000"
     />
     <path
-      className="amsterdam-logo__emblem"
+      className="ams-logo__emblem"
       d="M0 9.79276L3.6 6.36419L0 2.93562L2.4 0.649902L6 4.07847L9.6 0.649902L12 2.93562L8.4 6.36419L12 9.79276L9.6 12.0785L6 8.6499L2.4 12.0785L0 9.79276Z"
       fill="#EC0000"
     />
     <path
-      className="amsterdam-logo__emblem"
+      className="ams-logo__emblem"
       d="M0 24.0785L3.6 20.6499L0 17.2213L2.4 14.9356L6 18.3642L9.6 14.9356L12 17.2213L8.4 20.6499L12 24.0785L9.6 26.3642L6 22.9356L2.4 26.3642L0 24.0785Z"
       fill="#EC0000"
     />
diff --git a/packages/react/src/Logo/brand/LogoStadsarchief.tsx b/packages/react/src/Logo/brand/LogoStadsarchief.tsx
index 56bfcae2a3..ae2de7729c 100644
--- a/packages/react/src/Logo/brand/LogoStadsarchief.tsx
+++ b/packages/react/src/Logo/brand/LogoStadsarchief.tsx
@@ -3,7 +3,7 @@ import type { ForwardedRef, SVGProps } from 'react'
 
 const LogoStadsarchief = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg
-    className="amsterdam-logo"
+    className="ams-logo"
     aria-hidden="true"
     focusable="false"
     ref={ref}
@@ -12,17 +12,17 @@ const LogoStadsarchief = forwardRef((props: SVGProps<SVGSVGElement>, ref: Forwar
     {...props}
   >
     <path
-      className="amsterdam-logo__emblem"
+      className="ams-logo__emblem"
       fill="#EC0000"
       d="m0 37.648 3.527-3.527L0 30.593l2.352-2.351 3.527 3.527 3.528-3.527 2.351 2.351-3.527 3.528 3.527 3.527L9.407 40l-3.528-3.527L2.352 40 0 37.648ZM0 9.407l3.527-3.528L0 2.352 2.352 0l3.527 3.527L9.407 0l2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.526 3.527L0 9.407ZM0 23.54l3.527-3.528L0 16.485l2.352-2.352 3.527 3.528 3.528-3.528 2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.527 3.527L0 23.54Z"
     />
     <path
-      className="amsterdam-logo__text-primary"
+      className="ams-logo__text-primary"
       fill="#EC0000"
       d="M20.937 15.334h2.17l3.76 9.4h-2.011l-.78-2.068h-4.18l-.782 2.068h-1.937l3.76-9.4Zm-.477 5.77h3.037l-1.504-3.962h-.03l-1.503 3.963ZM28.052 17.59h1.678v.969h.03c.36-.737.997-1.143 1.822-1.143.925 0 1.62.405 2.054 1.215.434-.781 1.228-1.215 2.24-1.215 1.766 0 2.618.983 2.618 2.994v4.324h-1.793v-4.02c0-1.17-.404-1.735-1.244-1.735s-1.287.622-1.287 1.793v3.962h-1.794v-4.02c0-1.186-.39-1.735-1.243-1.735-.854 0-1.288.636-1.288 1.793v3.962h-1.793V17.59ZM41.791 21.74c-.969-.288-1.91-.81-1.91-2.111 0-1.302 1.1-2.213 2.734-2.213 1.1 0 1.952.39 2.43 1.114l-1.027 1.026c-.362-.448-.853-.694-1.388-.694-.608 0-.983.276-.983.71 0 .578.608.679 1.49.954.968.29 1.909.81 1.909 2.112 0 1.301-1.157 2.27-2.863 2.27-1.114 0-2.01-.39-2.532-1.127l1.027-1.027c.39.464.911.71 1.49.71.693 0 1.113-.29 1.113-.767 0-.579-.608-.68-1.49-.955v-.001ZM46.94 22.175V19.08h-1.23v-1.49h.652c.592 0 .824-.232.824-.824v-1.114h1.533v1.938h1.736v1.49h-1.736v3.095c0 .693.361 1.085 1.027 1.085.202 0 .448-.03.592-.073v1.504a4.362 4.362 0 0 1-.94.101c-1.62 0-2.46-.897-2.46-2.617h.002ZM51.337 21.162c0-2.213 1.49-3.746 3.615-3.746 2.126 0 3.602 1.52 3.602 3.703 0 .174-.03.448-.058.636h-5.351c.13.969.955 1.62 2.01 1.62.781 0 1.46-.29 1.91-.81l1.084 1.056c-.651.838-1.779 1.287-3.08 1.287-2.2 0-3.731-1.547-3.731-3.746h-.002Zm1.808-.723h3.601c-.115-.94-.838-1.577-1.808-1.577-.97 0-1.692.637-1.793 1.577ZM60.042 17.59h1.692v1.186h.03c.346-.81.983-1.244 1.822-1.244.218 0 .521.03.636.072v1.706a3.906 3.906 0 0 0-.882-.1c-.91 0-1.504.693-1.504 1.764v3.76h-1.793V17.59ZM64.729 21.192c0-2.213 1.46-3.775 3.529-3.775.954 0 1.735.42 2.227 1.187h.029V14.25h1.793v10.486h-1.692v-1.114h-.03c-.462.81-1.33 1.288-2.327 1.288-2.069 0-3.529-1.548-3.529-3.717v-.002Zm5.785-.03c0-1.287-.796-2.14-1.967-2.14s-1.981.868-1.981 2.14c0 1.273.796 2.14 1.98 2.14 1.186 0 1.968-.853 1.968-2.14ZM73.68 22.695c0-1.374 1.143-2.198 3.052-2.212l1.388-.015v-.231c0-.838-.535-1.272-1.504-1.272-.636 0-1.2.245-1.59.693l-1.084-1.056c.622-.766 1.62-1.186 2.849-1.186 1.908 0 3.124 1.042 3.124 2.704v2.835c0 .26.115.377.404.377h.13v1.402h-.838c-.68 0-1.143-.318-1.287-.838h-.03c-.448.651-1.186 1.012-2.082 1.012-1.504 0-2.53-.897-2.53-2.213h-.002Zm4.44-.622v-.404l-1.185.014c-.94.014-1.446.347-1.446.969 0 .55.434.94 1.042.94.94 0 1.59-.621 1.59-1.518ZM81.851 17.59h1.678v.969h.03c.362-.737.998-1.143 1.822-1.143.925 0 1.62.405 2.054 1.215.434-.781 1.229-1.215 2.241-1.215 1.765 0 2.618.983 2.618 2.994v4.324H90.5v-4.02c0-1.17-.405-1.735-1.245-1.735-.84 0-1.287.622-1.287 1.793v3.962h-1.793v-4.02c0-1.186-.39-1.735-1.244-1.735s-1.288.636-1.288 1.793v3.962h-1.793V17.59ZM17.575 5.857c0-2.85 1.996-4.86 4.817-4.86 1.432 0 2.632.463 3.485 1.389l-1.244 1.186c-.535-.593-1.302-.94-2.213-.94-1.706 0-2.893 1.33-2.893 3.225 0 1.894 1.157 3.283 2.821 3.283 1.52 0 2.574-.868 2.574-2.126v-.246h-2.27V5.191h4.18v1.46c0 2.402-1.867 4.094-4.542 4.094s-4.715-2.025-4.715-4.888ZM28.047 7c0-2.213 1.49-3.747 3.616-3.747 2.126 0 3.601 1.52 3.601 3.703 0 .174-.03.448-.057.636h-5.351c.13.97.954 1.62 2.01 1.62.78 0 1.46-.289 1.91-.81l1.085 1.056c-.651.839-1.779 1.288-3.08 1.288-2.2 0-3.732-1.548-3.732-3.746h-.002Zm1.809-.724h3.601c-.115-.94-.838-1.576-1.808-1.576-.97 0-1.692.636-1.793 1.576ZM36.753 3.426h1.678v.97h.03c.361-.738.997-1.144 1.822-1.144.925 0 1.62.405 2.054 1.215.434-.78 1.23-1.215 2.24-1.215 1.766 0 2.618.983 2.618 2.994v4.324h-1.793V6.55c0-1.17-.404-1.735-1.244-1.735s-1.287.622-1.287 1.793v3.962h-1.794V6.55c0-1.186-.39-1.735-1.243-1.735-.854 0-1.288.636-1.288 1.793v3.962h-1.793V3.426ZM48.612 7c0-2.213 1.49-3.747 3.616-3.747 2.126 0 3.601 1.52 3.601 3.703 0 .174-.03.448-.057.636H50.42c.131.97.955 1.62 2.011 1.62.78 0 1.46-.289 1.91-.81l1.084 1.056c-.652.839-1.78 1.288-3.08 1.288-2.2 0-3.732-1.548-3.732-3.746Zm1.808-.724h3.602c-.115-.94-.838-1.576-1.807-1.576s-1.692.636-1.793 1.576h-.002ZM56.87 7c0-2.213 1.49-3.747 3.616-3.747 2.125 0 3.601 1.52 3.601 3.703 0 .174-.03.448-.058.636h-5.35c.13.97.954 1.62 2.01 1.62.78 0 1.46-.289 1.91-.81l1.084 1.056c-.652.839-1.78 1.288-3.081 1.288-2.199 0-3.731-1.548-3.731-3.746h-.001Zm1.808-.724h3.602c-.115-.94-.839-1.576-1.809-1.576s-1.692.636-1.793 1.576ZM65.577 3.426h1.692v.97h.03c.332-.71 1.055-1.144 1.893-1.144 1.794 0 2.719 1.027 2.719 2.994v4.324h-1.793V6.594c0-1.215-.434-1.78-1.345-1.78-.912 0-1.403.637-1.403 1.823v3.935h-1.793V3.426ZM74.21 8.012V4.917h-1.23v-1.49h.652c.593 0 .825-.231.825-.824V1.49h1.533v1.937h1.735v1.49H75.99v3.095c0 .694.36 1.085 1.026 1.085.203 0 .448-.03.593-.073v1.504a4.356 4.356 0 0 1-.94.101c-1.621 0-2.46-.897-2.46-2.617l.002.001ZM78.607 7c0-2.213 1.49-3.747 3.616-3.747 2.126 0 3.601 1.52 3.601 3.703 0 .174-.03.448-.057.636h-5.352c.131.97.955 1.62 2.011 1.62.78 0 1.46-.289 1.91-.81l1.084 1.056c-.652.839-1.78 1.288-3.08 1.288-2.2 0-3.732-1.548-3.732-3.746Zm1.808-.724h3.602c-.115-.94-.838-1.576-1.808-1.576-.97 0-1.692.636-1.794 1.576Z"
     />
     <path
-      className="amsterdam-logo__text-secondary"
+      className="ams-logo__text-secondary"
       fill="#000"
       d="m17.335 37.353 1.302-1.084a2.07 2.07 0 0 0 1.779.983c.868 0 1.46-.463 1.46-1.143 0-.766-.636-1.042-1.866-1.49-1.143-.42-2.343-1.012-2.343-2.747 0-1.62 1.316-2.734 3.24-2.734 1.3 0 2.327.52 2.906 1.446L22.51 31.67c-.39-.578-.954-.897-1.62-.897-.78 0-1.302.42-1.302 1.042 0 .767.637 1.042 1.866 1.49 1.143.42 2.344 1.012 2.344 2.748 0 1.735-1.375 2.834-3.4 2.834-1.374 0-2.458-.549-3.066-1.533h.002ZM25.738 36.153v-3.095h-1.23v-1.49h.65c.593 0 .824-.231.824-.824v-1.113h1.534v1.937h1.735v1.49h-1.735v3.095c0 .693.362 1.085 1.026 1.085.202 0 .448-.03.593-.073v1.504a4.37 4.37 0 0 1-.941.101c-1.62 0-2.459-.897-2.459-2.617h.003ZM30.134 36.674c0-1.375 1.143-2.2 3.051-2.213l1.389-.014v-.232c0-.838-.535-1.272-1.504-1.272-.636 0-1.2.245-1.59.694l-1.085-1.056c.622-.767 1.62-1.187 2.85-1.187 1.909 0 3.123 1.042 3.123 2.705v2.835c0 .26.115.376.405.376h.13v1.402h-.838c-.68 0-1.143-.318-1.288-.838h-.029c-.448.651-1.186 1.012-2.082 1.012-1.504 0-2.53-.897-2.53-2.212h-.002Zm4.44-.622v-.405l-1.186.014c-.941.014-1.447.347-1.447.97 0 .548.434.94 1.042.94.94 0 1.591-.622 1.591-1.52ZM37.813 35.17c0-2.213 1.46-3.775 3.529-3.775.955 0 1.735.42 2.227 1.187h.03v-4.353h1.792v10.486H43.7V37.6h-.029c-.463.81-1.331 1.288-2.328 1.288-2.068 0-3.529-1.547-3.529-3.717v-.002Zm5.785-.03c0-1.287-.796-2.14-1.967-2.14-1.17 0-1.981.868-1.981 2.14 0 1.273.796 2.14 1.981 2.14s1.967-.853 1.967-2.14ZM48.763 35.719c-.97-.29-1.91-.81-1.91-2.112 0-1.301 1.1-2.213 2.734-2.213 1.1 0 1.952.39 2.429 1.114l-1.026 1.026c-.363-.448-.854-.694-1.39-.694-.607 0-.982.276-.982.71 0 .578.608.68 1.49.954.969.29 1.91.81 1.91 2.112s-1.158 2.27-2.864 2.27c-1.113 0-2.01-.39-2.532-1.127l1.027-1.027c.39.464.911.71 1.49.71.694 0 1.113-.29 1.113-.767 0-.579-.608-.68-1.49-.955v-.001ZM52.97 36.674c0-1.375 1.144-2.2 3.052-2.213l1.389-.014v-.232c0-.838-.535-1.272-1.504-1.272-.636 0-1.2.245-1.591.694l-1.084-1.056c.622-.767 1.62-1.187 2.849-1.187 1.91 0 3.124 1.042 3.124 2.705v2.835c0 .26.115.376.404.376h.13v1.402h-.837c-.68 0-1.143-.318-1.288-.838h-.03c-.447.651-1.186 1.012-2.082 1.012-1.504 0-2.53-.897-2.53-2.212h-.001Zm4.44-.622v-.405l-1.186.014c-.94.014-1.446.347-1.446.97 0 .548.434.94 1.042.94.94 0 1.59-.622 1.59-1.52ZM61.142 31.568h1.691v1.187h.03c.347-.81.983-1.244 1.822-1.244.218 0 .521.029.636.073v1.706a3.907 3.907 0 0 0-.881-.102c-.912 0-1.504.694-1.504 1.765v3.76h-1.793V31.57h-.002ZM65.827 35.14c0-2.227 1.49-3.746 3.689-3.746 1.085 0 2.038.405 2.646 1.128l-1.2 1.127c-.362-.404-.868-.622-1.446-.622-1.1 0-1.851.868-1.851 2.112 0 1.244.752 2.112 1.85 2.112.58 0 1.086-.218 1.476-.636l1.187 1.127c-.636.738-1.577 1.143-2.647 1.143-2.199 0-3.703-1.519-3.703-3.746v.001ZM73.492 28.228h1.793v4.15h.03c.42-.636 1.041-.983 1.793-.983 1.793 0 2.718 1.027 2.718 2.994v4.325h-1.793v-3.978c0-1.215-.434-1.78-1.345-1.78s-1.403.637-1.403 1.823v3.935h-1.793V28.228ZM82.56 30.657c-.622 0-1.07-.434-1.07-1.042 0-.608.448-1.042 1.07-1.042.622 0 1.07.434 1.07 1.042 0 .608-.448 1.042-1.07 1.042Zm-.897.911h1.793v7.144h-1.793v-7.144ZM84.947 35.14c0-2.212 1.49-3.746 3.616-3.746 2.126 0 3.601 1.52 3.601 3.703 0 .174-.03.448-.058.636h-5.35c.13.969.954 1.62 2.01 1.62.78 0 1.46-.289 1.91-.81L91.76 37.6c-.652.838-1.78 1.288-3.081 1.288-2.199 0-3.73-1.548-3.73-3.747h-.002Zm1.808-.723h3.602c-.115-.94-.838-1.577-1.808-1.577-.97 0-1.693.637-1.794 1.577ZM92.886 33.058v-1.49h1.215v-.925c0-1.634.969-2.59 2.632-2.59.203 0 .506.03.666.058v1.548a2.82 2.82 0 0 0-.622-.072c-.565 0-.882.376-.882 1.056v.925h1.736v1.49h-1.736v5.654h-1.793v-5.654h-1.216Z"
     />
diff --git a/packages/react/src/Logo/brand/LogoStadsbankVanLening.tsx b/packages/react/src/Logo/brand/LogoStadsbankVanLening.tsx
index f823fd9ab5..6a14a24a9b 100644
--- a/packages/react/src/Logo/brand/LogoStadsbankVanLening.tsx
+++ b/packages/react/src/Logo/brand/LogoStadsbankVanLening.tsx
@@ -3,7 +3,7 @@ import type { ForwardedRef, SVGProps } from 'react'
 
 const LogoStadsbankVanLening = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg
-    className="amsterdam-logo"
+    className="ams-logo"
     aria-hidden="true"
     focusable="false"
     ref={ref}
@@ -12,17 +12,17 @@ const LogoStadsbankVanLening = forwardRef((props: SVGProps<SVGSVGElement>, ref:
     {...props}
   >
     <path
-      className="amsterdam-logo__emblem"
+      className="ams-logo__emblem"
       fill="#EC0000"
       d="m0 37.65 3.53-3.53L0 30.59l2.35-2.35 3.53 3.53 3.53-3.53 2.35 2.35-3.53 3.53 3.53 3.53L9.41 40l-3.53-3.53L2.35 40 0 37.65ZM0 9.41l3.53-3.53L0 2.35 2.35 0l3.53 3.53L9.41 0l2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 9.41ZM0 23.54l3.53-3.53L0 16.48l2.35-2.35 3.53 3.53 3.53-3.53 2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 23.54Z"
     />
     <path
-      className="amsterdam-logo__text-secondary"
+      className="ams-logo__text-secondary"
       fill="#000"
       d="m17.34 37.35 1.3-1.08c.4.64 1.06.98 1.78.98.87 0 1.46-.46 1.46-1.14 0-.77-.64-1.04-1.87-1.49-1.14-.42-2.34-1.01-2.34-2.75 0-1.62 1.32-2.73 3.24-2.73 1.3 0 2.33.52 2.91 1.45l-1.3 1.08c-.39-.58-.95-.9-1.62-.9-.78 0-1.3.42-1.3 1.04 0 .77.64 1.04 1.87 1.49 1.14.42 2.34 1.01 2.34 2.75s-1.37 2.83-3.4 2.83c-1.37 0-2.46-.55-3.07-1.53ZM25.74 36.15v-3.1h-1.23v-1.49h.65c.59 0 .82-.23.82-.82v-1.11h1.53v1.94h1.74v1.49h-1.74v3.1c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62h.01ZM30.13 36.67c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4h-1.19c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM37.81 35.17c0-2.21 1.46-3.77 3.53-3.77.95 0 1.74.42 2.23 1.19h.03v-4.35h1.79v10.49H43.7v-1.11h-.03c-.46.81-1.33 1.29-2.33 1.29-2.07 0-3.53-1.55-3.53-3.72v-.02Zm5.79-.03c0-1.29-.8-2.14-1.97-2.14s-1.98.87-1.98 2.14.8 2.14 1.98 2.14 1.97-.85 1.97-2.14ZM48.76 35.72c-.97-.29-1.91-.81-1.91-2.11 0-1.3 1.1-2.21 2.73-2.21 1.1 0 1.95.39 2.43 1.11l-1.03 1.03c-.36-.45-.85-.69-1.39-.69-.61 0-.98.27-.98.71 0 .58.61.68 1.49.95.97.29 1.91.81 1.91 2.11 0 1.3-1.16 2.27-2.86 2.27-1.11 0-2.01-.39-2.53-1.13l1.03-1.03c.39.46.91.71 1.49.71.69 0 1.11-.29 1.11-.77 0-.58-.61-.68-1.49-.95ZM55.18 37.6h-.03v1.11h-1.71V28.22h1.79v4.35h.03c.52-.77 1.3-1.19 2.26-1.19 2.04 0 3.5 1.56 3.5 3.75s-1.46 3.75-3.5 3.75c-1 0-1.82-.46-2.34-1.29v.01Zm4.01-2.46c0-1.29-.8-2.14-1.97-2.14s-1.98.87-1.98 2.14.81 2.14 1.98 2.14 1.97-.85 1.97-2.14ZM61.95 36.67c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4H65.2c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM70.12 31.57h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01ZM80.09 38.71H78.3V28.22h1.79v6.57h.03l2.66-3.23h2.17l-2.76 3.17 2.89 3.98h-2.17l-1.98-2.81-.84.97v1.84ZM88.97 31.57h1.95l1.66 5.15h.03l1.71-5.15h1.91l-2.69 7.14h-1.92l-2.65-7.14ZM96.6 36.67c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4h-1.19c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM104.77 31.57h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.34-1.78-.91 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14l-.01.01ZM116.65 29.31h1.91v7.78h3.49v1.62h-5.39v-9.4h-.01ZM122.87 35.14c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM131.57 31.57h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01ZM140.64 30.66c-.62 0-1.07-.43-1.07-1.04 0-.61.45-1.04 1.07-1.04.62 0 1.07.43 1.07 1.04 0 .61-.45 1.04-1.07 1.04Zm-.9.91h1.79v7.14h-1.79v-7.14ZM143.47 31.57h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01ZM151.54 40.42l1.16-1.13c.39.45 1.1.72 1.87.72 1.3 0 2.02-.59 2.02-1.63v-1.1h-.03c-.4.75-1.16 1.17-2.1 1.17-2.01 0-3.34-1.42-3.34-3.53s1.37-3.51 3.34-3.51c1.01 0 1.81.45 2.2 1.21h.03v-1.06h1.69v6.88c0 1.91-1.46 3.11-3.79 3.11-1.33 0-2.43-.42-3.05-1.14v.01Zm5.06-5.5c0-1.19-.74-2.01-1.82-2.01s-1.82.82-1.82 2.01.75 2 1.82 2 1.82-.82 1.82-2Z"
     />
     <path
-      className="amsterdam-logo__text-primary"
+      className="ams-logo__text-primary"
       fill="#EC0000"
       d="M20.94 15.33h2.17l3.76 9.4h-2.01l-.78-2.07H19.9l-.78 2.07h-1.94l3.76-9.4Zm-.48 5.77h3.04L22 17.14h-.03l-1.5 3.96h-.01ZM28.05 17.59h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H36.7v-4.02c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79V20.7c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79v-7.14l-.01.02ZM41.79 21.74c-.97-.29-1.91-.81-1.91-2.11 0-1.3 1.1-2.21 2.73-2.21 1.1 0 1.95.39 2.43 1.11l-1.03 1.03c-.36-.45-.85-.69-1.39-.69-.61 0-.98.27-.98.71 0 .58.61.68 1.49.95.97.29 1.91.81 1.91 2.11 0 1.3-1.16 2.27-2.86 2.27-1.11 0-2.01-.39-2.53-1.13l1.03-1.03c.39.46.91.71 1.49.71.69 0 1.11-.29 1.11-.77 0-.58-.61-.68-1.49-.95ZM46.94 22.17v-3.09h-1.23v-1.49h.65c.59 0 .82-.23.82-.82v-1.11h1.53v1.94h1.74v1.49h-1.74v3.09c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62h.01ZM51.34 21.16c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM60.04 17.59h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79V17.6l-.01-.01ZM64.73 21.19c0-2.21 1.46-3.77 3.53-3.77.95 0 1.74.42 2.23 1.19h.03v-4.35h1.79v10.49h-1.69v-1.11h-.03c-.46.81-1.33 1.29-2.33 1.29-2.07 0-3.53-1.55-3.53-3.72v-.02Zm5.79-.03c0-1.29-.8-2.14-1.97-2.14s-1.98.87-1.98 2.14.8 2.14 1.98 2.14 1.97-.85 1.97-2.14ZM73.68 22.7c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4h-1.19c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM81.85 17.59h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H90.5v-4.02c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79V20.7c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79v-7.14l-.01.02ZM17.58 5.86c0-2.85 2-4.86 4.82-4.86 1.43 0 2.63.46 3.49 1.39l-1.24 1.19c-.54-.59-1.3-.94-2.21-.94-1.71 0-2.89 1.33-2.89 3.23s1.16 3.28 2.82 3.28c1.52 0 2.57-.87 2.57-2.13v-.25h-2.27V5.19h4.18v1.46c0 2.4-1.87 4.09-4.54 4.09S17.6 8.72 17.6 5.85l-.02.01ZM28.05 7c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM36.75 3.43h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H45.4V6.55c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79V6.55c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79V3.43h-.01ZM48.61 7c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM56.87 7c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM65.58 3.43h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79V6.59c0-1.21-.43-1.78-1.34-1.78-.91 0-1.4.64-1.4 1.82v3.93h-1.79V3.43h-.01ZM74.21 8.01v-3.1h-1.23V3.42h.65c.59 0 .82-.23.82-.82V1.49h1.53v1.94h1.74v1.49h-1.74v3.1c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62h.01ZM78.61 7c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58Z"
     />
diff --git a/packages/react/src/Logo/brand/LogoVgaVerzekeringen.tsx b/packages/react/src/Logo/brand/LogoVgaVerzekeringen.tsx
index 6302ca859d..53e9f43229 100644
--- a/packages/react/src/Logo/brand/LogoVgaVerzekeringen.tsx
+++ b/packages/react/src/Logo/brand/LogoVgaVerzekeringen.tsx
@@ -3,7 +3,7 @@ import type { ForwardedRef, SVGProps } from 'react'
 
 const LogoVgaVerzekeringen = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg
-    className="amsterdam-logo"
+    className="ams-logo"
     aria-hidden="true"
     focusable="false"
     ref={ref}
@@ -12,17 +12,17 @@ const LogoVgaVerzekeringen = forwardRef((props: SVGProps<SVGSVGElement>, ref: Fo
     {...props}
   >
     <path
-      className="amsterdam-logo__emblem"
+      className="ams-logo__emblem"
       fill="#EC0000"
       d="m0 38.2 3.53-3.53L0 31.14l2.35-2.35 3.53 3.53 3.53-3.53 2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 38.2ZM0 9.96l3.53-3.53L0 2.9 2.35.55l3.53 3.53L9.41.55l2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 9.96ZM0 24.09l3.53-3.53L0 17.03l2.35-2.35 3.53 3.53 3.53-3.53 2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 24.09Z"
     />
     <path
-      className="amsterdam-logo__text-secondary"
+      className="ams-logo__text-secondary"
       fill="#000"
       d="M17.13 29.86h2.07l2.39 7.22h.03l2.42-7.22h1.98l-3.36 9.4h-2.17l-3.36-9.4ZM26.5 34.55c0-2.85 2-4.86 4.82-4.86 1.43 0 2.63.46 3.49 1.39l-1.24 1.19c-.54-.59-1.3-.94-2.21-.94-1.71 0-2.89 1.33-2.89 3.23s1.16 3.28 2.82 3.28c1.52 0 2.57-.87 2.57-2.13v-.25h-2.27v-1.58h4.18v1.46c0 2.4-1.87 4.09-4.54 4.09s-4.71-2.02-4.71-4.89l-.02.01ZM40.43 29.86h2.17l3.76 9.4h-2.01l-.78-2.07h-4.18l-.78 2.07h-1.94l3.76-9.4Zm-.48 5.77h3.04l-1.5-3.96h-.03l-1.5 3.96h-.01ZM50.38 29.86h2.07l2.39 7.22h.03l2.42-7.22h1.98l-3.36 9.4h-2.17l-3.36-9.4ZM59.42 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM68.13 32.12h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79v-7.14l-.01-.01ZM73.01 38.06l3.4-4.45h-3.3v-1.49h5.73v1.2l-3.4 4.45h3.5v1.49h-5.93v-1.2ZM79.88 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM90.38 39.26h-1.79V28.77h1.79v6.57h.03l2.66-3.23h2.17l-2.76 3.17 2.89 3.98H93.2l-1.98-2.81-.84.97v1.84ZM95.68 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM104.38 32.12h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79v-7.14l-.01-.01ZM110.65 31.21c-.62 0-1.07-.43-1.07-1.04 0-.61.45-1.04 1.07-1.04.62 0 1.07.43 1.07 1.04 0 .61-.45 1.04-1.07 1.04Zm-.9.91h1.79v7.14h-1.79v-7.14ZM113.48 32.12h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01ZM121.55 40.97l1.16-1.13c.39.45 1.1.72 1.87.72 1.3 0 2.02-.59 2.02-1.63v-1.1h-.03c-.4.75-1.16 1.17-2.1 1.17-2.01 0-3.34-1.42-3.34-3.53s1.37-3.51 3.34-3.51c1.01 0 1.81.45 2.2 1.21h.03v-1.06h1.69v6.88c0 1.91-1.46 3.11-3.79 3.11-1.33 0-2.43-.42-3.05-1.14v.01Zm5.06-5.5c0-1.19-.74-2.01-1.82-2.01s-1.82.82-1.82 2.01.75 2 1.82 2 1.82-.82 1.82-2ZM129.88 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM138.59 32.12h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01Z"
     />
     <path
-      className="amsterdam-logo__text-primary"
+      className="ams-logo__text-primary"
       fill="#EC0000"
       d="M20.94 15.88h2.17l3.76 9.4h-2.01l-.78-2.07H19.9l-.78 2.07h-1.94l3.76-9.4Zm-.48 5.77h3.04L22 17.69h-.03l-1.5 3.96h-.01ZM28.05 18.14h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H36.7v-4.02c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79v-4.02c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79v-7.14l-.01.02ZM41.79 22.29c-.97-.29-1.91-.81-1.91-2.11 0-1.3 1.1-2.21 2.73-2.21 1.1 0 1.95.39 2.43 1.11l-1.03 1.03c-.36-.45-.85-.69-1.39-.69-.61 0-.98.27-.98.71 0 .58.61.68 1.49.95.97.29 1.91.81 1.91 2.11 0 1.3-1.16 2.27-2.86 2.27-1.11 0-2.01-.39-2.53-1.13l1.03-1.03c.39.46.91.71 1.49.71.69 0 1.11-.29 1.11-.77 0-.58-.61-.68-1.49-.95ZM46.94 22.72v-3.09h-1.23v-1.49h.65c.59 0 .82-.23.82-.82v-1.11h1.53v1.94h1.74v1.49h-1.74v3.09c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62h.01ZM51.34 21.71c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM60.04 18.14h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79v-7.14l-.01-.01ZM64.73 21.74c0-2.21 1.46-3.77 3.53-3.77.95 0 1.74.42 2.23 1.19h.03v-4.35h1.79V25.3h-1.69v-1.11h-.03c-.46.81-1.33 1.29-2.33 1.29-2.07 0-3.53-1.55-3.53-3.72v-.02Zm5.79-.03c0-1.29-.8-2.14-1.97-2.14s-1.98.87-1.98 2.14.8 2.14 1.98 2.14 1.97-.85 1.97-2.14ZM73.68 23.25c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4h-1.19c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM81.85 18.14h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H90.5v-4.02c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79v-4.02c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79v-7.14l-.01.02ZM17.58 6.41c0-2.85 2-4.86 4.82-4.86 1.43 0 2.63.46 3.49 1.39l-1.24 1.19c-.54-.59-1.3-.94-2.21-.94-1.71 0-2.89 1.33-2.89 3.23s1.16 3.28 2.82 3.28c1.52 0 2.57-.87 2.57-2.13v-.25h-2.27V5.74h4.18V7.2c0 2.4-1.87 4.09-4.54 4.09S17.6 9.27 17.6 6.4l-.02.01ZM28.05 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM36.75 3.98h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H45.4V7.1c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79V7.1c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79V3.98h-.01ZM48.61 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM56.87 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM65.58 3.98h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79V7.14c0-1.21-.43-1.78-1.34-1.78-.91 0-1.4.64-1.4 1.82v3.93h-1.79V3.98h-.01ZM74.21 8.56V5.47h-1.23V3.98h.65c.59 0 .82-.23.82-.82V2.04h1.53v1.94h1.74v1.49h-1.74v3.09c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62l.01.01ZM78.61 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58Z"
     />
diff --git a/packages/react/src/Mark/Mark.test.tsx b/packages/react/src/Mark/Mark.test.tsx
index 3d7791baa7..5aec94e64a 100644
--- a/packages/react/src/Mark/Mark.test.tsx
+++ b/packages/react/src/Mark/Mark.test.tsx
@@ -14,13 +14,13 @@ describe('Mark', () => {
   it('renders a design system BEM class name', () => {
     const { container } = render(<Mark />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-mark')
+    expect(component).toHaveClass('ams-mark')
   })
 
   it('renders an additional class name', () => {
     const { container } = render(<Mark className="extra" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-mark extra')
+    expect(component).toHaveClass('ams-mark extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Mark/Mark.tsx b/packages/react/src/Mark/Mark.tsx
index ea68d5f497..4cd58d521b 100644
--- a/packages/react/src/Mark/Mark.tsx
+++ b/packages/react/src/Mark/Mark.tsx
@@ -10,7 +10,7 @@ import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 export type MarkProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 export const Mark = forwardRef(({ children, className, ...restProps }: MarkProps, ref: ForwardedRef<HTMLElement>) => (
-  <mark {...restProps} ref={ref} className={clsx('amsterdam-mark', className)}>
+  <mark {...restProps} ref={ref} className={clsx('ams-mark', className)}>
     {children}
   </mark>
 ))
diff --git a/packages/react/src/MegaMenu/MegaMenu.test.tsx b/packages/react/src/MegaMenu/MegaMenu.test.tsx
index ec3ec798d1..09be8d8bf8 100644
--- a/packages/react/src/MegaMenu/MegaMenu.test.tsx
+++ b/packages/react/src/MegaMenu/MegaMenu.test.tsx
@@ -18,7 +18,7 @@ describe('Mega menu', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-mega-menu')
+    expect(component).toHaveClass('ams-mega-menu')
   })
 
   it('renders an additional class name', () => {
@@ -26,7 +26,7 @@ describe('Mega menu', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-mega-menu extra')
+    expect(component).toHaveClass('ams-mega-menu extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/MegaMenu/MegaMenu.tsx b/packages/react/src/MegaMenu/MegaMenu.tsx
index 1d295e3c11..cf8d0b035b 100644
--- a/packages/react/src/MegaMenu/MegaMenu.tsx
+++ b/packages/react/src/MegaMenu/MegaMenu.tsx
@@ -16,7 +16,7 @@ type MegaMenuComponent = {
 
 export const MegaMenu = forwardRef(
   ({ children, className, ...restProps }: MegaMenuProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div {...restProps} ref={ref} className={clsx('amsterdam-mega-menu', className)}>
+    <div {...restProps} ref={ref} className={clsx('ams-mega-menu', className)}>
       {children}
     </div>
   ),
diff --git a/packages/react/src/MegaMenu/MegaMenuListCategory.test.tsx b/packages/react/src/MegaMenu/MegaMenuListCategory.test.tsx
index cf225be4db..1c8efa8f8f 100644
--- a/packages/react/src/MegaMenu/MegaMenuListCategory.test.tsx
+++ b/packages/react/src/MegaMenu/MegaMenuListCategory.test.tsx
@@ -18,7 +18,7 @@ describe('Mega menu category', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-mega-menu__list-category')
+    expect(component).toHaveClass('ams-mega-menu__list-category')
   })
 
   it('renders an additional class name', () => {
@@ -26,7 +26,7 @@ describe('Mega menu category', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-mega-menu__list-category extra')
+    expect(component).toHaveClass('ams-mega-menu__list-category extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/MegaMenu/MegaMenuListCategory.tsx b/packages/react/src/MegaMenu/MegaMenuListCategory.tsx
index 3759b70334..70465528e7 100644
--- a/packages/react/src/MegaMenu/MegaMenuListCategory.tsx
+++ b/packages/react/src/MegaMenu/MegaMenuListCategory.tsx
@@ -10,7 +10,7 @@ export type MegaMenuListCategoryProps = PropsWithChildren<HTMLAttributes<HTMLDiv
 
 export const MegaMenuListCategory = forwardRef(
   ({ children, className, ...restProps }: MegaMenuListCategoryProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div {...restProps} ref={ref} className={clsx('amsterdam-mega-menu__list-category', className)}>
+    <div {...restProps} ref={ref} className={clsx('ams-mega-menu__list-category', className)}>
       {children}
     </div>
   ),
diff --git a/packages/react/src/OrderedList/OrderedList.test.tsx b/packages/react/src/OrderedList/OrderedList.test.tsx
index 15da0bac09..521aae0eaf 100644
--- a/packages/react/src/OrderedList/OrderedList.test.tsx
+++ b/packages/react/src/OrderedList/OrderedList.test.tsx
@@ -16,7 +16,7 @@ describe('Ordered list', () => {
 
     const component = screen.getByRole('list')
 
-    expect(component).toHaveClass('amsterdam-ordered-list')
+    expect(component).toHaveClass('ams-ordered-list')
   })
 
   it('renders a no markers class', () => {
@@ -24,7 +24,7 @@ describe('Ordered list', () => {
 
     const component = screen.getByRole('list')
 
-    expect(component).toHaveClass('amsterdam-ordered-list--no-markers')
+    expect(component).toHaveClass('ams-ordered-list--no-markers')
   })
 
   it('renders an inverse color class', () => {
@@ -32,7 +32,7 @@ describe('Ordered list', () => {
 
     const component = screen.getByRole('list')
 
-    expect(component).toHaveClass('amsterdam-ordered-list--inverse-color')
+    expect(component).toHaveClass('ams-ordered-list--inverse-color')
   })
 
   it('renders an additional class name', () => {
@@ -40,7 +40,7 @@ describe('Ordered list', () => {
 
     const component = screen.getByRole('list')
 
-    expect(component).toHaveClass('amsterdam-ordered-list extra')
+    expect(component).toHaveClass('ams-ordered-list extra')
   })
 
   it('renders its subcomponent', () => {
@@ -55,7 +55,7 @@ describe('Ordered list', () => {
     )
 
     const list = screen.getByRole('list')
-    const items = container.querySelectorAll('.amsterdam-ordered-list__item')
+    const items = container.querySelectorAll('.ams-ordered-list__item')
 
     expect(list).toBeInTheDocument()
     expect(items.length).toBe(3)
diff --git a/packages/react/src/OrderedList/OrderedList.tsx b/packages/react/src/OrderedList/OrderedList.tsx
index eb9b457d66..faf7f27dfc 100644
--- a/packages/react/src/OrderedList/OrderedList.tsx
+++ b/packages/react/src/OrderedList/OrderedList.tsx
@@ -25,9 +25,9 @@ export const OrderedList = forwardRef(
     <ol
       ref={ref}
       className={clsx(
-        'amsterdam-ordered-list',
-        inverseColor && 'amsterdam-ordered-list--inverse-color',
-        !markers && 'amsterdam-ordered-list--no-markers',
+        'ams-ordered-list',
+        inverseColor && 'ams-ordered-list--inverse-color',
+        !markers && 'ams-ordered-list--no-markers',
         className,
       )}
       {...restProps}
diff --git a/packages/react/src/OrderedList/OrderedListItem.test.tsx b/packages/react/src/OrderedList/OrderedListItem.test.tsx
index 8cba3e354a..56ea0184fc 100644
--- a/packages/react/src/OrderedList/OrderedListItem.test.tsx
+++ b/packages/react/src/OrderedList/OrderedListItem.test.tsx
@@ -17,7 +17,7 @@ describe('Ordered list item', () => {
 
     const component = screen.getByRole('listitem')
 
-    expect(component).toHaveClass('amsterdam-ordered-list__item')
+    expect(component).toHaveClass('ams-ordered-list__item')
   })
 
   it('renders an additional class name', () => {
@@ -25,7 +25,7 @@ describe('Ordered list item', () => {
 
     const component = screen.getByRole('listitem')
 
-    expect(component).toHaveClass('amsterdam-ordered-list__item extra')
+    expect(component).toHaveClass('ams-ordered-list__item extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/OrderedList/OrderedListItem.tsx b/packages/react/src/OrderedList/OrderedListItem.tsx
index c11ad769f1..54ee560565 100644
--- a/packages/react/src/OrderedList/OrderedListItem.tsx
+++ b/packages/react/src/OrderedList/OrderedListItem.tsx
@@ -11,7 +11,7 @@ export type OrderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElem
 
 export const OrderedListItem = forwardRef(
   ({ children, className, ...restProps }: OrderedListItemProps, ref: ForwardedRef<HTMLLIElement>) => (
-    <li ref={ref} className={clsx('amsterdam-ordered-list__item', className)} {...restProps}>
+    <li ref={ref} className={clsx('ams-ordered-list__item', className)} {...restProps}>
       {children}
     </li>
   ),
diff --git a/packages/react/src/Overlap/Overlap.test.tsx b/packages/react/src/Overlap/Overlap.test.tsx
index d1e46ded25..9006aae378 100644
--- a/packages/react/src/Overlap/Overlap.test.tsx
+++ b/packages/react/src/Overlap/Overlap.test.tsx
@@ -14,13 +14,13 @@ describe('Overlap', () => {
   it('renders a design system BEM class name', () => {
     const { container } = render(<Overlap />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-overlap')
+    expect(component).toHaveClass('ams-overlap')
   })
 
   it('renders an additional class name', () => {
     const { container } = render(<Overlap className="extra" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-overlap extra')
+    expect(component).toHaveClass('ams-overlap extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Overlap/Overlap.tsx b/packages/react/src/Overlap/Overlap.tsx
index e03373232a..e3464d10a3 100644
--- a/packages/react/src/Overlap/Overlap.tsx
+++ b/packages/react/src/Overlap/Overlap.tsx
@@ -11,7 +11,7 @@ export type OverlapProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 export const Overlap = forwardRef(
   ({ children, className, ...restProps }: OverlapProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div {...restProps} ref={ref} className={clsx('amsterdam-overlap', className)}>
+    <div {...restProps} ref={ref} className={clsx('ams-overlap', className)}>
       {children}
     </div>
   ),
diff --git a/packages/react/src/PageHeading/PageHeading.test.tsx b/packages/react/src/PageHeading/PageHeading.test.tsx
index 6b1a316dee..52025b5485 100644
--- a/packages/react/src/PageHeading/PageHeading.test.tsx
+++ b/packages/react/src/PageHeading/PageHeading.test.tsx
@@ -20,7 +20,7 @@ describe('Page heading', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-page-heading')
+    expect(component).toHaveClass('ams-page-heading')
   })
 
   it('renders an additional class name', () => {
@@ -30,7 +30,7 @@ describe('Page heading', () => {
 
     expect(component).toHaveClass('extra')
 
-    expect(component).toHaveClass('amsterdam-page-heading')
+    expect(component).toHaveClass('ams-page-heading')
   })
 
   it('renders the right inverse color class', () => {
@@ -38,7 +38,7 @@ describe('Page heading', () => {
 
     const pageHeading = screen.getByRole('heading', { name: 'Titel' })
 
-    expect(pageHeading).toHaveClass('amsterdam-page-heading--inverse-color')
+    expect(pageHeading).toHaveClass('ams-page-heading--inverse-color')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/PageHeading/PageHeading.tsx b/packages/react/src/PageHeading/PageHeading.tsx
index 34339306d2..29dde5713a 100644
--- a/packages/react/src/PageHeading/PageHeading.tsx
+++ b/packages/react/src/PageHeading/PageHeading.tsx
@@ -20,7 +20,7 @@ export const PageHeading = forwardRef(
     <h1
       {...restProps}
       ref={ref}
-      className={clsx('amsterdam-page-heading', inverseColor && 'amsterdam-page-heading--inverse-color', className)}
+      className={clsx('ams-page-heading', inverseColor && 'ams-page-heading--inverse-color', className)}
     >
       {children}
     </h1>
diff --git a/packages/react/src/PageMenu/PageMenu.test.tsx b/packages/react/src/PageMenu/PageMenu.test.tsx
index c6153156b5..e87e594afa 100644
--- a/packages/react/src/PageMenu/PageMenu.test.tsx
+++ b/packages/react/src/PageMenu/PageMenu.test.tsx
@@ -26,13 +26,13 @@ describe('Page menu', () => {
   it('renders a design system BEM class name', () => {
     const { container } = render(<PageMenu />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-page-menu')
+    expect(component).toHaveClass('ams-page-menu')
   })
 
   it('renders a class name for end alignment', () => {
     const { container } = render(<PageMenu alignEnd />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-page-menu--align-end')
+    expect(component).toHaveClass('ams-page-menu--align-end')
   })
 
   it('is able to pass a React ref', () => {
@@ -50,6 +50,6 @@ describe('Page menu', () => {
     const { container } = render(<PageMenu className="intro" />)
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass('intro')
-    expect(component).toHaveClass('amsterdam-page-menu')
+    expect(component).toHaveClass('ams-page-menu')
   })
 })
diff --git a/packages/react/src/PageMenu/PageMenu.tsx b/packages/react/src/PageMenu/PageMenu.tsx
index e3afb94feb..f80ec95993 100644
--- a/packages/react/src/PageMenu/PageMenu.tsx
+++ b/packages/react/src/PageMenu/PageMenu.tsx
@@ -22,11 +22,7 @@ type PageMenuComponent = {
 
 export const PageMenu = forwardRef(
   ({ alignEnd, children, className, ...restProps }: PageMenuProps, ref: ForwardedRef<HTMLUListElement>) => (
-    <ul
-      {...restProps}
-      className={clsx('amsterdam-page-menu', alignEnd && `amsterdam-page-menu--align-end`, className)}
-      ref={ref}
-    >
+    <ul {...restProps} className={clsx('ams-page-menu', alignEnd && `ams-page-menu--align-end`, className)} ref={ref}>
       {children}
     </ul>
   ),
diff --git a/packages/react/src/PageMenu/PageMenuLink.test.tsx b/packages/react/src/PageMenu/PageMenuLink.test.tsx
index de11bbe6a4..afef7e1745 100644
--- a/packages/react/src/PageMenu/PageMenuLink.test.tsx
+++ b/packages/react/src/PageMenu/PageMenuLink.test.tsx
@@ -19,7 +19,7 @@ describe('Page menu link', () => {
 
     const component = screen.getByRole('link')
 
-    expect(component).toHaveClass('amsterdam-page-menu__link')
+    expect(component).toHaveClass('ams-page-menu__link')
   })
 
   it('renders an additional class name', () => {
@@ -31,13 +31,13 @@ describe('Page menu link', () => {
 
     const component = screen.getByRole('link')
 
-    expect(component).toHaveClass('amsterdam-page-menu__link extra')
+    expect(component).toHaveClass('ams-page-menu__link extra')
   })
 
   it('does not render an icon by default', () => {
     const { container } = render(<PageMenuLink href="#">Link</PageMenuLink>)
 
-    const svg = container.querySelector('.amsterdam-icon')
+    const svg = container.querySelector('.ams-icon')
 
     expect(svg).not.toBeInTheDocument()
   })
@@ -49,7 +49,7 @@ describe('Page menu link', () => {
       </PageMenuLink>,
     )
 
-    const svg = container.querySelector('.amsterdam-icon')
+    const svg = container.querySelector('.ams-icon')
 
     expect(svg).toBeInTheDocument()
   })
diff --git a/packages/react/src/PageMenu/PageMenuLink.tsx b/packages/react/src/PageMenu/PageMenuLink.tsx
index 0ba3266f4c..674e1a7c30 100644
--- a/packages/react/src/PageMenu/PageMenuLink.tsx
+++ b/packages/react/src/PageMenu/PageMenuLink.tsx
@@ -15,7 +15,7 @@ export type PageMenuLinkProps = {
 export const PageMenuLink = forwardRef(
   ({ children, className, icon, ...restProps }: PageMenuLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => (
     <li>
-      <a {...restProps} ref={ref} className={clsx('amsterdam-page-menu__link', className)}>
+      <a {...restProps} ref={ref} className={clsx('ams-page-menu__link', className)}>
         {children}
         {icon && <Icon svg={icon} size="level-6" />}
       </a>
diff --git a/packages/react/src/Pagination/Pagination.test.tsx b/packages/react/src/Pagination/Pagination.test.tsx
index 6c27b68e0f..867fde8a01 100644
--- a/packages/react/src/Pagination/Pagination.test.tsx
+++ b/packages/react/src/Pagination/Pagination.test.tsx
@@ -14,14 +14,14 @@ describe('Pagination', () => {
   it('renders a design system BEM class name', () => {
     const { container } = render(<Pagination totalPages={10} />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-pagination')
+    expect(component).toHaveClass('ams-pagination')
   })
 
   it('can have a additional class name', () => {
     const { container } = render(<Pagination totalPages={10} className="extra" />)
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass('extra')
-    expect(component).toHaveClass('amsterdam-pagination')
+    expect(component).toHaveClass('ams-pagination')
   })
 
   it('should render all the pages when totalPages < maxVisiblePages', () => {
diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
index e1599dbed8..c787abb4cc 100644
--- a/packages/react/src/Pagination/Pagination.tsx
+++ b/packages/react/src/Pagination/Pagination.tsx
@@ -113,12 +113,12 @@ export const Pagination = forwardRef(
     }
 
     return (
-      <nav {...restProps} className={clsx('amsterdam-pagination', className)} ref={ref} aria-label="Paginering">
-        <ol className="amsterdam-pagination__list">
+      <nav {...restProps} className={clsx('ams-pagination', className)} ref={ref} aria-label="Paginering">
+        <ol className="ams-pagination__list">
           <li>
             <button
               aria-label="Vorige pagina"
-              className="amsterdam-pagination__button"
+              className="ams-pagination__button"
               disabled={currentPage === 1}
               onClick={onPrevious}
               type="button"
@@ -138,8 +138,8 @@ export const Pagination = forwardRef(
                       : `Ga naar pagina ${pageNumberOrSpacer}`
                   }
                   className={clsx(
-                    'amsterdam-pagination__button',
-                    pageNumberOrSpacer === currentPage && 'amsterdam-pagination__button--current',
+                    'ams-pagination__button',
+                    pageNumberOrSpacer === currentPage && 'ams-pagination__button--current',
                   )}
                   onClick={() => pageNumberOrSpacer !== currentPage && onChangePage(pageNumberOrSpacer)}
                   tabIndex={pageNumberOrSpacer === currentPage ? -1 : 0}
@@ -157,7 +157,7 @@ export const Pagination = forwardRef(
           <li>
             <button
               aria-label="Volgende pagina"
-              className="amsterdam-pagination__button"
+              className="ams-pagination__button"
               disabled={currentPage === totalPages}
               onClick={onNext}
               type="button"
diff --git a/packages/react/src/Paragraph/Paragraph.test.tsx b/packages/react/src/Paragraph/Paragraph.test.tsx
index af25f67558..28e76ef0fa 100644
--- a/packages/react/src/Paragraph/Paragraph.test.tsx
+++ b/packages/react/src/Paragraph/Paragraph.test.tsx
@@ -25,7 +25,7 @@ describe('Paragraph', () => {
 
     const paragraph = container.querySelector(':only-child')
 
-    expect(paragraph).toHaveClass('amsterdam-paragraph')
+    expect(paragraph).toHaveClass('ams-paragraph')
   })
 
   it('renders rich text content', () => {
@@ -47,8 +47,8 @@ describe('Paragraph', () => {
 
     const paragraph = container.querySelector(':only-child')
 
-    expect(paragraph).not.toHaveClass('amsterdam-paragraph--large')
-    expect(paragraph).not.toHaveClass('amsterdam-paragraph--small')
+    expect(paragraph).not.toHaveClass('ams-paragraph--large')
+    expect(paragraph).not.toHaveClass('ams-paragraph--small')
   })
 
   it('renders the right size classes', () => {
@@ -62,8 +62,8 @@ describe('Paragraph', () => {
     const smallParagraph = screen.getByText('Small paragraph')
     const largeParagraph = screen.getByText('Large paragraph')
 
-    expect(smallParagraph).toHaveClass('amsterdam-paragraph--small')
-    expect(largeParagraph).toHaveClass('amsterdam-paragraph--large')
+    expect(smallParagraph).toHaveClass('ams-paragraph--small')
+    expect(largeParagraph).toHaveClass('ams-paragraph--large')
   })
 
   it('renders the right inverse color class', () => {
@@ -71,7 +71,7 @@ describe('Paragraph', () => {
 
     const paragraph = screen.getByText('Paragraph')
 
-    expect(paragraph).toHaveClass('amsterdam-paragraph--inverse-color')
+    expect(paragraph).toHaveClass('ams-paragraph--inverse-color')
   })
 
   it('renders an additional class name', () => {
@@ -81,7 +81,7 @@ describe('Paragraph', () => {
 
     expect(paragraph).toHaveClass('intro')
 
-    expect(paragraph).toHaveClass('amsterdam-paragraph')
+    expect(paragraph).toHaveClass('ams-paragraph')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Paragraph/Paragraph.tsx b/packages/react/src/Paragraph/Paragraph.tsx
index 9cdeadeeef..9a7b1a17b4 100644
--- a/packages/react/src/Paragraph/Paragraph.tsx
+++ b/packages/react/src/Paragraph/Paragraph.tsx
@@ -25,9 +25,9 @@ export const Paragraph = forwardRef(
     <p
       ref={ref}
       className={clsx(
-        'amsterdam-paragraph',
-        size && `amsterdam-paragraph--${size}`,
-        inverseColor && 'amsterdam-paragraph--inverse-color',
+        'ams-paragraph',
+        size && `ams-paragraph--${size}`,
+        inverseColor && 'ams-paragraph--inverse-color',
         className,
       )}
       {...otherProps}
diff --git a/packages/react/src/Radio/Radio.test.tsx b/packages/react/src/Radio/Radio.test.tsx
index e2be6603ae..c79e403bf7 100644
--- a/packages/react/src/Radio/Radio.test.tsx
+++ b/packages/react/src/Radio/Radio.test.tsx
@@ -28,9 +28,9 @@ describe('Radio', () => {
     const input = screen.getByRole('radio')
     const label = container.querySelector('label')
 
-    expect(wrapper).toHaveClass('amsterdam-radio')
-    expect(input).toHaveClass('amsterdam-radio__input')
-    expect(label).toHaveClass('amsterdam-radio__label')
+    expect(wrapper).toHaveClass('ams-radio')
+    expect(input).toHaveClass('ams-radio__input')
+    expect(label).toHaveClass('ams-radio__label')
   })
 
   it('renders an additional class name', () => {
@@ -38,7 +38,7 @@ describe('Radio', () => {
 
     const wrapper = container.querySelector(':only-child')
 
-    expect(wrapper).toHaveClass('amsterdam-radio extra')
+    expect(wrapper).toHaveClass('ams-radio extra')
   })
 
   // checked state
diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx
index 2453c5a1de..920d889007 100644
--- a/packages/react/src/Radio/Radio.tsx
+++ b/packages/react/src/Radio/Radio.tsx
@@ -18,17 +18,17 @@ export const Radio = forwardRef(
     return (
       // This div is here because NVDA doesn't match the input to the label
       // without a containing element
-      <div className={clsx('amsterdam-radio', className)}>
+      <div className={clsx('ams-radio', className)}>
         <input
           {...restProps}
           type="radio"
-          className="amsterdam-radio__input"
+          className="ams-radio__input"
           ref={ref}
           id={id}
           aria-invalid={invalid || undefined}
         />
-        <label className="amsterdam-radio__label" htmlFor={id}>
-          <span className="amsterdam-radio__circle" />
+        <label className="ams-radio__label" htmlFor={id}>
+          <span className="ams-radio__circle" />
           {children}
         </label>
       </div>
diff --git a/packages/react/src/Row/Row.test.tsx b/packages/react/src/Row/Row.test.tsx
index bb1b95e11e..a0cd46f245 100644
--- a/packages/react/src/Row/Row.test.tsx
+++ b/packages/react/src/Row/Row.test.tsx
@@ -18,7 +18,7 @@ describe('Row', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-row--medium')
+    expect(component).toHaveClass('ams-row--medium')
   })
 
   rowGapSizes.map((size) =>
@@ -27,7 +27,7 @@ describe('Row', () => {
 
       const component = container.querySelector(':only-child')
 
-      expect(component).toHaveClass(`amsterdam-row--${size}`)
+      expect(component).toHaveClass(`ams-row--${size}`)
     }),
   )
 
@@ -36,7 +36,7 @@ describe('Row', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-row--medium extra')
+    expect(component).toHaveClass('ams-row--medium extra')
   })
 
   it('renders with an article tag', () => {
diff --git a/packages/react/src/Row/Row.tsx b/packages/react/src/Row/Row.tsx
index 70cf358ac8..2df6cd0d73 100644
--- a/packages/react/src/Row/Row.tsx
+++ b/packages/react/src/Row/Row.tsx
@@ -24,7 +24,7 @@ export const Row = forwardRef(
     { as: Tag = 'div', children, className, gap = 'medium', ...restProps }: RowProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
-    <Tag {...restProps} ref={ref} className={clsx('amsterdam-row', `amsterdam-row--${gap}`, className)}>
+    <Tag {...restProps} ref={ref} className={clsx('ams-row', `ams-row--${gap}`, className)}>
       {children}
     </Tag>
   ),
diff --git a/packages/react/src/Screen/Screen.test.tsx b/packages/react/src/Screen/Screen.test.tsx
index 213ad3adb5..cc2232e2aa 100644
--- a/packages/react/src/Screen/Screen.test.tsx
+++ b/packages/react/src/Screen/Screen.test.tsx
@@ -18,7 +18,7 @@ describe('Screen', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-screen')
+    expect(component).toHaveClass('ams-screen')
   })
 
   it('renders the max-width class name', () => {
@@ -26,7 +26,7 @@ describe('Screen', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-screen--x-wide')
+    expect(component).toHaveClass('ams-screen--x-wide')
   })
 
   it('renders an additional class name', () => {
@@ -36,7 +36,7 @@ describe('Screen', () => {
 
     expect(component).toHaveClass('extra')
 
-    expect(component).toHaveClass('amsterdam-screen')
+    expect(component).toHaveClass('ams-screen')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Screen/Screen.tsx b/packages/react/src/Screen/Screen.tsx
index 9e87528657..acb88f38f0 100644
--- a/packages/react/src/Screen/Screen.tsx
+++ b/packages/react/src/Screen/Screen.tsx
@@ -15,7 +15,7 @@ export type ScreenProps = {
 
 export const Screen = forwardRef(
   ({ children, className, maxWidth = 'wide', ...restProps }: ScreenProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div {...restProps} ref={ref} className={clsx('amsterdam-screen', `amsterdam-screen--${maxWidth}`, className)}>
+    <div {...restProps} ref={ref} className={clsx('ams-screen', `ams-screen--${maxWidth}`, className)}>
       {children}
     </div>
   ),
diff --git a/packages/react/src/SearchField/SearchField.test.tsx b/packages/react/src/SearchField/SearchField.test.tsx
index 33e6715185..0ebc7f99d5 100644
--- a/packages/react/src/SearchField/SearchField.test.tsx
+++ b/packages/react/src/SearchField/SearchField.test.tsx
@@ -36,7 +36,7 @@ describe('Search field', () => {
 
     const component = screen.getByRole('search')
 
-    expect(component).toHaveClass('amsterdam-search-field')
+    expect(component).toHaveClass('ams-search-field')
   })
 
   it('renders an additional class name', () => {
@@ -46,7 +46,7 @@ describe('Search field', () => {
 
     expect(component).toHaveClass('extra')
 
-    expect(component).toHaveClass('amsterdam-search-field')
+    expect(component).toHaveClass('ams-search-field')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/SearchField/SearchField.tsx b/packages/react/src/SearchField/SearchField.tsx
index 3c80f017b7..7b9acd34f8 100644
--- a/packages/react/src/SearchField/SearchField.tsx
+++ b/packages/react/src/SearchField/SearchField.tsx
@@ -19,7 +19,7 @@ type SearchFieldComponent = {
 export const SearchField = forwardRef(
   ({ children, className, ...restProps }: SearchFieldProps, ref: ForwardedRef<HTMLFormElement>) => {
     return (
-      <form role="search" {...restProps} ref={ref} className={clsx('amsterdam-search-field', className)}>
+      <form role="search" {...restProps} ref={ref} className={clsx('ams-search-field', className)}>
         {children}
       </form>
     )
diff --git a/packages/react/src/SearchField/SearchFieldButton.tsx b/packages/react/src/SearchField/SearchFieldButton.tsx
index f7179587f9..5ab7dc0e19 100644
--- a/packages/react/src/SearchField/SearchFieldButton.tsx
+++ b/packages/react/src/SearchField/SearchFieldButton.tsx
@@ -16,7 +16,7 @@ type SearchFieldButtonProps = HTMLAttributes<HTMLButtonElement>
 // TODO: discuss if IconButton is the right component to replace this
 export const SearchFieldButton = forwardRef(
   ({ className, ...restProps }: SearchFieldButtonProps, ref: ForwardedRef<HTMLButtonElement>) => (
-    <button {...restProps} ref={ref} className={clsx('amsterdam-search-field__button', className)}>
+    <button {...restProps} ref={ref} className={clsx('ams-search-field__button', className)}>
       <VisuallyHidden>Zoeken</VisuallyHidden>
       <Icon svg={SearchIcon} size="level-6" square />
     </button>
diff --git a/packages/react/src/SearchField/SearchFieldInput.test.tsx b/packages/react/src/SearchField/SearchFieldInput.test.tsx
index 2575a3beed..f71a1049f6 100644
--- a/packages/react/src/SearchField/SearchFieldInput.test.tsx
+++ b/packages/react/src/SearchField/SearchFieldInput.test.tsx
@@ -19,7 +19,7 @@ describe('Search field input', () => {
 
     const component = screen.getByRole('searchbox', { name: 'Zoeken' })
 
-    expect(component).toHaveClass('amsterdam-search-field__input')
+    expect(component).toHaveClass('ams-search-field__input')
   })
 
   it('renders an additional class name', () => {
@@ -29,7 +29,7 @@ describe('Search field input', () => {
 
     expect(component).toHaveClass('extra')
 
-    expect(component).toHaveClass('amsterdam-search-field__input')
+    expect(component).toHaveClass('ams-search-field__input')
   })
 
   it('supports a custom label', () => {
diff --git a/packages/react/src/SearchField/SearchFieldInput.tsx b/packages/react/src/SearchField/SearchFieldInput.tsx
index e67aed3d75..bae748ca79 100644
--- a/packages/react/src/SearchField/SearchFieldInput.tsx
+++ b/packages/react/src/SearchField/SearchFieldInput.tsx
@@ -24,7 +24,7 @@ export const SearchFieldInput = forwardRef(
         <input
           {...restProps}
           autoComplete="off"
-          className={clsx('amsterdam-search-field__input', className)}
+          className={clsx('ams-search-field__input', className)}
           enterKeyHint="search"
           id={id}
           ref={ref}
diff --git a/packages/react/src/SkipLink/SkipLink.test.tsx b/packages/react/src/SkipLink/SkipLink.test.tsx
index 10a358c90c..b83978027f 100644
--- a/packages/react/src/SkipLink/SkipLink.test.tsx
+++ b/packages/react/src/SkipLink/SkipLink.test.tsx
@@ -18,7 +18,7 @@ describe('Skip link', () => {
 
     const component = screen.getByRole('link')
 
-    expect(component).toHaveClass('amsterdam-skip-link')
+    expect(component).toHaveClass('ams-skip-link')
   })
 
   it('renders an additional class name', () => {
@@ -26,7 +26,7 @@ describe('Skip link', () => {
 
     const component = screen.getByRole('link')
 
-    expect(component).toHaveClass('amsterdam-skip-link extra')
+    expect(component).toHaveClass('ams-skip-link extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/SkipLink/SkipLink.tsx b/packages/react/src/SkipLink/SkipLink.tsx
index 8c4d3c71ff..599b997c92 100644
--- a/packages/react/src/SkipLink/SkipLink.tsx
+++ b/packages/react/src/SkipLink/SkipLink.tsx
@@ -11,7 +11,7 @@ export type SkipLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorEle
 
 export const SkipLink = forwardRef(
   ({ children, className, ...restProps }: SkipLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => (
-    <a {...restProps} ref={ref} className={clsx('amsterdam-skip-link', 'amsterdam-visually-hidden', className)}>
+    <a {...restProps} ref={ref} className={clsx('ams-skip-link', 'ams-visually-hidden', className)}>
       {children}
     </a>
   ),
diff --git a/packages/react/src/Spotlight/Spotlight.test.tsx b/packages/react/src/Spotlight/Spotlight.test.tsx
index 3656698cbd..1e1e813d20 100644
--- a/packages/react/src/Spotlight/Spotlight.test.tsx
+++ b/packages/react/src/Spotlight/Spotlight.test.tsx
@@ -18,7 +18,7 @@ describe('Spotlight', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-spotlight')
+    expect(component).toHaveClass('ams-spotlight')
   })
 
   it('renders an additional class name', () => {
@@ -28,7 +28,7 @@ describe('Spotlight', () => {
 
     expect(component).toHaveClass('extra')
 
-    expect(component).toHaveClass('amsterdam-spotlight')
+    expect(component).toHaveClass('ams-spotlight')
   })
 
   it('supports ForwardRef in React', () => {
@@ -47,7 +47,7 @@ describe('Spotlight', () => {
 
       const component = container.querySelector(':only-child')
 
-      expect(component).toHaveClass(`amsterdam-spotlight--${color}`)
+      expect(component).toHaveClass(`ams-spotlight--${color}`)
     }),
   )
 
diff --git a/packages/react/src/Spotlight/Spotlight.tsx b/packages/react/src/Spotlight/Spotlight.tsx
index d08e86269c..a6b0771c78 100644
--- a/packages/react/src/Spotlight/Spotlight.tsx
+++ b/packages/react/src/Spotlight/Spotlight.tsx
@@ -26,7 +26,7 @@ export type SpotlightProps = {
 
 export const Spotlight = forwardRef<HTMLDivElement, SpotlightProps>(
   ({ children, className, as: Tag = 'div', color = 'dark-blue', ...restProps }: SpotlightProps, ref) => (
-    <Tag {...restProps} ref={ref} className={clsx('amsterdam-spotlight', `amsterdam-spotlight--${color}`, className)}>
+    <Tag {...restProps} ref={ref} className={clsx('ams-spotlight', `ams-spotlight--${color}`, className)}>
       {children}
     </Tag>
   ),
diff --git a/packages/react/src/Switch/Switch.test.tsx b/packages/react/src/Switch/Switch.test.tsx
index 95b6197ebd..deabb97c71 100644
--- a/packages/react/src/Switch/Switch.test.tsx
+++ b/packages/react/src/Switch/Switch.test.tsx
@@ -79,14 +79,14 @@ describe('Switch', () => {
     const { container } = render(<Switch />)
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-switch')
+    expect(component).toHaveClass('ams-switch')
   })
 
   it('renders an additional class name', () => {
     const { container } = render(<Switch className="extra" />)
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-switch', 'extra')
+    expect(component).toHaveClass('ams-switch', 'extra')
   })
 
   it('is able to pass a React ref', () => {
diff --git a/packages/react/src/Switch/Switch.tsx b/packages/react/src/Switch/Switch.tsx
index d4a2167b0a..ecfd11842f 100644
--- a/packages/react/src/Switch/Switch.tsx
+++ b/packages/react/src/Switch/Switch.tsx
@@ -14,17 +14,10 @@ export const Switch = forwardRef(
     const inputId = id || useId()
 
     return (
-      <div className={clsx('amsterdam-switch', className)}>
-        <input
-          {...restProps}
-          className="amsterdam-switch__input"
-          id={inputId}
-          ref={ref}
-          type="checkbox"
-          role="switch"
-        />
+      <div className={clsx('ams-switch', className)}>
+        <input {...restProps} className="ams-switch__input" id={inputId} ref={ref} type="checkbox" role="switch" />
 
-        <label className="amsterdam-switch__label" htmlFor={inputId}></label>
+        <label className="ams-switch__label" htmlFor={inputId}></label>
       </div>
     )
   },
diff --git a/packages/react/src/Table/Table.test.tsx b/packages/react/src/Table/Table.test.tsx
index 2a108b22c6..3dbddafea6 100644
--- a/packages/react/src/Table/Table.test.tsx
+++ b/packages/react/src/Table/Table.test.tsx
@@ -18,7 +18,7 @@ describe('Table', () => {
 
     const component = screen.getByRole('table')
 
-    expect(component).toHaveClass('amsterdam-table__table')
+    expect(component).toHaveClass('ams-table__table')
   })
 
   it('renders an additional class name', () => {
@@ -26,7 +26,7 @@ describe('Table', () => {
 
     const component = screen.getByRole('table')
 
-    expect(component).toHaveClass('amsterdam-table__table extra')
+    expect(component).toHaveClass('ams-table__table extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Table/Table.tsx b/packages/react/src/Table/Table.tsx
index 9257026422..9dab9bc461 100644
--- a/packages/react/src/Table/Table.tsx
+++ b/packages/react/src/Table/Table.tsx
@@ -34,8 +34,8 @@ type TableComponent = {
 
 export const Table = forwardRef(
   ({ children, className, ...restProps }: TableProps, ref: ForwardedRef<HTMLTableElement>) => (
-    <div className="amsterdam-table">
-      <table {...restProps} ref={ref} className={clsx('amsterdam-table__table', className)}>
+    <div className="ams-table">
+      <table {...restProps} ref={ref} className={clsx('ams-table__table', className)}>
         {children}
       </table>
     </div>
diff --git a/packages/react/src/Table/TableBody.test.tsx b/packages/react/src/Table/TableBody.test.tsx
index 24580191dd..24e948ccaa 100644
--- a/packages/react/src/Table/TableBody.test.tsx
+++ b/packages/react/src/Table/TableBody.test.tsx
@@ -27,7 +27,7 @@ describe('Table body', () => {
 
     const component = screen.getByRole('rowgroup')
 
-    expect(component).toHaveClass('amsterdam-table__body')
+    expect(component).toHaveClass('ams-table__body')
   })
 
   it('renders an additional class name', () => {
@@ -39,7 +39,7 @@ describe('Table body', () => {
 
     const component = screen.getByRole('rowgroup')
 
-    expect(component).toHaveClass('amsterdam-table__body extra')
+    expect(component).toHaveClass('ams-table__body extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Table/TableBody.tsx b/packages/react/src/Table/TableBody.tsx
index a377ec7d99..aab2e0fef3 100644
--- a/packages/react/src/Table/TableBody.tsx
+++ b/packages/react/src/Table/TableBody.tsx
@@ -11,7 +11,7 @@ export type TableBodyProps = PropsWithChildren<HTMLAttributes<HTMLTableSectionEl
 
 export const TableBody = forwardRef(
   ({ children, className, ...restProps }: TableBodyProps, ref: ForwardedRef<HTMLTableSectionElement>) => (
-    <tbody {...restProps} ref={ref} className={clsx('amsterdam-table__body', className)}>
+    <tbody {...restProps} ref={ref} className={clsx('ams-table__body', className)}>
       {children}
     </tbody>
   ),
diff --git a/packages/react/src/Table/TableCaption.test.tsx b/packages/react/src/Table/TableCaption.test.tsx
index 8e7d94a8ca..af6f9b0b81 100644
--- a/packages/react/src/Table/TableCaption.test.tsx
+++ b/packages/react/src/Table/TableCaption.test.tsx
@@ -32,7 +32,7 @@ describe('Table caption', () => {
     })
     const caption = component?.querySelector(':only-child')
 
-    expect(caption).toHaveClass('amsterdam-table__caption')
+    expect(caption).toHaveClass('ams-table__caption')
   })
 
   it('renders an additional class name', () => {
@@ -47,7 +47,7 @@ describe('Table caption', () => {
     })
     const caption = component?.querySelector(':only-child')
 
-    expect(caption).toHaveClass('amsterdam-table__caption extra')
+    expect(caption).toHaveClass('ams-table__caption extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Table/TableCaption.tsx b/packages/react/src/Table/TableCaption.tsx
index e619328fe0..61af094ae8 100644
--- a/packages/react/src/Table/TableCaption.tsx
+++ b/packages/react/src/Table/TableCaption.tsx
@@ -12,7 +12,7 @@ export type TableCaptionProps = PropsWithChildren<HTMLAttributes<HTMLTableCaptio
 
 export const TableCaption = forwardRef(
   ({ children, className, ...restProps }: TableCaptionProps, ref: ForwardedRef<HTMLTableCaptionElement>) => (
-    <caption {...restProps} ref={ref} className={clsx('amsterdam-table__caption', className)}>
+    <caption {...restProps} ref={ref} className={clsx('ams-table__caption', className)}>
       {children}
     </caption>
   ),
diff --git a/packages/react/src/Table/TableCell.test.tsx b/packages/react/src/Table/TableCell.test.tsx
index 5a9ef0dbc4..e41d81edc0 100644
--- a/packages/react/src/Table/TableCell.test.tsx
+++ b/packages/react/src/Table/TableCell.test.tsx
@@ -37,7 +37,7 @@ describe('Table cell', () => {
 
     const component = screen.getByRole('cell')
 
-    expect(component).toHaveClass('amsterdam-table__cell')
+    expect(component).toHaveClass('ams-table__cell')
   })
 
   it('renders an additional class name', () => {
@@ -53,7 +53,7 @@ describe('Table cell', () => {
 
     const component = screen.getByRole('cell')
 
-    expect(component).toHaveClass('amsterdam-table__cell extra')
+    expect(component).toHaveClass('ams-table__cell extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Table/TableCell.tsx b/packages/react/src/Table/TableCell.tsx
index 58038c1cd3..6a9851077a 100644
--- a/packages/react/src/Table/TableCell.tsx
+++ b/packages/react/src/Table/TableCell.tsx
@@ -11,7 +11,7 @@ export type TableCellProps = PropsWithChildren<TdHTMLAttributes<HTMLTableCellEle
 
 export const TableCell = forwardRef(
   ({ children, className, ...restProps }: TableCellProps, ref: ForwardedRef<HTMLTableCellElement>) => (
-    <td {...restProps} ref={ref} className={clsx('amsterdam-table__cell', className)}>
+    <td {...restProps} ref={ref} className={clsx('ams-table__cell', className)}>
       {children}
     </td>
   ),
diff --git a/packages/react/src/Table/TableFooter.test.tsx b/packages/react/src/Table/TableFooter.test.tsx
index 6b1c548451..a6a2aee640 100644
--- a/packages/react/src/Table/TableFooter.test.tsx
+++ b/packages/react/src/Table/TableFooter.test.tsx
@@ -27,7 +27,7 @@ describe('Table footer', () => {
 
     const component = screen.getByRole('rowgroup')
 
-    expect(component).toHaveClass('amsterdam-table__footer')
+    expect(component).toHaveClass('ams-table__footer')
   })
 
   it('renders an additional class name', () => {
@@ -39,7 +39,7 @@ describe('Table footer', () => {
 
     const component = screen.getByRole('rowgroup')
 
-    expect(component).toHaveClass('amsterdam-table__footer extra')
+    expect(component).toHaveClass('ams-table__footer extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Table/TableFooter.tsx b/packages/react/src/Table/TableFooter.tsx
index 3c85209f21..1dc65ee9b6 100644
--- a/packages/react/src/Table/TableFooter.tsx
+++ b/packages/react/src/Table/TableFooter.tsx
@@ -11,7 +11,7 @@ export type TableFooterProps = PropsWithChildren<HTMLAttributes<HTMLTableSection
 
 export const TableFooter = forwardRef(
   ({ children, className, ...restProps }: TableFooterProps, ref: ForwardedRef<HTMLTableSectionElement>) => (
-    <tfoot {...restProps} ref={ref} className={clsx('amsterdam-table__footer', className)}>
+    <tfoot {...restProps} ref={ref} className={clsx('ams-table__footer', className)}>
       {children}
     </tfoot>
   ),
diff --git a/packages/react/src/Table/TableHeader.test.tsx b/packages/react/src/Table/TableHeader.test.tsx
index 932d59ae0e..c1bf348b5f 100644
--- a/packages/react/src/Table/TableHeader.test.tsx
+++ b/packages/react/src/Table/TableHeader.test.tsx
@@ -27,7 +27,7 @@ describe('Table header', () => {
 
     const component = screen.getByRole('rowgroup')
 
-    expect(component).toHaveClass('amsterdam-table__header')
+    expect(component).toHaveClass('ams-table__header')
   })
 
   it('renders an additional class name', () => {
@@ -39,7 +39,7 @@ describe('Table header', () => {
 
     const component = screen.getByRole('rowgroup')
 
-    expect(component).toHaveClass('amsterdam-table__header extra')
+    expect(component).toHaveClass('ams-table__header extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Table/TableHeader.tsx b/packages/react/src/Table/TableHeader.tsx
index 43a8f0f3d2..4fed3fbb83 100644
--- a/packages/react/src/Table/TableHeader.tsx
+++ b/packages/react/src/Table/TableHeader.tsx
@@ -11,7 +11,7 @@ export type TableHeaderProps = PropsWithChildren<HTMLAttributes<HTMLTableSection
 
 export const TableHeader = forwardRef(
   ({ children, className, ...restProps }: TableHeaderProps, ref: ForwardedRef<HTMLTableSectionElement>) => (
-    <thead {...restProps} ref={ref} className={clsx('amsterdam-table__header', className)}>
+    <thead {...restProps} ref={ref} className={clsx('ams-table__header', className)}>
       {children}
     </thead>
   ),
diff --git a/packages/react/src/Table/TableHeaderCell.test.tsx b/packages/react/src/Table/TableHeaderCell.test.tsx
index d62fa960d5..28b5f562f1 100644
--- a/packages/react/src/Table/TableHeaderCell.test.tsx
+++ b/packages/react/src/Table/TableHeaderCell.test.tsx
@@ -54,7 +54,7 @@ describe('Table header cell', () => {
 
     const component = screen.getByRole('columnheader')
 
-    expect(component).toHaveClass('amsterdam-table__header-cell')
+    expect(component).toHaveClass('ams-table__header-cell')
   })
 
   it('renders an additional class name', () => {
@@ -70,7 +70,7 @@ describe('Table header cell', () => {
 
     const component = screen.getByRole('columnheader')
 
-    expect(component).toHaveClass('amsterdam-table__header-cell extra')
+    expect(component).toHaveClass('ams-table__header-cell extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Table/TableHeaderCell.tsx b/packages/react/src/Table/TableHeaderCell.tsx
index e1c327b63a..a854103aec 100644
--- a/packages/react/src/Table/TableHeaderCell.tsx
+++ b/packages/react/src/Table/TableHeaderCell.tsx
@@ -11,7 +11,7 @@ export type TableHeaderCellProps = PropsWithChildren<ThHTMLAttributes<HTMLTableC
 
 export const TableHeaderCell = forwardRef(
   ({ children, className, ...restProps }: TableHeaderCellProps, ref: ForwardedRef<HTMLTableCellElement>) => (
-    <th {...restProps} ref={ref} className={clsx('amsterdam-table__header-cell', className)}>
+    <th {...restProps} ref={ref} className={clsx('ams-table__header-cell', className)}>
       {children}
     </th>
   ),
diff --git a/packages/react/src/Table/TableRow.test.tsx b/packages/react/src/Table/TableRow.test.tsx
index 83162a74c4..9cb730222c 100644
--- a/packages/react/src/Table/TableRow.test.tsx
+++ b/packages/react/src/Table/TableRow.test.tsx
@@ -32,7 +32,7 @@ describe('Table row', () => {
 
     const component = screen.getByRole('row')
 
-    expect(component).toHaveClass('amsterdam-table__row')
+    expect(component).toHaveClass('ams-table__row')
   })
 
   it('renders an additional class name', () => {
@@ -46,7 +46,7 @@ describe('Table row', () => {
 
     const component = screen.getByRole('row')
 
-    expect(component).toHaveClass('amsterdam-table__row extra')
+    expect(component).toHaveClass('ams-table__row extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Table/TableRow.tsx b/packages/react/src/Table/TableRow.tsx
index 3f9a403495..da7a3d2f00 100644
--- a/packages/react/src/Table/TableRow.tsx
+++ b/packages/react/src/Table/TableRow.tsx
@@ -11,7 +11,7 @@ export type TableRowProps = PropsWithChildren<HTMLAttributes<HTMLTableRowElement
 
 export const TableRow = forwardRef(
   ({ children, className, ...restProps }: TableRowProps, ref: ForwardedRef<HTMLTableRowElement>) => (
-    <tr {...restProps} ref={ref} className={clsx('amsterdam-table__row', className)}>
+    <tr {...restProps} ref={ref} className={clsx('ams-table__row', className)}>
       {children}
     </tr>
   ),
diff --git a/packages/react/src/Tabs/Tabs.test.tsx b/packages/react/src/Tabs/Tabs.test.tsx
index aaafbf7d1e..08859cabfd 100644
--- a/packages/react/src/Tabs/Tabs.test.tsx
+++ b/packages/react/src/Tabs/Tabs.test.tsx
@@ -18,7 +18,7 @@ describe('Tabs', () => {
 
     const component = screen.getByRole('tabs')
 
-    expect(component).toHaveClass('amsterdam-tabs')
+    expect(component).toHaveClass('ams-tabs')
   })
 
   it('renders an additional class name', () => {
@@ -26,7 +26,7 @@ describe('Tabs', () => {
 
     const component = screen.getByRole('tabs')
 
-    expect(component).toHaveClass('amsterdam-tabs extra')
+    expect(component).toHaveClass('ams-tabs extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Tabs/Tabs.tsx b/packages/react/src/Tabs/Tabs.tsx
index 38b242d900..8fcfa58420 100644
--- a/packages/react/src/Tabs/Tabs.tsx
+++ b/packages/react/src/Tabs/Tabs.tsx
@@ -43,13 +43,7 @@ export const Tabs = forwardRef(
 
     return (
       <TabsContext.Provider value={{ activeTab, updateTab, tabsId }}>
-        <div
-          {...restProps}
-          role="tabs"
-          ref={innerRef}
-          onKeyDown={keyDown}
-          className={clsx('amsterdam-tabs', className)}
-        >
+        <div {...restProps} role="tabs" ref={innerRef} onKeyDown={keyDown} className={clsx('ams-tabs', className)}>
           {children}
         </div>
       </TabsContext.Provider>
diff --git a/packages/react/src/Tabs/TabsButton.test.tsx b/packages/react/src/Tabs/TabsButton.test.tsx
index eb6faa3e11..261dd09dfe 100644
--- a/packages/react/src/Tabs/TabsButton.test.tsx
+++ b/packages/react/src/Tabs/TabsButton.test.tsx
@@ -17,7 +17,7 @@ describe('Tabs button', () => {
 
     const component = screen.getByRole('tab')
 
-    expect(component).toHaveClass('amsterdam-tabs__button')
+    expect(component).toHaveClass('ams-tabs__button')
   })
 
   it('renders an additional class name', () => {
@@ -25,7 +25,7 @@ describe('Tabs button', () => {
 
     const component = screen.getByRole('tab')
 
-    expect(component).toHaveClass('amsterdam-tabs__button extra')
+    expect(component).toHaveClass('ams-tabs__button extra')
   })
 
   it('renders a label', () => {
diff --git a/packages/react/src/Tabs/TabsButton.tsx b/packages/react/src/Tabs/TabsButton.tsx
index 18a5ad93cc..ab165dd790 100644
--- a/packages/react/src/Tabs/TabsButton.tsx
+++ b/packages/react/src/Tabs/TabsButton.tsx
@@ -30,7 +30,7 @@ export const TabsButton = forwardRef(
             updateTab(tab)
           })
         }}
-        className={clsx('amsterdam-tabs__button', className)}
+        className={clsx('ams-tabs__button', className)}
       >
         {children}
       </button>
diff --git a/packages/react/src/Tabs/TabsList.test.tsx b/packages/react/src/Tabs/TabsList.test.tsx
index faaac45a2f..b3705c0a76 100644
--- a/packages/react/src/Tabs/TabsList.test.tsx
+++ b/packages/react/src/Tabs/TabsList.test.tsx
@@ -17,7 +17,7 @@ describe('Tabs list', () => {
 
     const component = screen.getByRole('tablist')
 
-    expect(component).toHaveClass('amsterdam-tabs__list')
+    expect(component).toHaveClass('ams-tabs__list')
   })
 
   it('renders an additional class name', () => {
@@ -25,7 +25,7 @@ describe('Tabs list', () => {
 
     const component = screen.getByRole('tablist')
 
-    expect(component).toHaveClass('amsterdam-tabs__list extra')
+    expect(component).toHaveClass('ams-tabs__list extra')
   })
 
   it('supports ForwardRef in React', () => {
@@ -33,7 +33,7 @@ describe('Tabs list', () => {
 
     const { container } = render(<TabsList ref={ref} />)
 
-    const tabsList = container.querySelector('.amsterdam-tabs__list')
+    const tabsList = container.querySelector('.ams-tabs__list')
 
     expect(ref.current).toBe(tabsList)
   })
diff --git a/packages/react/src/Tabs/TabsList.tsx b/packages/react/src/Tabs/TabsList.tsx
index f2b69f22ca..67da91ab17 100644
--- a/packages/react/src/Tabs/TabsList.tsx
+++ b/packages/react/src/Tabs/TabsList.tsx
@@ -11,7 +11,7 @@ export type TabsListProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 export const TabsList = forwardRef(
   ({ children, className, ...restProps }: TabsListProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div {...restProps} role="tablist" ref={ref} className={clsx('amsterdam-tabs__list', className)}>
+    <div {...restProps} role="tablist" ref={ref} className={clsx('ams-tabs__list', className)}>
       {children}
     </div>
   ),
diff --git a/packages/react/src/Tabs/TabsPanel.test.tsx b/packages/react/src/Tabs/TabsPanel.test.tsx
index accfffc186..bb2599ea60 100644
--- a/packages/react/src/Tabs/TabsPanel.test.tsx
+++ b/packages/react/src/Tabs/TabsPanel.test.tsx
@@ -17,7 +17,7 @@ describe('Tabs panel', () => {
 
     const component = screen.getByRole('tabpanel')
 
-    expect(component).toHaveClass('amsterdam-tabs__panel')
+    expect(component).toHaveClass('ams-tabs__panel')
   })
 
   it('renders an additional class name', () => {
@@ -25,7 +25,7 @@ describe('Tabs panel', () => {
 
     const component = screen.getByRole('tabpanel')
 
-    expect(component).toHaveClass('amsterdam-tabs__panel extra')
+    expect(component).toHaveClass('ams-tabs__panel extra')
   })
 
   it('renders the correct id based on the tabs prop', () => {
@@ -49,7 +49,7 @@ describe('Tabs panel', () => {
 
     const { container } = render(<TabsPanel tab={0} ref={ref} />)
 
-    const tabsPanel = container.querySelector('.amsterdam-tabs__panel')
+    const tabsPanel = container.querySelector('.ams-tabs__panel')
 
     expect(ref.current).toBe(tabsPanel)
   })
diff --git a/packages/react/src/Tabs/TabsPanel.tsx b/packages/react/src/Tabs/TabsPanel.tsx
index 08fed826a7..44f73440ce 100644
--- a/packages/react/src/Tabs/TabsPanel.tsx
+++ b/packages/react/src/Tabs/TabsPanel.tsx
@@ -28,7 +28,7 @@ export const TabsPanel = forwardRef(
         id={`${tabsId}-panel-${tab}`}
         tabIndex={0}
         ref={ref}
-        className={clsx('amsterdam-tabs__panel', className)}
+        className={clsx('ams-tabs__panel', className)}
       >
         {children}
       </div>
diff --git a/packages/react/src/TextArea/TextArea.test.tsx b/packages/react/src/TextArea/TextArea.test.tsx
index e997d0f9d9..c976fff8c8 100644
--- a/packages/react/src/TextArea/TextArea.test.tsx
+++ b/packages/react/src/TextArea/TextArea.test.tsx
@@ -19,7 +19,7 @@ describe('Text area', () => {
 
     const component = screen.getByRole('textbox')
 
-    expect(component).toHaveClass('amsterdam-text-area')
+    expect(component).toHaveClass('ams-text-area')
   })
 
   it('renders an additional class name', () => {
@@ -27,7 +27,7 @@ describe('Text area', () => {
 
     const component = screen.getByRole('textbox')
 
-    expect(component).toHaveClass('amsterdam-text-area extra')
+    expect(component).toHaveClass('ams-text-area extra')
   })
 
   it('renders a textarea with horizontal resize', () => {
@@ -35,7 +35,7 @@ describe('Text area', () => {
 
     const component = screen.getByRole('textbox')
 
-    expect(component).toHaveClass('amsterdam-text-area amsterdam-text-area--resize-horizontal')
+    expect(component).toHaveClass('ams-text-area ams-text-area--resize-horizontal')
   })
 
   it('renders a textarea with vertical resize', () => {
@@ -43,7 +43,7 @@ describe('Text area', () => {
 
     const component = screen.getByRole('textbox')
 
-    expect(component).toHaveClass('amsterdam-text-area amsterdam-text-area--resize-vertical')
+    expect(component).toHaveClass('ams-text-area ams-text-area--resize-vertical')
   })
 
   it('renders a textarea with no resize', () => {
@@ -51,7 +51,7 @@ describe('Text area', () => {
 
     const component = screen.getByRole('textbox')
 
-    expect(component).toHaveClass('amsterdam-text-area amsterdam-text-area--resize-none')
+    expect(component).toHaveClass('ams-text-area ams-text-area--resize-none')
   })
 
   it('renders a textarea with cols class when cols prop is provided', () => {
@@ -59,7 +59,7 @@ describe('Text area', () => {
 
     const component = screen.getByRole('textbox')
 
-    expect(component).toHaveClass('amsterdam-text-area amsterdam-text-area--cols')
+    expect(component).toHaveClass('ams-text-area ams-text-area--cols')
   })
 
   it('can be controlled', async () => {
diff --git a/packages/react/src/TextArea/TextArea.tsx b/packages/react/src/TextArea/TextArea.tsx
index 4ab11a0c33..a14ebda50e 100644
--- a/packages/react/src/TextArea/TextArea.tsx
+++ b/packages/react/src/TextArea/TextArea.tsx
@@ -17,9 +17,9 @@ export const TextArea = forwardRef(
       {...restProps}
       ref={ref}
       className={clsx(
-        'amsterdam-text-area',
-        resize && `amsterdam-text-area--resize-${resize}`,
-        restProps.cols && 'amsterdam-text-area--cols',
+        'ams-text-area',
+        resize && `ams-text-area--resize-${resize}`,
+        restProps.cols && 'ams-text-area--cols',
         className,
       )}
     />
diff --git a/packages/react/src/TextInput/TextInput.test.tsx b/packages/react/src/TextInput/TextInput.test.tsx
index dd84a16a51..77a282b14e 100644
--- a/packages/react/src/TextInput/TextInput.test.tsx
+++ b/packages/react/src/TextInput/TextInput.test.tsx
@@ -19,7 +19,7 @@ describe('Text input', () => {
 
     const component = screen.getByRole('textbox')
 
-    expect(component).toHaveClass('amsterdam-text-input')
+    expect(component).toHaveClass('ams-text-input')
   })
 
   it('renders an additional class name', () => {
@@ -29,7 +29,7 @@ describe('Text input', () => {
 
     expect(component).toHaveClass('extra')
 
-    expect(component).toHaveClass('amsterdam-text-input')
+    expect(component).toHaveClass('ams-text-input')
   })
 
   it('should be working in a controlled state', async () => {
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index b57cf9deed..56990d874a 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -11,7 +11,7 @@ export type TextInputProps = InputHTMLAttributes<HTMLInputElement>
 
 export const TextInput = forwardRef(
   ({ className, ...restProps }: TextInputProps, ref: ForwardedRef<HTMLInputElement>) => (
-    <input {...restProps} className={clsx('amsterdam-text-input', className)} ref={ref} type="text" />
+    <input {...restProps} className={clsx('ams-text-input', className)} ref={ref} type="text" />
   ),
 )
 
diff --git a/packages/react/src/TopTaskLink/TopTaskLink.test.tsx b/packages/react/src/TopTaskLink/TopTaskLink.test.tsx
index 88d2ff9d1f..baaa5b9995 100644
--- a/packages/react/src/TopTaskLink/TopTaskLink.test.tsx
+++ b/packages/react/src/TopTaskLink/TopTaskLink.test.tsx
@@ -24,9 +24,9 @@ describe('Top task link', () => {
     const label = screen.getByText('Label')
     const description = screen.getByText('Description')
 
-    expect(link).toHaveClass('amsterdam-top-task-link')
-    expect(label).toHaveClass('amsterdam-top-task-link__label')
-    expect(description).toHaveClass('amsterdam-top-task-link__description')
+    expect(link).toHaveClass('ams-top-task-link')
+    expect(label).toHaveClass('ams-top-task-link__label')
+    expect(description).toHaveClass('ams-top-task-link__description')
   })
 
   it('renders an additional class name', () => {
@@ -37,7 +37,7 @@ describe('Top task link', () => {
     })
 
     expect(link).toHaveClass('extra')
-    expect(link).toHaveClass('amsterdam-top-task-link')
+    expect(link).toHaveClass('ams-top-task-link')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/TopTaskLink/TopTaskLink.tsx b/packages/react/src/TopTaskLink/TopTaskLink.tsx
index 6364ed7e54..2d2e481263 100644
--- a/packages/react/src/TopTaskLink/TopTaskLink.tsx
+++ b/packages/react/src/TopTaskLink/TopTaskLink.tsx
@@ -15,11 +15,11 @@ export type TopTaskLinkProps = {
 
 export const TopTaskLink = forwardRef(
   ({ className, label, description, ...restProps }: TopTaskLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => (
-    <a {...restProps} ref={ref} className={clsx('amsterdam-top-task-link', className)}>
-      <span className="amsterdam-top-task-link__label">{label}</span>
+    <a {...restProps} ref={ref} className={clsx('ams-top-task-link', className)}>
+      <span className="ams-top-task-link__label">{label}</span>
       {/* This comma makes screen readers add a slight pause between the label and the description. */}
       <VisuallyHidden>,</VisuallyHidden>
-      <span className="amsterdam-top-task-link__description">{description}</span>
+      <span className="ams-top-task-link__description">{description}</span>
     </a>
   ),
 )
diff --git a/packages/react/src/UnorderedList/UnorderedList.test.tsx b/packages/react/src/UnorderedList/UnorderedList.test.tsx
index 04b763cd50..f0d847c11c 100644
--- a/packages/react/src/UnorderedList/UnorderedList.test.tsx
+++ b/packages/react/src/UnorderedList/UnorderedList.test.tsx
@@ -16,7 +16,7 @@ describe('Unordered list', () => {
 
     const component = screen.getByRole('list')
 
-    expect(component).toHaveClass('amsterdam-unordered-list')
+    expect(component).toHaveClass('ams-unordered-list')
   })
 
   it('renders a no markers class', () => {
@@ -24,7 +24,7 @@ describe('Unordered list', () => {
 
     const component = screen.getByRole('list')
 
-    expect(component).toHaveClass('amsterdam-unordered-list--no-markers')
+    expect(component).toHaveClass('ams-unordered-list--no-markers')
   })
 
   it('renders an inverse color class', () => {
@@ -32,7 +32,7 @@ describe('Unordered list', () => {
 
     const component = screen.getByRole('list')
 
-    expect(component).toHaveClass('amsterdam-unordered-list--inverse-color')
+    expect(component).toHaveClass('ams-unordered-list--inverse-color')
   })
 
   it('renders an additional class name', () => {
@@ -40,7 +40,7 @@ describe('Unordered list', () => {
 
     const component = screen.getByRole('list')
 
-    expect(component).toHaveClass('amsterdam-unordered-list extra')
+    expect(component).toHaveClass('ams-unordered-list extra')
   })
 
   it('renders its subcomponent', () => {
@@ -55,7 +55,7 @@ describe('Unordered list', () => {
     )
 
     const list = screen.getByRole('list')
-    const items = container.querySelectorAll('.amsterdam-unordered-list__item')
+    const items = container.querySelectorAll('.ams-unordered-list__item')
 
     expect(list).toBeInTheDocument()
     expect(items.length).toBe(3)
diff --git a/packages/react/src/UnorderedList/UnorderedList.tsx b/packages/react/src/UnorderedList/UnorderedList.tsx
index 2fe60182b3..6d9370edc1 100644
--- a/packages/react/src/UnorderedList/UnorderedList.tsx
+++ b/packages/react/src/UnorderedList/UnorderedList.tsx
@@ -26,9 +26,9 @@ export const UnorderedList = forwardRef(
       <ul
         ref={ref}
         className={clsx(
-          'amsterdam-unordered-list',
-          inverseColor && 'amsterdam-unordered-list--inverse-color',
-          !markers && 'amsterdam-unordered-list--no-markers',
+          'ams-unordered-list',
+          inverseColor && 'ams-unordered-list--inverse-color',
+          !markers && 'ams-unordered-list--no-markers',
           className,
         )}
         {...restProps}
diff --git a/packages/react/src/UnorderedList/UnorderedListItem.test.tsx b/packages/react/src/UnorderedList/UnorderedListItem.test.tsx
index bdb22c902d..8ec3edfb1c 100644
--- a/packages/react/src/UnorderedList/UnorderedListItem.test.tsx
+++ b/packages/react/src/UnorderedList/UnorderedListItem.test.tsx
@@ -17,7 +17,7 @@ describe('Ordered list item', () => {
 
     const component = screen.getByRole('listitem')
 
-    expect(component).toHaveClass('amsterdam-unordered-list__item')
+    expect(component).toHaveClass('ams-unordered-list__item')
   })
 
   it('renders an additional class name', () => {
@@ -25,7 +25,7 @@ describe('Ordered list item', () => {
 
     const component = screen.getByRole('listitem')
 
-    expect(component).toHaveClass('amsterdam-unordered-list__item extra')
+    expect(component).toHaveClass('ams-unordered-list__item extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/UnorderedList/UnorderedListItem.tsx b/packages/react/src/UnorderedList/UnorderedListItem.tsx
index 5c0f0c855d..640d996670 100644
--- a/packages/react/src/UnorderedList/UnorderedListItem.tsx
+++ b/packages/react/src/UnorderedList/UnorderedListItem.tsx
@@ -11,7 +11,7 @@ export type UnorderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIEl
 
 export const UnorderedListItem = forwardRef(
   ({ children, className, ...restProps }: UnorderedListItemProps, ref: ForwardedRef<HTMLLIElement>) => (
-    <li ref={ref} className={clsx('amsterdam-unordered-list__item', className)} {...restProps}>
+    <li ref={ref} className={clsx('ams-unordered-list__item', className)} {...restProps}>
       {children}
     </li>
   ),
diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.test.tsx b/packages/react/src/VisuallyHidden/VisuallyHidden.test.tsx
index 0f33b3a0ab..c07224a5bf 100644
--- a/packages/react/src/VisuallyHidden/VisuallyHidden.test.tsx
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.test.tsx
@@ -18,7 +18,7 @@ describe('Visually hidden', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-visually-hidden')
+    expect(component).toHaveClass('ams-visually-hidden')
   })
 
   it('renders an additional class name', () => {
@@ -28,7 +28,7 @@ describe('Visually hidden', () => {
 
     expect(component).toHaveClass('extra')
 
-    expect(component).toHaveClass('amsterdam-visually-hidden')
+    expect(component).toHaveClass('ams-visually-hidden')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
index 7977066e62..0b1b5d9980 100644
--- a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
@@ -12,7 +12,7 @@ export const VisuallyHidden = forwardRef(
     { children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>,
     ref: ForwardedRef<HTMLElement>,
   ) => (
-    <span {...restProps} ref={ref} className={clsx('amsterdam-visually-hidden', className)}>
+    <span {...restProps} ref={ref} className={clsx('ams-visually-hidden', className)}>
       {children}
     </span>
   ),
diff --git a/plop-templates/react.test.tsx.hbs b/plop-templates/react.test.tsx.hbs
index f510c332b3..4f6190f143 100644
--- a/plop-templates/react.test.tsx.hbs
+++ b/plop-templates/react.test.tsx.hbs
@@ -18,7 +18,7 @@ describe('{{sentenceCase name}}', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-{{kebabCase name}}')
+    expect(component).toHaveClass('ams-{{kebabCase name}}')
   })
 
   it('renders an additional class name', () => {
@@ -26,7 +26,7 @@ describe('{{sentenceCase name}}', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('amsterdam-{{kebabCase name}} extra')
+    expect(component).toHaveClass('ams-{{kebabCase name}} extra')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/plop-templates/react.tsx.hbs b/plop-templates/react.tsx.hbs
index bbfe54345a..bccf5deda1 100644
--- a/plop-templates/react.tsx.hbs
+++ b/plop-templates/react.tsx.hbs
@@ -11,7 +11,7 @@ export type {{pascalCase name}}Props = PropsWithChildren<HTMLAttributes<HTMLElem
 
 export const {{pascalCase name}} = forwardRef(
   ({ children, className, ...restProps }: {{pascalCase name}}Props, ref: ForwardedRef<HTMLElement>) => (
-    <span {...restProps} ref={ref} className={clsx('amsterdam-{{kebabCase name}}', className)}>
+    <span {...restProps} ref={ref} className={clsx('ams-{{kebabCase name}}', className)}>
       {children}
     </span>
   ),
diff --git a/plop-templates/style.scss.hbs b/plop-templates/style.scss.hbs
index c37c2b8c12..5cff467bba 100644
--- a/plop-templates/style.scss.hbs
+++ b/plop-templates/style.scss.hbs
@@ -3,6 +3,6 @@
  * Copyright Gemeente Amsterdam
  */
 
-.amsterdam-{{kebabCase name}} {
+.ams-{{kebabCase name}} {
   /* Add styles here */
 }
diff --git a/plop-templates/tokens.json.hbs b/plop-templates/tokens.json.hbs
index 7163e32606..478288abcb 100644
--- a/plop-templates/tokens.json.hbs
+++ b/plop-templates/tokens.json.hbs
@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "{{kebabCase name}}": {}
   }
 }
diff --git a/plopfile.mjs b/plopfile.mjs
index 0b26b67abb..abafbd5e9f 100644
--- a/plopfile.mjs
+++ b/plopfile.mjs
@@ -12,7 +12,7 @@ export default function (plop) {
     actions: [
       {
         type: 'add',
-        path: 'proprietary/tokens/src/components/amsterdam/{{kebabCase name}}.tokens.json',
+        path: 'proprietary/tokens/src/components/ams/{{kebabCase name}}.tokens.json',
         templateFile: 'plop-templates/tokens.json.hbs',
       },
       {
diff --git a/proprietary/assets/logo/amsterdam.svg b/proprietary/assets/logo/amsterdam.svg
index 6502f58399..14cf892247 100644
--- a/proprietary/assets/logo/amsterdam.svg
+++ b/proprietary/assets/logo/amsterdam.svg
@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 115 40">
-    <g class="amsterdam-logo__text-primary">
+    <g class="ams-logo__text-primary">
       <path fill="#EC0000" d="M16.435 8.581c0-3.752 2.63-6.4 6.344-6.4 1.886 0 3.466.61 4.59 1.829L25.731 5.57c-.704-.78-1.714-1.238-2.915-1.238-2.248 0-3.81 1.752-3.81 4.248 0 2.496 1.524 4.324 3.715 4.324 2 0 3.391-1.143 3.391-2.8v-.323h-2.99V7.705h5.505V9.63c0 3.162-2.457 5.39-5.981 5.39s-6.21-2.666-6.21-6.438ZM30.225 10.086c0-2.915 1.962-4.934 4.762-4.934s4.743 2 4.743 4.876c0 .229-.037.59-.076.839h-7.048C32.778 12.143 33.863 13 35.254 13c1.029 0 1.924-.381 2.514-1.067l1.428 1.391c-.857 1.106-2.343 1.696-4.057 1.696-2.895 0-4.915-2.038-4.915-4.934h.001Zm2.381-.952h4.743c-.152-1.238-1.105-2.077-2.38-2.077-1.276 0-2.229.839-2.363 2.077ZM43.902 5.382v1.275h.038c.476-.97 1.314-1.505 2.4-1.505 1.219 0 2.132.534 2.704 1.6.571-1.028 1.62-1.6 2.952-1.6 2.324 0 3.448 1.296 3.448 3.943v5.696h-2.362V9.495c0-1.543-.534-2.286-1.638-2.286-1.104 0-1.696.82-1.696 2.362v5.22h-2.362V9.495c0-1.562-.514-2.286-1.638-2.286-1.124 0-1.695.838-1.695 2.362v5.22H41.69V5.38h2.212ZM57.312 10.086c0-2.915 1.963-4.934 4.762-4.934 2.8 0 4.744 2 4.744 4.876 0 .229-.038.59-.077.839h-7.048C59.865 12.143 60.95 13 62.341 13c1.03 0 1.924-.381 2.514-1.067l1.429 1.391c-.857 1.106-2.344 1.696-4.058 1.696-2.895 0-4.915-2.038-4.915-4.934h.001Zm2.381-.952h4.743c-.152-1.238-1.105-2.077-2.38-2.077-1.276 0-2.229.839-2.363 2.077ZM68.189 10.086c0-2.915 1.962-4.934 4.762-4.934s4.743 2 4.743 4.876c0 .229-.038.59-.077.839H70.57C70.74 12.143 71.827 13 73.218 13c1.028 0 1.923-.381 2.513-1.067l1.429 1.391c-.857 1.106-2.343 1.696-4.058 1.696-2.895 0-4.915-2.038-4.915-4.934h.002Zm2.38-.952h4.744c-.153-1.238-1.105-2.077-2.381-2.077-1.276 0-2.228.839-2.362 2.077ZM81.883 5.382v1.275h.038c.438-.933 1.39-1.505 2.495-1.505 2.362 0 3.582 1.353 3.582 3.943v5.696h-2.363V9.552c0-1.6-.571-2.343-1.772-2.343-1.2 0-1.847.838-1.847 2.4v5.18h-2.362V5.382h2.23ZM91.026 11.42V7.342h-1.619V5.381h.858c.78 0 1.085-.305 1.085-1.086V2.83h2.019v2.553h2.285v1.962H93.37v4.077c0 .915.476 1.428 1.352 1.428.267 0 .59-.037.78-.095v1.981c-.285.077-.819.133-1.238.133-2.133 0-3.238-1.18-3.238-3.447l.001-.002ZM96.817 10.086c0-2.915 1.963-4.934 4.762-4.934 2.8 0 4.744 2 4.744 4.876 0 .229-.038.59-.077.839h-7.048c.172 1.276 1.257 2.133 2.648 2.133 1.029 0 1.924-.381 2.514-1.067l1.429 1.391c-.857 1.106-2.344 1.696-4.058 1.696-2.895 0-4.915-2.038-4.915-4.934h.001Zm2.381-.952h4.744c-.153-1.238-1.106-2.077-2.382-2.077-1.275 0-2.228.839-2.362 2.077ZM23.73 25.267l4.952 12.381h-2.647l-1.03-2.724H19.5l-1.028 2.724h-2.553l4.953-12.38h2.858Zm-3.486 7.6h4l-1.982-5.219h-.037l-1.981 5.22ZM32.454 28.24v1.275h.038c.476-.97 1.315-1.505 2.4-1.505 1.22 0 2.133.534 2.704 1.6.572-1.028 1.62-1.6 2.953-1.6 2.323 0 3.447 1.296 3.447 3.944v5.696h-2.362v-5.296c0-1.543-.534-2.286-1.638-2.286-1.104 0-1.695.82-1.695 2.362v5.22h-2.363v-5.296c0-1.562-.514-2.286-1.638-2.286-1.124 0-1.695.838-1.695 2.362v5.22h-2.362v-9.41h2.211ZM48.34 33.706c-1.275-.381-2.513-1.067-2.513-2.78 0-1.715 1.447-2.916 3.6-2.916 1.448 0 2.572.514 3.2 1.466l-1.351 1.353c-.477-.59-1.124-.915-1.829-.915-.8 0-1.296.362-1.296.933 0 .762.8.895 1.963 1.257 1.276.381 2.514 1.067 2.514 2.781 0 1.715-1.524 2.99-3.772 2.99-1.466 0-2.648-.514-3.334-1.486l1.353-1.352c.513.609 1.2.934 1.962.934.915 0 1.466-.381 1.466-1.01 0-.762-.8-.895-1.962-1.258v.003ZM55.122 34.277v-4.076h-1.62v-1.963h.858c.78 0 1.085-.304 1.085-1.085v-1.466h2.019v2.552h2.286v1.963h-2.286v4.076c0 .915.476 1.43 1.352 1.43.267 0 .59-.038.78-.096v1.981c-.285.077-.819.133-1.237.133-2.133 0-3.238-1.18-3.238-3.447v-.002ZM60.911 32.944c0-2.915 1.963-4.934 4.763-4.934s4.743 2 4.743 4.876c0 .228-.038.59-.077.839h-7.048c.172 1.276 1.257 2.133 2.648 2.133 1.03 0 1.924-.381 2.514-1.067l1.429 1.391c-.857 1.105-2.343 1.696-4.058 1.696-2.895 0-4.915-2.038-4.915-4.934h.001Zm2.381-.952h4.744c-.153-1.239-1.106-2.077-2.381-2.077-1.276 0-2.229.838-2.363 2.077ZM74.607 28.24V29.8h.038c.457-1.066 1.296-1.638 2.4-1.638.285 0 .685.038.838.095v2.248c-.267-.076-.78-.132-1.162-.132-1.2 0-1.98.914-1.98 2.323v4.953h-2.363v-9.41h2.23ZM78.551 32.983c0-2.915 1.924-4.972 4.648-4.972 1.257 0 2.286.553 2.934 1.562h.037V23.84h2.362v13.81h-2.228v-1.467h-.037c-.61 1.067-1.752 1.696-3.067 1.696-2.724 0-4.648-2.038-4.648-4.895l-.001-.001Zm7.62-.038c0-1.695-1.048-2.82-2.591-2.82-1.543 0-2.61 1.143-2.61 2.82 0 1.677 1.049 2.82 2.61 2.82s2.59-1.124 2.59-2.82ZM90.34 34.963c0-1.81 1.506-2.895 4.02-2.915l1.828-.019v-.304c0-1.106-.704-1.677-1.981-1.677-.838 0-1.581.323-2.095.915l-1.429-1.391c.82-1.01 2.133-1.562 3.752-1.562 2.514 0 4.114 1.371 4.114 3.562v3.733c0 .343.153.495.534.495h.172v1.847H98.15c-.895 0-1.506-.418-1.696-1.105h-.038c-.59.857-1.561 1.333-2.743 1.333-1.981 0-3.333-1.18-3.333-2.914v.002Zm5.848-.82v-.534l-1.561.02c-1.238.018-1.905.457-1.905 1.275 0 .724.571 1.238 1.37 1.238 1.239 0 2.096-.82 2.096-2v.001ZM103.312 28.24v1.275h.038c.476-.97 1.315-1.505 2.4-1.505 1.219 0 2.133.534 2.704 1.6.572-1.028 1.619-1.6 2.953-1.6 2.323 0 3.447 1.296 3.447 3.944v5.696h-2.362v-5.296c0-1.543-.534-2.286-1.638-2.286-1.104 0-1.695.82-1.695 2.362v5.22h-2.363v-5.296c0-1.562-.513-2.286-1.638-2.286-1.124 0-1.695.838-1.695 2.362v5.22h-2.362v-9.41h2.211Z"/>
     </g>
-    <g class="amsterdam-logo__emblem">
+    <g class="ams-logo__emblem">
       <path fill="#EC0000" d="m0 37.648 3.527-3.527L0 30.593l2.352-2.351 3.527 3.527 3.528-3.527 2.351 2.351-3.527 3.528 3.527 3.527L9.407 40l-3.528-3.527L2.352 40 0 37.648ZM0 23.54l3.527-3.528L0 16.485l2.352-2.352 3.527 3.528 3.528-3.528 2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.527 3.527L0 23.54ZM0 9.407l3.527-3.528L0 2.352 2.352 0l3.527 3.527L9.407 0l2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.526 3.527L0 9.407Z"/>
     </g>
 </svg>
diff --git a/proprietary/assets/logo/ggd-amsterdam.svg b/proprietary/assets/logo/ggd-amsterdam.svg
index b9051bd1a3..1efd2493f7 100644
--- a/proprietary/assets/logo/ggd-amsterdam.svg
+++ b/proprietary/assets/logo/ggd-amsterdam.svg
@@ -1,11 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 115 40">
-  <g class="amsterdam-logo__emblem">
+  <g class="ams-logo__emblem">
     <path fill="#EC0000" d="m0 37.648 3.527-3.527L0 30.593l2.352-2.351 3.527 3.527 3.528-3.527 2.351 2.351-3.527 3.528 3.527 3.527L9.407 40l-3.528-3.527L2.352 40 0 37.648ZM0 23.54l3.527-3.528L0 16.485l2.352-2.352 3.527 3.528 3.528-3.528 2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.527 3.527L0 23.54ZM0 9.407l3.527-3.528L0 2.352 2.352 0l3.527 3.527L9.407 0l2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.526 3.527L0 9.407Z"/>
   </g>
-  <g class="amsterdam-logo__text-primary">
+  <g class="ams-logo__text-primary">
     <path fill="#EC0000" d="m23.73 25.267 4.952 12.381h-2.647l-1.03-2.724H19.5l-1.028 2.724h-2.553l4.953-12.381h2.858Zm-3.486 7.6h4l-1.982-5.219h-.037l-1.981 5.22ZM32.454 28.24v1.275h.038c.476-.971 1.315-1.505 2.4-1.505 1.22 0 2.133.534 2.704 1.6.572-1.028 1.62-1.6 2.953-1.6 2.323 0 3.447 1.296 3.447 3.944v5.696h-2.362v-5.296c0-1.543-.534-2.286-1.638-2.286-1.104 0-1.695.82-1.695 2.362v5.22h-2.363v-5.296c0-1.562-.514-2.286-1.638-2.286-1.124 0-1.695.838-1.695 2.362v5.22h-2.362v-9.41h2.211ZM48.34 33.706c-1.275-.381-2.513-1.067-2.513-2.78 0-1.715 1.447-2.916 3.6-2.916 1.448 0 2.572.514 3.2 1.466l-1.351 1.353c-.477-.59-1.124-.915-1.829-.915-.8 0-1.296.362-1.296.933 0 .762.8.895 1.963 1.257 1.276.381 2.514 1.067 2.514 2.781 0 1.715-1.524 2.99-3.772 2.99-1.466 0-2.648-.514-3.334-1.486l1.353-1.352c.513.609 1.2.934 1.962.934.915 0 1.466-.381 1.466-1.01 0-.762-.8-.895-1.962-1.258v.003ZM55.122 34.277v-4.076h-1.62v-1.963h.858c.78 0 1.085-.304 1.085-1.085v-1.466h2.019v2.552h2.286v1.963h-2.286v4.076c0 .915.476 1.43 1.352 1.43.267 0 .59-.038.78-.096v1.981c-.285.076-.819.133-1.237.133-2.133 0-3.238-1.18-3.238-3.447v-.002ZM60.911 32.944c0-2.915 1.963-4.934 4.763-4.934s4.743 2 4.743 4.876c0 .228-.038.59-.077.839h-7.048c.172 1.275 1.257 2.133 2.648 2.133 1.03 0 1.924-.381 2.514-1.067l1.429 1.391c-.857 1.105-2.343 1.696-4.058 1.696-2.895 0-4.915-2.038-4.915-4.934h.001Zm2.381-.953h4.744c-.153-1.238-1.106-2.076-2.381-2.076-1.276 0-2.229.838-2.363 2.076ZM74.607 28.24V29.8h.038c.457-1.066 1.296-1.638 2.4-1.638.285 0 .685.038.838.095v2.248c-.267-.076-.78-.132-1.162-.132-1.2 0-1.98.914-1.98 2.323v4.953h-2.363v-9.41h2.23ZM78.551 32.983c0-2.915 1.924-4.972 4.648-4.972 1.257 0 2.286.553 2.934 1.562h.037V23.84h2.362v13.81h-2.228v-1.467h-.037c-.61 1.067-1.752 1.696-3.067 1.696-2.724 0-4.648-2.038-4.648-4.895l-.001-.001Zm7.62-.038c0-1.695-1.048-2.82-2.591-2.82-1.543 0-2.61 1.143-2.61 2.82 0 1.677 1.049 2.82 2.61 2.82s2.59-1.124 2.59-2.82ZM90.34 34.963c0-1.81 1.506-2.895 4.02-2.915l1.828-.019v-.304c0-1.106-.704-1.677-1.981-1.677-.838 0-1.581.323-2.095.915l-1.429-1.391c.82-1.01 2.133-1.562 3.752-1.562 2.514 0 4.114 1.371 4.114 3.562v3.733c0 .343.153.495.534.495h.172v1.847H98.15c-.895 0-1.506-.418-1.696-1.105h-.038c-.59.857-1.561 1.333-2.743 1.333-1.981 0-3.333-1.18-3.333-2.915v.003Zm5.848-.82v-.534l-1.561.02c-1.238.018-1.905.457-1.905 1.275 0 .724.571 1.238 1.37 1.238 1.239 0 2.096-.82 2.096-2v.001ZM103.312 28.24v1.275h.038c.476-.971 1.315-1.505 2.4-1.505 1.219 0 2.133.534 2.704 1.6.572-1.028 1.619-1.6 2.953-1.6 2.323 0 3.447 1.296 3.447 3.944v5.696h-2.362v-5.296c0-1.543-.534-2.286-1.638-2.286-1.104 0-1.695.82-1.695 2.362v5.22h-2.363v-5.296c0-1.562-.513-2.286-1.638-2.286-1.124 0-1.695.838-1.695 2.362v5.22h-2.362v-9.41h2.211Z"/>
   </g>
-  <g class="amsterdam-logo__text-secondary">
+  <g class="ams-logo__text-secondary">
     <path fill="#000" d="M16.436 8.581c0-3.752 2.629-6.4 6.343-6.4 1.886 0 3.466.61 4.59 1.829L25.732 5.57c-.705-.78-1.715-1.238-2.915-1.238-2.248 0-3.81 1.752-3.81 4.248 0 2.496 1.524 4.324 3.714 4.324 2 0 3.392-1.143 3.392-2.8v-.323h-2.99V7.705h5.505V9.63c0 3.162-2.458 5.39-5.982 5.39s-6.21-2.666-6.21-6.438ZM30.34 8.581c0-3.752 2.63-6.4 6.344-6.4 1.886 0 3.467.61 4.59 1.829L39.638 5.57c-.705-.78-1.715-1.238-2.915-1.238-2.248 0-3.81 1.752-3.81 4.248 0 2.496 1.524 4.324 3.715 4.324 2 0 3.39-1.143 3.39-2.8v-.323h-2.99V7.705h5.506V9.63c0 3.162-2.458 5.39-5.982 5.39s-6.21-2.666-6.21-6.438ZM44.836 2.41h4.61c3.809 0 6.343 2.476 6.343 6.19 0 3.714-2.59 6.19-6.363 6.19h-4.59V2.41Zm4.419 10.229c2.38 0 3.942-1.543 3.942-4.02 0-2.475-1.524-4.057-3.923-4.057H47.35v8.077h1.905Z"/>
   </g>
 </svg>
diff --git a/proprietary/assets/logo/museum_weesp.svg b/proprietary/assets/logo/museum_weesp.svg
index f78a60e26c..ee3b80288c 100644
--- a/proprietary/assets/logo/museum_weesp.svg
+++ b/proprietary/assets/logo/museum_weesp.svg
@@ -1,7 +1,7 @@
 <svg viewBox="0 0 121 43" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path className="amsterdam-logo__text-secondary" d="M18.085 30.527H20.669L23.051 35.26H23.08L25.46 30.527H28.045V39.964H26.187V32.69H26.157L23.82 37.336H22.31L19.973 32.69H19.943V39.964H18.085V30.527ZM29.976 37.133V32.792H31.776V36.799C31.776 38.004 32.197 38.57 33.068 38.57C33.954 38.57 34.448 37.917 34.448 36.755V32.792H36.248V39.964H34.55V38.991H34.521C34.173 39.688 33.418 40.138 32.605 40.138C30.848 40.138 29.976 39.137 29.976 37.133ZM39.63 36.959C38.658 36.669 37.714 36.146 37.714 34.839C37.714 33.518 38.818 32.618 40.458 32.618C41.562 32.618 42.418 33.009 42.898 33.735L41.867 34.766C41.504 34.316 41.01 34.069 40.473 34.069C39.863 34.069 39.486 34.345 39.486 34.781C39.486 35.361 40.096 35.463 40.981 35.739C41.954 36.029 42.898 36.552 42.898 37.859C42.898 39.209 41.736 40.139 40.023 40.139C38.905 40.139 38.005 39.746 37.482 39.006L38.512 37.975C38.6925 38.1976 38.9205 38.3771 39.1794 38.5001C39.4383 38.6231 39.7214 38.6866 40.008 38.686C40.705 38.686 41.126 38.396 41.126 37.917C41.126 37.337 40.515 37.235 39.63 36.959ZM45.7 35.652H49.315C49.199 34.708 48.473 34.069 47.5 34.069C46.527 34.069 45.801 34.709 45.7 35.652ZM43.885 36.378C43.885 34.157 45.38 32.618 47.515 32.618C49.649 32.618 51.13 34.142 51.13 36.334C51.13 36.509 51.1 36.784 51.072 36.974H45.699C45.83 37.946 46.658 38.599 47.718 38.599C48.502 38.599 49.184 38.309 49.634 37.786L50.724 38.846C50.07 39.688 48.937 40.138 47.631 40.138C45.424 40.138 43.885 38.585 43.885 36.378ZM52.523 37.133V32.792H54.323V36.799C54.323 38.004 54.745 38.57 55.616 38.57C56.502 38.57 56.996 37.917 56.996 36.755V32.792H58.796V39.964H57.096V38.991H57.068C56.72 39.688 55.964 40.138 55.151 40.138C53.395 40.138 52.523 39.137 52.523 37.133ZM60.741 32.792H62.425V33.765H62.455C62.817 33.024 63.456 32.618 64.284 32.618C65.213 32.618 65.91 33.024 66.345 33.838C66.781 33.053 67.58 32.618 68.595 32.618C70.367 32.618 71.224 33.605 71.224 35.623V39.964H69.424V35.928C69.424 34.752 69.017 34.186 68.174 34.186C67.333 34.186 66.883 34.81 66.883 35.986V39.964H65.083V35.928C65.083 34.738 64.69 34.186 63.833 34.186C63.006 34.186 62.541 34.824 62.541 35.986V39.964H60.741V32.792ZM84.683 39.964L82.853 32.908H82.824L80.994 39.964H78.774L76 30.527H78.033L79.891 37.67H79.921L81.793 30.527H83.884L85.757 37.67H85.787L87.645 30.527H89.677L86.904 39.964H84.683ZM91.71 35.652H95.325C95.209 34.708 94.483 34.069 93.51 34.069C92.537 34.069 91.812 34.709 91.71 35.652ZM89.895 36.378C89.895 34.157 91.39 32.618 93.525 32.618C95.659 32.618 97.14 34.142 97.14 36.334C97.14 36.509 97.11 36.784 97.082 36.974H91.71C91.84 37.946 92.668 38.599 93.728 38.599C94.512 38.599 95.194 38.309 95.645 37.786L96.733 38.846C96.08 39.688 94.948 40.138 93.641 40.138C91.434 40.138 89.895 38.585 89.895 36.378ZM100 35.652H103.616C103.499 34.708 102.773 34.069 101.801 34.069C100.828 34.069 100.1 34.709 100 35.652ZM98.185 36.378C98.185 34.157 99.681 32.618 101.815 32.618C103.949 32.618 105.43 34.142 105.43 36.334C105.43 36.509 105.401 36.784 105.372 36.974H100C100.13 37.946 100.958 38.599 102.018 38.599C102.802 38.599 103.485 38.309 103.935 37.786L105.024 38.846C104.37 39.688 103.238 40.138 101.931 40.138C99.724 40.138 98.185 38.585 98.185 36.378ZM108.363 36.959C107.39 36.669 106.446 36.146 106.446 34.839C106.446 33.518 107.55 32.618 109.191 32.618C110.294 32.618 111.151 33.009 111.63 33.735L110.599 34.766C110.236 34.316 109.742 34.069 109.205 34.069C108.595 34.069 108.218 34.345 108.218 34.781C108.218 35.361 108.828 35.463 109.713 35.739C110.686 36.029 111.63 36.552 111.63 37.859C111.63 39.209 110.468 40.139 108.755 40.139C107.637 40.139 106.737 39.746 106.215 39.006L107.245 37.975C107.426 38.1976 107.654 38.3771 107.912 38.5001C108.171 38.6231 108.454 38.6866 108.741 38.686C109.437 38.686 109.859 38.396 109.859 37.917C109.859 37.337 109.249 37.235 108.363 36.959ZM118.83 36.378C118.83 35.086 118.033 34.229 116.857 34.229C115.68 34.229 114.867 35.1 114.867 36.378C114.867 37.656 115.68 38.527 116.857 38.527C118.033 38.527 118.831 37.67 118.831 36.377L118.83 36.378ZM113.067 32.792H114.78V33.91H114.81C115.245 33.097 116.116 32.618 117.162 32.618C119.209 32.618 120.675 34.171 120.675 36.348C120.675 38.556 119.209 40.138 117.162 40.138C116.189 40.138 115.39 39.718 114.896 38.948H114.867V42.65H113.067V32.792Z" fill="black"/>
-<path className="amsterdam-logo__text-primary" d="M20.539 22.287H23.588L22.078 18.309H22.048L20.539 22.287ZM21.018 16.494H23.196L26.971 25.931H24.953L24.169 23.855H19.973L19.189 25.931H17.243L21.018 16.494ZM28.161 18.759H29.845V19.732H29.875C30.237 18.992 30.876 18.584 31.704 18.584C32.633 18.584 33.33 18.991 33.765 19.804C34.201 19.02 35 18.584 36.015 18.584C37.787 18.584 38.644 19.572 38.644 21.59V25.931H36.844V21.895C36.844 20.719 36.437 20.152 35.594 20.152C34.753 20.152 34.303 20.777 34.303 21.952V25.932H32.503V21.895C32.503 20.705 32.11 20.152 31.253 20.152C30.426 20.152 29.961 20.792 29.961 21.952V25.932H28.161V18.759ZM41.954 22.926C40.981 22.636 40.037 22.113 40.037 20.806C40.037 19.485 41.141 18.584 42.781 18.584C43.885 18.584 44.741 18.977 45.221 19.702L44.19 20.733C43.827 20.283 43.333 20.036 42.796 20.036C42.186 20.036 41.809 20.312 41.809 20.748C41.809 21.328 42.419 21.43 43.304 21.706C44.277 21.996 45.221 22.519 45.221 23.826C45.221 25.176 44.059 26.106 42.346 26.106C41.228 26.106 40.328 25.713 39.806 24.973L40.836 23.942C41.0164 24.1645 41.2443 24.3439 41.5029 24.4669C41.7616 24.5899 42.0446 24.6535 42.331 24.653C43.028 24.653 43.449 24.363 43.449 23.884C43.449 23.304 42.839 23.202 41.954 22.926ZM47.122 23.361V20.254H45.888V18.76H46.542C47.137 18.76 47.369 18.527 47.369 17.932V16.814H48.909V18.76H50.651V20.255H48.908V23.362C48.908 24.059 49.271 24.452 49.939 24.452C50.142 24.452 50.389 24.422 50.534 24.379V25.889C50.2243 25.9569 49.9081 25.9907 49.591 25.99C47.965 25.99 47.122 25.089 47.122 23.361ZM53.351 21.619H56.966C56.85 20.675 56.124 20.036 55.151 20.036C54.179 20.036 53.453 20.676 53.351 21.619ZM51.536 22.345C51.536 20.124 53.032 18.585 55.166 18.585C57.3 18.585 58.781 20.109 58.781 22.301C58.781 22.476 58.752 22.751 58.723 22.941H53.351C53.481 23.913 54.309 24.566 55.369 24.566C56.153 24.566 56.836 24.276 57.286 23.753L58.375 24.813C57.721 25.655 56.589 26.105 55.282 26.105C53.075 26.105 51.536 24.552 51.536 22.345ZM60.277 18.759H61.975V19.949H62.005C62.353 19.136 62.992 18.701 63.834 18.701C64.051 18.701 64.356 18.73 64.472 18.773V20.487C64.1819 20.4194 63.8849 20.3852 63.587 20.385C62.672 20.385 62.077 21.082 62.077 22.156V25.931H60.277V18.759ZM70.788 22.345C70.788 21.053 69.99 20.196 68.814 20.196C67.623 20.196 66.824 21.067 66.824 22.346C66.824 23.623 67.623 24.494 68.814 24.494C69.99 24.494 70.788 23.637 70.788 22.345ZM64.981 22.374C64.981 20.152 66.447 18.584 68.523 18.584C69.481 18.584 70.265 19.006 70.759 19.775H70.789V15.405H72.589V25.93H70.889V24.812H70.861C70.396 25.625 69.525 26.104 68.523 26.104C66.447 26.104 64.981 24.552 64.981 22.374ZM78.425 23.26V22.853L77.235 22.868C76.291 22.882 75.783 23.216 75.783 23.841C75.783 24.392 76.218 24.784 76.828 24.784C77.771 24.784 78.425 24.16 78.425 23.26ZM73.968 23.884C73.968 22.504 75.115 21.677 77.031 21.663L78.425 21.648V21.416C78.425 20.574 77.888 20.138 76.915 20.138C76.276 20.138 75.71 20.385 75.318 20.835L74.229 19.775C74.853 19.005 75.855 18.585 77.089 18.585C79.006 18.585 80.225 19.63 80.225 21.3V24.145C80.225 24.407 80.341 24.523 80.632 24.523H80.762V25.931H79.92C79.238 25.931 78.773 25.611 78.628 25.089H78.6C78.15 25.743 77.41 26.105 76.51 26.105C75 26.105 73.969 25.205 73.969 23.885L73.968 23.884ZM82.17 18.759H83.855V19.732H83.884C84.247 18.992 84.886 18.584 85.714 18.584C86.642 18.584 87.339 18.991 87.774 19.804C88.21 19.02 89.009 18.584 90.025 18.584C91.797 18.584 92.653 19.572 92.653 21.59V25.931H90.853V21.895C90.853 20.719 90.446 20.152 89.604 20.152C88.762 20.152 88.312 20.777 88.312 21.952V25.932H86.512V21.895C86.512 20.705 86.12 20.152 85.263 20.152C84.436 20.152 83.971 20.792 83.971 21.952V25.932H82.171L82.17 18.759ZM17.644 6.97998C17.644 4.11998 19.647 2.09998 22.479 2.09998C23.916 2.09998 25.121 2.56498 25.978 3.49398L24.729 4.68398C24.192 4.08898 23.422 3.74098 22.508 3.74098C20.795 3.74098 19.604 5.07698 19.604 6.97898C19.604 8.92398 20.765 10.274 22.435 10.274C23.96 10.274 25.02 9.40398 25.02 8.13998V7.89298H22.74V6.31198H26.936V7.77798C26.936 10.188 25.063 11.887 22.377 11.887C19.604 11.887 17.644 9.85398 17.644 6.97998ZM29.97 7.39998H33.586C33.469 6.45698 32.743 5.81798 31.771 5.81798C30.798 5.81798 30.072 6.45698 29.971 7.40098L29.97 7.39998ZM28.155 8.12698C28.155 5.90498 29.651 4.36698 31.785 4.36698C33.92 4.36698 35.4 5.89098 35.4 8.08298C35.4 8.25698 35.372 8.53298 35.342 8.72198H29.97C30.101 9.69498 30.929 10.348 31.988 10.348C32.773 10.348 33.455 10.058 33.905 9.53498L34.994 10.595C34.341 11.437 33.208 11.887 31.901 11.887C29.694 11.887 28.155 10.333 28.155 8.12698ZM36.896 4.53998H38.58V5.51298H38.609C38.972 4.77298 39.611 4.36598 40.439 4.36598C41.368 4.36598 42.065 4.77298 42.5 5.58598C42.936 4.80198 43.734 4.36598 44.75 4.36598C46.522 4.36598 47.379 5.35398 47.379 7.37198V11.712H45.579V7.67698C45.579 6.50198 45.172 5.93498 44.329 5.93498C43.488 5.93498 43.037 6.55998 43.037 7.73498V11.714H41.237V7.67598C41.237 6.48598 40.845 5.93398 39.988 5.93398C39.161 5.93398 38.696 6.57398 38.696 7.73398V11.713H36.896V4.53998ZM50.616 7.39998H54.231C54.115 6.45698 53.389 5.81798 52.417 5.81798C51.444 5.81798 50.717 6.45698 50.617 7.40098L50.616 7.39998ZM48.801 8.12698C48.801 5.90498 50.297 4.36698 52.431 4.36698C54.565 4.36698 56.046 5.89098 56.046 8.08298C56.046 8.25698 56.017 8.53298 55.988 8.72198H50.616C50.746 9.69498 51.574 10.348 52.634 10.348C53.418 10.348 54.101 10.058 54.551 9.53498L55.64 10.595C54.986 11.437 53.854 11.887 52.547 11.887C50.34 11.887 48.801 10.333 48.801 8.12698ZM58.906 7.39998H62.522C62.406 6.45698 61.68 5.81798 60.707 5.81798C59.734 5.81798 59.008 6.45698 58.907 7.40098L58.906 7.39998ZM57.092 8.12698C57.092 5.90498 58.587 4.36698 60.722 4.36698C62.856 4.36698 64.337 5.89098 64.337 8.08298C64.337 8.25698 64.307 8.53298 64.279 8.72198H58.906C59.037 9.69498 59.865 10.348 60.925 10.348C61.708 10.348 62.391 10.058 62.841 9.53498L63.93 10.595C63.277 11.437 62.144 11.887 60.837 11.887C58.631 11.887 57.092 10.333 57.092 8.12698ZM65.832 4.53998H67.531V5.51298H67.56C67.894 4.80198 68.62 4.36598 69.462 4.36598C71.262 4.36598 72.192 5.39698 72.192 7.37198V11.712H70.39V7.71998C70.39 6.49998 69.955 5.93398 69.04 5.93398C68.125 5.93398 67.631 6.57398 67.631 7.76398V11.713H65.831L65.832 4.53998ZM74.5 9.14298V6.03598H73.266V4.53998H73.919C74.514 4.53998 74.747 4.30798 74.747 3.71298V2.59498H76.286V4.53998H78.028V6.03598H76.286V9.14298C76.286 9.83998 76.648 10.232 77.316 10.232C77.52 10.232 77.766 10.202 77.912 10.159V11.669C77.602 11.7372 77.2855 11.7714 76.968 11.771C75.342 11.771 74.5 10.871 74.5 9.14298ZM80.728 7.39998H84.344C84.227 6.45698 83.501 5.81798 82.529 5.81798C81.556 5.81798 80.83 6.45698 80.729 7.40098L80.728 7.39998ZM78.913 8.12698C78.913 5.90498 80.409 4.36698 82.543 4.36698C84.678 4.36698 86.158 5.89098 86.158 8.08298C86.158 8.25698 86.129 8.53298 86.1 8.72198H80.728C80.859 9.69498 81.687 10.348 82.747 10.348C83.531 10.348 84.213 10.058 84.663 9.53498L85.752 10.595C85.099 11.437 83.966 11.887 82.659 11.887C80.452 11.887 78.913 10.333 78.913 8.12698Z" fill="#EC0000"/>
-<path className="amsterdam-logo__emblem" d="M0 38.3642L3.6 34.9356L0 31.507L2.4 29.2213L6 32.6499L9.6 29.2213L12 31.507L8.4 34.9356L12 38.3642L9.6 40.6499L6 37.2213L2.4 40.6499L0 38.3642Z" fill="#EC0000"/>
-<path className="amsterdam-logo__emblem" d="M0 9.79276L3.6 6.36419L0 2.93562L2.4 0.649902L6 4.07847L9.6 0.649902L12 2.93562L8.4 6.36419L12 9.79276L9.6 12.0785L6 8.6499L2.4 12.0785L0 9.79276Z" fill="#EC0000"/>
-<path className="amsterdam-logo__emblem" d="M0 24.0785L3.6 20.6499L0 17.2213L2.4 14.9356L6 18.3642L9.6 14.9356L12 17.2213L8.4 20.6499L12 24.0785L9.6 26.3642L6 22.9356L2.4 26.3642L0 24.0785Z" fill="#EC0000"/>
+<path className="ams-logo__text-secondary" d="M18.085 30.527H20.669L23.051 35.26H23.08L25.46 30.527H28.045V39.964H26.187V32.69H26.157L23.82 37.336H22.31L19.973 32.69H19.943V39.964H18.085V30.527ZM29.976 37.133V32.792H31.776V36.799C31.776 38.004 32.197 38.57 33.068 38.57C33.954 38.57 34.448 37.917 34.448 36.755V32.792H36.248V39.964H34.55V38.991H34.521C34.173 39.688 33.418 40.138 32.605 40.138C30.848 40.138 29.976 39.137 29.976 37.133ZM39.63 36.959C38.658 36.669 37.714 36.146 37.714 34.839C37.714 33.518 38.818 32.618 40.458 32.618C41.562 32.618 42.418 33.009 42.898 33.735L41.867 34.766C41.504 34.316 41.01 34.069 40.473 34.069C39.863 34.069 39.486 34.345 39.486 34.781C39.486 35.361 40.096 35.463 40.981 35.739C41.954 36.029 42.898 36.552 42.898 37.859C42.898 39.209 41.736 40.139 40.023 40.139C38.905 40.139 38.005 39.746 37.482 39.006L38.512 37.975C38.6925 38.1976 38.9205 38.3771 39.1794 38.5001C39.4383 38.6231 39.7214 38.6866 40.008 38.686C40.705 38.686 41.126 38.396 41.126 37.917C41.126 37.337 40.515 37.235 39.63 36.959ZM45.7 35.652H49.315C49.199 34.708 48.473 34.069 47.5 34.069C46.527 34.069 45.801 34.709 45.7 35.652ZM43.885 36.378C43.885 34.157 45.38 32.618 47.515 32.618C49.649 32.618 51.13 34.142 51.13 36.334C51.13 36.509 51.1 36.784 51.072 36.974H45.699C45.83 37.946 46.658 38.599 47.718 38.599C48.502 38.599 49.184 38.309 49.634 37.786L50.724 38.846C50.07 39.688 48.937 40.138 47.631 40.138C45.424 40.138 43.885 38.585 43.885 36.378ZM52.523 37.133V32.792H54.323V36.799C54.323 38.004 54.745 38.57 55.616 38.57C56.502 38.57 56.996 37.917 56.996 36.755V32.792H58.796V39.964H57.096V38.991H57.068C56.72 39.688 55.964 40.138 55.151 40.138C53.395 40.138 52.523 39.137 52.523 37.133ZM60.741 32.792H62.425V33.765H62.455C62.817 33.024 63.456 32.618 64.284 32.618C65.213 32.618 65.91 33.024 66.345 33.838C66.781 33.053 67.58 32.618 68.595 32.618C70.367 32.618 71.224 33.605 71.224 35.623V39.964H69.424V35.928C69.424 34.752 69.017 34.186 68.174 34.186C67.333 34.186 66.883 34.81 66.883 35.986V39.964H65.083V35.928C65.083 34.738 64.69 34.186 63.833 34.186C63.006 34.186 62.541 34.824 62.541 35.986V39.964H60.741V32.792ZM84.683 39.964L82.853 32.908H82.824L80.994 39.964H78.774L76 30.527H78.033L79.891 37.67H79.921L81.793 30.527H83.884L85.757 37.67H85.787L87.645 30.527H89.677L86.904 39.964H84.683ZM91.71 35.652H95.325C95.209 34.708 94.483 34.069 93.51 34.069C92.537 34.069 91.812 34.709 91.71 35.652ZM89.895 36.378C89.895 34.157 91.39 32.618 93.525 32.618C95.659 32.618 97.14 34.142 97.14 36.334C97.14 36.509 97.11 36.784 97.082 36.974H91.71C91.84 37.946 92.668 38.599 93.728 38.599C94.512 38.599 95.194 38.309 95.645 37.786L96.733 38.846C96.08 39.688 94.948 40.138 93.641 40.138C91.434 40.138 89.895 38.585 89.895 36.378ZM100 35.652H103.616C103.499 34.708 102.773 34.069 101.801 34.069C100.828 34.069 100.1 34.709 100 35.652ZM98.185 36.378C98.185 34.157 99.681 32.618 101.815 32.618C103.949 32.618 105.43 34.142 105.43 36.334C105.43 36.509 105.401 36.784 105.372 36.974H100C100.13 37.946 100.958 38.599 102.018 38.599C102.802 38.599 103.485 38.309 103.935 37.786L105.024 38.846C104.37 39.688 103.238 40.138 101.931 40.138C99.724 40.138 98.185 38.585 98.185 36.378ZM108.363 36.959C107.39 36.669 106.446 36.146 106.446 34.839C106.446 33.518 107.55 32.618 109.191 32.618C110.294 32.618 111.151 33.009 111.63 33.735L110.599 34.766C110.236 34.316 109.742 34.069 109.205 34.069C108.595 34.069 108.218 34.345 108.218 34.781C108.218 35.361 108.828 35.463 109.713 35.739C110.686 36.029 111.63 36.552 111.63 37.859C111.63 39.209 110.468 40.139 108.755 40.139C107.637 40.139 106.737 39.746 106.215 39.006L107.245 37.975C107.426 38.1976 107.654 38.3771 107.912 38.5001C108.171 38.6231 108.454 38.6866 108.741 38.686C109.437 38.686 109.859 38.396 109.859 37.917C109.859 37.337 109.249 37.235 108.363 36.959ZM118.83 36.378C118.83 35.086 118.033 34.229 116.857 34.229C115.68 34.229 114.867 35.1 114.867 36.378C114.867 37.656 115.68 38.527 116.857 38.527C118.033 38.527 118.831 37.67 118.831 36.377L118.83 36.378ZM113.067 32.792H114.78V33.91H114.81C115.245 33.097 116.116 32.618 117.162 32.618C119.209 32.618 120.675 34.171 120.675 36.348C120.675 38.556 119.209 40.138 117.162 40.138C116.189 40.138 115.39 39.718 114.896 38.948H114.867V42.65H113.067V32.792Z" fill="black"/>
+<path className="ams-logo__text-primary" d="M20.539 22.287H23.588L22.078 18.309H22.048L20.539 22.287ZM21.018 16.494H23.196L26.971 25.931H24.953L24.169 23.855H19.973L19.189 25.931H17.243L21.018 16.494ZM28.161 18.759H29.845V19.732H29.875C30.237 18.992 30.876 18.584 31.704 18.584C32.633 18.584 33.33 18.991 33.765 19.804C34.201 19.02 35 18.584 36.015 18.584C37.787 18.584 38.644 19.572 38.644 21.59V25.931H36.844V21.895C36.844 20.719 36.437 20.152 35.594 20.152C34.753 20.152 34.303 20.777 34.303 21.952V25.932H32.503V21.895C32.503 20.705 32.11 20.152 31.253 20.152C30.426 20.152 29.961 20.792 29.961 21.952V25.932H28.161V18.759ZM41.954 22.926C40.981 22.636 40.037 22.113 40.037 20.806C40.037 19.485 41.141 18.584 42.781 18.584C43.885 18.584 44.741 18.977 45.221 19.702L44.19 20.733C43.827 20.283 43.333 20.036 42.796 20.036C42.186 20.036 41.809 20.312 41.809 20.748C41.809 21.328 42.419 21.43 43.304 21.706C44.277 21.996 45.221 22.519 45.221 23.826C45.221 25.176 44.059 26.106 42.346 26.106C41.228 26.106 40.328 25.713 39.806 24.973L40.836 23.942C41.0164 24.1645 41.2443 24.3439 41.5029 24.4669C41.7616 24.5899 42.0446 24.6535 42.331 24.653C43.028 24.653 43.449 24.363 43.449 23.884C43.449 23.304 42.839 23.202 41.954 22.926ZM47.122 23.361V20.254H45.888V18.76H46.542C47.137 18.76 47.369 18.527 47.369 17.932V16.814H48.909V18.76H50.651V20.255H48.908V23.362C48.908 24.059 49.271 24.452 49.939 24.452C50.142 24.452 50.389 24.422 50.534 24.379V25.889C50.2243 25.9569 49.9081 25.9907 49.591 25.99C47.965 25.99 47.122 25.089 47.122 23.361ZM53.351 21.619H56.966C56.85 20.675 56.124 20.036 55.151 20.036C54.179 20.036 53.453 20.676 53.351 21.619ZM51.536 22.345C51.536 20.124 53.032 18.585 55.166 18.585C57.3 18.585 58.781 20.109 58.781 22.301C58.781 22.476 58.752 22.751 58.723 22.941H53.351C53.481 23.913 54.309 24.566 55.369 24.566C56.153 24.566 56.836 24.276 57.286 23.753L58.375 24.813C57.721 25.655 56.589 26.105 55.282 26.105C53.075 26.105 51.536 24.552 51.536 22.345ZM60.277 18.759H61.975V19.949H62.005C62.353 19.136 62.992 18.701 63.834 18.701C64.051 18.701 64.356 18.73 64.472 18.773V20.487C64.1819 20.4194 63.8849 20.3852 63.587 20.385C62.672 20.385 62.077 21.082 62.077 22.156V25.931H60.277V18.759ZM70.788 22.345C70.788 21.053 69.99 20.196 68.814 20.196C67.623 20.196 66.824 21.067 66.824 22.346C66.824 23.623 67.623 24.494 68.814 24.494C69.99 24.494 70.788 23.637 70.788 22.345ZM64.981 22.374C64.981 20.152 66.447 18.584 68.523 18.584C69.481 18.584 70.265 19.006 70.759 19.775H70.789V15.405H72.589V25.93H70.889V24.812H70.861C70.396 25.625 69.525 26.104 68.523 26.104C66.447 26.104 64.981 24.552 64.981 22.374ZM78.425 23.26V22.853L77.235 22.868C76.291 22.882 75.783 23.216 75.783 23.841C75.783 24.392 76.218 24.784 76.828 24.784C77.771 24.784 78.425 24.16 78.425 23.26ZM73.968 23.884C73.968 22.504 75.115 21.677 77.031 21.663L78.425 21.648V21.416C78.425 20.574 77.888 20.138 76.915 20.138C76.276 20.138 75.71 20.385 75.318 20.835L74.229 19.775C74.853 19.005 75.855 18.585 77.089 18.585C79.006 18.585 80.225 19.63 80.225 21.3V24.145C80.225 24.407 80.341 24.523 80.632 24.523H80.762V25.931H79.92C79.238 25.931 78.773 25.611 78.628 25.089H78.6C78.15 25.743 77.41 26.105 76.51 26.105C75 26.105 73.969 25.205 73.969 23.885L73.968 23.884ZM82.17 18.759H83.855V19.732H83.884C84.247 18.992 84.886 18.584 85.714 18.584C86.642 18.584 87.339 18.991 87.774 19.804C88.21 19.02 89.009 18.584 90.025 18.584C91.797 18.584 92.653 19.572 92.653 21.59V25.931H90.853V21.895C90.853 20.719 90.446 20.152 89.604 20.152C88.762 20.152 88.312 20.777 88.312 21.952V25.932H86.512V21.895C86.512 20.705 86.12 20.152 85.263 20.152C84.436 20.152 83.971 20.792 83.971 21.952V25.932H82.171L82.17 18.759ZM17.644 6.97998C17.644 4.11998 19.647 2.09998 22.479 2.09998C23.916 2.09998 25.121 2.56498 25.978 3.49398L24.729 4.68398C24.192 4.08898 23.422 3.74098 22.508 3.74098C20.795 3.74098 19.604 5.07698 19.604 6.97898C19.604 8.92398 20.765 10.274 22.435 10.274C23.96 10.274 25.02 9.40398 25.02 8.13998V7.89298H22.74V6.31198H26.936V7.77798C26.936 10.188 25.063 11.887 22.377 11.887C19.604 11.887 17.644 9.85398 17.644 6.97998ZM29.97 7.39998H33.586C33.469 6.45698 32.743 5.81798 31.771 5.81798C30.798 5.81798 30.072 6.45698 29.971 7.40098L29.97 7.39998ZM28.155 8.12698C28.155 5.90498 29.651 4.36698 31.785 4.36698C33.92 4.36698 35.4 5.89098 35.4 8.08298C35.4 8.25698 35.372 8.53298 35.342 8.72198H29.97C30.101 9.69498 30.929 10.348 31.988 10.348C32.773 10.348 33.455 10.058 33.905 9.53498L34.994 10.595C34.341 11.437 33.208 11.887 31.901 11.887C29.694 11.887 28.155 10.333 28.155 8.12698ZM36.896 4.53998H38.58V5.51298H38.609C38.972 4.77298 39.611 4.36598 40.439 4.36598C41.368 4.36598 42.065 4.77298 42.5 5.58598C42.936 4.80198 43.734 4.36598 44.75 4.36598C46.522 4.36598 47.379 5.35398 47.379 7.37198V11.712H45.579V7.67698C45.579 6.50198 45.172 5.93498 44.329 5.93498C43.488 5.93498 43.037 6.55998 43.037 7.73498V11.714H41.237V7.67598C41.237 6.48598 40.845 5.93398 39.988 5.93398C39.161 5.93398 38.696 6.57398 38.696 7.73398V11.713H36.896V4.53998ZM50.616 7.39998H54.231C54.115 6.45698 53.389 5.81798 52.417 5.81798C51.444 5.81798 50.717 6.45698 50.617 7.40098L50.616 7.39998ZM48.801 8.12698C48.801 5.90498 50.297 4.36698 52.431 4.36698C54.565 4.36698 56.046 5.89098 56.046 8.08298C56.046 8.25698 56.017 8.53298 55.988 8.72198H50.616C50.746 9.69498 51.574 10.348 52.634 10.348C53.418 10.348 54.101 10.058 54.551 9.53498L55.64 10.595C54.986 11.437 53.854 11.887 52.547 11.887C50.34 11.887 48.801 10.333 48.801 8.12698ZM58.906 7.39998H62.522C62.406 6.45698 61.68 5.81798 60.707 5.81798C59.734 5.81798 59.008 6.45698 58.907 7.40098L58.906 7.39998ZM57.092 8.12698C57.092 5.90498 58.587 4.36698 60.722 4.36698C62.856 4.36698 64.337 5.89098 64.337 8.08298C64.337 8.25698 64.307 8.53298 64.279 8.72198H58.906C59.037 9.69498 59.865 10.348 60.925 10.348C61.708 10.348 62.391 10.058 62.841 9.53498L63.93 10.595C63.277 11.437 62.144 11.887 60.837 11.887C58.631 11.887 57.092 10.333 57.092 8.12698ZM65.832 4.53998H67.531V5.51298H67.56C67.894 4.80198 68.62 4.36598 69.462 4.36598C71.262 4.36598 72.192 5.39698 72.192 7.37198V11.712H70.39V7.71998C70.39 6.49998 69.955 5.93398 69.04 5.93398C68.125 5.93398 67.631 6.57398 67.631 7.76398V11.713H65.831L65.832 4.53998ZM74.5 9.14298V6.03598H73.266V4.53998H73.919C74.514 4.53998 74.747 4.30798 74.747 3.71298V2.59498H76.286V4.53998H78.028V6.03598H76.286V9.14298C76.286 9.83998 76.648 10.232 77.316 10.232C77.52 10.232 77.766 10.202 77.912 10.159V11.669C77.602 11.7372 77.2855 11.7714 76.968 11.771C75.342 11.771 74.5 10.871 74.5 9.14298ZM80.728 7.39998H84.344C84.227 6.45698 83.501 5.81798 82.529 5.81798C81.556 5.81798 80.83 6.45698 80.729 7.40098L80.728 7.39998ZM78.913 8.12698C78.913 5.90498 80.409 4.36698 82.543 4.36698C84.678 4.36698 86.158 5.89098 86.158 8.08298C86.158 8.25698 86.129 8.53298 86.1 8.72198H80.728C80.859 9.69498 81.687 10.348 82.747 10.348C83.531 10.348 84.213 10.058 84.663 9.53498L85.752 10.595C85.099 11.437 83.966 11.887 82.659 11.887C80.452 11.887 78.913 10.333 78.913 8.12698Z" fill="#EC0000"/>
+<path className="ams-logo__emblem" d="M0 38.3642L3.6 34.9356L0 31.507L2.4 29.2213L6 32.6499L9.6 29.2213L12 31.507L8.4 34.9356L12 38.3642L9.6 40.6499L6 37.2213L2.4 40.6499L0 38.3642Z" fill="#EC0000"/>
+<path className="ams-logo__emblem" d="M0 9.79276L3.6 6.36419L0 2.93562L2.4 0.649902L6 4.07847L9.6 0.649902L12 2.93562L8.4 6.36419L12 9.79276L9.6 12.0785L6 8.6499L2.4 12.0785L0 9.79276Z" fill="#EC0000"/>
+<path className="ams-logo__emblem" d="M0 24.0785L3.6 20.6499L0 17.2213L2.4 14.9356L6 18.3642L9.6 14.9356L12 17.2213L8.4 20.6499L12 24.0785L9.6 26.3642L6 22.9356L2.4 26.3642L0 24.0785Z" fill="#EC0000"/>
 </svg>
diff --git a/proprietary/assets/logo/stadsarchief.svg b/proprietary/assets/logo/stadsarchief.svg
index 2f1e4c1bd3..b2d9802462 100644
--- a/proprietary/assets/logo/stadsarchief.svg
+++ b/proprietary/assets/logo/stadsarchief.svg
@@ -1,11 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 98 40">
-  <g class="amsterdam-logo__emblem">
+  <g class="ams-logo__emblem">
     <path fill="#EC0000" d="m0 37.648 3.527-3.527L0 30.593l2.352-2.351 3.527 3.527 3.528-3.527 2.351 2.351-3.527 3.528 3.527 3.527L9.407 40l-3.528-3.527L2.352 40 0 37.648ZM0 9.407l3.527-3.528L0 2.352 2.352 0l3.527 3.527L9.407 0l2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.526 3.527L0 9.407ZM0 23.54l3.527-3.528L0 16.485l2.352-2.352 3.527 3.528 3.528-3.528 2.351 2.352-3.527 3.527 3.527 3.528-2.351 2.351-3.528-3.527-3.527 3.527L0 23.54Z"/>
   </g>
-  <g class="amsterdam-logo__text-primary">
+  <g class="ams-logo__text-primary">
     <path fill="#EC0000" d="M20.937 15.334h2.17l3.76 9.4h-2.011l-.78-2.068h-4.18l-.782 2.068h-1.937l3.76-9.4Zm-.477 5.77h3.037l-1.504-3.962h-.03l-1.503 3.963ZM28.052 17.59h1.678v.969h.03c.36-.737.997-1.143 1.822-1.143.925 0 1.62.405 2.054 1.215.434-.781 1.228-1.215 2.24-1.215 1.766 0 2.618.983 2.618 2.994v4.324h-1.793v-4.02c0-1.17-.404-1.735-1.244-1.735s-1.287.622-1.287 1.793v3.962h-1.794v-4.02c0-1.186-.39-1.735-1.243-1.735-.854 0-1.288.636-1.288 1.793v3.962h-1.793V17.59ZM41.791 21.74c-.969-.288-1.91-.81-1.91-2.111 0-1.302 1.1-2.213 2.734-2.213 1.1 0 1.952.39 2.43 1.114l-1.027 1.026c-.362-.448-.853-.694-1.388-.694-.608 0-.983.276-.983.71 0 .578.608.679 1.49.954.968.29 1.909.81 1.909 2.112 0 1.301-1.157 2.27-2.863 2.27-1.114 0-2.01-.39-2.532-1.127l1.027-1.027c.39.464.911.71 1.49.71.693 0 1.113-.29 1.113-.767 0-.579-.608-.68-1.49-.955v-.001ZM46.94 22.175V19.08h-1.23v-1.49h.652c.592 0 .824-.232.824-.824v-1.114h1.533v1.938h1.736v1.49h-1.736v3.095c0 .693.361 1.085 1.027 1.085.202 0 .448-.03.592-.073v1.504a4.362 4.362 0 0 1-.94.101c-1.62 0-2.46-.897-2.46-2.617h.002ZM51.337 21.162c0-2.213 1.49-3.746 3.615-3.746 2.126 0 3.602 1.52 3.602 3.703 0 .174-.03.448-.058.636h-5.351c.13.969.955 1.62 2.01 1.62.781 0 1.46-.29 1.91-.81l1.084 1.056c-.651.838-1.779 1.287-3.08 1.287-2.2 0-3.731-1.547-3.731-3.746h-.002Zm1.808-.723h3.601c-.115-.94-.838-1.577-1.808-1.577-.97 0-1.692.637-1.793 1.577ZM60.042 17.59h1.692v1.186h.03c.346-.81.983-1.244 1.822-1.244.218 0 .521.03.636.072v1.706a3.906 3.906 0 0 0-.882-.1c-.91 0-1.504.693-1.504 1.764v3.76h-1.793V17.59ZM64.729 21.192c0-2.213 1.46-3.775 3.529-3.775.954 0 1.735.42 2.227 1.187h.029V14.25h1.793v10.486h-1.692v-1.114h-.03c-.462.81-1.33 1.288-2.327 1.288-2.069 0-3.529-1.548-3.529-3.717v-.002Zm5.785-.03c0-1.287-.796-2.14-1.967-2.14s-1.981.868-1.981 2.14c0 1.273.796 2.14 1.98 2.14 1.186 0 1.968-.853 1.968-2.14ZM73.68 22.695c0-1.374 1.143-2.198 3.052-2.212l1.388-.015v-.231c0-.838-.535-1.272-1.504-1.272-.636 0-1.2.245-1.59.693l-1.084-1.056c.622-.766 1.62-1.186 2.849-1.186 1.908 0 3.124 1.042 3.124 2.704v2.835c0 .26.115.377.404.377h.13v1.402h-.838c-.68 0-1.143-.318-1.287-.838h-.03c-.448.651-1.186 1.012-2.082 1.012-1.504 0-2.53-.897-2.53-2.213h-.002Zm4.44-.622v-.404l-1.185.014c-.94.014-1.446.347-1.446.969 0 .55.434.94 1.042.94.94 0 1.59-.621 1.59-1.518ZM81.851 17.59h1.678v.969h.03c.362-.737.998-1.143 1.822-1.143.925 0 1.62.405 2.054 1.215.434-.781 1.229-1.215 2.241-1.215 1.765 0 2.618.983 2.618 2.994v4.324H90.5v-4.02c0-1.17-.405-1.735-1.245-1.735-.84 0-1.287.622-1.287 1.793v3.962h-1.793v-4.02c0-1.186-.39-1.735-1.244-1.735s-1.288.636-1.288 1.793v3.962h-1.793V17.59ZM17.575 5.857c0-2.85 1.996-4.86 4.817-4.86 1.432 0 2.632.463 3.485 1.389l-1.244 1.186c-.535-.593-1.302-.94-2.213-.94-1.706 0-2.893 1.33-2.893 3.225 0 1.894 1.157 3.283 2.821 3.283 1.52 0 2.574-.868 2.574-2.126v-.246h-2.27V5.191h4.18v1.46c0 2.402-1.867 4.094-4.542 4.094s-4.715-2.025-4.715-4.888ZM28.047 7c0-2.213 1.49-3.747 3.616-3.747 2.126 0 3.601 1.52 3.601 3.703 0 .174-.03.448-.057.636h-5.351c.13.97.954 1.62 2.01 1.62.78 0 1.46-.289 1.91-.81l1.085 1.056c-.651.839-1.779 1.288-3.08 1.288-2.2 0-3.732-1.548-3.732-3.746h-.002Zm1.809-.724h3.601c-.115-.94-.838-1.576-1.808-1.576-.97 0-1.692.636-1.793 1.576ZM36.753 3.426h1.678v.97h.03c.361-.738.997-1.144 1.822-1.144.925 0 1.62.405 2.054 1.215.434-.78 1.23-1.215 2.24-1.215 1.766 0 2.618.983 2.618 2.994v4.324h-1.793V6.55c0-1.17-.404-1.735-1.244-1.735s-1.287.622-1.287 1.793v3.962h-1.794V6.55c0-1.186-.39-1.735-1.243-1.735-.854 0-1.288.636-1.288 1.793v3.962h-1.793V3.426ZM48.612 7c0-2.213 1.49-3.747 3.616-3.747 2.126 0 3.601 1.52 3.601 3.703 0 .174-.03.448-.057.636H50.42c.131.97.955 1.62 2.011 1.62.78 0 1.46-.289 1.91-.81l1.084 1.056c-.652.839-1.78 1.288-3.08 1.288-2.2 0-3.732-1.548-3.732-3.746Zm1.808-.724h3.602c-.115-.94-.838-1.576-1.807-1.576s-1.692.636-1.793 1.576h-.002ZM56.87 7c0-2.213 1.49-3.747 3.616-3.747 2.125 0 3.601 1.52 3.601 3.703 0 .174-.03.448-.058.636h-5.35c.13.97.954 1.62 2.01 1.62.78 0 1.46-.289 1.91-.81l1.084 1.056c-.652.839-1.78 1.288-3.081 1.288-2.199 0-3.731-1.548-3.731-3.746h-.001Zm1.808-.724h3.602c-.115-.94-.839-1.576-1.809-1.576s-1.692.636-1.793 1.576ZM65.577 3.426h1.692v.97h.03c.332-.71 1.055-1.144 1.893-1.144 1.794 0 2.719 1.027 2.719 2.994v4.324h-1.793V6.594c0-1.215-.434-1.78-1.345-1.78-.912 0-1.403.637-1.403 1.823v3.935h-1.793V3.426ZM74.21 8.012V4.917h-1.23v-1.49h.652c.593 0 .825-.231.825-.824V1.49h1.533v1.937h1.735v1.49H75.99v3.095c0 .694.36 1.085 1.026 1.085.203 0 .448-.03.593-.073v1.504a4.356 4.356 0 0 1-.94.101c-1.621 0-2.46-.897-2.46-2.617l.002.001ZM78.607 7c0-2.213 1.49-3.747 3.616-3.747 2.126 0 3.601 1.52 3.601 3.703 0 .174-.03.448-.057.636h-5.352c.131.97.955 1.62 2.011 1.62.78 0 1.46-.289 1.91-.81l1.084 1.056c-.652.839-1.78 1.288-3.08 1.288-2.2 0-3.732-1.548-3.732-3.746Zm1.808-.724h3.602c-.115-.94-.838-1.576-1.808-1.576-.97 0-1.692.636-1.794 1.576Z"/>
   </g>
-  <g class="amsterdam-logo__text-secondary">
+  <g class="ams-logo__text-secondary">
     <path fill="#000" d="m17.335 37.353 1.302-1.084a2.07 2.07 0 0 0 1.779.983c.868 0 1.46-.463 1.46-1.143 0-.766-.636-1.042-1.866-1.49-1.143-.42-2.343-1.012-2.343-2.747 0-1.62 1.316-2.734 3.24-2.734 1.3 0 2.327.52 2.906 1.446L22.51 31.67c-.39-.578-.954-.897-1.62-.897-.78 0-1.302.42-1.302 1.042 0 .767.637 1.042 1.866 1.49 1.143.42 2.344 1.012 2.344 2.748 0 1.735-1.375 2.834-3.4 2.834-1.374 0-2.458-.549-3.066-1.533h.002ZM25.738 36.153v-3.095h-1.23v-1.49h.65c.593 0 .824-.231.824-.824v-1.113h1.534v1.937h1.735v1.49h-1.735v3.095c0 .693.362 1.085 1.026 1.085.202 0 .448-.03.593-.073v1.504a4.37 4.37 0 0 1-.941.101c-1.62 0-2.459-.897-2.459-2.617h.003ZM30.134 36.674c0-1.375 1.143-2.2 3.051-2.213l1.389-.014v-.232c0-.838-.535-1.272-1.504-1.272-.636 0-1.2.245-1.59.694l-1.085-1.056c.622-.767 1.62-1.187 2.85-1.187 1.909 0 3.123 1.042 3.123 2.705v2.835c0 .26.115.376.405.376h.13v1.402h-.838c-.68 0-1.143-.318-1.288-.838h-.029c-.448.651-1.186 1.012-2.082 1.012-1.504 0-2.53-.897-2.53-2.212h-.002Zm4.44-.622v-.405l-1.186.014c-.941.014-1.447.347-1.447.97 0 .548.434.94 1.042.94.94 0 1.591-.622 1.591-1.52ZM37.813 35.17c0-2.213 1.46-3.775 3.529-3.775.955 0 1.735.42 2.227 1.187h.03v-4.353h1.792v10.486H43.7V37.6h-.029c-.463.81-1.331 1.288-2.328 1.288-2.068 0-3.529-1.547-3.529-3.717v-.002Zm5.785-.03c0-1.287-.796-2.14-1.967-2.14-1.17 0-1.981.868-1.981 2.14 0 1.273.796 2.14 1.981 2.14s1.967-.853 1.967-2.14ZM48.763 35.719c-.97-.29-1.91-.81-1.91-2.112 0-1.301 1.1-2.213 2.734-2.213 1.1 0 1.952.39 2.429 1.114l-1.026 1.026c-.363-.448-.854-.694-1.39-.694-.607 0-.982.276-.982.71 0 .578.608.68 1.49.954.969.29 1.91.81 1.91 2.112s-1.158 2.27-2.864 2.27c-1.113 0-2.01-.39-2.532-1.127l1.027-1.027c.39.464.911.71 1.49.71.694 0 1.113-.29 1.113-.767 0-.579-.608-.68-1.49-.955v-.001ZM52.97 36.674c0-1.375 1.144-2.2 3.052-2.213l1.389-.014v-.232c0-.838-.535-1.272-1.504-1.272-.636 0-1.2.245-1.591.694l-1.084-1.056c.622-.767 1.62-1.187 2.849-1.187 1.91 0 3.124 1.042 3.124 2.705v2.835c0 .26.115.376.404.376h.13v1.402h-.837c-.68 0-1.143-.318-1.288-.838h-.03c-.447.651-1.186 1.012-2.082 1.012-1.504 0-2.53-.897-2.53-2.212h-.001Zm4.44-.622v-.405l-1.186.014c-.94.014-1.446.347-1.446.97 0 .548.434.94 1.042.94.94 0 1.59-.622 1.59-1.52ZM61.142 31.568h1.691v1.187h.03c.347-.81.983-1.244 1.822-1.244.218 0 .521.029.636.073v1.706a3.907 3.907 0 0 0-.881-.102c-.912 0-1.504.694-1.504 1.765v3.76h-1.793V31.57h-.002ZM65.827 35.14c0-2.227 1.49-3.746 3.689-3.746 1.085 0 2.038.405 2.646 1.128l-1.2 1.127c-.362-.404-.868-.622-1.446-.622-1.1 0-1.851.868-1.851 2.112 0 1.244.752 2.112 1.85 2.112.58 0 1.086-.218 1.476-.636l1.187 1.127c-.636.738-1.577 1.143-2.647 1.143-2.199 0-3.703-1.519-3.703-3.746v.001ZM73.492 28.228h1.793v4.15h.03c.42-.636 1.041-.983 1.793-.983 1.793 0 2.718 1.027 2.718 2.994v4.325h-1.793v-3.978c0-1.215-.434-1.78-1.345-1.78s-1.403.637-1.403 1.823v3.935h-1.793V28.228ZM82.56 30.657c-.622 0-1.07-.434-1.07-1.042 0-.608.448-1.042 1.07-1.042.622 0 1.07.434 1.07 1.042 0 .608-.448 1.042-1.07 1.042Zm-.897.911h1.793v7.144h-1.793v-7.144ZM84.947 35.14c0-2.212 1.49-3.746 3.616-3.746 2.126 0 3.601 1.52 3.601 3.703 0 .174-.03.448-.058.636h-5.35c.13.969.954 1.62 2.01 1.62.78 0 1.46-.289 1.91-.81L91.76 37.6c-.652.838-1.78 1.288-3.081 1.288-2.199 0-3.73-1.548-3.73-3.747h-.002Zm1.808-.723h3.602c-.115-.94-.838-1.577-1.808-1.577-.97 0-1.693.637-1.794 1.577ZM92.886 33.058v-1.49h1.215v-.925c0-1.634.969-2.59 2.632-2.59.203 0 .506.03.666.058v1.548a2.82 2.82 0 0 0-.622-.072c-.565 0-.882.376-.882 1.056v.925h1.736v1.49h-1.736v5.654h-1.793v-5.654h-1.216Z"/>
   </g>
 </svg>
diff --git a/proprietary/assets/logo/stadsbank-van-lening.svg b/proprietary/assets/logo/stadsbank-van-lening.svg
index 57b8404e9d..f3c276ae09 100644
--- a/proprietary/assets/logo/stadsbank-van-lening.svg
+++ b/proprietary/assets/logo/stadsbank-van-lening.svg
@@ -1,11 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 159 42">
-  <g class="amsterdam-logo__emblem">
+  <g class="ams-logo__emblem">
     <path fill="#EC0000" d="m0 37.65 3.53-3.53L0 30.59l2.35-2.35 3.53 3.53 3.53-3.53 2.35 2.35-3.53 3.53 3.53 3.53L9.41 40l-3.53-3.53L2.35 40 0 37.65ZM0 9.41l3.53-3.53L0 2.35 2.35 0l3.53 3.53L9.41 0l2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 9.41ZM0 23.54l3.53-3.53L0 16.48l2.35-2.35 3.53 3.53 3.53-3.53 2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 23.54Z"/>
   </g>
-  <g class="amsterdam-logo__text-secondary">
+  <g class="ams-logo__text-secondary">
     <path fill="#000" d="m17.34 37.35 1.3-1.08c.4.64 1.06.98 1.78.98.87 0 1.46-.46 1.46-1.14 0-.77-.64-1.04-1.87-1.49-1.14-.42-2.34-1.01-2.34-2.75 0-1.62 1.32-2.73 3.24-2.73 1.3 0 2.33.52 2.91 1.45l-1.3 1.08c-.39-.58-.95-.9-1.62-.9-.78 0-1.3.42-1.3 1.04 0 .77.64 1.04 1.87 1.49 1.14.42 2.34 1.01 2.34 2.75s-1.37 2.83-3.4 2.83c-1.37 0-2.46-.55-3.07-1.53ZM25.74 36.15v-3.1h-1.23v-1.49h.65c.59 0 .82-.23.82-.82v-1.11h1.53v1.94h1.74v1.49h-1.74v3.1c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62h.01ZM30.13 36.67c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4h-1.19c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM37.81 35.17c0-2.21 1.46-3.77 3.53-3.77.95 0 1.74.42 2.23 1.19h.03v-4.35h1.79v10.49H43.7v-1.11h-.03c-.46.81-1.33 1.29-2.33 1.29-2.07 0-3.53-1.55-3.53-3.72v-.02Zm5.79-.03c0-1.29-.8-2.14-1.97-2.14s-1.98.87-1.98 2.14.8 2.14 1.98 2.14 1.97-.85 1.97-2.14ZM48.76 35.72c-.97-.29-1.91-.81-1.91-2.11 0-1.3 1.1-2.21 2.73-2.21 1.1 0 1.95.39 2.43 1.11l-1.03 1.03c-.36-.45-.85-.69-1.39-.69-.61 0-.98.27-.98.71 0 .58.61.68 1.49.95.97.29 1.91.81 1.91 2.11 0 1.3-1.16 2.27-2.86 2.27-1.11 0-2.01-.39-2.53-1.13l1.03-1.03c.39.46.91.71 1.49.71.69 0 1.11-.29 1.11-.77 0-.58-.61-.68-1.49-.95ZM55.18 37.6h-.03v1.11h-1.71V28.22h1.79v4.35h.03c.52-.77 1.3-1.19 2.26-1.19 2.04 0 3.5 1.56 3.5 3.75s-1.46 3.75-3.5 3.75c-1 0-1.82-.46-2.34-1.29v.01Zm4.01-2.46c0-1.29-.8-2.14-1.97-2.14s-1.98.87-1.98 2.14.81 2.14 1.98 2.14 1.97-.85 1.97-2.14ZM61.95 36.67c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4H65.2c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM70.12 31.57h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01ZM80.09 38.71H78.3V28.22h1.79v6.57h.03l2.66-3.23h2.17l-2.76 3.17 2.89 3.98h-2.17l-1.98-2.81-.84.97v1.84ZM88.97 31.57h1.95l1.66 5.15h.03l1.71-5.15h1.91l-2.69 7.14h-1.92l-2.65-7.14ZM96.6 36.67c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4h-1.19c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM104.77 31.57h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.34-1.78-.91 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14l-.01.01ZM116.65 29.31h1.91v7.78h3.49v1.62h-5.39v-9.4h-.01ZM122.87 35.14c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM131.57 31.57h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01ZM140.64 30.66c-.62 0-1.07-.43-1.07-1.04 0-.61.45-1.04 1.07-1.04.62 0 1.07.43 1.07 1.04 0 .61-.45 1.04-1.07 1.04Zm-.9.91h1.79v7.14h-1.79v-7.14ZM143.47 31.57h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01ZM151.54 40.42l1.16-1.13c.39.45 1.1.72 1.87.72 1.3 0 2.02-.59 2.02-1.63v-1.1h-.03c-.4.75-1.16 1.17-2.1 1.17-2.01 0-3.34-1.42-3.34-3.53s1.37-3.51 3.34-3.51c1.01 0 1.81.45 2.2 1.21h.03v-1.06h1.69v6.88c0 1.91-1.46 3.11-3.79 3.11-1.33 0-2.43-.42-3.05-1.14v.01Zm5.06-5.5c0-1.19-.74-2.01-1.82-2.01s-1.82.82-1.82 2.01.75 2 1.82 2 1.82-.82 1.82-2Z"/>
   </g>
-  <g class="amsterdam-logo__text-primary">
+  <g class="ams-logo__text-primary">
     <path fill="#EC0000" d="M20.94 15.33h2.17l3.76 9.4h-2.01l-.78-2.07H19.9l-.78 2.07h-1.94l3.76-9.4Zm-.48 5.77h3.04L22 17.14h-.03l-1.5 3.96h-.01ZM28.05 17.59h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H36.7v-4.02c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79V20.7c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79v-7.14l-.01.02ZM41.79 21.74c-.97-.29-1.91-.81-1.91-2.11 0-1.3 1.1-2.21 2.73-2.21 1.1 0 1.95.39 2.43 1.11l-1.03 1.03c-.36-.45-.85-.69-1.39-.69-.61 0-.98.27-.98.71 0 .58.61.68 1.49.95.97.29 1.91.81 1.91 2.11 0 1.3-1.16 2.27-2.86 2.27-1.11 0-2.01-.39-2.53-1.13l1.03-1.03c.39.46.91.71 1.49.71.69 0 1.11-.29 1.11-.77 0-.58-.61-.68-1.49-.95ZM46.94 22.17v-3.09h-1.23v-1.49h.65c.59 0 .82-.23.82-.82v-1.11h1.53v1.94h1.74v1.49h-1.74v3.09c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62h.01ZM51.34 21.16c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM60.04 17.59h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79V17.6l-.01-.01ZM64.73 21.19c0-2.21 1.46-3.77 3.53-3.77.95 0 1.74.42 2.23 1.19h.03v-4.35h1.79v10.49h-1.69v-1.11h-.03c-.46.81-1.33 1.29-2.33 1.29-2.07 0-3.53-1.55-3.53-3.72v-.02Zm5.79-.03c0-1.29-.8-2.14-1.97-2.14s-1.98.87-1.98 2.14.8 2.14 1.98 2.14 1.97-.85 1.97-2.14ZM73.68 22.7c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4h-1.19c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM81.85 17.59h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H90.5v-4.02c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79V20.7c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79v-7.14l-.01.02ZM17.58 5.86c0-2.85 2-4.86 4.82-4.86 1.43 0 2.63.46 3.49 1.39l-1.24 1.19c-.54-.59-1.3-.94-2.21-.94-1.71 0-2.89 1.33-2.89 3.23s1.16 3.28 2.82 3.28c1.52 0 2.57-.87 2.57-2.13v-.25h-2.27V5.19h4.18v1.46c0 2.4-1.87 4.09-4.54 4.09S17.6 8.72 17.6 5.85l-.02.01ZM28.05 7c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM36.75 3.43h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H45.4V6.55c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79V6.55c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79V3.43h-.01ZM48.61 7c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM56.87 7c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM65.58 3.43h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79V6.59c0-1.21-.43-1.78-1.34-1.78-.91 0-1.4.64-1.4 1.82v3.93h-1.79V3.43h-.01ZM74.21 8.01v-3.1h-1.23V3.42h.65c.59 0 .82-.23.82-.82V1.49h1.53v1.94h1.74v1.49h-1.74v3.1c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62h.01ZM78.61 7c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58Z"/>
   </g>
 </svg>
diff --git a/proprietary/assets/logo/vga-verzekeringen.svg b/proprietary/assets/logo/vga-verzekeringen.svg
index b08e08cc68..7fa364791b 100644
--- a/proprietary/assets/logo/vga-verzekeringen.svg
+++ b/proprietary/assets/logo/vga-verzekeringen.svg
@@ -1,11 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 145 43">
-  <g class="amsterdam-logo__emblem">
+  <g class="ams-logo__emblem">
     <path fill="#EC0000" d="m0 38.2 3.53-3.53L0 31.14l2.35-2.35 3.53 3.53 3.53-3.53 2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 38.2ZM0 9.96l3.53-3.53L0 2.9 2.35.55l3.53 3.53L9.41.55l2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 9.96ZM0 24.09l3.53-3.53L0 17.03l2.35-2.35 3.53 3.53 3.53-3.53 2.35 2.35-3.53 3.53 3.53 3.53-2.35 2.35-3.53-3.53-3.53 3.53L0 24.09Z"/>
   </g>
-  <g class="amsterdam-logo__text-secondary">
+  <g class="ams-logo__text-secondary">
     <path fill="#000" d="M17.13 29.86h2.07l2.39 7.22h.03l2.42-7.22h1.98l-3.36 9.4h-2.17l-3.36-9.4ZM26.5 34.55c0-2.85 2-4.86 4.82-4.86 1.43 0 2.63.46 3.49 1.39l-1.24 1.19c-.54-.59-1.3-.94-2.21-.94-1.71 0-2.89 1.33-2.89 3.23s1.16 3.28 2.82 3.28c1.52 0 2.57-.87 2.57-2.13v-.25h-2.27v-1.58h4.18v1.46c0 2.4-1.87 4.09-4.54 4.09s-4.71-2.02-4.71-4.89l-.02.01ZM40.43 29.86h2.17l3.76 9.4h-2.01l-.78-2.07h-4.18l-.78 2.07h-1.94l3.76-9.4Zm-.48 5.77h3.04l-1.5-3.96h-.03l-1.5 3.96h-.01ZM50.38 29.86h2.07l2.39 7.22h.03l2.42-7.22h1.98l-3.36 9.4h-2.17l-3.36-9.4ZM59.42 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM68.13 32.12h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79v-7.14l-.01-.01ZM73.01 38.06l3.4-4.45h-3.3v-1.49h5.73v1.2l-3.4 4.45h3.5v1.49h-5.93v-1.2ZM79.88 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM90.38 39.26h-1.79V28.77h1.79v6.57h.03l2.66-3.23h2.17l-2.76 3.17 2.89 3.98H93.2l-1.98-2.81-.84.97v1.84ZM95.68 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM104.38 32.12h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79v-7.14l-.01-.01ZM110.65 31.21c-.62 0-1.07-.43-1.07-1.04 0-.61.45-1.04 1.07-1.04.62 0 1.07.43 1.07 1.04 0 .61-.45 1.04-1.07 1.04Zm-.9.91h1.79v7.14h-1.79v-7.14ZM113.48 32.12h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01ZM121.55 40.97l1.16-1.13c.39.45 1.1.72 1.87.72 1.3 0 2.02-.59 2.02-1.63v-1.1h-.03c-.4.75-1.16 1.17-2.1 1.17-2.01 0-3.34-1.42-3.34-3.53s1.37-3.51 3.34-3.51c1.01 0 1.81.45 2.2 1.21h.03v-1.06h1.69v6.88c0 1.91-1.46 3.11-3.79 3.11-1.33 0-2.43-.42-3.05-1.14v.01Zm5.06-5.5c0-1.19-.74-2.01-1.82-2.01s-1.82.82-1.82 2.01.75 2 1.82 2 1.82-.82 1.82-2ZM129.88 35.69c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM138.59 32.12h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79v-3.98c0-1.21-.43-1.78-1.35-1.78-.92 0-1.4.64-1.4 1.82v3.93h-1.79v-7.14.01Z"/>
   </g>
-  <g class="amsterdam-logo__text-primary">
+  <g class="ams-logo__text-primary">
     <path fill="#EC0000" d="M20.94 15.88h2.17l3.76 9.4h-2.01l-.78-2.07H19.9l-.78 2.07h-1.94l3.76-9.4Zm-.48 5.77h3.04L22 17.69h-.03l-1.5 3.96h-.01ZM28.05 18.14h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H36.7v-4.02c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79v-4.02c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79v-7.14l-.01.02ZM41.79 22.29c-.97-.29-1.91-.81-1.91-2.11 0-1.3 1.1-2.21 2.73-2.21 1.1 0 1.95.39 2.43 1.11l-1.03 1.03c-.36-.45-.85-.69-1.39-.69-.61 0-.98.27-.98.71 0 .58.61.68 1.49.95.97.29 1.91.81 1.91 2.11 0 1.3-1.16 2.27-2.86 2.27-1.11 0-2.01-.39-2.53-1.13l1.03-1.03c.39.46.91.71 1.49.71.69 0 1.11-.29 1.11-.77 0-.58-.61-.68-1.49-.95ZM46.94 22.72v-3.09h-1.23v-1.49h.65c.59 0 .82-.23.82-.82v-1.11h1.53v1.94h1.74v1.49h-1.74v3.09c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62h.01ZM51.34 21.71c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM60.04 18.14h1.69v1.19h.03c.35-.81.98-1.24 1.82-1.24.22 0 .52.03.64.07v1.71c-.2-.06-.59-.1-.88-.1-.91 0-1.5.69-1.5 1.76v3.76h-1.79v-7.14l-.01-.01ZM64.73 21.74c0-2.21 1.46-3.77 3.53-3.77.95 0 1.74.42 2.23 1.19h.03v-4.35h1.79V25.3h-1.69v-1.11h-.03c-.46.81-1.33 1.29-2.33 1.29-2.07 0-3.53-1.55-3.53-3.72v-.02Zm5.79-.03c0-1.29-.8-2.14-1.97-2.14s-1.98.87-1.98 2.14.8 2.14 1.98 2.14 1.97-.85 1.97-2.14ZM73.68 23.25c0-1.37 1.14-2.2 3.05-2.21h1.39v-.25c0-.84-.54-1.27-1.5-1.27-.64 0-1.2.25-1.59.69l-1.08-1.06c.62-.77 1.62-1.19 2.85-1.19 1.91 0 3.12 1.04 3.12 2.7v2.83c0 .26.12.38.4.38h.13v1.4h-.84c-.68 0-1.14-.32-1.29-.84h-.03c-.45.65-1.19 1.01-2.08 1.01-1.5 0-2.53-.9-2.53-2.21v.02Zm4.44-.62v-.4h-1.19c-.94.03-1.45.36-1.45.98 0 .55.43.94 1.04.94.94 0 1.59-.62 1.59-1.52h.01ZM81.85 18.14h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H90.5v-4.02c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79v-4.02c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79v-7.14l-.01.02ZM17.58 6.41c0-2.85 2-4.86 4.82-4.86 1.43 0 2.63.46 3.49 1.39l-1.24 1.19c-.54-.59-1.3-.94-2.21-.94-1.71 0-2.89 1.33-2.89 3.23s1.16 3.28 2.82 3.28c1.52 0 2.57-.87 2.57-2.13v-.25h-2.27V5.74h4.18V7.2c0 2.4-1.87 4.09-4.54 4.09S17.6 9.27 17.6 6.4l-.02.01ZM28.05 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM36.75 3.98h1.68v.97h.03c.36-.74 1-1.14 1.82-1.14.93 0 1.62.4 2.05 1.21.43-.78 1.23-1.21 2.24-1.21 1.76 0 2.62.98 2.62 2.99v4.32H45.4V7.1c0-1.17-.4-1.74-1.24-1.74s-1.29.62-1.29 1.79v3.96h-1.79V7.1c0-1.19-.39-1.74-1.24-1.74s-1.29.64-1.29 1.79v3.96h-1.79V3.98h-.01ZM48.61 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM56.87 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58ZM65.58 3.98h1.69v.97h.03c.33-.71 1.06-1.14 1.89-1.14 1.79 0 2.72 1.03 2.72 2.99v4.32h-1.79V7.14c0-1.21-.43-1.78-1.34-1.78-.91 0-1.4.64-1.4 1.82v3.93h-1.79V3.98h-.01ZM74.21 8.56V5.47h-1.23V3.98h.65c.59 0 .82-.23.82-.82V2.04h1.53v1.94h1.74v1.49h-1.74v3.09c0 .69.36 1.08 1.03 1.08.2 0 .45-.03.59-.07v1.5c-.22.06-.62.1-.94.1-1.62 0-2.46-.9-2.46-2.62l.01.01ZM78.61 7.55c0-2.21 1.49-3.75 3.62-3.75s3.6 1.52 3.6 3.7c0 .17-.03.45-.06.64h-5.35c.13.97.95 1.62 2.01 1.62.78 0 1.46-.29 1.91-.81l1.08 1.06c-.65.84-1.78 1.29-3.08 1.29-2.2 0-3.73-1.55-3.73-3.75Zm1.81-.72h3.6c-.12-.94-.84-1.58-1.81-1.58-.97 0-1.69.64-1.79 1.58Z"/>
   </g>
 </svg>
diff --git a/proprietary/tokens/build.js b/proprietary/tokens/build.js
index 5ffe1d2997..121a6eef7b 100644
--- a/proprietary/tokens/build.js
+++ b/proprietary/tokens/build.js
@@ -28,7 +28,7 @@ function generateSharedConfig(mode) {
           destination: `${name}.theme.css`,
           format: 'css/variables',
           options: {
-            selector: `.amsterdam-theme${name === 'index' ? '' : `--${name}`}`,
+            selector: `.ams-theme${name === 'index' ? '' : `--${name}`}`,
             outputReferences: true,
           },
         },
diff --git a/proprietary/tokens/src/brand/amsterdam/color.tokens.json b/proprietary/tokens/src/brand/ams/color.tokens.json
similarity index 97%
rename from proprietary/tokens/src/brand/amsterdam/color.tokens.json
rename to proprietary/tokens/src/brand/ams/color.tokens.json
index c25e616fe3..9648f33983 100644
--- a/proprietary/tokens/src/brand/amsterdam/color.tokens.json
+++ b/proprietary/tokens/src/brand/ams/color.tokens.json
@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "color": {
       "primary-black": { "value": "#000000" },
       "primary-white": { "value": "#FFFFFF" },
diff --git a/proprietary/tokens/src/brand/amsterdam/proportion.tokens.json b/proprietary/tokens/src/brand/ams/proportion.tokens.json
similarity index 93%
rename from proprietary/tokens/src/brand/amsterdam/proportion.tokens.json
rename to proprietary/tokens/src/brand/ams/proportion.tokens.json
index b2dedf9ee8..52b34d95dc 100644
--- a/proprietary/tokens/src/brand/amsterdam/proportion.tokens.json
+++ b/proprietary/tokens/src/brand/ams/proportion.tokens.json
@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "proportion": {
       "x-tall": { "value": "9 / 16" },
       "tall": { "value": "4 / 5" },
diff --git a/proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json b/proprietary/tokens/src/brand/ams/space.compact.tokens.json
similarity index 97%
rename from proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json
rename to proprietary/tokens/src/brand/ams/space.compact.tokens.json
index 753277f079..8e1cbded54 100644
--- a/proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json
+++ b/proprietary/tokens/src/brand/ams/space.compact.tokens.json
@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "space": {
       "grid": {
         "xs": { "value": "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)" },
diff --git a/proprietary/tokens/src/brand/amsterdam/space.tokens.json b/proprietary/tokens/src/brand/ams/space.tokens.json
similarity index 98%
rename from proprietary/tokens/src/brand/amsterdam/space.tokens.json
rename to proprietary/tokens/src/brand/ams/space.tokens.json
index c7ec3917b8..3912abf291 100644
--- a/proprietary/tokens/src/brand/amsterdam/space.tokens.json
+++ b/proprietary/tokens/src/brand/ams/space.tokens.json
@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "space": {
       "grid": {
         "xs": { "value": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)" },
diff --git a/proprietary/tokens/src/brand/amsterdam/typography.compact.tokens.json b/proprietary/tokens/src/brand/ams/text.compact.tokens.json
similarity index 93%
rename from proprietary/tokens/src/brand/amsterdam/typography.compact.tokens.json
rename to proprietary/tokens/src/brand/ams/text.compact.tokens.json
index e722ff598f..894c645542 100644
--- a/proprietary/tokens/src/brand/amsterdam/typography.compact.tokens.json
+++ b/proprietary/tokens/src/brand/ams/text.compact.tokens.json
@@ -1,7 +1,7 @@
 {
-  "amsterdam": {
-    "typography": {
-      "text-level": {
+  "ams": {
+    "text": {
+      "level": {
         "0": {
           "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" }
         },
diff --git a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json b/proprietary/tokens/src/brand/ams/text.tokens.json
similarity index 95%
rename from proprietary/tokens/src/brand/amsterdam/typography.tokens.json
rename to proprietary/tokens/src/brand/ams/text.tokens.json
index 3394e80de1..7a1149331c 100644
--- a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
+++ b/proprietary/tokens/src/brand/ams/text.tokens.json
@@ -1,12 +1,12 @@
 {
-  "amsterdam": {
-    "typography": {
+  "ams": {
+    "text": {
       "font-family": { "value": "'Amsterdam Sans', Arial, sans-serif" },
       "font-weight": {
         "normal": { "value": 400 },
         "bold": { "value": 800 }
       },
-      "text-level": {
+      "level": {
         "0": {
           "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" },
           "line-height": { "value": "1.15" }
diff --git a/proprietary/tokens/src/common/amsterdam/action.tokens.json b/proprietary/tokens/src/common/ams/action.tokens.json
similarity index 95%
rename from proprietary/tokens/src/common/amsterdam/action.tokens.json
rename to proprietary/tokens/src/common/ams/action.tokens.json
index d726b9b7f6..3b6e1cdf54 100644
--- a/proprietary/tokens/src/common/amsterdam/action.tokens.json
+++ b/proprietary/tokens/src/common/ams/action.tokens.json
@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "action": {
       "activate": { "cursor": { "value": "pointer" } },
       "busy": { "cursor": { "value": "wait" } },
diff --git a/proprietary/tokens/src/common/amsterdam/border.tokens.json b/proprietary/tokens/src/common/ams/border.tokens.json
similarity index 88%
rename from proprietary/tokens/src/common/amsterdam/border.tokens.json
rename to proprietary/tokens/src/common/ams/border.tokens.json
index fa6893047c..3c9f217831 100644
--- a/proprietary/tokens/src/common/amsterdam/border.tokens.json
+++ b/proprietary/tokens/src/common/ams/border.tokens.json
@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "border-width": {
       "sm": { "value": "1px" },
       "md": { "value": "2px" },
diff --git a/proprietary/tokens/src/common/amsterdam/focus.tokens.json b/proprietary/tokens/src/common/ams/focus.tokens.json
similarity index 80%
rename from proprietary/tokens/src/common/amsterdam/focus.tokens.json
rename to proprietary/tokens/src/common/ams/focus.tokens.json
index ceb1259573..a1570eb814 100644
--- a/proprietary/tokens/src/common/amsterdam/focus.tokens.json
+++ b/proprietary/tokens/src/common/ams/focus.tokens.json
@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "focus": {
       "outline-offset": { "value": "2px" }
     }
diff --git a/proprietary/tokens/src/common/amsterdam/hyphenation.tokens.json b/proprietary/tokens/src/common/ams/hyphenation.tokens.json
similarity index 91%
rename from proprietary/tokens/src/common/amsterdam/hyphenation.tokens.json
rename to proprietary/tokens/src/common/ams/hyphenation.tokens.json
index 9007b3bafb..927d4b8a65 100644
--- a/proprietary/tokens/src/common/amsterdam/hyphenation.tokens.json
+++ b/proprietary/tokens/src/common/ams/hyphenation.tokens.json
@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "hyphenation": {
       "hyphenate-limit-chars": { "value": "12 8 4" },
       "hyphens": { "value": "auto" },
diff --git a/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json b/proprietary/tokens/src/common/ams/link-appearance.tokens.json
similarity index 71%
rename from proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json
rename to proprietary/tokens/src/common/ams/link-appearance.tokens.json
index bfa9049bf7..fde698cf2b 100644
--- a/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json
+++ b/proprietary/tokens/src/common/ams/link-appearance.tokens.json
@@ -1,17 +1,17 @@
 {
-  "amsterdam": {
+  "ams": {
     "link-appearance": {
-      "color": { "value": "{amsterdam.color.primary-blue}" },
+      "color": { "value": "{ams.color.primary-blue}" },
       "text-decoration-thickness": { "value": "0.125rem" },
       "text-underline-offset": { "value": "0.375rem" },
       "hover": {
-        "color": { "value": "{amsterdam.color.dark-blue}" }
+        "color": { "value": "{ams.color.dark-blue}" }
       },
       "on-background-dark": {
-        "color": { "value": "{amsterdam.color.primary-white}" }
+        "color": { "value": "{ams.color.primary-white}" }
       },
       "on-background-light": {
-        "color": { "value": "{amsterdam.color.primary-black}" }
+        "color": { "value": "{ams.color.primary-black}" }
       },
       "regular": {
         "text-decoration-line": { "value": "underline" },
diff --git a/proprietary/tokens/src/components/ams/accordion.tokens.json b/proprietary/tokens/src/components/ams/accordion.tokens.json
new file mode 100644
index 0000000000..ae1c1cc586
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/accordion.tokens.json
@@ -0,0 +1,25 @@
+{
+  "ams": {
+    "accordion": {
+      "button": {
+        "color": { "value": "{ams.color.primary-blue}" },
+        "font-family": { "value": "{ams.text.font-family}" },
+        "font-size": { "value": "{ams.text.level.5.font-size}" },
+        "font-weight": { "value": "{ams.text.font-weight.bold}" },
+        "line-height": { "value": "{ams.text.level.5.line-height}" },
+        "padding-block": { "value": "{ams.space.inside.sm}" },
+        "padding-inline": { "value": "{ams.space.inside.md}" },
+        "focus": {
+          "outline-offset": { "value": "{ams.focus.outline-offset}" }
+        },
+        "hover": {
+          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.neutral-grey3}" }
+        }
+      },
+      "panel": {
+        "padding-block": { "value": "{ams.space.inside.md}" },
+        "padding-inline": { "value": "{ams.space.inside.md}" }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json
new file mode 100644
index 0000000000..12522fafa8
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/alert.tokens.json
@@ -0,0 +1,29 @@
+{
+  "ams": {
+    "alert": {
+      "border-width": { "value": "4px" },
+      "border-style": { "value": "solid" },
+      "gap": { "value": "1rem" },
+      "padding-block": { "value": "{ams.space.inside.md}" },
+      "padding-inline": { "value": "{ams.space.inside.lg}" },
+      "error": {
+        "border-color": { "value": "{ams.color.primary-red}" }
+      },
+      "info": {
+        "border-color": { "value": "{ams.color.primary-blue}" }
+      },
+      "success": {
+        "border-color": { "value": "{ams.color.dark-green}" }
+      },
+      "warning": {
+        "border-color": { "value": "{ams.color.orange}" }
+      },
+      "close": {
+        "fill": { "value": "{ams.color.primary-black}" },
+        "hover": {
+          "fill": { "value": "{ams.color.primary-blue}" }
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/aspect-ratio.tokens.json b/proprietary/tokens/src/components/ams/aspect-ratio.tokens.json
new file mode 100644
index 0000000000..57f889c840
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/aspect-ratio.tokens.json
@@ -0,0 +1,12 @@
+{
+  "ams": {
+    "aspect-ratio": {
+      "x-tall": { "value": "{ams.proportion.x-tall}" },
+      "tall": { "value": "{ams.proportion.tall}" },
+      "square": { "value": "{ams.proportion.square}" },
+      "wide": { "value": "{ams.proportion.wide}" },
+      "x-wide": { "value": "{ams.proportion.x-wide}" },
+      "2x-wide": { "value": "{ams.proportion.2x-wide}" }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/badge.tokens.json b/proprietary/tokens/src/components/ams/badge.tokens.json
new file mode 100644
index 0000000000..c3a0570ff7
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/badge.tokens.json
@@ -0,0 +1,43 @@
+{
+  "ams": {
+    "badge": {
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.bold}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
+      "padding-inline": { "value": "{ams.space.inside.xs}" },
+      "blue": {
+        "background-color": { "value": "{ams.color.blue}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "dark-blue": {
+        "background-color": { "value": "{ams.color.primary-blue}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "dark-green": {
+        "background-color": { "value": "{ams.color.dark-green}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "green": {
+        "background-color": { "value": "{ams.color.green}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "magenta": {
+        "background-color": { "value": "{ams.color.magenta}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "orange": {
+        "background-color": { "value": "{ams.color.orange}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "purple": {
+        "background-color": { "value": "{ams.color.purple}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "yellow": {
+        "background-color": { "value": "{ams.color.yellow}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/blockquote.tokens.json b/proprietary/tokens/src/components/ams/blockquote.tokens.json
new file mode 100644
index 0000000000..98ad04803e
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/blockquote.tokens.json
@@ -0,0 +1,12 @@
+{
+  "ams": {
+    "blockquote": {
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.3.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.bold}" },
+      "line-height": { "value": "{ams.text.level.3.line-height}" },
+      "inverse-color": { "value": "{ams.color.primary-white}" }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/breadcrumb.tokens.json b/proprietary/tokens/src/components/ams/breadcrumb.tokens.json
new file mode 100644
index 0000000000..5962d660f2
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/breadcrumb.tokens.json
@@ -0,0 +1,26 @@
+{
+  "ams": {
+    "breadcrumb": {
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.6.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "line-height": { "value": "{ams.text.level.6.line-height}" },
+      "separator": {
+        "background-image": {
+          "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")"
+        }
+      },
+      "item-link": {
+        "color": { "value": "{ams.link-appearance.color}" },
+        "outline-offset": { "value": "{ams.focus.outline-offset}" },
+        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "hover": {
+          "color": { "value": "{ams.color.dark-blue}" },
+          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/button.tokens.json b/proprietary/tokens/src/components/ams/button.tokens.json
new file mode 100644
index 0000000000..d7b6c227bb
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/button.tokens.json
@@ -0,0 +1,59 @@
+{
+  "ams": {
+    "button": {
+      "cursor": { "value": "{ams.action.activate.cursor}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
+      "gap": { "value": "1rem" },
+      "padding-block": { "value": "{ams.space.inside.xs}" },
+      "padding-inline": { "value": "{ams.space.inside.md}" },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "disabled": {
+        "cursor": { "value": "{ams.action.disabled.cursor}" }
+      },
+      "primary": {
+        "background-color": { "value": "{ams.color.primary-blue}" },
+        "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-blue}" },
+        "color": { "value": "{ams.color.primary-white}" },
+        "disabled": {
+          "background-color": { "value": "{ams.color.neutral-grey2}" },
+          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.neutral-grey2}" }
+        },
+        "hover": {
+          "background-color": { "value": "{ams.color.dark-blue}" },
+          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.dark-blue}" }
+        }
+      },
+      "secondary": {
+        "background-color": { "value": "{ams.color.primary-white}" },
+        "color": { "value": "{ams.color.primary-blue}" },
+        "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-blue}" },
+        "hover": {
+          "box-shadow": { "value": "inset 0 0 0 3px {ams.color.dark-blue}" },
+          "color": { "value": "{ams.color.dark-blue}" }
+        },
+        "disabled": {
+          "background-color": { "value": "{ams.color.primary-white}" },
+          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.neutral-grey2}" },
+          "color": { "value": "{ams.color.neutral-grey2}" }
+        },
+        "focus": {
+          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-blue}" }
+        }
+      },
+      "tertiary": {
+        "background-color": { "value": "transparent" },
+        "color": { "value": "{ams.color.primary-blue}" },
+        "hover": {
+          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.dark-blue}" },
+          "color": { "value": "{ams.color.dark-blue}" }
+        },
+        "disabled": {
+          "background-color": { "value": "transparent" },
+          "color": { "value": "{ams.color.neutral-grey2}" }
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/card.tokens.json b/proprietary/tokens/src/components/ams/card.tokens.json
new file mode 100644
index 0000000000..1e5c2adc13
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/card.tokens.json
@@ -0,0 +1,17 @@
+{
+  "ams": {
+    "card": {
+      "link": {
+        "color": { "value": "{ams.link-appearance.color}" },
+        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "hover": {
+          "color": { "value": "{ams.link-appearance.hover.color}" },
+          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+        }
+      },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/checkbox.tokens.json b/proprietary/tokens/src/components/ams/checkbox.tokens.json
new file mode 100644
index 0000000000..5558eeece7
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/checkbox.tokens.json
@@ -0,0 +1,75 @@
+{
+  "ams": {
+    "checkbox": {
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "checkmark": {
+        "border-color": { "value": "{ams.color.primary-blue}" },
+        "checked": {
+          "background-color": { "value": "{ams.color.primary-blue}" },
+          "background-image": {
+            "value": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E\")"
+          },
+          "hover": {
+            "background-color": { "value": "{ams.color.dark-blue}" }
+          }
+        },
+        "disabled": {
+          "border-color": { "value": "{ams.color.neutral-grey3}" },
+          "checked": {
+            "background-color": { "value": "{ams.color.neutral-grey3}" },
+            "hover": {
+              "background-color": { "value": "{ams.color.neutral-grey3}" }
+            }
+          },
+          "indeterminate": {
+            "background-color": { "value": "{ams.color.neutral-grey3}" },
+            "hover": {
+              "background-color": { "value": "{ams.color.neutral-grey3}" }
+            }
+          }
+        },
+        "hover": {
+          "border-color": { "value": "{ams.color.dark-blue}" }
+        },
+        "invalid": {
+          "border-color": { "value": "{ams.color.primary-red}" },
+          "checked": {
+            "background-color": { "value": "{ams.color.primary-red}" },
+            "hover": {
+              "background-color": { "value": "{ams.color.primary-red}" }
+            }
+          },
+          "hover": {
+            "border-color": { "value": "{ams.color.primary-red}" }
+          },
+          "indeterminate": {
+            "background-color": { "value": "{ams.color.primary-red}" },
+            "hover": {
+              "background-color": { "value": "{ams.color.primary-red}" }
+            }
+          }
+        },
+        "indeterminate": {
+          "background-color": { "value": "{ams.color.primary-blue}" },
+          "background-image": {
+            "value": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath fill-rule='evenodd' d='M0 13.714h32v4H0z'/%3E%3C/svg%3E\")"
+          },
+          "hover": {
+            "background-color": { "value": "{ams.color.dark-blue}" }
+          }
+        }
+      },
+      "disabled": {
+        "color": { "value": "{ams.color.neutral-grey3}" }
+      },
+      "hover": {
+        "color": { "value": "{ams.color.dark-blue}" }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/column.tokens.json b/proprietary/tokens/src/components/ams/column.tokens.json
new file mode 100644
index 0000000000..3ca4e1c389
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/column.tokens.json
@@ -0,0 +1,13 @@
+{
+  "ams": {
+    "column": {
+      "gap": {
+        "xs": { "value": "{ams.space.grid.xs}" },
+        "sm": { "value": "{ams.space.grid.sm}" },
+        "md": { "value": "{ams.space.grid.md}" },
+        "lg": { "value": "{ams.space.grid.lg}" },
+        "xl": { "value": "{ams.space.grid.xl}" }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json b/proprietary/tokens/src/components/ams/dialog.tokens.json
similarity index 55%
rename from proprietary/tokens/src/components/amsterdam/dialog.tokens.json
rename to proprietary/tokens/src/components/ams/dialog.tokens.json
index 5a3c1a0b5a..f03b2c1f94 100644
--- a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json
+++ b/proprietary/tokens/src/components/ams/dialog.tokens.json
@@ -1,15 +1,15 @@
 {
-  "amsterdam": {
+  "ams": {
     "dialog": {
-      "background-color": { "value": "{amsterdam.color.primary-white}" },
+      "background-color": { "value": "{ams.color.primary-white}" },
       "border": { "value": "0" },
       "max-inline-size": { "value": "min(87.69vw, 45rem)" },
       "title": {
-        "color": { "value": "{amsterdam.color.primary-black}" },
-        "font-family": { "value": "{amsterdam.typography.font-family}" },
-        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-        "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
+        "color": { "value": "{ams.color.primary-black}" },
+        "font-family": { "value": "{ams.text.font-family}" },
+        "font-size": { "value": "{ams.text.level.5.font-size}" },
+        "font-weight": { "value": "{ams.text.font-weight.bold}" },
+        "line-height": { "value": "{ams.text.level.5.line-height}" }
       },
       "form": {
         "gap": { "value": "1.5rem" },
diff --git a/proprietary/tokens/src/components/ams/fieldset.tokens.json b/proprietary/tokens/src/components/ams/fieldset.tokens.json
new file mode 100644
index 0000000000..33c360931b
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/fieldset.tokens.json
@@ -0,0 +1,13 @@
+{
+  "ams": {
+    "fieldset": {
+      "legend": {
+        "color": { "value": "{ams.color.primary-black}" },
+        "font-family": { "value": "{ams.text.font-family}" },
+        "font-size": { "value": "{ams.text.level.4.font-size}" },
+        "font-weight": { "value": "{ams.text.font-weight.bold}" },
+        "line-height": { "value": "{ams.text.level.4.line-height}" }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/form-label.tokens.json b/proprietary/tokens/src/components/ams/form-label.tokens.json
new file mode 100644
index 0000000000..8e44cac491
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/form-label.tokens.json
@@ -0,0 +1,11 @@
+{
+  "ams": {
+    "form-label": {
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.4.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.bold}" },
+      "line-height": { "value": "{ams.text.level.4.line-height}" }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/gap.tokens.json b/proprietary/tokens/src/components/ams/gap.tokens.json
new file mode 100644
index 0000000000..21cbf8055f
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/gap.tokens.json
@@ -0,0 +1,11 @@
+{
+  "ams": {
+    "gap": {
+      "xs": { "value": "{ams.space.grid.xs}" },
+      "sm": { "value": "{ams.space.grid.sm}" },
+      "md": { "value": "{ams.space.grid.md}" },
+      "lg": { "value": "{ams.space.grid.lg}" },
+      "xl": { "value": "{ams.space.grid.xl}" }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/grid.compact.tokens.json b/proprietary/tokens/src/components/ams/grid.compact.tokens.json
new file mode 100644
index 0000000000..3a4e3c222b
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/grid.compact.tokens.json
@@ -0,0 +1,7 @@
+{
+  "ams": {
+    "grid": {
+      "padding-inline": { "value": "{ams.space.grid.md}" }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/grid.tokens.json b/proprietary/tokens/src/components/ams/grid.tokens.json
new file mode 100644
index 0000000000..c22715cea7
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/grid.tokens.json
@@ -0,0 +1,25 @@
+{
+  "ams": {
+    "grid": {
+      "column-count": { "value": "4" },
+      "column-gap": { "value": "{ams.space.grid.md}" },
+      "padding-block": {
+        "sm": { "value": "{ams.space.grid.sm}" },
+        "md": { "value": "{ams.space.grid.md}" },
+        "lg": { "value": "{ams.space.grid.lg}" }
+      },
+      "padding-inline": { "value": "{ams.space.grid.lg}" },
+      "row-gap": {
+        "sm": { "value": "{ams.space.grid.sm}" },
+        "md": { "value": "{ams.space.grid.md}" },
+        "lg": { "value": "{ams.space.grid.lg}" }
+      },
+      "medium": {
+        "column-count": { "value": "8" }
+      },
+      "wide": {
+        "column-count": { "value": "12" }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/header.tokens.json b/proprietary/tokens/src/components/ams/header.tokens.json
new file mode 100644
index 0000000000..f344570fa3
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/header.tokens.json
@@ -0,0 +1,14 @@
+{
+  "ams": {
+    "header": {
+      "column-gap": {
+        "value": "{ams.space.grid.md}",
+        "comment": "Must have the same value as `ams.grid.column-gap`."
+      },
+      "padding-block": { "value": "{ams.space.inside.md}" },
+      "logo-link": {
+        "outline-offset": { "value": "{ams.focus.outline-offset}" }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/heading.tokens.json b/proprietary/tokens/src/components/ams/heading.tokens.json
new file mode 100644
index 0000000000..274f8c401d
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/heading.tokens.json
@@ -0,0 +1,36 @@
+{
+  "ams": {
+    "heading": {
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-weight": { "value": "{ams.text.font-weight.bold}" },
+      "inverse-color": { "value": "{ams.color.primary-white}" },
+      "level": {
+        "1": {
+          "font-size": { "value": "{ams.text.level.1.font-size}" },
+          "line-height": { "value": "{ams.text.level.1.line-height}" }
+        },
+        "2": {
+          "font-size": { "value": "{ams.text.level.2.font-size}" },
+          "line-height": { "value": "{ams.text.level.2.line-height}" }
+        },
+        "3": {
+          "font-size": { "value": "{ams.text.level.3.font-size}" },
+          "line-height": { "value": "{ams.text.level.3.line-height}" }
+        },
+        "4": {
+          "font-size": { "value": "{ams.text.level.4.font-size}" },
+          "line-height": { "value": "{ams.text.level.4.line-height}" }
+        },
+        "5": {
+          "font-size": { "value": "{ams.text.level.5.font-size}" },
+          "line-height": { "value": "{ams.text.level.5.line-height}" }
+        },
+        "6": {
+          "font-size": { "value": "{ams.text.level.6.font-size}" },
+          "line-height": { "value": "{ams.text.level.6.line-height}" }
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/icon-button.tokens.json b/proprietary/tokens/src/components/ams/icon-button.tokens.json
new file mode 100644
index 0000000000..0f689fc3c4
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/icon-button.tokens.json
@@ -0,0 +1,37 @@
+{
+  "ams": {
+    "icon-button": {
+      "color": { "value": "{ams.color.primary-blue}" },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "hover": {
+        "background-color": { "value": "rgba(0, 70, 153, 0.125)" },
+        "color": { "value": "{ams.color.dark-blue}" }
+      },
+      "disabled": {
+        "color": { "value": "{ams.color.neutral-grey2}" }
+      },
+      "on-background-light": {
+        "color": { "value": "{ams.color.primary-black}" },
+        "hover": {
+          "background-color": { "value": "rgba(0, 0, 0, 0.125)" },
+          "color": { "value": "{ams.color.primary-black}" }
+        },
+        "disabled": {
+          "color": { "value": "{ams.color.neutral-grey2}" }
+        }
+      },
+      "on-background-dark": {
+        "background-color": { "value": "{ams.color.primary-blue}" },
+        "color": { "value": "{ams.color.primary-white}" },
+        "hover": {
+          "background-color": { "value": "{ams.color.dark-blue}" },
+          "color": { "value": "{ams.color.primary-white}" }
+        },
+        "disabled": {
+          "color": { "value": "{ams.color.primary-white}" },
+          "background-color": { "value": "{ams.color.neutral-grey2}" }
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/icon.tokens.json b/proprietary/tokens/src/components/ams/icon.tokens.json
new file mode 100644
index 0000000000..a42b254322
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/icon.tokens.json
@@ -0,0 +1,22 @@
+{
+  "ams": {
+    "icon": {
+      "size-3": {
+        "font-size": { "value": "{ams.text.level.3.font-size}" },
+        "line-height": { "value": "{ams.text.level.3.line-height}" }
+      },
+      "size-4": {
+        "font-size": { "value": "{ams.text.level.4.font-size}" },
+        "line-height": { "value": "{ams.text.level.4.line-height}" }
+      },
+      "size-5": {
+        "font-size": { "value": "{ams.text.level.5.font-size}" },
+        "line-height": { "value": "{ams.text.level.5.line-height}" }
+      },
+      "size-6": {
+        "font-size": { "value": "{ams.text.level.6.font-size}" },
+        "line-height": { "value": "{ams.text.level.6.line-height}" }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/link-list.tokens.json b/proprietary/tokens/src/components/ams/link-list.tokens.json
new file mode 100644
index 0000000000..c82861a815
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/link-list.tokens.json
@@ -0,0 +1,45 @@
+{
+  "ams": {
+    "link-list": {
+      "gap": { "value": "0.5em" },
+      "link": {
+        "color": { "value": "{ams.link-appearance.color}" },
+        "font-family": { "value": "{ams.text.font-family}" },
+        "font-weight": { "value": "{ams.text.font-weight.normal}" },
+        "gap": { "value": "0.5em" },
+        "outline-offset": { "value": "{ams.focus.outline-offset}" },
+        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "small": {
+          "font-size": { "value": "{ams.text.level.6.font-size}" },
+          "line-height": { "value": "{ams.text.level.6.line-height}" }
+        },
+        "medium": {
+          "font-size": { "value": "{ams.text.level.5.font-size}" },
+          "line-height": { "value": "{ams.text.level.5.line-height}" }
+        },
+        "large": {
+          "font-size": { "value": "{ams.text.level.4.font-size}" },
+          "line-height": { "value": "{ams.text.level.4.line-height}" }
+        },
+        "hover": {
+          "color": { "value": "{ams.link-appearance.hover.color}" },
+          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+        },
+        "on-background-dark": {
+          "color": { "value": "{ams.link-appearance.on-background-dark.color}" },
+          "hover": {
+            "color": { "value": "{ams.link-appearance.on-background-dark.color}" }
+          }
+        },
+        "on-background-light": {
+          "color": { "value": "{ams.link-appearance.on-background-light.color}" },
+          "hover": {
+            "color": { "value": "{ams.link-appearance.on-background-light.color}" }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/link.tokens.json b/proprietary/tokens/src/components/ams/link.tokens.json
new file mode 100644
index 0000000000..5ec69c2dc1
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/link.tokens.json
@@ -0,0 +1,61 @@
+{
+  "ams": {
+    "link": {
+      "color": { "value": "{ams.link-appearance.color}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "hover": {
+        "color": { "value": "{ams.link-appearance.hover.color}" }
+      },
+      "inline": {
+        "text-decoration-line": { "value": "{ams.link-appearance.regular.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "font-family": { "value": "inherit" },
+        "font-size": { "value": "inherit" },
+        "line-height": { "value": "inherit" },
+        "hover": {
+          "text-decoration-thickness": {
+            "value": "{ams.link-appearance.regular.hover.text-decoration-thickness}"
+          },
+          "text-underline-offset": { "value": "{ams.link-appearance.regular.hover.text-underline-offset}" }
+        },
+        "visited": {
+          "color": { "value": "{ams.color.purple}" }
+        }
+      },
+      "standalone": {
+        "font-size": { "value": "{ams.text.level.5.font-size}" },
+        "line-height": { "value": "{ams.text.level.5.line-height}" },
+        "text-decoration-line": { "value": "{ams.link-appearance.regular.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "hover": {
+          "text-decoration-thickness": {
+            "value": "{ams.link-appearance.regular.hover.text-decoration-thickness}"
+          },
+          "text-underline-offset": { "value": "{ams.link-appearance.regular.hover.text-underline-offset}" }
+        }
+      },
+      "on-background-dark": {
+        "color": { "value": "{ams.link-appearance.on-background-dark.color}" },
+        "hover": {
+          "color": { "value": "{ams.link-appearance.on-background-dark.color}" }
+        },
+        "visited": {
+          "color": { "value": "{ams.link-appearance.on-background-dark.color}" }
+        }
+      },
+      "on-background-light": {
+        "color": { "value": "{ams.link-appearance.on-background-light.color}" },
+        "hover": {
+          "color": { "value": "{ams.link-appearance.on-background-light.color}" }
+        },
+        "visited": {
+          "color": { "value": "{ams.link-appearance.on-background-light.color}" }
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/logo.tokens.json b/proprietary/tokens/src/components/ams/logo.tokens.json
new file mode 100644
index 0000000000..26e4ec2b77
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/logo.tokens.json
@@ -0,0 +1,10 @@
+{
+  "ams": {
+    "logo": {
+      "height": { "value": "2.5rem" },
+      "emblem": { "color": { "value": "{ams.color.primary-red}" } },
+      "title": { "color": { "value": "{ams.color.primary-red}" } },
+      "subsite": { "color": { "value": "{ams.color.primary-black}" } }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/margin.tokens.json b/proprietary/tokens/src/components/ams/margin.tokens.json
new file mode 100644
index 0000000000..4834a24a8d
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/margin.tokens.json
@@ -0,0 +1,11 @@
+{
+  "ams": {
+    "margin": {
+      "xs": { "value": "{ams.space.grid.xs}" },
+      "sm": { "value": "{ams.space.grid.sm}" },
+      "md": { "value": "{ams.space.grid.md}" },
+      "lg": { "value": "{ams.space.grid.lg}" },
+      "xl": { "value": "{ams.space.grid.xl}" }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/mark.tokens.json b/proprietary/tokens/src/components/ams/mark.tokens.json
new file mode 100644
index 0000000000..b8b989c57c
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/mark.tokens.json
@@ -0,0 +1,7 @@
+{
+  "ams": {
+    "mark": {
+      "background-color": { "value": "{ams.color.yellow}" }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/mega-menu.tokens.json b/proprietary/tokens/src/components/ams/mega-menu.tokens.json
new file mode 100644
index 0000000000..846a666daa
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/mega-menu.tokens.json
@@ -0,0 +1,18 @@
+{
+  "ams": {
+    "mega-menu": {
+      "list-category": {
+        "column-gap": {
+          "value": "{ams.space.grid.md}",
+          "comment": "Must have the same value as `ams.grid.column-gap`."
+        },
+        "column-width": { "value": "20rem" },
+        "padding-block-start": { "value": "1rem" },
+        "padding-block-end": {
+          "value": "{ams.space.grid.md}",
+          "comment": "Must have the same value as `ams.grid.row-gap.md`."
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json b/proprietary/tokens/src/components/ams/ordered-list.tokens.json
similarity index 67%
rename from proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json
rename to proprietary/tokens/src/components/ams/ordered-list.tokens.json
index cf272f25d0..aee7fb7897 100644
--- a/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json
+++ b/proprietary/tokens/src/components/ams/ordered-list.tokens.json
@@ -1,13 +1,13 @@
 {
-  "amsterdam": {
+  "ams": {
     "ordered-list": {
-      "color": { "value": "{amsterdam.color.primary-black}" },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "gap": { "value": "0.75rem" },
-      "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
+      "inverse-color": { "value": "{ams.color.primary-white}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
       "list-style-type": { "value": "decimal" },
       "item": {
         "margin-inline-start": {
diff --git a/proprietary/tokens/src/components/ams/page-heading.tokens.json b/proprietary/tokens/src/components/ams/page-heading.tokens.json
new file mode 100644
index 0000000000..6cf4c6777a
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/page-heading.tokens.json
@@ -0,0 +1,12 @@
+{
+  "ams": {
+    "page-heading": {
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.0.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.bold}" },
+      "inverse-color": { "value": "{ams.color.primary-white}" },
+      "line-height": { "value": "{ams.text.level.0.font-size}" }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/page-menu.tokens.json b/proprietary/tokens/src/components/ams/page-menu.tokens.json
new file mode 100644
index 0000000000..8832e43f61
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/page-menu.tokens.json
@@ -0,0 +1,24 @@
+{
+  "ams": {
+    "page-menu": {
+      "column-gap": { "value": "2.5rem" },
+      "row-gap": { "value": "0.5rem" },
+      "item": {
+        "color": { "value": "{ams.link-appearance.color}" },
+        "font-family": { "value": "{ams.text.font-family}" },
+        "font-size": { "value": "{ams.text.level.6.font-size}" },
+        "font-weight": { "value": "{ams.text.font-weight.normal}" },
+        "gap": { "value": "0.5rem" },
+        "line-height": { "value": "{ams.text.level.6.line-height}" },
+        "outline-offset": { "value": "{ams.focus.outline-offset}" },
+        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "hover": {
+          "color": { "value": "{ams.link-appearance.hover.color}" },
+          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/pagination.tokens.json b/proprietary/tokens/src/components/ams/pagination.tokens.json
new file mode 100644
index 0000000000..ca6dcdc2f3
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/pagination.tokens.json
@@ -0,0 +1,25 @@
+{
+  "ams": {
+    "pagination": {
+      "color": { "value": "{ams.link-appearance.color}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
+      "button": {
+        "outline-offset": { "value": "{ams.focus.outline-offset}" },
+        "padding-inline": { "value": "{ams.space.inside.sm}" },
+        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "current": {
+          "font-weight": { "value": "{ams.text.font-weight.bold}" }
+        },
+        "hover": {
+          "color": { "value": "{ams.link-appearance.hover.color}" },
+          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/paragraph.tokens.json b/proprietary/tokens/src/components/ams/paragraph.tokens.json
new file mode 100644
index 0000000000..258ed9391a
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/paragraph.tokens.json
@@ -0,0 +1,22 @@
+{
+  "ams": {
+    "paragraph": {
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "inverse-color": { "value": "{ams.color.primary-white}" },
+      "small": {
+        "font-size": { "value": "{ams.text.level.6.font-size}" },
+        "line-height": { "value": "{ams.text.level.6.line-height}" }
+      },
+      "medium": {
+        "font-size": { "value": "{ams.text.level.5.font-size}" },
+        "line-height": { "value": "{ams.text.level.5.line-height}" }
+      },
+      "large": {
+        "font-size": { "value": "{ams.text.level.4.font-size}" },
+        "line-height": { "value": "{ams.text.level.4.line-height}" }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/amsterdam/radio.tokens.json b/proprietary/tokens/src/components/ams/radio.tokens.json
similarity index 65%
rename from proprietary/tokens/src/components/amsterdam/radio.tokens.json
rename to proprietary/tokens/src/components/ams/radio.tokens.json
index c5c2140dfa..14b1a6d6aa 100644
--- a/proprietary/tokens/src/components/amsterdam/radio.tokens.json
+++ b/proprietary/tokens/src/components/ams/radio.tokens.json
@@ -1,14 +1,14 @@
 {
-  "amsterdam": {
+  "ams": {
     "radio": {
-      "color": { "value": "{amsterdam.color.primary-black}" },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
-      "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" },
       "circle": {
-        "border-color": { "value": "{amsterdam.color.primary-blue}" },
+        "border-color": { "value": "{ams.color.primary-blue}" },
         "checked": {
           "background-image": {
             "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23004699'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")"
@@ -20,7 +20,7 @@
           }
         },
         "disabled": {
-          "border-color": { "value": "{amsterdam.color.neutral-grey3}" },
+          "border-color": { "value": "{ams.color.neutral-grey3}" },
           "checked": {
             "background-image": {
               "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")"
@@ -33,10 +33,10 @@
           }
         },
         "hover": {
-          "border-color": { "value": "{amsterdam.color.dark-blue}" }
+          "border-color": { "value": "{ams.color.dark-blue}" }
         },
         "invalid": {
-          "border-color": { "value": "{amsterdam.color.primary-red}" },
+          "border-color": { "value": "{ams.color.primary-red}" },
           "checked": {
             "background-image": {
               "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")"
@@ -48,15 +48,15 @@
             }
           },
           "hover": {
-            "border-color": { "value": "{amsterdam.color.primary-red}" }
+            "border-color": { "value": "{ams.color.primary-red}" }
           }
         }
       },
       "disabled": {
-        "color": { "value": "{amsterdam.color.neutral-grey3}" }
+        "color": { "value": "{ams.color.neutral-grey3}" }
       },
       "hover": {
-        "color": { "value": "{amsterdam.color.dark-blue}" }
+        "color": { "value": "{ams.color.dark-blue}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/ams/row.tokens.json b/proprietary/tokens/src/components/ams/row.tokens.json
new file mode 100644
index 0000000000..f445a0ccd5
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/row.tokens.json
@@ -0,0 +1,13 @@
+{
+  "ams": {
+    "row": {
+      "gap": {
+        "xs": { "value": "{ams.space.stack.xs}" },
+        "sm": { "value": "{ams.space.stack.sm}" },
+        "md": { "value": "{ams.space.stack.md}" },
+        "lg": { "value": "{ams.space.stack.lg}" },
+        "xl": { "value": "{ams.space.stack.xl}" }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/amsterdam/screen.tokens.json b/proprietary/tokens/src/components/ams/screen.tokens.json
similarity index 90%
rename from proprietary/tokens/src/components/amsterdam/screen.tokens.json
rename to proprietary/tokens/src/components/ams/screen.tokens.json
index e75644022b..8f19dd5a01 100644
--- a/proprietary/tokens/src/components/amsterdam/screen.tokens.json
+++ b/proprietary/tokens/src/components/ams/screen.tokens.json
@@ -1,5 +1,5 @@
 {
-  "amsterdam": {
+  "ams": {
     "screen": {
       "wide": {
         "max-width": { "value": "100rem" }
diff --git a/proprietary/tokens/src/components/ams/search-field.tokens.json b/proprietary/tokens/src/components/ams/search-field.tokens.json
new file mode 100644
index 0000000000..ad8649870e
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/search-field.tokens.json
@@ -0,0 +1,45 @@
+{
+  "ams": {
+    "search-field": {
+      "button": {
+        "background-color": { "value": "{ams.color.primary-blue}" },
+        "color": { "value": "{ams.color.primary-white}" },
+        "outline-offset": { "value": "{ams.focus.outline-offset}" },
+        "hover": {
+          "background-color": { "value": "{ams.color.dark-blue}" }
+        },
+        "padding-block": { "value": "{ams.space.inside.xs}" },
+        "padding-inline": { "value": "{ams.space.inside.xs}" }
+      },
+      "input": {
+        "box-shadow": {
+          "value": "inset 0 0 0 1px {ams.color.primary-black}"
+        },
+        "color": { "value": "{ams.color.primary-black}" },
+        "font-family": { "value": "{ams.text.font-family}" },
+        "font-size": { "value": "{ams.text.level.6.font-size}" },
+        "font-weight": { "value": "{ams.text.font-weight.normal}" },
+        "line-height": { "value": "{ams.text.level.6.line-height}" },
+        "outline-offset": { "value": "{ams.focus.outline-offset}" },
+        "padding-block": { "value": "{ams.space.inside.xs}" },
+        "padding-inline": { "value": "{ams.space.inside.md}" },
+        "cancel-button": {
+          "background-image": {
+            "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>\")"
+          },
+          "color": { "value": "{ams.color.primary-blue}" },
+          "height": { "value": "{ams.text.level.6.font-size}" },
+          "width": { "value": "{ams.text.level.6.font-size}" }
+        },
+        "hover": {
+          "box-shadow": {
+            "value": "inset 0 0 0 2px {ams.color.primary-black}"
+          }
+        },
+        "placeholder": {
+          "color": { "value": "{ams.color.neutral-grey3}" }
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/skip-link.tokens.json b/proprietary/tokens/src/components/ams/skip-link.tokens.json
new file mode 100644
index 0000000000..a52aa3fc90
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/skip-link.tokens.json
@@ -0,0 +1,18 @@
+{
+  "ams": {
+    "skip-link": {
+      "background-color": { "value": "{ams.color.primary-blue}" },
+      "color": { "value": "{ams.color.primary-white}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "font-size": { "value": "{ams.text.level.6.font-size}" },
+      "line-height": { "value": "{ams.text.level.6.line-height}" },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "padding-block": { "value": "{ams.space.inside.xs}" },
+      "padding-inline": { "value": "{ams.space.inside.md}" },
+      "hover": {
+        "background-color": { "value": "{ams.color.dark-blue}" }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/spotlight.tokens.json b/proprietary/tokens/src/components/ams/spotlight.tokens.json
new file mode 100644
index 0000000000..bc9b2bffc3
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/spotlight.tokens.json
@@ -0,0 +1,30 @@
+{
+  "ams": {
+    "spotlight": {
+      "blue": {
+        "background-color": { "value": "{ams.color.blue}" }
+      },
+      "dark-blue": {
+        "background-color": { "value": "{ams.color.primary-blue}" }
+      },
+      "dark-green": {
+        "background-color": { "value": "{ams.color.dark-green}" }
+      },
+      "green": {
+        "background-color": { "value": "{ams.color.green}" }
+      },
+      "magenta": {
+        "background-color": { "value": "{ams.color.magenta}" }
+      },
+      "orange": {
+        "background-color": { "value": "{ams.color.orange}" }
+      },
+      "purple": {
+        "background-color": { "value": "{ams.color.purple}" }
+      },
+      "yellow": {
+        "background-color": { "value": "{ams.color.yellow}" }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/switch.tokens.json b/proprietary/tokens/src/components/ams/switch.tokens.json
new file mode 100644
index 0000000000..d058f4bcdf
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/switch.tokens.json
@@ -0,0 +1,24 @@
+{
+  "ams": {
+    "switch": {
+      "font-family": { "value": "{ams.text.font-family}" },
+      "background-color": { "value": "{ams.color.neutral-grey3}" },
+      "width": { "value": "3.5rem" },
+      "thumb": {
+        "background-color": { "value": "{ams.color.primary-white}" },
+        "width": { "value": "1.75rem" },
+        "height": { "value": "1.75rem" },
+        "hover": {
+          "color": { "value": "{ams.color.dark-blue}" }
+        }
+      },
+      "checked": {
+        "background-color": { "value": "{ams.color.primary-blue}" }
+      },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "disabled": {
+        "background-color": { "value": "{ams.color.neutral-grey2}" }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/table.tokens.json b/proprietary/tokens/src/components/ams/table.tokens.json
new file mode 100644
index 0000000000..7274a40f6c
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/table.tokens.json
@@ -0,0 +1,22 @@
+{
+  "ams": {
+    "table": {
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
+      "caption": {
+        "font-weight": { "value": "{ams.text.font-weight.bold}" }
+      },
+      "cell": {
+        "border-bottom": { "value": "1px solid {ams.color.neutral-grey1}" },
+        "padding-block": { "value": "{ams.space.inside.md}" },
+        "padding-inline": { "value": "{ams.space.inside.md}" }
+      },
+      "header-cell": {
+        "font-weight": { "value": "{ams.text.font-weight.bold}" }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json
new file mode 100644
index 0000000000..9a7ff5b17d
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/tabs.tokens.json
@@ -0,0 +1,34 @@
+{
+  "ams": {
+    "tabs": {
+      "list": {
+        "border-bottom": { "value": ".125rem solid {ams.color.primary-blue}" }
+      },
+      "button": {
+        "background-color": { "value": "transparent" },
+        "border": { "value": "none" },
+        "color": { "value": "{ams.color.primary-blue}" },
+        "cursor": { "value": "{ams.action.activate.cursor}" },
+        "font-family": { "value": "{ams.text.font-family}" },
+        "font-weight": { "value": "{ams.text.font-weight.normal}" },
+        "font-size": { "value": "{ams.text.level.5.font-size}" },
+        "line-height": { "value": "{ams.text.level.5.line-height}" },
+        "outline-offset": { "value": "-0.25rem" },
+        "padding-block": { "value": ".5rem" },
+        "padding-inline": { "value": "1rem" },
+        "hover": {
+          "color": { "value": "{ams.color.dark-blue}" },
+          "box-shadow": { "value": "inset 0 -0.125rem 0 0 {ams.color.dark-blue}" }
+        },
+        "selected": {
+          "background-color": { "value": "{ams.color.primary-blue}" },
+          "color": { "value": "{ams.color.primary-white}" }
+        },
+        "disabled": {
+          "color": { "value": "{ams.color.neutral-grey2}" },
+          "cursor": { "value": "{ams.action.disabled.cursor}" }
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/text-area.tokens.json b/proprietary/tokens/src/components/ams/text-area.tokens.json
new file mode 100644
index 0000000000..9c3e20b5da
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/text-area.tokens.json
@@ -0,0 +1,36 @@
+{
+  "ams": {
+    "text-area": {
+      "box-shadow": { "value": "inset 0 0 0 1px {ams.color.primary-black}" },
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.6.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "line-height": { "value": "{ams.text.level.6.line-height}" },
+      "min-height": {
+        "value": "calc({ams.text.level.6.line-height} * 1em + 2 * {ams.text-area.padding-block})"
+      },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "padding-block": { "value": "0.5rem" },
+      "padding-inline": { "value": "1rem" },
+      "disabled": {
+        "background-color": { "value": "{ams.color.primary-white}" },
+        "box-shadow": { "value": "inset 0 0 0 1px {ams.color.neutral-grey2}" },
+        "color": { "value": "{ams.color.neutral-grey2}" },
+        "cursor": { "value": "{ams.action.disabled.cursor}" }
+      },
+      "hover": {
+        "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-black}" }
+      },
+      "invalid": {
+        "box-shadow": { "value": "inset 0 0 0 1px {ams.color.primary-red}" },
+        "hover": {
+          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-red}" }
+        }
+      },
+      "placeholder": {
+        "color": { "value": "{ams.color.neutral-grey3}" }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/text-input.tokens.json b/proprietary/tokens/src/components/ams/text-input.tokens.json
new file mode 100644
index 0000000000..566390b491
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/text-input.tokens.json
@@ -0,0 +1,32 @@
+{
+  "ams": {
+    "text-input": {
+      "box-shadow": { "value": "inset 0 0 0 1px {ams.color.primary-black}" },
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.6.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "line-height": { "value": "{ams.text.level.6.line-height}" },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "padding-block": { "value": "{ams.space.inside.xs}" },
+      "padding-inline": { "value": "{ams.space.inside.md}" },
+      "disabled": {
+        "background-color": { "value": "{ams.color.primary-white}" },
+        "box-shadow": { "value": "inset 0 0 0 1px {ams.color.neutral-grey2}" },
+        "color": { "value": "{ams.color.neutral-grey2}" }
+      },
+      "hover": {
+        "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-black}" }
+      },
+      "invalid": {
+        "box-shadow": { "value": "inset 0 0 0 1px {ams.color.primary-red}" },
+        "hover": {
+          "box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-red}" }
+        }
+      },
+      "placeholder": {
+        "color": { "value": "{ams.color.neutral-grey3}" }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/ams/top-task-link.tokens.json b/proprietary/tokens/src/components/ams/top-task-link.tokens.json
new file mode 100644
index 0000000000..6794bdb940
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/top-task-link.tokens.json
@@ -0,0 +1,28 @@
+{
+  "ams": {
+    "top-task-link": {
+      "description": {
+        "color": { "value": "{ams.color.primary-black}" },
+        "font-family": { "value": "{ams.text.font-family}" },
+        "font-size": { "value": "{ams.text.level.6.font-size}" },
+        "font-weight": { "value": "{ams.text.font-weight.normal}" },
+        "line-height": { "value": "{ams.text.level.6.line-height}" }
+      },
+      "label": {
+        "color": { "value": "{ams.link-appearance.color}" },
+        "font-family": { "value": "{ams.text.font-family}" },
+        "font-size": { "value": "{ams.text.level.4.font-size}" },
+        "font-weight": { "value": "{ams.text.font-weight.bold}" },
+        "line-height": { "value": "{ams.text.level.4.line-height}" },
+        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "hover": {
+          "color": { "value": "{ams.color.dark-blue}" },
+          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+        }
+      },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json b/proprietary/tokens/src/components/ams/unordered-list.tokens.json
similarity index 67%
rename from proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json
rename to proprietary/tokens/src/components/ams/unordered-list.tokens.json
index ea78c4b229..5a57f16a29 100644
--- a/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json
+++ b/proprietary/tokens/src/components/ams/unordered-list.tokens.json
@@ -1,13 +1,13 @@
 {
-  "amsterdam": {
+  "ams": {
     "unordered-list": {
-      "color": { "value": "{amsterdam.color.primary-black}" },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "gap": { "value": "0.75rem" },
-      "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
+      "inverse-color": { "value": "{ams.color.primary-white}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
       "list-style-type": { "value": "'\\2022'" },
       "item": {
         "margin-inline-start": {
diff --git a/proprietary/tokens/src/components/amsterdam/accordion.tokens.json b/proprietary/tokens/src/components/amsterdam/accordion.tokens.json
deleted file mode 100644
index b414c5db7b..0000000000
--- a/proprietary/tokens/src/components/amsterdam/accordion.tokens.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "amsterdam": {
-    "accordion": {
-      "button": {
-        "color": { "value": "{amsterdam.color.primary-blue}" },
-        "font-family": { "value": "{amsterdam.typography.font-family}" },
-        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-        "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
-        "padding-block": { "value": "{amsterdam.space.inside.sm}" },
-        "padding-inline": { "value": "{amsterdam.space.inside.md}" },
-        "focus": {
-          "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }
-        },
-        "hover": {
-          "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}" }
-        }
-      },
-      "panel": {
-        "padding-block": { "value": "{amsterdam.space.inside.md}" },
-        "padding-inline": { "value": "{amsterdam.space.inside.md}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/alert.tokens.json b/proprietary/tokens/src/components/amsterdam/alert.tokens.json
deleted file mode 100644
index db17ccc6bd..0000000000
--- a/proprietary/tokens/src/components/amsterdam/alert.tokens.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "amsterdam": {
-    "alert": {
-      "border-width": { "value": "4px" },
-      "border-style": { "value": "solid" },
-      "gap": { "value": "1rem" },
-      "padding-block": { "value": "{amsterdam.space.inside.md}" },
-      "padding-inline": { "value": "{amsterdam.space.inside.lg}" },
-      "error": {
-        "border-color": { "value": "{amsterdam.color.primary-red}" }
-      },
-      "info": {
-        "border-color": { "value": "{amsterdam.color.primary-blue}" }
-      },
-      "success": {
-        "border-color": { "value": "{amsterdam.color.dark-green}" }
-      },
-      "warning": {
-        "border-color": { "value": "{amsterdam.color.orange}" }
-      },
-      "close": {
-        "fill": { "value": "{amsterdam.color.primary-black}" },
-        "hover": {
-          "fill": { "value": "{amsterdam.color.primary-blue}" }
-        }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/aspect-ratio.tokens.json b/proprietary/tokens/src/components/amsterdam/aspect-ratio.tokens.json
deleted file mode 100644
index ffe608870a..0000000000
--- a/proprietary/tokens/src/components/amsterdam/aspect-ratio.tokens.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "amsterdam": {
-    "aspect-ratio": {
-      "x-tall": { "value": "{amsterdam.proportion.x-tall}" },
-      "tall": { "value": "{amsterdam.proportion.tall}" },
-      "square": { "value": "{amsterdam.proportion.square}" },
-      "wide": { "value": "{amsterdam.proportion.wide}" },
-      "x-wide": { "value": "{amsterdam.proportion.x-wide}" },
-      "2x-wide": { "value": "{amsterdam.proportion.2x-wide}" }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/badge.tokens.json b/proprietary/tokens/src/components/amsterdam/badge.tokens.json
deleted file mode 100644
index 89832f92d8..0000000000
--- a/proprietary/tokens/src/components/amsterdam/badge.tokens.json
+++ /dev/null
@@ -1,43 +0,0 @@
-{
-  "amsterdam": {
-    "badge": {
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
-      "padding-inline": { "value": "{amsterdam.space.inside.xs}" },
-      "blue": {
-        "background-color": { "value": "{amsterdam.color.blue}" },
-        "color": { "value": "{amsterdam.color.primary-black}" }
-      },
-      "dark-blue": {
-        "background-color": { "value": "{amsterdam.color.primary-blue}" },
-        "color": { "value": "{amsterdam.color.primary-white}" }
-      },
-      "dark-green": {
-        "background-color": { "value": "{amsterdam.color.dark-green}" },
-        "color": { "value": "{amsterdam.color.primary-white}" }
-      },
-      "green": {
-        "background-color": { "value": "{amsterdam.color.green}" },
-        "color": { "value": "{amsterdam.color.primary-black}" }
-      },
-      "magenta": {
-        "background-color": { "value": "{amsterdam.color.magenta}" },
-        "color": { "value": "{amsterdam.color.primary-white}" }
-      },
-      "orange": {
-        "background-color": { "value": "{amsterdam.color.orange}" },
-        "color": { "value": "{amsterdam.color.primary-black}" }
-      },
-      "purple": {
-        "background-color": { "value": "{amsterdam.color.purple}" },
-        "color": { "value": "{amsterdam.color.primary-white}" }
-      },
-      "yellow": {
-        "background-color": { "value": "{amsterdam.color.yellow}" },
-        "color": { "value": "{amsterdam.color.primary-black}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json b/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json
deleted file mode 100644
index 3061174dc7..0000000000
--- a/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "amsterdam": {
-    "blockquote": {
-      "color": { "value": "{amsterdam.color.primary-black}" },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" },
-      "inverse-color": { "value": "{amsterdam.color.primary-white}" }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
deleted file mode 100644
index 31cd659d70..0000000000
--- a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "amsterdam": {
-    "breadcrumb": {
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
-      "separator": {
-        "background-image": {
-          "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")"
-        }
-      },
-      "item-link": {
-        "color": { "value": "{amsterdam.link-appearance.color}" },
-        "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-        "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
-        "hover": {
-          "color": { "value": "{amsterdam.color.dark-blue}" },
-          "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
-        }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/button.tokens.json b/proprietary/tokens/src/components/amsterdam/button.tokens.json
deleted file mode 100644
index ca1f5ad430..0000000000
--- a/proprietary/tokens/src/components/amsterdam/button.tokens.json
+++ /dev/null
@@ -1,59 +0,0 @@
-{
-  "amsterdam": {
-    "button": {
-      "cursor": { "value": "{amsterdam.action.activate.cursor}" },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
-      "gap": { "value": "1rem" },
-      "padding-block": { "value": "{amsterdam.space.inside.xs}" },
-      "padding-inline": { "value": "{amsterdam.space.inside.md}" },
-      "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-      "disabled": {
-        "cursor": { "value": "{amsterdam.action.disabled.cursor}" }
-      },
-      "primary": {
-        "background-color": { "value": "{amsterdam.color.primary-blue}" },
-        "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" },
-        "color": { "value": "{amsterdam.color.primary-white}" },
-        "disabled": {
-          "background-color": { "value": "{amsterdam.color.neutral-grey2}" },
-          "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey2}" }
-        },
-        "hover": {
-          "background-color": { "value": "{amsterdam.color.dark-blue}" },
-          "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.dark-blue}" }
-        }
-      },
-      "secondary": {
-        "background-color": { "value": "{amsterdam.color.primary-white}" },
-        "color": { "value": "{amsterdam.color.primary-blue}" },
-        "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" },
-        "hover": {
-          "box-shadow": { "value": "inset 0 0 0 3px {amsterdam.color.dark-blue}" },
-          "color": { "value": "{amsterdam.color.dark-blue}" }
-        },
-        "disabled": {
-          "background-color": { "value": "{amsterdam.color.primary-white}" },
-          "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey2}" },
-          "color": { "value": "{amsterdam.color.neutral-grey2}" }
-        },
-        "focus": {
-          "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" }
-        }
-      },
-      "tertiary": {
-        "background-color": { "value": "transparent" },
-        "color": { "value": "{amsterdam.color.primary-blue}" },
-        "hover": {
-          "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.dark-blue}" },
-          "color": { "value": "{amsterdam.color.dark-blue}" }
-        },
-        "disabled": {
-          "background-color": { "value": "transparent" },
-          "color": { "value": "{amsterdam.color.neutral-grey2}" }
-        }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/card.tokens.json b/proprietary/tokens/src/components/amsterdam/card.tokens.json
deleted file mode 100644
index bbc37d2fd8..0000000000
--- a/proprietary/tokens/src/components/amsterdam/card.tokens.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "amsterdam": {
-    "card": {
-      "link": {
-        "color": { "value": "{amsterdam.link-appearance.color}" },
-        "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
-        "hover": {
-          "color": { "value": "{amsterdam.link-appearance.hover.color}" },
-          "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
-        }
-      },
-      "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json b/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
deleted file mode 100644
index 6aa81f79c7..0000000000
--- a/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
+++ /dev/null
@@ -1,75 +0,0 @@
-{
-  "amsterdam": {
-    "checkbox": {
-      "color": { "value": "{amsterdam.color.primary-black}" },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
-      "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-      "checkmark": {
-        "border-color": { "value": "{amsterdam.color.primary-blue}" },
-        "checked": {
-          "background-color": { "value": "{amsterdam.color.primary-blue}" },
-          "background-image": {
-            "value": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E\")"
-          },
-          "hover": {
-            "background-color": { "value": "{amsterdam.color.dark-blue}" }
-          }
-        },
-        "disabled": {
-          "border-color": { "value": "{amsterdam.color.neutral-grey3}" },
-          "checked": {
-            "background-color": { "value": "{amsterdam.color.neutral-grey3}" },
-            "hover": {
-              "background-color": { "value": "{amsterdam.color.neutral-grey3}" }
-            }
-          },
-          "indeterminate": {
-            "background-color": { "value": "{amsterdam.color.neutral-grey3}" },
-            "hover": {
-              "background-color": { "value": "{amsterdam.color.neutral-grey3}" }
-            }
-          }
-        },
-        "hover": {
-          "border-color": { "value": "{amsterdam.color.dark-blue}" }
-        },
-        "invalid": {
-          "border-color": { "value": "{amsterdam.color.primary-red}" },
-          "checked": {
-            "background-color": { "value": "{amsterdam.color.primary-red}" },
-            "hover": {
-              "background-color": { "value": "{amsterdam.color.primary-red}" }
-            }
-          },
-          "hover": {
-            "border-color": { "value": "{amsterdam.color.primary-red}" }
-          },
-          "indeterminate": {
-            "background-color": { "value": "{amsterdam.color.primary-red}" },
-            "hover": {
-              "background-color": { "value": "{amsterdam.color.primary-red}" }
-            }
-          }
-        },
-        "indeterminate": {
-          "background-color": { "value": "{amsterdam.color.primary-blue}" },
-          "background-image": {
-            "value": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath fill-rule='evenodd' d='M0 13.714h32v4H0z'/%3E%3C/svg%3E\")"
-          },
-          "hover": {
-            "background-color": { "value": "{amsterdam.color.dark-blue}" }
-          }
-        }
-      },
-      "disabled": {
-        "color": { "value": "{amsterdam.color.neutral-grey3}" }
-      },
-      "hover": {
-        "color": { "value": "{amsterdam.color.dark-blue}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/column.tokens.json b/proprietary/tokens/src/components/amsterdam/column.tokens.json
deleted file mode 100644
index 479adfdd52..0000000000
--- a/proprietary/tokens/src/components/amsterdam/column.tokens.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "amsterdam": {
-    "column": {
-      "gap": {
-        "xs": { "value": "{amsterdam.space.grid.xs}" },
-        "sm": { "value": "{amsterdam.space.grid.sm}" },
-        "md": { "value": "{amsterdam.space.grid.md}" },
-        "lg": { "value": "{amsterdam.space.grid.lg}" },
-        "xl": { "value": "{amsterdam.space.grid.xl}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/fieldset.tokens.json b/proprietary/tokens/src/components/amsterdam/fieldset.tokens.json
deleted file mode 100644
index 7e6e8428ae..0000000000
--- a/proprietary/tokens/src/components/amsterdam/fieldset.tokens.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "amsterdam": {
-    "fieldset": {
-      "legend": {
-        "color": { "value": "{amsterdam.color.primary-black}" },
-        "font-family": { "value": "{amsterdam.typography.font-family}" },
-        "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
-        "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/form-label.tokens.json b/proprietary/tokens/src/components/amsterdam/form-label.tokens.json
deleted file mode 100644
index 01d8f6377b..0000000000
--- a/proprietary/tokens/src/components/amsterdam/form-label.tokens.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "amsterdam": {
-    "form-label": {
-      "color": { "value": "{amsterdam.color.primary-black}" },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/gap.tokens.json b/proprietary/tokens/src/components/amsterdam/gap.tokens.json
deleted file mode 100644
index 2adefede21..0000000000
--- a/proprietary/tokens/src/components/amsterdam/gap.tokens.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "amsterdam": {
-    "gap": {
-      "xs": { "value": "{amsterdam.space.grid.xs}" },
-      "sm": { "value": "{amsterdam.space.grid.sm}" },
-      "md": { "value": "{amsterdam.space.grid.md}" },
-      "lg": { "value": "{amsterdam.space.grid.lg}" },
-      "xl": { "value": "{amsterdam.space.grid.xl}" }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json
deleted file mode 100644
index 73d84de55c..0000000000
--- a/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "amsterdam": {
-    "grid": {
-      "padding-inline": { "value": "{amsterdam.space.grid.md}" }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/grid.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
deleted file mode 100644
index 048ee74195..0000000000
--- a/proprietary/tokens/src/components/amsterdam/grid.tokens.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "amsterdam": {
-    "grid": {
-      "column-count": { "value": "4" },
-      "column-gap": { "value": "{amsterdam.space.grid.md}" },
-      "padding-block": {
-        "sm": { "value": "{amsterdam.space.grid.sm}" },
-        "md": { "value": "{amsterdam.space.grid.md}" },
-        "lg": { "value": "{amsterdam.space.grid.lg}" }
-      },
-      "padding-inline": { "value": "{amsterdam.space.grid.lg}" },
-      "row-gap": {
-        "sm": { "value": "{amsterdam.space.grid.sm}" },
-        "md": { "value": "{amsterdam.space.grid.md}" },
-        "lg": { "value": "{amsterdam.space.grid.lg}" }
-      },
-      "medium": {
-        "column-count": { "value": "8" }
-      },
-      "wide": {
-        "column-count": { "value": "12" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/header.tokens.json b/proprietary/tokens/src/components/amsterdam/header.tokens.json
deleted file mode 100644
index 29ae3527b6..0000000000
--- a/proprietary/tokens/src/components/amsterdam/header.tokens.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "amsterdam": {
-    "header": {
-      "column-gap": {
-        "value": "{amsterdam.space.grid.md}",
-        "comment": "Must have the same value as `amsterdam.grid.column-gap`."
-      },
-      "padding-block": { "value": "{amsterdam.space.inside.md}" },
-      "logo-link": {
-        "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/heading.tokens.json b/proprietary/tokens/src/components/amsterdam/heading.tokens.json
deleted file mode 100644
index a7a07a076a..0000000000
--- a/proprietary/tokens/src/components/amsterdam/heading.tokens.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "amsterdam": {
-    "heading": {
-      "color": { "value": "{amsterdam.color.primary-black}" },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-      "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "level-1": {
-        "font-size": { "value": "{amsterdam.typography.text-level.1.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.1.line-height}" }
-      },
-      "level-2": {
-        "font-size": { "value": "{amsterdam.typography.text-level.2.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.2.line-height}" }
-      },
-      "level-3": {
-        "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" }
-      },
-      "level-4": {
-        "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
-      },
-      "level-5": {
-        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
-      },
-      "level-6": {
-        "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/icon-button.tokens.json b/proprietary/tokens/src/components/amsterdam/icon-button.tokens.json
deleted file mode 100644
index 80db00d823..0000000000
--- a/proprietary/tokens/src/components/amsterdam/icon-button.tokens.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
-  "amsterdam": {
-    "icon-button": {
-      "color": { "value": "{amsterdam.color.primary-blue}" },
-      "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-      "hover": {
-        "background-color": { "value": "rgba(0, 70, 153, 0.125)" },
-        "color": { "value": "{amsterdam.color.dark-blue}" }
-      },
-      "disabled": {
-        "color": { "value": "{amsterdam.color.neutral-grey2}" }
-      },
-      "on-background-light": {
-        "color": { "value": "{amsterdam.color.primary-black}" },
-        "hover": {
-          "background-color": { "value": "rgba(0, 0, 0, 0.125)" },
-          "color": { "value": "{amsterdam.color.primary-black}" }
-        },
-        "disabled": {
-          "color": { "value": "{amsterdam.color.neutral-grey2}" }
-        }
-      },
-      "on-background-dark": {
-        "background-color": { "value": "{amsterdam.color.primary-blue}" },
-        "color": { "value": "{amsterdam.color.primary-white}" },
-        "hover": {
-          "background-color": { "value": "{amsterdam.color.dark-blue}" },
-          "color": { "value": "{amsterdam.color.primary-white}" }
-        },
-        "disabled": {
-          "color": { "value": "{amsterdam.color.primary-white}" },
-          "background-color": { "value": "{amsterdam.color.neutral-grey2}" }
-        }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/icon.tokens.json b/proprietary/tokens/src/components/amsterdam/icon.tokens.json
deleted file mode 100644
index 76f5e2648b..0000000000
--- a/proprietary/tokens/src/components/amsterdam/icon.tokens.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "amsterdam": {
-    "icon": {
-      "size-3": {
-        "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" }
-      },
-      "size-4": {
-        "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
-      },
-      "size-5": {
-        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
-      },
-      "size-6": {
-        "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/link-list.tokens.json b/proprietary/tokens/src/components/amsterdam/link-list.tokens.json
deleted file mode 100644
index 17b5e15f99..0000000000
--- a/proprietary/tokens/src/components/amsterdam/link-list.tokens.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
-  "amsterdam": {
-    "link-list": {
-      "gap": { "value": "0.5em" },
-      "link": {
-        "color": { "value": "{amsterdam.link-appearance.color}" },
-        "font-family": { "value": "{amsterdam.typography.font-family}" },
-        "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-        "gap": { "value": "0.5em" },
-        "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-        "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
-        "small": {
-          "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }
-        },
-        "medium": {
-          "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
-        },
-        "large": {
-          "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
-        },
-        "hover": {
-          "color": { "value": "{amsterdam.link-appearance.hover.color}" },
-          "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
-        },
-        "on-background-dark": {
-          "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" },
-          "hover": {
-            "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" }
-          }
-        },
-        "on-background-light": {
-          "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" },
-          "hover": {
-            "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/link.tokens.json b/proprietary/tokens/src/components/amsterdam/link.tokens.json
deleted file mode 100644
index 929a6afcb5..0000000000
--- a/proprietary/tokens/src/components/amsterdam/link.tokens.json
+++ /dev/null
@@ -1,61 +0,0 @@
-{
-  "amsterdam": {
-    "link": {
-      "color": { "value": "{amsterdam.link-appearance.color}" },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-      "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-      "hover": {
-        "color": { "value": "{amsterdam.link-appearance.hover.color}" }
-      },
-      "inline": {
-        "text-decoration-line": { "value": "{amsterdam.link-appearance.regular.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
-        "font-family": { "value": "inherit" },
-        "font-size": { "value": "inherit" },
-        "line-height": { "value": "inherit" },
-        "hover": {
-          "text-decoration-thickness": {
-            "value": "{amsterdam.link-appearance.regular.hover.text-decoration-thickness}"
-          },
-          "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.hover.text-underline-offset}" }
-        },
-        "visited": {
-          "color": { "value": "{amsterdam.color.purple}" }
-        }
-      },
-      "standalone": {
-        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
-        "text-decoration-line": { "value": "{amsterdam.link-appearance.regular.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
-        "hover": {
-          "text-decoration-thickness": {
-            "value": "{amsterdam.link-appearance.regular.hover.text-decoration-thickness}"
-          },
-          "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.hover.text-underline-offset}" }
-        }
-      },
-      "on-background-dark": {
-        "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" },
-        "hover": {
-          "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" }
-        },
-        "visited": {
-          "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" }
-        }
-      },
-      "on-background-light": {
-        "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" },
-        "hover": {
-          "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" }
-        },
-        "visited": {
-          "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" }
-        }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/logo.tokens.json b/proprietary/tokens/src/components/amsterdam/logo.tokens.json
deleted file mode 100644
index c2033a0c85..0000000000
--- a/proprietary/tokens/src/components/amsterdam/logo.tokens.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "amsterdam": {
-    "logo": {
-      "height": { "value": "2.5rem" },
-      "emblem": { "color": { "value": "{amsterdam.color.primary-red}" } },
-      "title": { "color": { "value": "{amsterdam.color.primary-red}" } },
-      "subsite": { "color": { "value": "{amsterdam.color.primary-black}" } }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/margin.tokens.json b/proprietary/tokens/src/components/amsterdam/margin.tokens.json
deleted file mode 100644
index b058657661..0000000000
--- a/proprietary/tokens/src/components/amsterdam/margin.tokens.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "amsterdam": {
-    "margin": {
-      "xs": { "value": "{amsterdam.space.grid.xs}" },
-      "sm": { "value": "{amsterdam.space.grid.sm}" },
-      "md": { "value": "{amsterdam.space.grid.md}" },
-      "lg": { "value": "{amsterdam.space.grid.lg}" },
-      "xl": { "value": "{amsterdam.space.grid.xl}" }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/mark.tokens.json b/proprietary/tokens/src/components/amsterdam/mark.tokens.json
deleted file mode 100644
index ee4eefd2ca..0000000000
--- a/proprietary/tokens/src/components/amsterdam/mark.tokens.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "amsterdam": {
-    "mark": {
-      "background-color": { "value": "{amsterdam.color.yellow}" }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json b/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json
deleted file mode 100644
index c6efdb1de4..0000000000
--- a/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "amsterdam": {
-    "mega-menu": {
-      "list-category": {
-        "column-gap": {
-          "value": "{amsterdam.space.grid.md}",
-          "comment": "Must have the same value as `amsterdam.grid.column-gap`."
-        },
-        "column-width": { "value": "20rem" },
-        "padding-block-start": { "value": "1rem" },
-        "padding-block-end": {
-          "value": "{amsterdam.space.grid.md}",
-          "comment": "Must have the same value as `amsterdam.grid.row-gap.md`."
-        }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json b/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json
deleted file mode 100644
index 05f4198b37..0000000000
--- a/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "amsterdam": {
-    "page-heading": {
-      "color": { "value": "{amsterdam.color.primary-black}" },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-size": { "value": "{amsterdam.typography.text-level.0.font-size}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-      "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.0.font-size}" }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json
deleted file mode 100644
index 534d7df1be..0000000000
--- a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "amsterdam": {
-    "page-menu": {
-      "column-gap": { "value": "2.5rem" },
-      "row-gap": { "value": "0.5rem" },
-      "item": {
-        "color": { "value": "{amsterdam.link-appearance.color}" },
-        "font-family": { "value": "{amsterdam.typography.font-family}" },
-        "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
-        "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-        "gap": { "value": "0.5rem" },
-        "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
-        "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-        "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
-        "hover": {
-          "color": { "value": "{amsterdam.link-appearance.hover.color}" },
-          "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
-        }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json
deleted file mode 100644
index dca6a8b268..0000000000
--- a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "amsterdam": {
-    "pagination": {
-      "color": { "value": "{amsterdam.link-appearance.color}" },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
-      "button": {
-        "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-        "padding-inline": { "value": "{amsterdam.space.inside.sm}" },
-        "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
-        "current": {
-          "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }
-        },
-        "hover": {
-          "color": { "value": "{amsterdam.link-appearance.hover.color}" },
-          "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
-        }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
deleted file mode 100644
index 0b78d70f46..0000000000
--- a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "amsterdam": {
-    "paragraph": {
-      "color": { "value": "{amsterdam.color.primary-black}" },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-      "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "small": {
-        "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }
-      },
-      "medium": {
-        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
-      },
-      "large": {
-        "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/row.tokens.json b/proprietary/tokens/src/components/amsterdam/row.tokens.json
deleted file mode 100644
index cdae8d4c90..0000000000
--- a/proprietary/tokens/src/components/amsterdam/row.tokens.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "amsterdam": {
-    "row": {
-      "gap": {
-        "xs": { "value": "{amsterdam.space.stack.xs}" },
-        "sm": { "value": "{amsterdam.space.stack.sm}" },
-        "md": { "value": "{amsterdam.space.stack.md}" },
-        "lg": { "value": "{amsterdam.space.stack.lg}" },
-        "xl": { "value": "{amsterdam.space.stack.xl}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/search-field.tokens.json b/proprietary/tokens/src/components/amsterdam/search-field.tokens.json
deleted file mode 100644
index 136c9407b6..0000000000
--- a/proprietary/tokens/src/components/amsterdam/search-field.tokens.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
-  "amsterdam": {
-    "search-field": {
-      "button": {
-        "background-color": { "value": "{amsterdam.color.primary-blue}" },
-        "color": { "value": "{amsterdam.color.primary-white}" },
-        "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-        "hover": {
-          "background-color": { "value": "{amsterdam.color.dark-blue}" }
-        },
-        "padding-block": { "value": "{amsterdam.space.inside.xs}" },
-        "padding-inline": { "value": "{amsterdam.space.inside.xs}" }
-      },
-      "input": {
-        "box-shadow": {
-          "value": "inset 0 0 0 1px {amsterdam.color.primary-black}"
-        },
-        "color": { "value": "{amsterdam.color.primary-black}" },
-        "font-family": { "value": "{amsterdam.typography.font-family}" },
-        "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
-        "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
-        "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-        "padding-block": { "value": "{amsterdam.space.inside.xs}" },
-        "padding-inline": { "value": "{amsterdam.space.inside.md}" },
-        "cancel-button": {
-          "background-image": {
-            "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>\")"
-          },
-          "color": { "value": "{amsterdam.color.primary-blue}" },
-          "height": { "value": "{amsterdam.typography.text-level.6.font-size}" },
-          "width": { "value": "{amsterdam.typography.text-level.6.font-size}" }
-        },
-        "hover": {
-          "box-shadow": {
-            "value": "inset 0 0 0 2px {amsterdam.color.primary-black}"
-          }
-        },
-        "placeholder": {
-          "color": { "value": "{amsterdam.color.neutral-grey3}" }
-        }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json b/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json
deleted file mode 100644
index 3b21292038..0000000000
--- a/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "amsterdam": {
-    "skip-link": {
-      "background-color": { "value": "{amsterdam.color.primary-blue}" },
-      "color": { "value": "{amsterdam.color.primary-white}" },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-      "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
-      "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-      "padding-block": { "value": "{amsterdam.space.inside.xs}" },
-      "padding-inline": { "value": "{amsterdam.space.inside.md}" },
-      "hover": {
-        "background-color": { "value": "{amsterdam.color.dark-blue}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/spotlight.tokens.json b/proprietary/tokens/src/components/amsterdam/spotlight.tokens.json
deleted file mode 100644
index 936b3e9688..0000000000
--- a/proprietary/tokens/src/components/amsterdam/spotlight.tokens.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "amsterdam": {
-    "spotlight": {
-      "blue": {
-        "background-color": { "value": "{amsterdam.color.blue}" }
-      },
-      "dark-blue": {
-        "background-color": { "value": "{amsterdam.color.primary-blue}" }
-      },
-      "dark-green": {
-        "background-color": { "value": "{amsterdam.color.dark-green}" }
-      },
-      "green": {
-        "background-color": { "value": "{amsterdam.color.green}" }
-      },
-      "magenta": {
-        "background-color": { "value": "{amsterdam.color.magenta}" }
-      },
-      "orange": {
-        "background-color": { "value": "{amsterdam.color.orange}" }
-      },
-      "purple": {
-        "background-color": { "value": "{amsterdam.color.purple}" }
-      },
-      "yellow": {
-        "background-color": { "value": "{amsterdam.color.yellow}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/switch.tokens.json b/proprietary/tokens/src/components/amsterdam/switch.tokens.json
deleted file mode 100644
index 531b091edf..0000000000
--- a/proprietary/tokens/src/components/amsterdam/switch.tokens.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "amsterdam": {
-    "switch": {
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "background-color": { "value": "{amsterdam.color.neutral-grey3}" },
-      "width": { "value": "3.5rem" },
-      "thumb": {
-        "background-color": { "value": "{amsterdam.color.primary-white}" },
-        "width": { "value": "1.75rem" },
-        "height": { "value": "1.75rem" },
-        "hover": {
-          "color": { "value": "{amsterdam.color.dark-blue}" }
-        }
-      },
-      "checked": {
-        "background-color": { "value": "{amsterdam.color.primary-blue}" }
-      },
-      "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-      "disabled": {
-        "background-color": { "value": "{amsterdam.color.neutral-grey2}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/table.tokens.json b/proprietary/tokens/src/components/amsterdam/table.tokens.json
deleted file mode 100644
index 09879551d0..0000000000
--- a/proprietary/tokens/src/components/amsterdam/table.tokens.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "amsterdam": {
-    "table": {
-      "color": { "value": "{amsterdam.color.primary-black}" },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-      "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
-      "caption": {
-        "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }
-      },
-      "cell": {
-        "border-bottom": { "value": "1px solid {amsterdam.color.neutral-grey1}" },
-        "padding-block": { "value": "{amsterdam.space.inside.md}" },
-        "padding-inline": { "value": "{amsterdam.space.inside.md}" }
-      },
-      "header-cell": {
-        "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/tabs.tokens.json b/proprietary/tokens/src/components/amsterdam/tabs.tokens.json
deleted file mode 100644
index 8dc150bff9..0000000000
--- a/proprietary/tokens/src/components/amsterdam/tabs.tokens.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "amsterdam": {
-    "tabs": {
-      "list": {
-        "border-bottom": { "value": ".125rem solid {amsterdam.color.primary-blue}" }
-      },
-      "button": {
-        "background-color": { "value": "transparent" },
-        "border": { "value": "none" },
-        "color": { "value": "{amsterdam.color.primary-blue}" },
-        "cursor": { "value": "{amsterdam.action.activate.cursor}" },
-        "font-family": { "value": "{amsterdam.typography.font-family}" },
-        "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
-        "outline-offset": { "value": "-0.25rem" },
-        "padding-block": { "value": ".5rem" },
-        "padding-inline": { "value": "1rem" },
-        "hover": {
-          "color": { "value": "{amsterdam.color.dark-blue}" },
-          "box-shadow": { "value": "inset 0 -0.125rem 0 0 {amsterdam.color.dark-blue}" }
-        },
-        "selected": {
-          "background-color": { "value": "{amsterdam.color.primary-blue}" },
-          "color": { "value": "{amsterdam.color.primary-white}" }
-        },
-        "disabled": {
-          "color": { "value": "{amsterdam.color.neutral-grey2}" },
-          "cursor": { "value": "{amsterdam.action.disabled.cursor}" }
-        }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/text-area.tokens.json b/proprietary/tokens/src/components/amsterdam/text-area.tokens.json
deleted file mode 100644
index 505270d29b..0000000000
--- a/proprietary/tokens/src/components/amsterdam/text-area.tokens.json
+++ /dev/null
@@ -1,36 +0,0 @@
-{
-  "amsterdam": {
-    "text-area": {
-      "box-shadow": { "value": "inset 0 0 0 1px {amsterdam.color.primary-black}" },
-      "color": { "value": "{amsterdam.color.primary-black}" },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
-      "min-height": {
-        "value": "calc({amsterdam.typography.text-level.6.line-height} * 1em + 2 * {amsterdam.text-area.padding-block})"
-      },
-      "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-      "padding-block": { "value": "0.5rem" },
-      "padding-inline": { "value": "1rem" },
-      "disabled": {
-        "background-color": { "value": "{amsterdam.color.primary-white}" },
-        "box-shadow": { "value": "inset 0 0 0 1px {amsterdam.color.neutral-grey2}" },
-        "color": { "value": "{amsterdam.color.neutral-grey2}" },
-        "cursor": { "value": "{amsterdam.action.disabled.cursor}" }
-      },
-      "hover": {
-        "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-black}" }
-      },
-      "invalid": {
-        "box-shadow": { "value": "inset 0 0 0 1px {amsterdam.color.primary-red}" },
-        "hover": {
-          "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-red}" }
-        }
-      },
-      "placeholder": {
-        "color": { "value": "{amsterdam.color.neutral-grey3}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/text-input.tokens.json b/proprietary/tokens/src/components/amsterdam/text-input.tokens.json
deleted file mode 100644
index 6d89bc560d..0000000000
--- a/proprietary/tokens/src/components/amsterdam/text-input.tokens.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "amsterdam": {
-    "text-input": {
-      "box-shadow": { "value": "inset 0 0 0 1px {amsterdam.color.primary-black}" },
-      "color": { "value": "{amsterdam.color.primary-black}" },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
-      "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-      "padding-block": { "value": "{amsterdam.space.inside.xs}" },
-      "padding-inline": { "value": "{amsterdam.space.inside.md}" },
-      "disabled": {
-        "background-color": { "value": "{amsterdam.color.primary-white}" },
-        "box-shadow": { "value": "inset 0 0 0 1px {amsterdam.color.neutral-grey2}" },
-        "color": { "value": "{amsterdam.color.neutral-grey2}" }
-      },
-      "hover": {
-        "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-black}" }
-      },
-      "invalid": {
-        "box-shadow": { "value": "inset 0 0 0 1px {amsterdam.color.primary-red}" },
-        "hover": {
-          "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-red}" }
-        }
-      },
-      "placeholder": {
-        "color": { "value": "{amsterdam.color.neutral-grey3}" }
-      }
-    }
-  }
-}
diff --git a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json
deleted file mode 100644
index bee69ba5a1..0000000000
--- a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "amsterdam": {
-    "top-task-link": {
-      "description": {
-        "color": { "value": "{amsterdam.color.primary-black}" },
-        "font-family": { "value": "{amsterdam.typography.font-family}" },
-        "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
-        "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }
-      },
-      "label": {
-        "color": { "value": "{amsterdam.link-appearance.color}" },
-        "font-family": { "value": "{amsterdam.typography.font-family}" },
-        "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
-        "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" },
-        "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
-        "hover": {
-          "color": { "value": "{amsterdam.color.dark-blue}" },
-          "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
-        }
-      },
-      "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }
-    }
-  }
-}
diff --git a/storybook/config/preview-body.html b/storybook/config/preview-body.html
index 5e14319549..d655261501 100644
--- a/storybook/config/preview-body.html
+++ b/storybook/config/preview-body.html
@@ -1,28 +1,28 @@
 <style>
-  .amsterdam-docs-figure {
+  .ams-docs-figure {
     margin: 0; /* stylelint-disable-line */
     padding: 0; /* stylelint-disable-line */
   }
 
-  .amsterdam-docs-image,
-  .amsterdam-docs-figure > img {
+  .ams-docs-image,
+  .ams-docs-figure > img {
     display: block;
     max-width: 100%;
   }
 
-  .amsterdam-docs-paragraph {
+  .ams-docs-paragraph {
     font-family: "Amsterdam Sans", sans-serif;
     font-size: 1rem;
     line-height: 1.5;
   }
 
-  .amsterdam-docs-pink-box {
+  .ams-docs-pink-box {
     background-color: rgba(229, 0, 130, 25%); /* stylelint-disable-line color-function-notation */
     padding-block: 2rem;
     text-align: center;
   }
 
-  .amsterdam-docs-card {
+  .ams-docs-card {
     border: 1px solid hotpink;
     display: flex;
     flex-direction: column;
@@ -31,7 +31,7 @@
     width: 50%;
   }
 
-  .amsterdam-docs-dark-background {
+  .ams-docs-dark-background {
     background-color: #004699;
     margin: -16px; /* stylelint-disable-line */
     padding: 16px; /* stylelint-disable-line */
diff --git a/storybook/config/preview.tsx b/storybook/config/preview.tsx
index e74a15646a..59dc2026a4 100644
--- a/storybook/config/preview.tsx
+++ b/storybook/config/preview.tsx
@@ -22,7 +22,7 @@ export const decorators = [
   withThemeByClassName({
     themes: {
       Spacious: '',
-      Compact: 'amsterdam-theme--compact',
+      Compact: 'ams-theme--compact',
     },
     defaultTheme: 'Spacious',
   }),
diff --git a/storybook/src/components/Blockquote/Blockquote.stories.tsx b/storybook/src/components/Blockquote/Blockquote.stories.tsx
index a1bf607488..15945b42cd 100644
--- a/storybook/src/components/Blockquote/Blockquote.stories.tsx
+++ b/storybook/src/components/Blockquote/Blockquote.stories.tsx
@@ -31,7 +31,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   decorators: [
     (Story, context) => (
-      <div className={context.args.inverseColor ? 'amsterdam-docs-dark-background' : undefined}>
+      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
         <Story />
       </div>
     ),
@@ -44,7 +44,7 @@ export const InvertedColor: Story = {
   },
   decorators: [
     (Story, context) => (
-      <div className={context.args.inverseColor ? 'amsterdam-docs-dark-background' : undefined}>
+      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
         <Story />
       </div>
     ),
diff --git a/storybook/src/components/Column/Column.docs.mdx b/storybook/src/components/Column/Column.docs.mdx
index df02ffd441..b98b4da724 100644
--- a/storybook/src/components/Column/Column.docs.mdx
+++ b/storybook/src/components/Column/Column.docs.mdx
@@ -14,7 +14,7 @@ The five [space](/docs/docs-design-guidelines-space--docs) sizes are available f
 
 Wrap a Column around a set of components that need the same amount of white space between them.
 
-To add white space below a single element, you can alternatively use a utility class for bottom margins, e.g. `class="amsterdam-mb-md"`.
+To add white space below a single element, you can alternatively use a utility class for bottom margins, e.g. `class="ams-mb--md"`.
 
 ## Examples
 
diff --git a/storybook/src/components/Column/Column.stories.tsx b/storybook/src/components/Column/Column.stories.tsx
index 6984c386ee..62323879f0 100644
--- a/storybook/src/components/Column/Column.stories.tsx
+++ b/storybook/src/components/Column/Column.stories.tsx
@@ -7,7 +7,7 @@ import { Card, Column, Heading, Paragraph } from '@amsterdam/design-system-react
 import { Meta, StoryObj } from '@storybook/react'
 
 const ThreeBoxes = Array.from(Array(3).keys()).map((i) => (
-  <Paragraph className="amsterdam-docs-pink-box" key={i}>
+  <Paragraph className="ams-docs-pink-box" key={i}>
     {i + 1}
   </Paragraph>
 ))
diff --git a/storybook/src/components/Dialog/Dialog.docs.mdx b/storybook/src/components/Dialog/Dialog.docs.mdx
index 6729451834..695b7275f4 100644
--- a/storybook/src/components/Dialog/Dialog.docs.mdx
+++ b/storybook/src/components/Dialog/Dialog.docs.mdx
@@ -14,7 +14,7 @@ import README from "../../../../packages/css/src/components/dialog/README.md?raw
 
 Content taller than the dialog itself will scroll.
 
-<Canvas of={DialogStories.WithScrollbar} className="amsterdam-dialog-story" />
+<Canvas of={DialogStories.WithScrollbar} className="ams-dialog-story" />
 
 ## Open Dialog Button
 
diff --git a/storybook/src/components/Grid/Grid.stories.tsx b/storybook/src/components/Grid/Grid.stories.tsx
index 6110eb1c0e..52fa7648ef 100644
--- a/storybook/src/components/Grid/Grid.stories.tsx
+++ b/storybook/src/components/Grid/Grid.stories.tsx
@@ -69,9 +69,7 @@ const CellStoryTemplate: CellStory = {
   render: ({ children, ...args }) => <Grid.Cell {...args}>{children}</Grid.Cell>,
 }
 
-const TwelveGridCells = Array.from(Array(12).keys()).map((i) => (
-  <Grid.Cell className="amsterdam-docs-pink-box" key={i} />
-))
+const TwelveGridCells = Array.from(Array(12).keys()).map((i) => <Grid.Cell className="ams-docs-pink-box" key={i} />)
 
 export const Default: Story = {
   ...StoryTemplate,
@@ -91,9 +89,7 @@ export const VerticalSpace: Story = {
 export const VerticalGap: Story = {
   ...StoryTemplate,
   args: {
-    children: Array.from(Array(6).keys()).map((i) => (
-      <Grid.Cell className="amsterdam-docs-pink-box" span={4} key={i} />
-    )),
+    children: Array.from(Array(6).keys()).map((i) => <Grid.Cell className="ams-docs-pink-box" span={4} key={i} />),
     gapVertical: 'small',
   },
 }
@@ -101,7 +97,7 @@ export const VerticalGap: Story = {
 export const SpanMultipleColumns: CellStory = {
   ...CellStoryTemplate,
   args: {
-    children: <p className="amsterdam-docs-paragraph amsterdam-docs-pink-box">Deze cel beslaat 4 kolommen.</p>,
+    children: <p className="ams-docs-paragraph ams-docs-pink-box">Deze cel beslaat 4 kolommen.</p>,
     span: 4,
   },
 }
@@ -109,9 +105,7 @@ export const SpanMultipleColumns: CellStory = {
 export const ConfigureGridVariants: CellStory = {
   ...CellStoryTemplate,
   args: {
-    children: (
-      <p className="amsterdam-docs-paragraph amsterdam-docs-pink-box">Deze cel heeft 3 instellingen voor de breedte.</p>
-    ),
+    children: <p className="ams-docs-paragraph ams-docs-pink-box">Deze cel heeft 3 instellingen voor de breedte.</p>,
     span: { narrow: 4, medium: 6, wide: 8 },
   },
 }
@@ -120,9 +114,7 @@ export const SpanAllColumns: CellStory = {
   ...CellStoryTemplate,
   args: {
     children: (
-      <p className="amsterdam-docs-paragraph amsterdam-docs-pink-box">
-        Deze cel beslaat de volledige breedte van het grid.
-      </p>
+      <p className="ams-docs-paragraph ams-docs-pink-box">Deze cel beslaat de volledige breedte van het grid.</p>
     ),
     span: 'all',
   },
@@ -131,7 +123,7 @@ export const SpanAllColumns: CellStory = {
 export const StartPosition: CellStory = {
   ...CellStoryTemplate,
   args: {
-    children: <p className="amsterdam-docs-paragraph amsterdam-docs-pink-box">Deze cel start in kolom 2.</p>,
+    children: <p className="ams-docs-paragraph ams-docs-pink-box">Deze cel start in kolom 2.</p>,
     span: 3,
     start: 2,
   },
@@ -145,7 +137,7 @@ export const CustomTagName: CellStory = {
   render: ({ as }: GridCellProps) => (
     <Grid>
       <Grid.Cell as={as} span="all">
-        <p className="amsterdam-docs-pink-box amsterdam-docs-paragraph">Deze cel gebruikt het HTML-element `{as}`.</p>
+        <p className="ams-docs-pink-box ams-docs-paragraph">Deze cel gebruikt het HTML-element `{as}`.</p>
       </Grid.Cell>
     </Grid>
   ),
diff --git a/storybook/src/components/Header/Header.stories.tsx b/storybook/src/components/Header/Header.stories.tsx
index 3e662985d1..d5c7c93b52 100644
--- a/storybook/src/components/Header/Header.stories.tsx
+++ b/storybook/src/components/Header/Header.stories.tsx
@@ -15,7 +15,7 @@ const meta = {
       control: {
         type: 'radio',
       },
-      options: ['amsterdam', 'ggd-amsterdam', 'stadsarchief', 'stadsbank-van-lening', 'vga-verzekeringen'],
+      options: ['ams', 'ggd-ams', 'stadsarchief', 'stadsbank-van-lening', 'vga-verzekeringen'],
     },
   },
 } satisfies Meta<typeof Header>
@@ -28,7 +28,7 @@ export const Default: Story = {}
 
 export const WithLogoVariant: Story = {
   args: {
-    logoBrand: 'ggd-amsterdam',
+    logoBrand: 'ggd-ams',
     logoLink: 'https://www.ggd.amsterdam.nl/',
     logoLinkTitle: 'Naar de homepage van de GGD Amsterdam',
   },
@@ -56,13 +56,13 @@ export const WithLinks: Story = {
 
 export const WithMenu: Story = {
   args: {
-    menu: <button className="amsterdam-header__menu-button">Menu</button>,
+    menu: <button className="ams-header__menu-button">Menu</button>,
   },
 }
 
 export const WithLinksAndMenu: Story = {
   args: {
-    menu: <button className="amsterdam-header__menu-button">Menu</button>,
+    menu: <button className="ams-header__menu-button">Menu</button>,
     links: (
       <PageMenu alignEnd>
         <PageMenu.Link href="#">Contact</PageMenu.Link>
@@ -78,7 +78,7 @@ export const WithLinksAndMenu: Story = {
 export const WithTitleAndMenu: Story = {
   args: {
     title: 'Aan de Amsterdamse grachten',
-    menu: <button className="amsterdam-header__menu-button">Menu</button>,
+    menu: <button className="ams-header__menu-button">Menu</button>,
   },
 }
 
@@ -94,6 +94,6 @@ export const WithTitleLinksAndMenu: Story = {
         </PageMenu.Link>
       </PageMenu>
     ),
-    menu: <button className="amsterdam-header__menu-button">Menu</button>,
+    menu: <button className="ams-header__menu-button">Menu</button>,
   },
 }
diff --git a/storybook/src/components/Heading/Heading.stories.tsx b/storybook/src/components/Heading/Heading.stories.tsx
index 963ab14d09..1ecd353d6d 100644
--- a/storybook/src/components/Heading/Heading.stories.tsx
+++ b/storybook/src/components/Heading/Heading.stories.tsx
@@ -39,7 +39,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   decorators: [
     (Story, context) => (
-      <div className={context.args.inverseColor ? 'amsterdam-docs-dark-background' : undefined}>
+      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
         <Story />
       </div>
     ),
@@ -72,7 +72,7 @@ export const InvertedColor: Story = {
   },
   decorators: [
     (Story, context) => (
-      <div className={context.args.inverseColor ? 'amsterdam-docs-dark-background' : undefined}>
+      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
         <Story />
       </div>
     ),
diff --git a/storybook/src/components/Logo/Logo.stories.tsx b/storybook/src/components/Logo/Logo.stories.tsx
index f6b2cdb384..54537d63a3 100644
--- a/storybook/src/components/Logo/Logo.stories.tsx
+++ b/storybook/src/components/Logo/Logo.stories.tsx
@@ -34,7 +34,7 @@ export const Default: Story = {}
 
 export const GgdAmsterdam: Story = {
   args: {
-    brand: 'ggd-amsterdam',
+    brand: 'ggd-ams',
   },
 }
 
diff --git a/storybook/src/components/OrderedList/OrderedList.stories.tsx b/storybook/src/components/OrderedList/OrderedList.stories.tsx
index ca6830aafa..fc516e6f17 100644
--- a/storybook/src/components/OrderedList/OrderedList.stories.tsx
+++ b/storybook/src/components/OrderedList/OrderedList.stories.tsx
@@ -29,7 +29,7 @@ const meta = {
   },
   decorators: [
     (Story, context) => (
-      <div className={context.args.inverseColor ? 'amsterdam-docs-dark-background' : undefined}>
+      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
         <Story />
       </div>
     ),
diff --git a/storybook/src/components/Paragraph/Paragraph.stories.tsx b/storybook/src/components/Paragraph/Paragraph.stories.tsx
index 9e984ef994..e3ae8c9063 100644
--- a/storybook/src/components/Paragraph/Paragraph.stories.tsx
+++ b/storybook/src/components/Paragraph/Paragraph.stories.tsx
@@ -37,7 +37,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   decorators: [
     (Story, context) => (
-      <div className={context.args.inverseColor ? 'amsterdam-docs-dark-background' : undefined}>
+      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
         <Story />
       </div>
     ),
@@ -62,7 +62,7 @@ export const InvertedColor: Story = {
   },
   decorators: [
     (Story, context) => (
-      <div className={context.args.inverseColor ? 'amsterdam-docs-dark-background' : undefined}>
+      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
         <Story />
       </div>
     ),
diff --git a/storybook/src/components/Screen/Screen.stories.tsx b/storybook/src/components/Screen/Screen.stories.tsx
index e5593cf58e..0ab71c4a7c 100644
--- a/storybook/src/components/Screen/Screen.stories.tsx
+++ b/storybook/src/components/Screen/Screen.stories.tsx
@@ -19,12 +19,12 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: { children: <p className="amsterdam-docs-paragraph amsterdam-docs-pink-box">Ik pas in het scherm.</p> },
+  args: { children: <p className="ams-docs-paragraph ams-docs-pink-box">Ik pas in het scherm.</p> },
 }
 
 export const ExtraWide: Story = {
   args: {
-    children: <p className="amsterdam-docs-paragraph amsterdam-docs-pink-box">Ik pas in een extra breed scherm.</p>,
+    children: <p className="ams-docs-paragraph ams-docs-pink-box">Ik pas in een extra breed scherm.</p>,
     maxWidth: 'x-wide',
   },
 }
diff --git a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx
index b029765b10..dd24015133 100644
--- a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx
+++ b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx
@@ -35,7 +35,7 @@ const meta = {
   },
   decorators: [
     (Story, context) => (
-      <div className={context.args.inverseColor ? 'amsterdam-docs-dark-background' : undefined}>
+      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
         <Story />
       </div>
     ),
@@ -76,49 +76,49 @@ export const WithoutMarkers: Story = {
   args: {
     children: [
       <UnorderedList.Item key={1}>
-        <div className="amsterdam-docs-card">
+        <div className="ams-docs-card">
           <Icon svg={LocationIcon} size="level-6" />
           <Paragraph>Stadsloket: locaties en openingstijden</Paragraph>
         </div>
       </UnorderedList.Item>,
       <UnorderedList.Item key={2}>
-        <div className="amsterdam-docs-card">
+        <div className="ams-docs-card">
           <Icon svg={CarIcon} size="level-6" />
           <Paragraph>Parkeren + Reizen (P+R)</Paragraph>
         </div>
       </UnorderedList.Item>,
       <UnorderedList.Item key={3}>
-        <div className="amsterdam-docs-card">
+        <div className="ams-docs-card">
           <Icon svg={PassportIcon} size="level-6" />
           <Paragraph>Paspoort, ID-kaart en Rijbewijs</Paragraph>
         </div>
       </UnorderedList.Item>,
       <UnorderedList.Item key={4}>
-        <div className="amsterdam-docs-card">
+        <div className="ams-docs-card">
           <Icon svg={DocumentEuroSignIcon} size="level-6" />
           <Paragraph>Gemeentebelastingen</Paragraph>
         </div>
       </UnorderedList.Item>,
       <UnorderedList.Item key={5}>
-        <div className="amsterdam-docs-card">
+        <div className="ams-docs-card">
           <Icon svg={AlertIcon} size="level-6" />
           <Paragraph>Melding openbare ruimte en overlast</Paragraph>
         </div>
       </UnorderedList.Item>,
       <UnorderedList.Item key={6}>
-        <div className="amsterdam-docs-card">
+        <div className="ams-docs-card">
           <Icon svg={HousingIcon} size="level-6" />
           <Paragraph>Verhuizing doorgeven</Paragraph>
         </div>
       </UnorderedList.Item>,
       <UnorderedList.Item key={7}>
-        <div className="amsterdam-docs-card">
+        <div className="ams-docs-card">
           <Icon svg={TrashBinIcon} size="level-6" />
           <Paragraph>Grof afval</Paragraph>
         </div>
       </UnorderedList.Item>,
       <UnorderedList.Item key={8}>
-        <div className="amsterdam-docs-card">
+        <div className="ams-docs-card">
           <Icon svg={AnnouncementIcon} size="level-6" />
           <Paragraph>Kennisgevingen en bekendmakingen</Paragraph>
         </div>
diff --git a/storybook/src/components/shared/exampleContent.ts b/storybook/src/components/shared/exampleContent.ts
index 0420e1a774..dbf54d1b19 100644
--- a/storybook/src/components/shared/exampleContent.ts
+++ b/storybook/src/components/shared/exampleContent.ts
@@ -93,7 +93,7 @@ export const exampleParagraph = () =>
     'Veel Amsterdammers in de bijstand zijn huiverig om te gaan werken. Ze denken dat ze dan minder geld krijgen, bijvoorbeeld omdat ze hun toeslagen verliezen. Voor deze mensen ontwikkelen we de ‘garantieknop’. Als mensen in de bijstand beginnen met werken en binnen 6 maanden hun baan verliezen, kunnen zij met de ‘garantieknop’ meteen weer bijstand krijgen als dat nodig is. Dit zorgt ervoor dat zij minder stress hebben. Het wordt zo makkelijker om weer een nieuwe baan te zoeken.',
     'Daarom organiseren we in 2024 het burgerberaad schone stad, waarin 150 Amsterdammers in gesprek gaan over hoe we de stad beter schoonhouden. Wat vinden Amsterdammers belangrijk? Welke oplossingen zien zij? Hier zijn we benieuwd naar. Want elke Amsterdammer heeft afval en moet het kwijt. Wij kunnen als gemeente veel van deze afvalexperts leren.',
     'De Zuidas Community Garden is 1 van de projecten van de Green Business Club Zuidas. Het doel van deze club is om ervoor te zorgen dat de Zuidas steeds duurzamer wordt. 70 bedrijven en organisaties werken daarvoor in verschillende projecten samen. De tuin aan de Domenico Scarlattilaan is elke dag open van 9.00 tot 17.00 uur.',
-    'Afgelopen maand konden bewoners hun reactie op de plannen geven tijdens informatiebijeenkomsten. Online kunt u tot en met 31 oktober reageren via amsterdam.nl/oranjeloper. Daar vindt u ook een overzicht van alle werkzaamheden die op de planning staan. En u kunt zich inschrijven voor de digitale nieuwsbrief.',
+    'Afgelopen maand konden bewoners hun reactie op de plannen geven tijdens informatiebijeenkomsten. Online kunt u tot en met 31 oktober reageren via ams.nl/oranjeloper. Daar vindt u ook een overzicht van alle werkzaamheden die op de planning staan. En u kunt zich inschrijven voor de digitale nieuwsbrief.',
     'Uw eigen buurt schoonhouden? U kunt meehelpen door alleen of samen met uw buren een afvalcontainer te adopteren. Bekijk hier hoe het werkt en hoe u zich aanmeldt als containeradoptant.',
     'We richten de rotonde bij de Bouhuijstunnel opnieuw in en maken het veiliger. We passen ook het fiets- en voetpad aan. De rotonde bij de Bouhuijstunnel verbindt de Korte Muiderweg, de Stationsweg en de Leeuwenveldseweg met elkaar.',
     'U kunt met uw auto goedkoop parkeren bij een P+R-locatie aan de rand van de stad, wanneer u van daar met het openbaar vervoer (ov) naar het centrumgebied van Amsterdam reist. Anders betaalt u het duurdere standaard parkeertarief, dat per P+R-locatie verschilt.',
diff --git a/storybook/src/docs/breakpoints.docs.mdx b/storybook/src/docs/breakpoints.docs.mdx
index edeb4c9fc7..59a958430b 100644
--- a/storybook/src/docs/breakpoints.docs.mdx
+++ b/storybook/src/docs/breakpoints.docs.mdx
@@ -14,7 +14,7 @@ For example:
 .class {
   /* Your narrow styling */
 
-  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+  @media screen and (min-width: $ams-breakpoint-wide) {
     /* Your wide styling */
   }
 }
diff --git a/storybook/src/docs/color.docs.mdx b/storybook/src/docs/color.docs.mdx
index 3e4aa07d20..a672d416d7 100644
--- a/storybook/src/docs/color.docs.mdx
+++ b/storybook/src/docs/color.docs.mdx
@@ -11,26 +11,26 @@ We have 8 additional colours and 3 shades of grey.
 
 <ColorPalette>
   <ColorPalette.Section>
-    <ColorPalette.Tile color={tokens.amsterdam.color["primary-white"]} name="white" />
-    <ColorPalette.Tile color={tokens.amsterdam.color["primary-red"]} name="red" />
-    <ColorPalette.Tile color={tokens.amsterdam.color["primary-black"]} name="black" />
+    <ColorPalette.Tile color={tokens.ams.color["primary-white"]} name="white" />
+    <ColorPalette.Tile color={tokens.ams.color["primary-red"]} name="red" />
+    <ColorPalette.Tile color={tokens.ams.color["primary-black"]} name="black" />
   </ColorPalette.Section>
   <ColorPalette.Section>
-    <ColorPalette.Tile color={tokens.amsterdam.color["green"]} name="green" />
-    <ColorPalette.Tile color={tokens.amsterdam.color["dark-green"]} name="dark green" />
-    <ColorPalette.Tile color={tokens.amsterdam.color["blue"]} name="blue" />
-    <ColorPalette.Tile color={tokens.amsterdam.color["primary-blue"]} name="dark blue" />
-    <ColorPalette.Tile color={tokens.amsterdam.color["dark-blue"]} name="darker blue" />
+    <ColorPalette.Tile color={tokens.ams.color["green"]} name="green" />
+    <ColorPalette.Tile color={tokens.ams.color["dark-green"]} name="dark green" />
+    <ColorPalette.Tile color={tokens.ams.color["blue"]} name="blue" />
+    <ColorPalette.Tile color={tokens.ams.color["primary-blue"]} name="dark blue" />
+    <ColorPalette.Tile color={tokens.ams.color["dark-blue"]} name="darker blue" />
   </ColorPalette.Section>
   <ColorPalette.Section>
-    <ColorPalette.Tile color={tokens.amsterdam.color["yellow"]} name="yellow" />
-    <ColorPalette.Tile color={tokens.amsterdam.color["orange"]} name="orange" />
-    <ColorPalette.Tile color={tokens.amsterdam.color["magenta"]} name="magenta" />
-    <ColorPalette.Tile color={tokens.amsterdam.color["purple"]} name="purple" />
+    <ColorPalette.Tile color={tokens.ams.color["yellow"]} name="yellow" />
+    <ColorPalette.Tile color={tokens.ams.color["orange"]} name="orange" />
+    <ColorPalette.Tile color={tokens.ams.color["magenta"]} name="magenta" />
+    <ColorPalette.Tile color={tokens.ams.color["purple"]} name="purple" />
   </ColorPalette.Section>
   <ColorPalette.Section>
-    <ColorPalette.Tile color={tokens.amsterdam.color["neutral-grey1"]} name="light grey" />
-    <ColorPalette.Tile color={tokens.amsterdam.color["neutral-grey2"]} name="grey" />
-    <ColorPalette.Tile color={tokens.amsterdam.color["neutral-grey3"]} name="dark grey" />
+    <ColorPalette.Tile color={tokens.ams.color["neutral-grey1"]} name="light grey" />
+    <ColorPalette.Tile color={tokens.ams.color["neutral-grey2"]} name="grey" />
+    <ColorPalette.Tile color={tokens.ams.color["neutral-grey3"]} name="dark grey" />
   </ColorPalette.Section>
 </ColorPalette>
diff --git a/storybook/src/docs/components/ColorPalette.tsx b/storybook/src/docs/components/ColorPalette.tsx
index af7698d652..be6f2e3c35 100644
--- a/storybook/src/docs/components/ColorPalette.tsx
+++ b/storybook/src/docs/components/ColorPalette.tsx
@@ -10,13 +10,13 @@ type ColorPaletteComponent = {
 } & ForwardRefExoticComponent<DivProps & RefAttributes<HTMLDivElement>>
 
 export const ColorPalette = forwardRef(({ children, ...restProps }: DivProps, ref: ForwardedRef<HTMLDivElement>) => (
-  <div {...restProps} ref={ref} className="amsterdam-storybook-color-palette">
+  <div {...restProps} ref={ref} className="ams-storybook-color-palette">
     {children}
   </div>
 )) as ColorPaletteComponent
 
 export const ColorPaletteSection = ({ children }: DivProps) => (
-  <div className="amsterdam-storybook-color-palette__section">{children}</div>
+  <div className="ams-storybook-color-palette__section">{children}</div>
 )
 
 type ColourPaletteTileProps = {
@@ -25,11 +25,11 @@ type ColourPaletteTileProps = {
 }
 
 export const ColorPaletteTile = ({ name, color }: ColourPaletteTileProps) => (
-  <div className="amsterdam-storybook-color-palette__tile">
-    <div className="amsterdam-storybook-color-palette__example" style={{ backgroundColor: color }} />
-    <dl className="sb-unstyled amsterdam-storybook-color-palette__description">
-      <dt className="amsterdam-storybook-color-palette__name">{name}</dt>
-      <dd className="amsterdam-storybook-color-palette__color">{color}</dd>
+  <div className="ams-storybook-color-palette__tile">
+    <div className="ams-storybook-color-palette__example" style={{ backgroundColor: color }} />
+    <dl className="sb-unstyled ams-storybook-color-palette__description">
+      <dt className="ams-storybook-color-palette__name">{name}</dt>
+      <dd className="ams-storybook-color-palette__color">{color}</dd>
     </dl>
   </div>
 )
diff --git a/storybook/src/docs/components/color-palette.css b/storybook/src/docs/components/color-palette.css
index d04e81c784..ffd76821a8 100644
--- a/storybook/src/docs/components/color-palette.css
+++ b/storybook/src/docs/components/color-palette.css
@@ -1,38 +1,38 @@
-.amsterdam-storybook-color-palette {
+.ams-storybook-color-palette {
   display: flex;
   flex-direction: column;
   gap: 2rem;
 }
 
-.amsterdam-storybook-color-palette__section {
+.ams-storybook-color-palette__section {
   align-items: start;
   display: grid;
   gap: 2rem;
   grid-template-columns: repeat(5, 1fr);
 }
 
-.amsterdam-storybook-color-palette__tile {
+.ams-storybook-color-palette__tile {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 }
 
-.amsterdam-storybook-color-palette__example {
+.ams-storybook-color-palette__example {
   aspect-ratio: 16 / 9;
   border: 1px solid rgb(0 0 0 / 12.5%);
   grid-area: example;
 }
 
-.amsterdam-storybook-color-palette__description,
-.amsterdam-storybook-color-palette__name,
-.amsterdam-storybook-color-palette__color {
+.ams-storybook-color-palette__description,
+.ams-storybook-color-palette__name,
+.ams-storybook-color-palette__color {
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
   padding-inline: 0;
 }
 
-.amsterdam-storybook-color-palette__description {
+.ams-storybook-color-palette__description {
   color: #000;
   column-gap: 1ch;
   display: flex;
@@ -41,10 +41,10 @@
   justify-content: space-between;
 }
 
-.amsterdam-storybook-color-palette__name {
+.ams-storybook-color-palette__name {
   font-weight: 800;
 }
 
-.amsterdam-storybook-color-palette__color {
+.ams-storybook-color-palette__color {
   text-align: end;
 }