diff --git a/storybook/src/docs/components/ColorPalette.tsx b/storybook/src/docs/components/ColorPalette.tsx
index 3c5c5875c7..c0fbfc8fde 100644
--- a/storybook/src/docs/components/ColorPalette.tsx
+++ b/storybook/src/docs/components/ColorPalette.tsx
@@ -1,38 +1,55 @@
 import './color-palette.css'
+import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 export type DivProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 const ColorPaletteRoot = forwardRef(({ children, ...restProps }: DivProps, ref: ForwardedRef<HTMLDivElement>) => (
-  <div {...restProps} ref={ref} className="ams-storybook-color-palette">
+  <div {...restProps} ref={ref} className="ams-docs-color-palette">
     {children}
   </div>
 ))
 
 ColorPaletteRoot.displayName = 'ColorPalette'
 
-const ColorPaletteSection = ({ children }: DivProps) => (
-  <div className="ams-storybook-color-palette__section">{children}</div>
+type ColorPaletteSwatchProps = {
+  color: Record<'100' | '300' | '600' | '900' | '1000', string>
+  name: string
+}
+
+const ColorPaletteSwatch = ({ color, name }: ColorPaletteSwatchProps) => (
+  <div className={clsx('ams-docs-color-swatch', `ams-docs-color-swatch--${name}`)}>
+    <code className="ams-docs-color-code">ams.brand.color.{name}</code>
+    {name === 'neutral' && <ColorPaletteTile color={color['100']} level="100" />}
+    <ColorPaletteTile color={color['300']} level="300" />
+    <ColorPaletteTile color={color['600']} level="600" />
+    <ColorPaletteTile color={color['900']} level="900" />
+    {name === 'neutral' && <ColorPaletteTile color={color['1000']} level="1000" />}
+  </div>
 )
 
-ColorPaletteSection.displayName = 'ColorPalette.Section'
+ColorPaletteSwatch.displayName = 'ColorPalette.Swatch'
 
 type ColorPaletteTileProps = {
-  color: string
-  name: string
+  color: string | undefined
+  level: string
 }
 
-const ColorPaletteTile = ({ name, color }: ColorPaletteTileProps) => (
-  <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>
+const ColorPaletteTile = ({ color, level }: ColorPaletteTileProps) => (
+  <div className={clsx('ams-docs-color-tile', `ams-docs-color-tile--${level}`)}>
+    {color && (
+      <>
+        <code className="ams-docs-color-code">{level}</code>
+        <div className="ams-docs-color-sample" style={{ backgroundColor: color }} />
+      </>
+    )}
   </div>
 )
 
 ColorPaletteTile.displayName = 'ColorPalette.Tile'
 
-export const ColorPalette = Object.assign(ColorPaletteRoot, { Section: ColorPaletteSection, Tile: ColorPaletteTile })
+export const ColorPalette = Object.assign(ColorPaletteRoot, {
+  Swatch: ColorPaletteSwatch,
+  Tile: ColorPaletteTile,
+})
diff --git a/storybook/src/docs/components/color-palette.css b/storybook/src/docs/components/color-palette.css
index f35df283c8..1d3999d40e 100644
--- a/storybook/src/docs/components/color-palette.css
+++ b/storybook/src/docs/components/color-palette.css
@@ -1,50 +1,35 @@
-.ams-storybook-color-palette {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
+.ams-docs-color-palette {
+  align-items: center;
+  display: grid;
+  gap: 4rem;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
 }
 
-.ams-storybook-color-palette__section {
-  align-items: start;
+.ams-docs-color-swatch {
   display: grid;
-  gap: 2rem;
+  gap: 0 2px;
   grid-template-columns: repeat(5, 1fr);
-}
 
-.ams-storybook-color-palette__tile {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+  > :nth-child(1) {
+    grid-column: 1 / -1;
+  }
 }
 
-.ams-storybook-color-palette__example {
-  aspect-ratio: var(--ams-aspect-ratio-x-wide);
-  border: 0.0625rem solid rgb(0 0 0 / 12.5%);
-  grid-area: example;
+.ams-docs-color-code {
+  display: block;
+  font-size: 13px;
+  padding-block-end: 0.5rem;
+  text-align: center;
 }
 
-.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;
+:not(.ams-docs-color-swatch--neutral) > .ams-docs-color-tile--600 {
+  grid-column: span 3;
 }
 
-.ams-storybook-color-palette__description {
-  color: #000;
-  column-gap: 1ch;
-  display: flex;
-  flex-wrap: wrap;
-  font-family: "Amsterdam Sans", "Arial", sans-serif;
-  justify-content: space-between;
-}
-
-.ams-storybook-color-palette__name {
-  font-weight: 800;
-}
+.ams-docs-color-sample {
+  block-size: 6rem;
 
-.ams-storybook-color-palette__color {
-  text-align: end;
+  .ams-docs-color-swatch--neutral > .ams-docs-color-tile--100 & {
+    box-shadow: inset 0 0 0 0.0625rem rgb(0 0 0 / 12.5%);
+  }
 }
diff --git a/storybook/src/foundation/design-tokens/colour.docs.mdx b/storybook/src/foundation/design-tokens/colour.docs.mdx
index e69dd0575b..20625e7bfb 100644
--- a/storybook/src/foundation/design-tokens/colour.docs.mdx
+++ b/storybook/src/foundation/design-tokens/colour.docs.mdx
@@ -3,39 +3,23 @@
 import tokens from "@amsterdam/design-system-tokens/dist/index.json";
 import { Meta } from "@storybook/blocks";
 import { ColorPalette } from "../../docs/components/ColorPalette";
-import { StatusBadge } from "../../docs/components/StatusBadge";
 
 <Meta title="Brand/Design Tokens/Colour" />
 
-<StatusBadge reason="The set of available colours and their names will change." />
-
 # Colour
 
-The basic colours of Amsterdam are white, red, and black.
-We have 8 additional colours and 3 shades of grey.
+Our 9 colours have 3 shades each.
+Neutrals come in 5 shades.
 
 <ColorPalette>
-  <ColorPalette.Section>
-    <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.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.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.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.Swatch color={tokens.ams.brand.color.red} name="red" />
+  <ColorPalette.Swatch color={tokens.ams.brand.color.azure} name="azure" />
+  <ColorPalette.Swatch color={tokens.ams.brand.color.blue} name="blue" />
+  <ColorPalette.Swatch color={tokens.ams.brand.color.yellow} name="yellow" />
+  <ColorPalette.Swatch color={tokens.ams.brand.color.lime} name="lime" />
+  <ColorPalette.Swatch color={tokens.ams.brand.color.green} name="green" />
+  <ColorPalette.Swatch color={tokens.ams.brand.color.orange} name="orange" />
+  <ColorPalette.Swatch color={tokens.ams.brand.color.magenta} name="magenta" />
+  <ColorPalette.Swatch color={tokens.ams.brand.color.purple} name="purple" />
+  <ColorPalette.Swatch color={tokens.ams.brand.color.neutral} name="neutral" />
 </ColorPalette>