diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
index 0047b60a68..0de5b0fb2e 100644
--- a/RELEASE_NOTES.md
+++ b/RELEASE_NOTES.md
@@ -8,13 +8,8 @@
 
 ### Non breaking UI changes
 
-- add possibility to disable rotation of the dropdown toggle icon on active state
-- add possibility to style bank-id button as secondary
-
 ## Testing
 
-- E2E tests for dropdown component
-
 ## Design System website
 
-- expand components preview containers to full screen (only in Topbar component for now)
+- Add the Playbook section in Identity
diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png
index cbdb9cafa5..b3ba3e5dfb 100644
Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-firefox-darwin.png
index ba2d5ad38b..db7d873cf6 100644
Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-firefox-darwin.png differ
diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png
index 0f83c264ae..541f85e6d9 100644
Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png differ
diff --git a/src/App/Home/index.js b/src/App/Home/index.js
index 0f64918a3f..098bd7b5c6 100644
--- a/src/App/Home/index.js
+++ b/src/App/Home/index.js
@@ -8,6 +8,7 @@ import Alert from "../components/Alert";
 
 const basename = process.env.basename;
 const brandTitle = process.env.brandTitle;
+const isSwedbankPay = process.env.isSwedbankPay;
 
 const Home = () => {
 	useEffect(() => {
@@ -39,61 +40,67 @@ const Home = () => {
 				</p>
 
 				<div className="row dg-cards-container mt-4">
-					{routes.map((route) => (
-						<React.Fragment key={route.title}>
-							<div
-								key={route.title}
-								className={
-									route.wideCard
-										? "w-100 order-5"
-										: "col-12 col-sm-6 col-lg-3 d-flex"
-								}
-							>
-								<Link
-									to={route.path}
-									className={`cards cards-primary${
-										route.wideCard ? " cards-wide m-3" : ""
-									}`}
+					{routes
+						.filter((route) =>
+							isSwedbankPay
+								? !route.title.toLowerCase().includes("patterns")
+								: !route.title.toLowerCase().includes("playbook")
+						)
+						.map((route) => (
+							<React.Fragment key={route.title}>
+								<div
+									key={route.title}
+									className={
+										route.wideCard
+											? "w-100 order-5"
+											: "col-12 col-sm-6 col-lg-3 d-flex"
+									}
 								>
-									{route.wideCard ? (
-										<div className="cards-content flex-row align-items-center m-0 w-100">
-											<i
-												className="material-icons material-icons-outlined mr-3 v-flip"
-												aria-hidden="true"
-											>
-												{route.icon.name}
-											</i>
-											<span className="h4 mb-0">{route.entryCardText}</span>
-											<i
-												className="material-icons material-icons-outlined ml-auto"
-												aria-hidden="true"
-											>
-												arrow_forward
-											</i>
-										</div>
-									) : (
-										<div>
-											<div className="cards-icon">
+									<Link
+										to={route.path}
+										className={`cards cards-primary${
+											route.wideCard ? " cards-wide m-3" : ""
+										}`}
+									>
+										{route.wideCard ? (
+											<div className="cards-content flex-row align-items-center m-0 w-100">
 												<i
-													className="material-icons-outlined"
+													className="material-icons material-icons-outlined mr-3 v-flip"
 													aria-hidden="true"
 												>
 													{route.icon.name}
 												</i>
+												<span className="h4 mb-0">{route.entryCardText}</span>
+												<i
+													className="material-icons material-icons-outlined ml-auto"
+													aria-hidden="true"
+												>
+													arrow_forward
+												</i>
 											</div>
-											<div className="cards-content">
-												<span className="h4">{route.title}</span>
-												<span>{route.entryCardText}</span>
+										) : (
+											<div>
+												<div className="cards-icon">
+													<i
+														className="material-icons-outlined"
+														aria-hidden="true"
+													>
+														{route.icon.name}
+													</i>
+												</div>
+												<div className="cards-content">
+													<span className="h4">{route.title}</span>
+													<span>{route.entryCardText}</span>
+												</div>
+												<i className="material-icons" aria-hidden="true">
+													arrow_forward
+												</i>
 											</div>
-											<i className="material-icons" aria-hidden="true">
-												arrow_forward
-											</i>
-										</div>
-									)}
-								</Link>
-							</div>
-						</React.Fragment>
-					))}
+										)}
+									</Link>
+								</div>
+							</React.Fragment>
+						))}
 					<div className="col-12 col-sm-6 col-lg-3 d-flex">
 						<Link to={"/utilities"} className="cards cards-primary">
 							<div className="cards-icon">
diff --git a/src/App/Identity/identity/Typography/typography.e2e.spec.js b/src/App/Identity/identity/Typography/typography.e2e.spec.js
index 5946b17f0d..3d98b54311 100644
--- a/src/App/Identity/identity/Typography/typography.e2e.spec.js
+++ b/src/App/Identity/identity/Typography/typography.e2e.spec.js
@@ -8,16 +8,30 @@ test("Typography page exist", async ({ page }) => {
 			name: "Identity Learn about our fundamental principles",
 		})
 		.click();
-	await expect(
-		page.getByRole("link", {
-			name: "Typography",
-		})
-	).toHaveCount(page.viewportSize().width < 991 ? 1 : 2);
-	await page
-		.getByRole("link", {
-			name: "Typography See our fronts and sizing arrow_forward",
-		})
-		.click();
+
+	if (page.viewportSize().width > 991) {
+		await expect(
+			page.getByRole("link", {
+				name: "Typography",
+			})
+		).toHaveCount(1);
+		await page.getByRole("link", { name: "Typography" }).click();
+	} else {
+		await expect(
+			page.getByRole("link", {
+				name: "Typography",
+			})
+		).toHaveCount(0);
+		await page.getByLabel("Open menu").click();
+		await page.getByRole("button", { name: "Identity" }).click();
+
+		await expect(
+			page.getByRole("link", {
+				name: "Typography",
+			})
+		).toHaveCount(1);
+		await page.getByRole("link", { name: "Typography" }).click();
+	}
 });
 
 const viewportsVariants = [
diff --git a/src/App/Identity/index.js b/src/App/Identity/index.js
index 2b91a626df..fff8f2897c 100644
--- a/src/App/Identity/index.js
+++ b/src/App/Identity/index.js
@@ -3,7 +3,7 @@ import React from "react";
 import { RenderPage } from "../utils";
 
 const Core = () => (
-	<RenderPage path="/identity" initPath="/identity/identity" />
+	<RenderPage path="/accessibility" initPath="/identity/accessibility" />
 );
 
 export default Core;
diff --git a/src/App/Playbook/content/DesignVision/index.js b/src/App/Playbook/content/DesignVision/index.js
new file mode 100644
index 0000000000..b4bb630bc3
--- /dev/null
+++ b/src/App/Playbook/content/DesignVision/index.js
@@ -0,0 +1,443 @@
+import React from "react";
+import { DocContainer } from "@docutils";
+
+const basename = process.env.basename;
+
+const VisionStatement = () => (
+	<section>
+		<h2 id="vision-statement">Vision statement</h2>
+		<p>
+			To create simple, intuitive design that wows you with an unbeatable
+			experience.
+		</p>
+		<div className="container px-sm-0 mt-4">
+			<div className="row">
+				<div className="col-md-4">
+					<h3>Contextual</h3>
+					<p>
+						Relevant and guiding experience for each visitor, on every platform.
+					</p>
+				</div>
+				<div className="col-md-4">
+					<h3>Easy</h3>
+					<p>Easy to use, administrate, navigate and convert.</p>
+				</div>
+				<div className="col-md-4">
+					<h3>Fast</h3>
+					<p>Designed and built for optimal experience and performance.</p>
+				</div>
+			</div>
+			<div className="row mt-3">
+				<div className="col-md-4">
+					<h3>Impactful</h3>
+					<p>Generating business breakthroughs and strong brand presence.</p>
+				</div>
+				<div className="col-md-4">
+					<h3>Scalable</h3>
+					<p>Growing the product portfolio of Swedbank Pay.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+);
+
+const VisionBoard = () => (
+	<section>
+		<h2 id="vision-board">Vision board</h2>
+		<p>Scalable Growing the product portfolio of Swedbank Pay.</p>
+
+		<div className="d-flex">
+			<video
+				playsInline
+				autoPlay
+				muted
+				loop
+				style={{ aspectRatio: "710 / 437" }}
+				width={710}
+				height={437}
+				poster={`${basename}img/documentation/playbook/playbook-design-vision-vision-board.avif`}
+				className="w-100 h-auto"
+			>
+				<source
+					src={`${basename}img/documentation/playbook/playbook-design-vision-vision-board-av1.mp4`}
+					type="video/mp4; codecs=av01.0.05M.08,opus"
+				/>
+				<source
+					src={`${basename}img/documentation/playbook/playbook-design-vision-vision-board.mp4`}
+					type="video/mp4"
+				/>
+			</video>
+		</div>
+	</section>
+);
+
+const ChunkyFriendly = () => (
+	<section>
+		<h2 id="chunky-and-friendly">Chunky and friendly</h2>
+		<p>
+			By turning up the size on elements in the design as well as increasing
+			white space and padding, we allow for a more visually prominent and easily
+			tappable or clickable interface. It conveys a sense of space in the
+			design, enhancing usability and readability.
+		</p>
+
+		<div
+			className="container px-sm-0 playbook playbook-mozaic"
+			style={{ radius: "2px" }}
+		>
+			<div className="row d-none d-sm-flex">
+				<div className="col-sm">
+					<img
+						src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-1.png`}
+						alt="Playbook illustration"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-sm">
+					<img
+						src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-2.png`}
+						alt="Playbook illustration"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-sm">
+					<img
+						src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-3.png`}
+						alt="Playbook illustration"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+			<div className="row d-sm-none">
+				<div className="col-sm">
+					<img
+						src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-1.png`}
+						alt="Playbook illustration"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-sm">
+					<img
+						src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-2.png`}
+						alt="Playbook illustration"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+		</div>
+	</section>
+);
+
+const BoldTypography = () => (
+	<section id="bold-typography">
+		<h2 id="bold-typography-with-personality">
+			Bold typography with personality
+		</h2>
+		<p>
+			We like to play with the size and placement of a headline or main message
+			to create a more engaging expression, making the user more likely to read
+			the text. It creates a visual anchor to the page when we have this large
+			and highly contrasting title.
+		</p>
+
+		<div className="container px-sm-0 playbook">
+			<div
+				className="row ratio-responsive-row justify-content-between mx-0"
+				style={{ "--row-height": 163, "--row-width": 702 }}
+			>
+				<div className="col-sm px-0">
+					<img
+						src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-1.png`}
+						className="w-100"
+						alt="Playbook illustration"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-sm px-0">
+					<img
+						src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-2.png`}
+						className="w-100"
+						alt="Playbook illustration"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-sm px-0">
+					<img
+						src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-3.png`}
+						className="w-100"
+						alt="Playbook illustration"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-sm px-0">
+					<img
+						src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-4.png`}
+						className="w-100"
+						alt="Playbook illustration"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+		</div>
+	</section>
+);
+
+const DelicateLines = () => (
+	<section>
+		<h2 id="delicate-lines">Delicate lines</h2>
+		<p>
+			Together with the bold typography and solid colors, we use thin lines for
+			illustrations. When we want the illustration to blend into the background
+			and not be in focus, we only use the thin lines. When we want it to stand
+			out, we combine it with larger solid shapes or type.
+		</p>
+		<div className="container px-sm-0 playbook">
+			<div className="grid-row delicate-lines">
+				<img
+					src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-1.png`}
+					alt="Playbook illustration"
+					loading="lazy"
+				/>
+				<img
+					src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-2.png`}
+					alt="Playbook illustration"
+					loading="lazy"
+				/>
+				<img
+					src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-3.png`}
+					alt="Playbook illustration"
+					loading="lazy"
+				/>
+				<img
+					src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-4.png`}
+					alt="Playbook illustration"
+					loading="lazy"
+				/>
+				<img
+					src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-5.png`}
+					alt="Playbook illustration"
+					loading="lazy"
+				/>
+				<img
+					src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-6.png`}
+					alt="Playbook illustration"
+					loading="lazy"
+				/>
+			</div>
+		</div>
+	</section>
+);
+
+const Rounded = () => (
+	<section>
+		<h2 id="rounded">Rounded</h2>
+		<p>
+			Swedbank Pay is your best friend in handling finances, curating
+			information and serving you what you need. The UI should reflect this
+			friendliness, and does so with rounded corners and soft shapes.
+		</p>
+		<div className="container px-sm-0 playbook d-none d-sm-flex">
+			<div
+				className="row ratio-responsive-row d-flex justify-content-between mx-0"
+				style={{ "--row-height": 174, "--row-width": 710 }}
+			>
+				<div className="col-sm">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-1.png`}
+						alt="illustration swedbankpay playbook rounded"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-sm">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-2.png`}
+						alt="illustration swedbankpay playbook rounded"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-sm">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-3.png`}
+						alt="illustration swedbankpay playbook rounded"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-sm">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-4.png`}
+						alt="illustration swedbankpay playbook rounded"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+		</div>
+		<div className="container px-0 playbook d-sm-none">
+			<div className="row ratio-responsive-row d-flex justify-content-between mx-0">
+				<div className="col-12 px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-mobile-1.png`}
+						alt="illustration swedbankpay playbook rounded"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-5 object-fit-cover px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-mobile-2.png`}
+						alt="illustration swedbankpay playbook rounded"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-5 object-fit-cover px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-mobile-3.png`}
+						alt="illustration swedbankpay playbook rounded"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-12 px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-mobile-4.png`}
+						alt="illustration swedbankpay playbook rounded"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+		</div>
+	</section>
+);
+
+const Colors = () => (
+	<section>
+		<h2 id="colors">Colors</h2>
+		<p>
+			<strong>Primary brand and brand accent colors:</strong> The primary color
+			of Swedbank Pay is yellow, which is used to create a unified appearance
+			and visual recognition. Yellow is an energetic and vibrant color and this
+			matches the brand of Swedbank Pay. In addition, we use a selection of
+			colors from Swedbank&apos;s color palette.
+		</p>
+		<p>
+			<strong>Functional, text, background and system colors:</strong> These are
+			supplementary colors that contrast or complement the primary ones. We aim
+			to stay monochromatic, keeping a view within one hue. But on occasion we
+			combine the hues by bringing in a yellow or orange item to hint at the
+			Swedbank Pay brand.
+		</p>
+		<p>
+			<strong>Color pool:</strong> Pick from this pool when more colors are
+			needed, rather than making up new ones.
+		</p>
+		<div
+			className="container playbook-mozaic playbook-glued-grid"
+			style={{ "--gap": "0" }}
+		>
+			<div className="row">
+				<div className="col-sm px-0">
+					<img
+						className="w-100 shift-right-1"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-1.png`}
+						alt="illustration swedbankpay playbook colors"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-sm px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-2.png`}
+						alt="illustration swedbankpay playbook colors"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-sm px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-3.png`}
+						alt="illustration swedbankpay playbook colors"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+			<div className="row">
+				<div className="col-sm px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-4.png`}
+						alt="illustration swedbankpay playbook colors"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-sm px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-5.png`}
+						alt="illustration swedbankpay playbook colors"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-sm px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-6.png`}
+						alt="illustration swedbankpay playbook colors"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+			<div className="row">
+				<div className="col-sm px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-7.png`}
+						alt="illustration swedbankpay playbook colors"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-sm px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-8.png`}
+						alt="illustration swedbankpay playbook colors"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col-sm px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-design-vision-colors-9.png`}
+						alt="illustration swedbankpay playbook colors"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+		</div>
+	</section>
+);
+
+const DesignVision = () => (
+	<DocContainer>
+		<p className="lead">
+			Design is more than just looks – it&apos;s our shared language of
+			experience and function. Every piece matters, and together, they form our
+			product&apos;s story. We&apos;re here to make design clear and relatable
+			for everyone in our team. By understanding and embracing it, we all
+			contribute to a unified and standout product journey.
+		</p>
+		<VisionStatement />
+		<VisionBoard />
+		<ChunkyFriendly />
+		<BoldTypography />
+		<DelicateLines />
+		<Rounded />
+		<Colors />
+	</DocContainer>
+);
+
+export default DesignVision;
diff --git a/src/App/Playbook/content/Playbook/index.js b/src/App/Playbook/content/Playbook/index.js
new file mode 100644
index 0000000000..60c1468651
--- /dev/null
+++ b/src/App/Playbook/content/Playbook/index.js
@@ -0,0 +1,103 @@
+import React from "react";
+import { DocContainer } from "@docutils";
+import { Link } from "react-router-dom";
+import overviewList from "@src/App/routes/playbook";
+
+const basename = process.env.basename;
+const brandTitle = process.env.brandTitle;
+
+const WhyNeedPlaybook = () => (
+	<section>
+		<h2 id="why-need-playbook">Why do we need a Playbook?</h2>
+		<p>
+			We’ve created this playbook so that every interface and element will tell
+			a part of our story. Whether you’re designing a new interface or crafting
+			a digital campaign, let it be your guide to creating experiences that
+			resonate.
+		</p>
+		<div className="container px-0 mt-5">
+			<div className="row">
+				<div className="col-md">
+					<h3>A north star for visual design</h3>
+					<p>
+						When new products are created and new designers onboarded, we want a
+						natural evolution while staying true to our spirit. By creating a
+						vision board with the look and feel of Swedbank Pay, we always have
+						a source of truth and consistency.
+					</p>
+				</div>
+				<div className="col-md">
+					<h3>Principles that inspire content</h3>
+					<p>
+						Our design principles are rooted in understanding human behavior,
+						evoking emotions and guiding actions. As such, they can be used as a
+						fresh lens through which to view campaigns, content and strategy.
+					</p>
+				</div>
+			</div>
+
+			<div className="row">
+				<div className="col-md">
+					<h3>Dynamic design</h3>
+					<p>
+						A static design system can be limiting when creating a branch of
+						products. By making certain aspects of the system dynamic, we allow
+						for a broader spectrum of products while still monitoring the
+						“geist” – our spirit.
+					</p>
+				</div>
+				<div className="col-md">
+					<h3>Fostering the evolution of creativity</h3>
+					<p>
+						By defining and locking in the spirit of the company, we make it
+						easier to comfortably push our ideas forward. When you know the
+						outer frame, it’s easier to design and be creative within that
+						frame.
+					</p>
+				</div>
+			</div>
+		</div>
+	</section>
+);
+
+const Index = () => (
+	<section>
+		<h2 id="index">Index</h2>
+		<div className="playbook-overview">
+			{overviewList[0].routes.slice(1).map((card, i) => (
+				<Link
+					key={card.title}
+					to={`../${card.path}`}
+					className="cards cards-secondary cards-wide"
+				>
+					<div className="cards-content m-0">
+						<span className="h3">{card.title}</span>
+						<span>{card.text}</span>
+					</div>
+					<i className="material-icons">arrow_forward</i>
+				</Link>
+			))}
+		</div>
+	</section>
+);
+
+const Playbook = () => (
+	<DocContainer>
+		<p className="lead">
+			Every touchpoint, every interaction and visual element plays a role in
+			shaping our narrative and relationship with our customers. Welcome to our
+			Playbook – a guide that demystifies the world of design and UI.
+		</p>
+		<div className="d-flex flex-column align-items-center my-5">
+			<img
+				src={`${basename}img/documentation/playbook/playbook-illustration-intro-swedbankpay.jpg`}
+				className="w-100"
+				alt="Playbook illustration with the Swedbankpay branding"
+			/>
+		</div>
+		<WhyNeedPlaybook />
+		<Index />
+	</DocContainer>
+);
+
+export default Playbook;
diff --git a/src/App/Playbook/content/Principles/index.js b/src/App/Playbook/content/Principles/index.js
new file mode 100644
index 0000000000..779cd122f7
--- /dev/null
+++ b/src/App/Playbook/content/Principles/index.js
@@ -0,0 +1,331 @@
+import React from "react";
+import { DocContainer } from "@docutils";
+
+const basename = process.env.basename;
+
+const Simplicity = () => (
+	<section className="mt-5">
+		<h2 id="simplicity">Always strive for simplicity</h2>
+		<p>
+			By streamlining design elements and interactions and removing unnecessary
+			complexity, we empower users to effortlessly find information and
+			accomplish tasks. “Perfection is not reached when there is nothing left to
+			add, but when there is nothing left to take away.”
+		</p>
+		<h3>Clarity and focus</h3>
+		<div className="container">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
+					<p className="font-italic text-muted mb-2">
+						How many focus points are visible on screen?
+					</p>
+					<p className="mb-0">
+						Distill complex ideas into elegant solutions. Our goal is for the
+						user to find information easily and complete tasks with minimal
+						effort.
+					</p>
+				</div>
+				<div className="col-sm-4 px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-principles-simplicity-clarity.png`}
+						alt="illustration swedbankpay playbook principles"
+					/>
+				</div>
+			</div>
+		</div>
+		<h3>Consistency</h3>
+		<div className="container">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
+					<p className="font-italic text-muted mb-2">
+						What components can be reused?
+					</p>
+					<p className="mb-0">
+						No need to reinvent the wheel – use existing components as often as
+						possible. Consistency enhances familiarity and allows users to
+						navigate our ecosystem confidently.
+					</p>
+				</div>
+				<div className="col-sm-4 px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-principles-simplicity-consistency.png`}
+						alt="illustration swedbankpay playbook principles"
+					/>
+				</div>
+			</div>
+		</div>
+		<h3>Deliberate reduction</h3>
+		<div className="container">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
+					<p className="font-italic text-muted mb-2">
+						Does every element on screen add value?
+					</p>
+					<p className="mb-0">
+						Reduce unnecessary elements, features, and interactions that may
+						overwhelm or confuse. Keep the design streamlined and lightweight,
+						providing the user with precisely what they need, exactly when they
+						need it.
+					</p>
+				</div>
+				<div className="col-sm-4 px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-principles-simplicity-reduction.png`}
+						alt="illustration swedbankpay playbook principles"
+					/>
+				</div>
+			</div>
+		</div>
+	</section>
+);
+
+const FriendlyGuide = () => (
+	<section className="mt-5">
+		<h2 id="friendly-guide">Be a friendly guide</h2>
+		<p>
+			Guide users and make every interaction effortless. When elements are
+			scaled, placed, and contrasted based on their importance, we pave an
+			intuitive path for our users. Always champion their success.
+		</p>
+		<h3>Information order</h3>
+		<div className="container">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
+					<p className="font-italic text-muted mb-2">
+						Is vital information and action well-organized?
+					</p>
+					<p className="mb-0">
+						Arrange content hierarchically and group it smartly. Simplify
+						complex data to foster visual clarity, aiding user comprehension.
+					</p>
+				</div>
+				<div className="col-sm-4 px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-principles-friendly-order.png`}
+						alt="illustration swedbankpay playbook principles"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+		</div>
+		<h3>Visual hierarchy</h3>
+		<div className="container">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
+					<p className="font-italic text-muted mb-2">
+						Is the right element emphasized?
+					</p>
+					<p className="mb-0">
+						Use scale, placement and color based on their importance and
+						relevance. Create visual cues that guide users to prioritize and
+						understand information effortlessly.
+					</p>
+				</div>
+				<div className="col-sm-4 px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-principles-friendly-hierarchy.png`}
+						alt="illustration swedbankpay playbook principles"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+		</div>
+		<h3>Reveal as needed</h3>
+		<div className="container">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
+					<p className="font-italic text-muted mb-2">
+						Do we really need this piece of info on this screen?
+					</p>
+					<p className="mb-0">
+						Use progressive disclosure to present core content, letting users
+						delve deeper as they wish, avoiding information overload.
+					</p>
+				</div>
+				<div className="col-sm-4 px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-principles-friendly-reveal.png`}
+						alt="illustration swedbankpay playbook principles"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+		</div>
+	</section>
+);
+
+const DelightUnexpected = () => (
+	<section className="mt-5">
+		<h2 id="delight-with-unexpected">Delight with the unexpected</h2>
+		<p>
+			Create interfaces that go beyond usability and aim to spark joy. Enhance
+			the overall experience and strengthen the brand personality. We want to
+			leave room to push expressive design, while still staying true to the
+			Swedbank Pay look and feel.
+		</p>
+		<h3>Surprise and engage</h3>
+		<div className="container">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
+					<p className="mb-0">
+						Dare to be different. Surprise users with unique design elements, be
+						it an animation or a splash of color. Balance visuals based on what
+						you want to convey. Asymmetry is dynamic and engaging, creating a
+						sense of energy and movement. Symmetry is quiet and static.
+					</p>
+				</div>
+				<div className="col-sm-4 px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-principles-unexpected-surprise.png`}
+						alt="illustration swedbankpay playbook principles"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+		</div>
+		<h3>Unified creative vision</h3>
+		<div className="container">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
+					<p className="mb-0">
+						While our design system ensures brand consistency, individual
+						products can have their creative flair. That said, they should
+						always feel part of the Swedbank Pay family. Refer to our Vision
+						board for guidance.
+					</p>
+				</div>
+				<div className="col-sm-4 px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-principles-unexpected-unified.png`}
+						alt="illustration swedbankpay playbook principles"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+		</div>
+		<h3>Thoughtful motion design</h3>
+		<div className="container">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
+					<p className="mb-0">
+						Integrate subtle, meaningful micro-interactions. These tiny,
+						animated touches can elevate user engagement, adding responsiveness
+						and character.
+					</p>
+				</div>
+				<div className="col-sm-4 px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-principles-unexpected-motion.png`}
+						alt="illustration swedbankpay playbook principles"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+		</div>
+	</section>
+);
+
+const Inclusive = () => (
+	<section className="mt-5">
+		<h2 id="inclusive">Inclusive by design</h2>
+		<p>
+			Prioritize accessibility and inclusivity. By reducing cognitive effort,
+			enhancing visual clarity, and ensuring compatibility with assistive tools,
+			we craft experiences for everyone.
+		</p>
+		<h3>Simplicity is key</h3>
+		<div className="container">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
+					<p className="font-italic text-muted mb-2">
+						How quickly does the user understand a screen?
+					</p>
+					<p className="mb-0">
+						Less is more. Minimize clutter and cognitive effort, enabling users
+						to absorb and remember information effortlessly.
+					</p>
+				</div>
+				<div className="col-sm-4 px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-principles-inclusive-simplicity.png`}
+						alt="illustration swedbankpay playbook principles"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+		</div>
+		<h3>Visual contrast and distinction</h3>
+		<div className="container">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
+					<p className="font-italic text-muted mb-2">
+						Does the design meet accessibility standards?
+					</p>
+					<p className="mb-0">
+						Ensure elements are discernible, with strong color contrasts,
+						legible fonts, and a well-defined visual hierarchy.
+					</p>
+				</div>
+				<div className="col-sm-4 px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-principles-inclusive-contrast.png`}
+						alt="illustration swedbankpay playbook principles"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+		</div>
+		<h3>Assistive tech-friendly</h3>
+		<div className="container">
+			<div className="row align-items-center">
+				<div className="col-sm-8 px-0">
+					<p className="font-italic text-muted mb-2">
+						Are interfaces compatible with assistive tools?
+					</p>
+					<p className="mb-0">
+						Make sure your interface can be easily used with screen readers,
+						voice commands, keyboard and other assistive devices.
+					</p>
+				</div>
+				<div className="col-sm-4 px-0">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-principles-inclusive-assistive.png`}
+						alt="illustration swedbankpay playbook principles"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+		</div>
+	</section>
+);
+
+const Principles = () => (
+	<DocContainer>
+		<p className="lead">
+			Our design principles have been created with design and UI in mind, but
+			their essence is universal. They exist to make sure that the message is
+			not just heard, but felt.
+			<br />
+			<br />
+			The 4 design principles of Swedbank Pay:
+		</p>
+		<Simplicity />
+		<FriendlyGuide />
+		<DelightUnexpected />
+		<Inclusive />
+	</DocContainer>
+);
+
+export default Principles;
diff --git a/src/App/Playbook/content/Profiles/index.js b/src/App/Playbook/content/Profiles/index.js
new file mode 100644
index 0000000000..77f09320bc
--- /dev/null
+++ b/src/App/Playbook/content/Profiles/index.js
@@ -0,0 +1,379 @@
+import React from "react";
+import { DocContainer } from "@docutils";
+import { Link } from "react-router-dom";
+
+const basename = process.env.basename;
+
+const HowToUse = () => (
+	<section className="mt-5">
+		<h2 id="how-to-use">How to use the design profiles</h2>
+		<ol>
+			<li className="py-3">
+				<h3>Reflect:</h3>
+				<ul>
+					<li>
+						Who is the user? Are they a customer already or are they having
+						their first meeting with the brand?
+					</li>
+					<li>
+						In what mode are they when entering the view you’re designing? Are
+						they trying to complete a task or just getting to know the service?
+					</li>
+				</ul>
+			</li>
+			<li className="py-3">
+				<h3>Identify:</h3>
+				<ul>
+					<li>
+						Does the product or message fit just one profile, or different ones
+						depending on screen or section?
+					</li>
+				</ul>
+			</li>
+			<li className="py-3">
+				<h3>Become inspired:</h3>
+				<ul>
+					<li>
+						Look at the examples provided below and in our{" "}
+						<Link to={`./showroom}`}>showroom</Link> and become inspired. Think
+						of the profiles like moodboards if you like.
+					</li>
+				</ul>
+			</li>
+		</ol>
+	</section>
+);
+
+const DesignProfiles = () => (
+	<section className="mt-5">
+		<h2 id="design-profiles">The design profiles:</h2>
+		<div className="container px-sm-0">
+			<div className="row">
+				<div className="col">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-profiles-profile-1.png`}
+						alt="content"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-profiles-profile-2.png`}
+						alt="Light UI"
+						loading="lazy"
+					/>
+				</div>
+				<div className="col">
+					<img
+						className="w-100"
+						src={`${basename}img/documentation/playbook/playbook-profiles-profile-3.png`}
+						alt="Expert UI"
+						loading="lazy"
+					/>
+				</div>
+			</div>
+		</div>
+	</section>
+);
+
+const Content = () => (
+	<section className="mt-5">
+		<h2 id="content">Content</h2>
+		<p>
+			Here, our focus is on sparking curiosity and engagement. We aim to inspire
+			users to explore and discover through communication jam-packed with
+			expressive design and delightful motion, making every interaction an
+			adventure.
+			<br />
+			<strong>User persona:</strong> Curious explorers, seeking inspiration.
+			<br />
+			<strong>UI objective:</strong> Spark curiosity, engage users, and invite
+			exploration.
+			<br />
+			<strong>Design approach:</strong> Expressive and visually engaging UI with
+			a focus on personality. Utilize delightful motion design elements to
+			surprise and captivate users.
+		</p>
+		<div className="container px-5">
+			<figure>
+				<div
+					className="row mt-5 playbook-mozaic align-items-stretch"
+					style={{ radius: "2px" }}
+				>
+					<div className="col-sm-6 px-0">
+						<img
+							className="w-100 shift-right-1 h-100 object-fit-cover"
+							src={`${basename}img/documentation/playbook/playbook-profiles-content-1.png`}
+							alt="illustration swedbankpay playbook profiles"
+							loading="lazy"
+						/>
+					</div>
+					<div className="col-sm-6 px-0 d-flex flex-column">
+						<video
+							playsInline
+							autoPlay
+							muted
+							loop
+							width={278}
+							height={152}
+							poster={`${basename}img/documentation/playbook/playbook-profiles-content-2.avif`}
+							className="w-100 h-100 object-fit-cover"
+						>
+							<source
+								src={`${basename}img/documentation/playbook/playbook-profiles-content-2-av1.mp4`}
+								type="video/mp4; codecs=av01.0.05M.08,opus"
+							/>
+							<source
+								src={`${basename}img/documentation/playbook/playbook-profiles-content-2.mp4`}
+								type="video/mp4"
+							/>
+						</video>
+					</div>
+				</div>
+				<figcaption className="text-center mt-2">
+					An exploration of marketing material for the terminal, summer 2023.
+				</figcaption>
+			</figure>
+			<figure>
+				<div className="row mt-5 justify-content-between">
+					<div className="col-8 pl-0">
+						<img
+							className="w-100"
+							src={`${basename}img/documentation/playbook/playbook-profiles-content-3.png`}
+							alt="illustration swedbankpay playbook profiles"
+							loading="lazy"
+						/>
+					</div>
+					<div className="col-3 pr-0">
+						<img
+							className="w-100"
+							src={`${basename}img/documentation/playbook/playbook-profiles-content-4.png`}
+							alt="illustration swedbankpay playbook profiles"
+							loading="lazy"
+						/>
+					</div>
+				</div>
+				<figcaption className="text-center mt-2">
+					Concept work & Presentation MEX
+				</figcaption>
+			</figure>
+		</div>
+	</section>
+);
+
+const LightUI = () => (
+	<section className="mt-5">
+		<h2 id="light-ui">Light UI</h2>
+		<p>
+			Designed to assist and guide novice users with ease. We prioritize
+			simplicity, clarity, and user-friendly features to ensure that everyone,
+			regardless of their experience level, feels supported.
+			<br />
+			<strong>User persona:</strong> Novice user or someone with limited time
+			and cognitive load.
+			<br />
+			<strong>UI objective:</strong> Provide clear assistance, support, and
+			guidance.
+			<br />
+			<strong>Design approach:</strong> Present bite-sized information, keeping
+			things simple and highly focused. Promote clarity and user-friendly
+			features.
+		</p>
+		<div className="container px-5">
+			<figure>
+				<div className="row justify-content-center align-items-center">
+					<video
+						playsInline
+						autoPlay
+						muted
+						loop
+						style={{ aspectRatio: "16 / 9" }}
+						height={399}
+						width={710}
+						poster={`${basename}img/documentation/playbook/playbook-showroom-1.avif`}
+					>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-1-av1.mp4`}
+							type="video/mp4; codecs=av01.0.05M.08,opus"
+						/>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-1.mp4`}
+							type="video/mp4"
+						/>
+					</video>
+				</div>
+				<figcaption className="text-center mt-2">
+					The terminal design should be easy and quick to use.
+				</figcaption>
+			</figure>
+			<figure>
+				<div className="row mt-5">
+					<div className="col-6 col-sm-3">
+						<picture>
+							<source
+								type="image/avif"
+								srcSet={`${basename}img/documentation/playbook/playbook-profiles-lightui-1.avif`}
+							/>
+							<img
+								className="w-100"
+								src={`${basename}img/documentation/playbook/playbook-profiles-lightui-1.png`}
+								alt="illustration swedbankpay playbook profiles"
+								loading="lazy"
+							/>
+						</picture>
+					</div>
+					<div className="col-6 col-sm-3">
+						<picture>
+							<source
+								type="image/avif"
+								srcSet={`${basename}img/documentation/playbook/playbook-profiles-lightui-2.avif`}
+							/>
+							<img
+								className="w-100"
+								src={`${basename}img/documentation/playbook/playbook-profiles-lightui-2.png`}
+								alt="illustration swedbankpay playbook profiles"
+								loading="lazy"
+							/>
+						</picture>
+					</div>
+					<div className="col-6 col-sm-3 mt-4 mt-sm-0">
+						<picture>
+							<source
+								type="image/avif"
+								srcSet={`${basename}img/documentation/playbook/playbook-profiles-lightui-3.avif`}
+							/>
+							<img
+								className="w-100"
+								src={`${basename}img/documentation/playbook/playbook-profiles-lightui-3.png`}
+								alt="illustration swedbankpay playbook profiles"
+								loading="lazy"
+							/>
+						</picture>
+					</div>
+					<div className="col-6 col-sm-3 mt-4 mt-sm-0">
+						<picture>
+							<source
+								type="image/avif"
+								srcSet={`${basename}img/documentation/playbook/playbook-profiles-lightui-4.avif`}
+							/>
+							<img
+								className="w-100"
+								src={`${basename}img/documentation/playbook/playbook-profiles-lightui-4.png`}
+								alt="illustration swedbankpay playbook profiles"
+								loading="lazy"
+							/>
+						</picture>
+					</div>
+				</div>
+				<figcaption className="text-center mt-2">
+					A new day is a ‘pocket app’ for business owners on-the-go, providing
+					glanceable data and insights.
+				</figcaption>
+			</figure>
+		</div>
+	</section>
+);
+
+const ExpertUI = () => (
+	<section className="mt-5">
+		<h2 id="expert-ui">Expert UI</h2>
+		<p>
+			Made for task-oriented, experienced users. Emphasis is placed on
+			efficiency and utility, with streamlined actions and information in good
+			order, making it a powerful tool for experts to get things done.
+			<br />
+			<strong>User persona:</strong> Experts who are task-oriented and focused.
+			<br />
+			<strong>UI objective:</strong> Enable efficient task completion and
+			utility.
+			<br />
+			<strong>Design approach:</strong> Prioritize clear and actionable
+			interfaces with an emphasis on efficient information density. Streamline
+			actions and workflows for experienced users.
+		</p>
+		<div className="container px-5">
+			<figure>
+				<div className="row mt-5 justify-content-center">
+					<div className="col d-flex justify-content-center">
+						<img
+							className="w-100"
+							src={`${basename}img/documentation/playbook/playbook-profiles-expert-1.png`}
+							alt="illustration swedbankpay playbook profiles"
+							loading="lazy"
+						/>
+					</div>
+				</div>
+				<figcaption className="text-center mt-2">Merchant portal</figcaption>
+			</figure>
+		</div>
+		<div className="container px-5">
+			<figure>
+				<div
+					className="row mt-5 justify-content-center"
+					style={{ "--row": "10px" }}
+				>
+					<div className="col-6 col-sm-3">
+						<img
+							className="w-100"
+							src={`${basename}img/documentation/playbook/playbook-profiles-paybylink-1.png`}
+							alt="illustration swedbankpay playbook profiles"
+							loading="lazy"
+						/>
+					</div>
+					<div className="col-6 col-sm-3">
+						<img
+							className="w-100"
+							src={`${basename}img/documentation/playbook/playbook-profiles-paybylink-2.png`}
+							alt="illustration swedbankpay playbook profiles"
+							loading="lazy"
+						/>
+					</div>
+					<div className="col-6 col-sm-3 mt-4 mt-sm-0">
+						<img
+							className="w-100"
+							src={`${basename}img/documentation/playbook/playbook-profiles-paybylink-3.png`}
+							alt="illustration swedbankpay playbook profiles"
+							loading="lazy"
+						/>
+					</div>
+					<div className="col-6 col-sm-3 mt-4 mt-sm-0">
+						<img
+							className="w-100"
+							src={`${basename}img/documentation/playbook/playbook-profiles-paybylink-4.png`}
+							alt="illustration swedbankpay playbook profiles"
+							loading="lazy"
+						/>
+					</div>
+				</div>
+				<figcaption className="text-center mt-2">PaybyLink</figcaption>
+			</figure>
+		</div>
+	</section>
+);
+
+const Profiles = () => (
+	<DocContainer>
+		<p className="lead">
+			To help navigate our diverse product ecosystem, we’ve created three design
+			profiles. Catering to different personas and needs, these profiles ensure
+			consistency while also allowing flexibility. They are key to improving
+			usability, efficiency, and scalability. Lastly, they make sure that each
+			product speaks the language of its users while still keeping with the
+			Swedbank Pay identity.
+		</p>
+		<img
+			className=""
+			src={`${basename}img/documentation/playbook/playbook-profiles-intro.png`}
+			alt="illustration swedbankpay playbook profiles"
+		/>
+		<HowToUse />
+		<DesignProfiles />
+		<Content />
+		<LightUI />
+		<ExpertUI />
+	</DocContainer>
+);
+
+export default Profiles;
diff --git a/src/App/Playbook/content/Showroom/index.js b/src/App/Playbook/content/Showroom/index.js
new file mode 100644
index 0000000000..4f922fc7b8
--- /dev/null
+++ b/src/App/Playbook/content/Showroom/index.js
@@ -0,0 +1,530 @@
+import React from "react";
+import { DocContainer } from "@docutils";
+
+const basename = process.env.basename;
+
+const Showroom = () => (
+	<section>
+		<div
+			className="container px-sm-0 playbook-mozaic"
+			style={{ radius: "2px" }}
+		>
+			<div className="row">
+				<div className="col-sm">
+					<video
+						playsInline
+						autoPlay
+						muted
+						loop
+						style={{ aspectRatio: "16 / 9" }}
+						width={710}
+						height={399}
+						poster={`${basename}img/documentation/playbook/playbook-showroom-1.avif`}
+					>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-1-av1.mp4`}
+							type="video/mp4; codecs=av01.0.05M.08,opus"
+						/>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-1.mp4`}
+							type="video/mp4"
+						/>
+					</video>
+				</div>
+			</div>
+			<div className="row mt-3">
+				<div className="col-sm">
+					<picture>
+						{/* <source
+							type="image/avif"
+							media="(min-width: 576px)"
+							srcSet={`${basename}img/documentation/playbook/playbook-showroom-2.avif`}
+						/> */}
+						<img
+							className=""
+							src={`${basename}img/documentation/playbook/playbook-showroom-2.png`}
+							alt="illustration swedbankpay playbook showroom"
+							style={{ "aspect-ratio": "230 / 149" }}
+						/>
+					</picture>
+				</div>
+				<div className="col-sm">
+					<video
+						playsInline
+						autoPlay
+						muted
+						loop
+						width={230}
+						height={149}
+						style={{ "aspect-ratio": "230 / 149" }}
+						poster={`${basename}img/documentation/playbook/playbook-showroom-3.avif`}
+						className="h-100"
+					>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-3.av1.mp4`}
+							type="video/mp4; codecs=av01.0.05M.08,opus"
+						/>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-3.mp4`}
+							type="video/mp4"
+						/>
+					</video>
+				</div>
+				<div className="col-sm">
+					<picture>
+						{/* <source
+							type="image/avif"
+							media="(min-width: 576px)"
+							srcSet={`${basename}img/documentation/playbook/playbook-showroom-4.avif`}
+						/> */}
+						<img
+							className=""
+							src={`${basename}img/documentation/playbook/playbook-showroom-4.png`}
+							alt="illustration swedbankpay playbook showroom"
+							style={{ "aspect-ratio": "230 / 149" }}
+						/>
+					</picture>
+				</div>
+			</div>
+			<div className="row mt-3">
+				<div className="col-sm">
+					<picture>
+						{/* <source
+							type="image/avif"
+							media="(min-width: 576px)"
+							srcSet={`${basename}img/documentation/playbook/playbook-showroom-5.avif`}
+						/> */}
+						<img
+							className=""
+							src={`${basename}img/documentation/playbook/playbook-showroom-5.png`}
+							alt="illustration swedbankpay playbook showroom"
+							style={{ "aspect-ratio": "710 / 351" }}
+						/>
+					</picture>
+				</div>
+			</div>
+			<div className="row mt-3">
+				<div className="col-sm">
+					<video
+						playsInline
+						autoPlay
+						muted
+						loop
+						loading="lazy"
+						width={710}
+						height={399}
+						poster={`${basename}img/documentation/playbook/playbook-showroom-6.avif`}
+					>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-6-av1.mp4`}
+							type="video/mp4; codecs=av01.0.05M.08,opus"
+						/>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-6.mp4`}
+							type="video/mp4"
+						/>
+					</video>
+				</div>
+			</div>
+			<div className="row mt-3">
+				<div className="col-sm">
+					<video
+						playsInline
+						autoPlay
+						muted
+						loop
+						loading="lazy"
+						width={350}
+						height={196}
+						poster={`${basename}img/documentation/playbook/playbook-showroom-7.avif`}
+					>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-7-av1.mp4`}
+							type="video/mp4; codecs=av01.0.05M.08,opus"
+						/>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-7.mp4`}
+							type="video/mp4"
+						/>
+					</video>
+				</div>
+				<div className="col-sm">
+					<video
+						playsInline
+						autoPlay
+						muted
+						loop
+						loading="lazy"
+						width={350}
+						height={196}
+						poster={`${basename}img/documentation/playbook/playbook-showroom-8.avif`}
+					>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-8-av1.mp4`}
+							type="video/mp4; codecs=av01.0.05M.08,opus"
+						/>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-8.mp4`}
+							type="video/mp4"
+						/>
+					</video>
+				</div>
+			</div>
+			<div className="row mt-3 justify-content-evenly" style={{ "--gap": "0" }}>
+				<div className="col-5 col-sm-3">
+					<video
+						playsInline
+						autoPlay
+						muted
+						loop
+						loading="lazy"
+						style={{ "aspect-ratio": "178 / 318" }}
+						poster={`${basename}img/documentation/playbook/playbook-showroom-9.avif`}
+						className="h-100"
+					>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-9-av1.mp4`}
+							type="video/mp4; codecs=av01.0.05M.08,opus"
+						/>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-9.mp4`}
+							type="video/mp4"
+						/>
+					</video>
+				</div>
+				<div className="col-5 col-sm-3">
+					<video
+						playsInline
+						autoPlay
+						muted
+						loop
+						loading="lazy"
+						style={{ "aspect-ratio": "145 / 318" }}
+						poster={`${basename}img/documentation/playbook/playbook-showroom-10.avif`}
+						className="h-100"
+					>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-10-av1.mp4`}
+							type="video/mp4; codecs=av01.0.05M.08,opus"
+						/>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-10.mp4`}
+							type="video/mp4"
+						/>
+					</video>
+				</div>
+				<div className="col-5 col-sm-3 mt-4 mt-sm-0">
+					<video
+						playsInline
+						autoPlay
+						muted
+						loop
+						loading="lazy"
+						style={{ "aspect-ratio": "145 / 318" }}
+						poster={`${basename}img/documentation/playbook/playbook-showroom-11.avif`}
+						className="h-100"
+					>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-11-av1.mp4`}
+							type="video/mp4; codecs=av01.0.05M.08,opus"
+						/>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-11.mp4`}
+							type="video/mp4"
+						/>
+					</video>
+				</div>
+				<div className="col-5 col-sm-3 mt-4 mt-sm-0">
+					<video
+						playsInline
+						autoPlay
+						muted
+						loop
+						loading="lazy"
+						style={{ "aspect-ratio": "145 / 318" }}
+						poster={`${basename}img/documentation/playbook/playbook-showroom-12.avif`}
+						className="h-100"
+					>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-12-av1.mp4`}
+							type="video/mp4; codecs=av01.0.05M.08,opus"
+						/>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-12.mp4`}
+							type="video/mp4"
+						/>
+					</video>
+				</div>
+			</div>
+			<div className="row mt-3">
+				<div className="col-sm">
+					<video
+						playsInline
+						autoPlay
+						muted
+						loop
+						loading="lazy"
+						width={230}
+						height={149}
+						style={{ "aspect-ratio": "230 / 149" }}
+						poster={`${basename}img/documentation/playbook/playbook-showroom-13.avif`}
+						className="h-100"
+					>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-13.av1.mp4`}
+							type="video/mp4; codecs=av01.0.05M.08,opus"
+						/>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-13.mp4`}
+							type="video/mp4"
+						/>
+					</video>
+				</div>
+				<div className="col-sm">
+					<picture>
+						{/* <source
+							type="image/avif"
+							media="(min-width: 576px)"
+							srcSet={`${basename}img/documentation/playbook/playbook-showroom-14.avif`}
+						/> */}
+						<img
+							className=""
+							src={`${basename}img/documentation/playbook/playbook-showroom-14.png`}
+							alt="illustration swedbankpay playbook showroom"
+							loading="lazy"
+							style={{ "aspect-ratio": "16 / 9" }}
+						/>
+					</picture>
+				</div>
+				<div className="col-sm">
+					<picture>
+						{/* <source
+							type="image/avif"
+							media="(min-width: 576px)"
+							srcSet={`${basename}img/documentation/playbook/playbook-showroom-15.avif`}
+						/> */}
+						<img
+							className=""
+							src={`${basename}img/documentation/playbook/playbook-showroom-15.png`}
+							alt="illustration swedbankpay playbook showroom"
+							loading="lazy"
+							style={{ "aspect-ratio": "16 / 9" }}
+						/>
+					</picture>
+				</div>
+			</div>
+			<div className="row mt-3">
+				<div className="col-sm">
+					<video
+						playsInline
+						autoPlay
+						muted
+						loop
+						loading="lazy"
+						width={710}
+						height={399}
+						poster={`${basename}img/documentation/playbook/playbook-showroom-16.avif`}
+					>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-16-av1.mp4`}
+							type="video/mp4; codecs=av01.0.05M.08,opus"
+						/>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-16.mp4`}
+							type="video/mp4"
+						/>
+					</video>
+				</div>
+			</div>
+			<div className="row mt-3">
+				<div className="col-sm-4">
+					<picture>
+						{/* <source
+							type="image/avif"
+							media="(min-width: 576px)"
+							srcSet={`${basename}img/documentation/playbook/playbook-showroom-17.avif`}
+						/> */}
+						<img
+							className=""
+							src={`${basename}img/documentation/playbook/playbook-showroom-17.png`}
+							alt="illustration swedbankpay playbook showroom"
+							loading="lazy"
+						/>
+					</picture>
+				</div>
+				<div className="col-sm">
+					<picture>
+						{/* <source
+							type="image/avif"
+							media="(min-width: 576px)"
+							srcSet={`${basename}img/documentation/playbook/playbook-showroom-18.avif`}
+						/> */}
+						<img
+							src={`${basename}img/documentation/playbook/playbook-showroom-18.png`}
+							alt="illustration swedbankpay playbook showroom"
+							loading="lazy"
+						/>
+					</picture>
+				</div>
+			</div>
+			<div className="row mt-3 playbook-showroom-portrait-phones-19 p-4 justify-content-evenly">
+				<div className="col-5 col-sm-2">
+					<picture>
+						{/* <source
+							type="image/avif"
+							media="(min-width: 576px)"
+							srcSet={`${basename}img/documentation/playbook/playbook-showroom-19-1.avif`}
+						/> */}
+						<img
+							className=""
+							src={`${basename}img/documentation/playbook/playbook-showroom-19-1.png`}
+							alt="illustration swedbankpay playbook showroom"
+							style={{ "aspect-ratio": "138 / 300" }}
+							loading="lazy"
+						/>
+					</picture>
+				</div>
+				<div className="col-5 col-sm-2">
+					<video
+						playsInline
+						autoPlay
+						muted
+						loop
+						loading="lazy"
+						width={138}
+						height={300}
+						style={{ "aspect-ratio": "138 / 300", "border-radius": "10px" }}
+						poster={`${basename}img/documentation/playbook/playbook-showroom-19-2.avif`}
+						className="h-100"
+					>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-19-2-av1.mp4`}
+							type="video/mp4; codecs=av01.0.05M.08,opus"
+						/>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-19-2.mp4`}
+							type="video/mp4"
+						/>
+					</video>
+				</div>
+				<div className="col-5 mt-4 mt-sm-0 col-sm-2">
+					<picture>
+						{/* <source
+							type="image/avif"
+							media="(min-width: 576px)"
+							srcSet={`${basename}img/documentation/playbook/playbook-showroom-19-3.avif`}
+						/> */}
+						<img
+							className=""
+							src={`${basename}img/documentation/playbook/playbook-showroom-19-3.png`}
+							alt="illustration swedbankpay playbook showroom"
+							style={{ "aspect-ratio": "138 / 300" }}
+							loading="lazy"
+						/>
+					</picture>
+				</div>
+				<div className="col-5 mt-4 mt-sm-0 col-sm-2">
+					<picture>
+						{/* <source
+							type="image/avif"
+							media="(min-width: 576px)"
+							srcSet={`${basename}img/documentation/playbook/playbook-showroom-19-4.avif`}
+						/> */}
+						<img
+							className=""
+							src={`${basename}img/documentation/playbook/playbook-showroom-19-4.png`}
+							alt="illustration swedbankpay playbook showroom"
+							style={{ "aspect-ratio": "138 / 300" }}
+							loading="lazy"
+						/>
+					</picture>
+				</div>
+			</div>
+			<div className="row mt-3">
+				<div className="col-sm">
+					<picture>
+						{/* <source
+							type="image/avif"
+							media="(min-width: 576px)"
+							srcSet={`${basename}img/documentation/playbook/playbook-showroom-20.avif`}
+						/> */}
+						<img
+							className="h-auto"
+							src={`${basename}img/documentation/playbook/playbook-showroom-20.png`}
+							alt="illustration swedbankpay playbook showroom"
+							style={{ "aspect-ratio": "350 / 196" }}
+							loading="lazy"
+						/>
+					</picture>
+				</div>
+				<div className="col-sm">
+					<video
+						playsInline
+						autoPlay
+						muted
+						loop
+						loading="lazy"
+						width={350}
+						height={196}
+						style={{ "aspect-ratio": "350 / 196" }}
+						poster={`${basename}img/documentation/playbook/playbook-showroom-21.avif`}
+						className="h-auto"
+					>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-21-av1.mp4`}
+							type="video/mp4; codecs=av01.0.05M.08,opus"
+						/>
+						<source
+							src={`${basename}img/documentation/playbook/playbook-showroom-21.mp4`}
+							type="video/mp4"
+						/>
+					</video>
+				</div>
+			</div>
+			<div className="row mt-3">
+				<div className="col-sm">
+					<picture>
+						{/* <source
+							type="image/avif"
+							media="(min-width: 576px)"
+							srcSet={`${basename}img/documentation/playbook/playbook-showroom-22.avif`}
+						/> */}
+						<img
+							className=""
+							src={`${basename}img/documentation/playbook/playbook-showroom-22.png`}
+							alt="illustration swedbankpay playbook showroom"
+							loading="lazy"
+							style={{ "aspect-ratio": "350 / 196" }}
+						/>
+					</picture>
+				</div>
+				<div className="col-sm">
+					<picture>
+						{/* <source
+							type="image/avif"
+							media="(min-width: 576px)"
+							srcSet={`${basename}img/documentation/playbook/playbook-showroom-23.avif`}
+						/> */}
+						<img
+							className=""
+							src={`${basename}img/documentation/playbook/playbook-showroom-23.png`}
+							alt="illustration swedbankpay playbook showroom"
+							loading="lazy"
+							style={{ "aspect-ratio": "350 / 196" }}
+						/>
+					</picture>
+				</div>
+			</div>
+		</div>
+	</section>
+);
+
+const Profiles = () => (
+	<DocContainer>
+		<Showroom />
+	</DocContainer>
+);
+
+export default Profiles;
+
+export {};
diff --git a/src/App/Playbook/index.js b/src/App/Playbook/index.js
new file mode 100644
index 0000000000..9d5885c12c
--- /dev/null
+++ b/src/App/Playbook/index.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+import { RenderPage } from "../utils";
+
+const Core = () => (
+	<RenderPage path="/playbook" initPath="/playbook/playbook" />
+);
+
+export default Core;
diff --git a/src/App/index.js b/src/App/index.js
index 4a112d3c7c..b1ed65ef94 100644
--- a/src/App/index.js
+++ b/src/App/index.js
@@ -19,33 +19,37 @@ const basename = removeTrailingSlash(process.env.basename) || "/";
 const brand = process.env.brand;
 
 const Home = React.lazy(() =>
-	import(/* webpackChunkName: "home.chunk" */ "./Home/index.js")
+	import(/* webpackChunkName: "home.chunk" */ "./Home/index.js"),
 );
 
 const GetStarted = React.lazy(() =>
-	import(/* webpackChunkName: "get-started.chunk" */ "./GetStarted/index.js")
+	import(/* webpackChunkName: "get-started.chunk" */ "./GetStarted/index.js"),
 );
 
 const Components = React.lazy(() =>
 	import(
 		/* webpackChunkName: "components.chunk" */ "./ComponentsDocumentation/index.js"
-	)
+	),
 );
 
 const Identity = React.lazy(() =>
-	import(/* webpackChunkName: "core.chunk" */ "./Identity/index.js")
+	import(/* webpackChunkName: "core.chunk" */ "./Identity/index.js"),
 );
 
 const Patterns = React.lazy(() =>
-	import(/* webpackChunkName: "patterns.chunk" */ "./Patterns/index.js")
+	import(/* webpackChunkName: "patterns.chunk" */ "./Patterns/index.js"),
+);
+
+const Playbook = React.lazy(() =>
+	import(/* webpackChunkName: "patterns.chunk" */ "./Playbook/index.js"),
 );
 
 const ErrorPage404 = React.lazy(() =>
-	import(/* webpackChunkName: "404.chunk" */ "./ErrorPage404/index.js")
+	import(/* webpackChunkName: "404.chunk" */ "./ErrorPage404/index.js"),
 );
 
 const Utilities = React.lazy(() =>
-	import(/* webpackChunkName: "utilities.chunk" */ "./Utilities/index.js")
+	import(/* webpackChunkName: "utilities.chunk" */ "./Utilities/index.js"),
 );
 
 const ScrollToTop = ({ children }) => {
@@ -68,7 +72,7 @@ export const VersionTopBanner = () => {
 			.then((data) => data.json())
 			.then((data) => setVersion(data.latestVersion))
 			.catch((error) =>
-				console.warn("Could not fetch latest version from Azure:", error)
+				console.warn("Could not fetch latest version from Azure:", error),
 			);
 	}, []);
 
@@ -117,6 +121,7 @@ const App = () => {
 									<Route index path="/" element={<Home />} />
 									<Route path="get-started/*" element={<GetStarted />} />
 									<Route path="components/*" element={<Components />} />
+									<Route path="playbook/*" element={<Playbook />} />
 									<Route path="identity/*" element={<Identity />} />
 									<Route path="patterns/*" element={<Patterns />} />
 									<Route path="utilities/*" element={<Utilities />} />
diff --git a/src/App/routes/all.js b/src/App/routes/all.js
index 326f9eba41..b27c0552b1 100644
--- a/src/App/routes/all.js
+++ b/src/App/routes/all.js
@@ -2,10 +2,20 @@ const componentsRoutes = require("./components");
 const identityRoutes = require("./identity");
 const getStartedRoutes = require("./get-started");
 const patternsRoutes = require("./patterns");
+const playbookRoutes = require("./playbook");
 
-module.exports = [
-	...getStartedRoutes,
-	...identityRoutes,
-	...componentsRoutes,
-	...patternsRoutes,
-];
+// remove Playbook routes if PayEx side
+module.exports = process.env.isSwedbankPay
+	? [
+			...getStartedRoutes,
+			...playbookRoutes,
+			...identityRoutes,
+			...componentsRoutes,
+			...patternsRoutes,
+	  ]
+	: [
+			...getStartedRoutes,
+			...identityRoutes,
+			...componentsRoutes,
+			...patternsRoutes,
+	  ];
diff --git a/src/App/routes/identity.js b/src/App/routes/identity.js
index 59e0990fae..c35880939c 100644
--- a/src/App/routes/identity.js
+++ b/src/App/routes/identity.js
@@ -12,12 +12,6 @@ module.exports = [
 		redirect: "identity",
 		appFolder: "Identity",
 		routes: [
-			{
-				title: "Overview",
-				path: "identity",
-				rootPath: "/identity/identity",
-				componentPath: "identity/Identity",
-			},
 			{
 				title: "Accessibility",
 				path: "accessibility",
diff --git a/src/App/routes/playbook.js b/src/App/routes/playbook.js
new file mode 100644
index 0000000000..fcc095336e
--- /dev/null
+++ b/src/App/routes/playbook.js
@@ -0,0 +1,51 @@
+module.exports = [
+	/**
+	 * Playbook
+	 */
+	{
+		title: "Playbook",
+		icon: {
+			name: "casino",
+		},
+		path: "playbook",
+		entryCardText: "Discover our visual language and principles",
+		redirect: "playbook",
+		appFolder: "Playbook",
+		routes: [
+			{
+				title: "Overview",
+				path: "playbook",
+				rootPath: "/playbook/playbook",
+				componentPath: "content/Playbook",
+			},
+			{
+				title: "Design Vision",
+				path: "design-vision",
+				rootPath: "/playbook/design-vision",
+				componentPath: "content/DesignVision",
+				text: "A high-level north star for all new products created in the Swedbank Pay portfolio",
+			},
+			{
+				title: "Principles",
+				path: "principles",
+				rootPath: "/playbook/principles",
+				componentPath: "content/Principles",
+				text: "Best practices mainly for product design that are clear and easy to follow. Free advice, if you will",
+			},
+			{
+				title: "Profiles",
+				path: "profiles",
+				rootPath: "/playbook/profiles",
+				componentPath: "content/Profiles",
+				text: "The profiles are UI/UX styles that speak to different products, contexts and user groups",
+			},
+			{
+				title: "Showroom",
+				path: "showroom",
+				rootPath: "/playbook/showroom",
+				componentPath: "content/Showroom",
+				text: "See examples from our visual language",
+			},
+		],
+	},
+];
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-1.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-1.png
new file mode 100644
index 0000000000..a6719c3604
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-1.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-2.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-2.png
new file mode 100644
index 0000000000..5a19fdb370
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-2.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-3.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-3.png
new file mode 100644
index 0000000000..7a743c5152
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-3.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-4.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-4.png
new file mode 100644
index 0000000000..b9531a4630
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-bold-typo-4.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-1.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-1.png
new file mode 100644
index 0000000000..4e5d9b22e1
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-1.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-2.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-2.png
new file mode 100644
index 0000000000..6b83092059
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-2.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-3.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-3.png
new file mode 100644
index 0000000000..7b8935a440
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-3.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-1.avif b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-1.avif
new file mode 100644
index 0000000000..a8fed9af87
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-1.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-1.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-1.png
new file mode 100644
index 0000000000..5265bd7ae0
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-1.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-2.avif b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-2.avif
new file mode 100644
index 0000000000..f317414a31
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-2.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-2.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-2.png
new file mode 100644
index 0000000000..fbe60e71db
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-2.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-1.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-1.png
new file mode 100644
index 0000000000..78d4f5735f
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-1.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-2.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-2.png
new file mode 100644
index 0000000000..1a90f52c36
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-2.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-3.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-3.png
new file mode 100644
index 0000000000..096fc5bbee
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-3.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-4.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-4.png
new file mode 100644
index 0000000000..fd51d12498
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-4.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-5.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-5.png
new file mode 100644
index 0000000000..eded253260
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-5.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-6.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-6.png
new file mode 100644
index 0000000000..cb4c99eb6f
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-6.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-7.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-7.png
new file mode 100644
index 0000000000..d1707f7ffb
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-7.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-8.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-8.png
new file mode 100644
index 0000000000..e2bf3a2942
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-8.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-9.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-9.png
new file mode 100644
index 0000000000..69e674e358
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-colors-9.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-1.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-1.png
new file mode 100644
index 0000000000..2600cdc4d1
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-1.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-2.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-2.png
new file mode 100644
index 0000000000..b25485020a
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-2.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-3.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-3.png
new file mode 100644
index 0000000000..b2f9e88cd4
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-3.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-4.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-4.png
new file mode 100644
index 0000000000..554332894b
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-4.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-5.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-5.png
new file mode 100644
index 0000000000..f5f51c54c9
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-5.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-6.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-6.png
new file mode 100644
index 0000000000..a2da1a5700
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-delicate-lines-6.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-1.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-1.png
new file mode 100644
index 0000000000..079daa89f5
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-1.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-2.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-2.png
new file mode 100644
index 0000000000..144fc3dcb4
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-2.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-3.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-3.png
new file mode 100644
index 0000000000..2a42c087e9
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-3.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-4.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-4.png
new file mode 100644
index 0000000000..7eab61f838
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-4.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-1.avif b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-1.avif
new file mode 100644
index 0000000000..53e6cae79c
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-1.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-1.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-1.png
new file mode 100644
index 0000000000..2db5aea2b9
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-1.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-2.avif b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-2.avif
new file mode 100644
index 0000000000..a4530275fa
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-2.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-2.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-2.png
new file mode 100644
index 0000000000..42a43daf33
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-2.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-3.avif b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-3.avif
new file mode 100644
index 0000000000..c0b3146581
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-3.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-3.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-3.png
new file mode 100644
index 0000000000..ee282c6990
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-3.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-4.avif b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-4.avif
new file mode 100644
index 0000000000..e51d27ac7a
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-4.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-4.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-4.png
new file mode 100644
index 0000000000..5ba7d9ad62
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-rounded-mobile-4.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.av1.mp4
new file mode 100644
index 0000000000..ccdd427c19
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.av1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.mp4
new file mode 100644
index 0000000000..054ad9f481
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.png b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.png
new file mode 100644
index 0000000000..21b6e32069
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-design-vision-vision-board.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-illustration-intro-swedbankpay.jpg b/src/img/swedbankpay/documentation/playbook/playbook-illustration-intro-swedbankpay.jpg
new file mode 100644
index 0000000000..cb0da4584a
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-illustration-intro-swedbankpay.jpg differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-hierarchy.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-hierarchy.png
new file mode 100644
index 0000000000..04c2bcfe04
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-hierarchy.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-order.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-order.png
new file mode 100644
index 0000000000..0883b8f43c
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-order.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-reveal.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-reveal.png
new file mode 100644
index 0000000000..17d58ff0f7
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-friendly-reveal.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-assistive.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-assistive.png
new file mode 100644
index 0000000000..b4db79747c
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-assistive.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-contrast.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-contrast.png
new file mode 100644
index 0000000000..06fcd30f93
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-contrast.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-simplicity.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-simplicity.png
new file mode 100644
index 0000000000..2da7b37db7
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-inclusive-simplicity.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-clarity.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-clarity.png
new file mode 100644
index 0000000000..feba059115
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-clarity.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-consistency.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-consistency.png
new file mode 100644
index 0000000000..6a30ac2ff8
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-consistency.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-reduction.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-reduction.png
new file mode 100644
index 0000000000..d81c49bf5f
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-simplicity-reduction.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-motion.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-motion.png
new file mode 100644
index 0000000000..3fd075b6f2
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-motion.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-surprise.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-surprise.png
new file mode 100644
index 0000000000..e1097177dd
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-surprise.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-unified.png b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-unified.png
new file mode 100644
index 0000000000..8164adb6fb
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-principles-unexpected-unified.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-1.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-1.png
new file mode 100644
index 0000000000..7f8ab70aa1
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-1.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2-av1.mp4
new file mode 100644
index 0000000000..f59474320e
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2-av1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2.mp4
new file mode 100644
index 0000000000..1cef85be35
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2.png
new file mode 100644
index 0000000000..6939c9c14d
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-2.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-3.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-3.png
new file mode 100644
index 0000000000..8dd07eb8b7
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-3.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-4.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-4.png
new file mode 100644
index 0000000000..6f7289f25b
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-content-4.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-expert-1.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-expert-1.png
new file mode 100644
index 0000000000..96517a5714
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-expert-1.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-intro.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-intro.png
new file mode 100644
index 0000000000..ec0b0c43a6
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-intro.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-1.avif b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-1.avif
new file mode 100644
index 0000000000..854d71a67c
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-1.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-1.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-1.png
new file mode 100644
index 0000000000..424870152b
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-1.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-2.avif b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-2.avif
new file mode 100644
index 0000000000..b5ec4b250e
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-2.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-2.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-2.png
new file mode 100644
index 0000000000..baca7435da
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-2.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-3.avif b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-3.avif
new file mode 100644
index 0000000000..57d183dc41
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-3.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-3.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-3.png
new file mode 100644
index 0000000000..eb4d69f3c2
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-3.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-4.avif b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-4.avif
new file mode 100644
index 0000000000..2d218fcb1c
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-4.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-4.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-4.png
new file mode 100644
index 0000000000..aaa257d857
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-4.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-5.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-5.png
new file mode 100644
index 0000000000..7008d8f2f3
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-lightui-5.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-1.avif b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-1.avif
new file mode 100644
index 0000000000..32e8d80c5d
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-1.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-1.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-1.png
new file mode 100644
index 0000000000..2f5b7a9ce0
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-1.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-2.avif b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-2.avif
new file mode 100644
index 0000000000..1133e4b2a5
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-2.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-2.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-2.png
new file mode 100644
index 0000000000..7ebb60b9cb
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-2.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-3.avif b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-3.avif
new file mode 100644
index 0000000000..a64627d987
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-3.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-3.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-3.png
new file mode 100644
index 0000000000..c9a2aef22a
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-3.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-4.avif b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-4.avif
new file mode 100644
index 0000000000..492d9edd66
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-4.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-4.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-4.png
new file mode 100644
index 0000000000..80ee1128cb
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-paybylink-4.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-1.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-1.png
new file mode 100644
index 0000000000..725c1bdf87
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-1.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-2.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-2.png
new file mode 100644
index 0000000000..816dc6342c
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-2.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-3.png b/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-3.png
new file mode 100644
index 0000000000..cf0cac1b6f
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-profiles-profile-3.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-1-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1-av1.mp4
new file mode 100644
index 0000000000..baea4736fb
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1-av1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.avif
new file mode 100644
index 0000000000..5cc53c67cc
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.mp4
new file mode 100644
index 0000000000..b66a74f6a0
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.png
new file mode 100644
index 0000000000..edb0e7819b
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-10-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-10-av1.mp4
new file mode 100644
index 0000000000..ee558d4967
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-10-av1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.avif
new file mode 100644
index 0000000000..0834f772e6
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.mp4
new file mode 100644
index 0000000000..7fd32e697a
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.png
new file mode 100644
index 0000000000..bcf132e8f1
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-10.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.av1.mp4
new file mode 100644
index 0000000000..c764934dbb
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.av1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.avif
new file mode 100644
index 0000000000..88823370a7
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.mp4
new file mode 100644
index 0000000000..2b161f49f3
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.png
new file mode 100644
index 0000000000..6c1ee1428e
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-11.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.av1.mp4
new file mode 100644
index 0000000000..50c9998ae1
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.av1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.avif
new file mode 100644
index 0000000000..80847be267
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.mp4
new file mode 100644
index 0000000000..cc01462f07
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.png
new file mode 100644
index 0000000000..62a3dda03e
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-12.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.av1.mp4
new file mode 100644
index 0000000000..314bbce658
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.av1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.avif
new file mode 100644
index 0000000000..f7de4e43ff
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.mp4
new file mode 100644
index 0000000000..3ad12633d2
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.png
new file mode 100644
index 0000000000..749320c076
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-13.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-14.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-14.avif
new file mode 100644
index 0000000000..d174905da3
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-14.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-14.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-14.png
new file mode 100644
index 0000000000..29dff9897b
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-14.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-15.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-15.avif
new file mode 100644
index 0000000000..ec98267aa6
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-15.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-15.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-15.png
new file mode 100644
index 0000000000..488fcaa2e4
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-15.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-16-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-16-av1.mp4
new file mode 100644
index 0000000000..53169c202c
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-16-av1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.avif
new file mode 100644
index 0000000000..6d9dbe2cf3
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.mp4
new file mode 100644
index 0000000000..dc62a314e2
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.png
new file mode 100644
index 0000000000..374c695252
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-16.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-17.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-17.avif
new file mode 100644
index 0000000000..a6209b2cb2
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-17.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-17.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-17.png
new file mode 100644
index 0000000000..97ff2b1d77
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-17.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-18.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-18.avif
new file mode 100644
index 0000000000..20ea848958
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-18.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-18.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-18.png
new file mode 100644
index 0000000000..9fdef57de2
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-18.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-1.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-1.avif
new file mode 100644
index 0000000000..12dec836cf
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-1.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-1.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-1.png
new file mode 100644
index 0000000000..7f7a0ec6f5
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-1.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-2-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-2-av1.mp4
new file mode 100644
index 0000000000..3cc53a75ed
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-2-av1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-2.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-2.mp4
new file mode 100644
index 0000000000..07bc422df1
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-2.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-3.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-3.avif
new file mode 100644
index 0000000000..62e51b3a62
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-3.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-3.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-3.png
new file mode 100644
index 0000000000..7107c09f30
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-3.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-4.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-4.avif
new file mode 100644
index 0000000000..00d1995314
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-4.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-4.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-4.png
new file mode 100644
index 0000000000..f2253ad4e6
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19-4.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19.avif
new file mode 100644
index 0000000000..bf025f0ea5
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-19.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19.png
new file mode 100644
index 0000000000..0be6a45c1c
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-19.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-2.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-2.avif
new file mode 100644
index 0000000000..3961fff6f5
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-2.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-2.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-2.png
new file mode 100644
index 0000000000..99b6e074ff
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-2.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-20.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-20.avif
new file mode 100644
index 0000000000..a854419322
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-20.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-20.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-20.png
new file mode 100644
index 0000000000..5e4c9d7b1b
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-20.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-21-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-21-av1.mp4
new file mode 100644
index 0000000000..0c88029a3a
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-21-av1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.avif
new file mode 100644
index 0000000000..205333b313
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.mp4
new file mode 100644
index 0000000000..515241adc6
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.png
new file mode 100644
index 0000000000..f1de067045
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-21.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-22.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-22.avif
new file mode 100644
index 0000000000..e81eef91d0
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-22.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-22.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-22.png
new file mode 100644
index 0000000000..7a655204b3
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-22.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-23.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-23.avif
new file mode 100644
index 0000000000..39941b1867
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-23.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-23.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-23.png
new file mode 100644
index 0000000000..e26b11dc3e
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-23.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.av1.mp4
new file mode 100644
index 0000000000..c4487cfd50
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.av1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.avif
new file mode 100644
index 0000000000..5a47e99ca9
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.mp4
new file mode 100644
index 0000000000..b2b0f071f3
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.png
new file mode 100644
index 0000000000..bf85580214
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-3.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-4.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-4.avif
new file mode 100644
index 0000000000..6479dc8d88
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-4.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-4.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-4.png
new file mode 100644
index 0000000000..35bff22f2d
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-4.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-5.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-5.avif
new file mode 100644
index 0000000000..0181b5f987
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-5.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-5.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-5.png
new file mode 100644
index 0000000000..43dc1c0d55
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-5.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-6-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-6-av1.mp4
new file mode 100644
index 0000000000..c0c17706cf
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-6-av1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.avif
new file mode 100644
index 0000000000..0378ad7d54
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.mp4
new file mode 100644
index 0000000000..16b872fe65
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.png
new file mode 100644
index 0000000000..1556657dbf
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-6.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-7-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-7-av1.mp4
new file mode 100644
index 0000000000..f59474320e
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-7-av1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.avif
new file mode 100644
index 0000000000..f093352fe2
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.mp4
new file mode 100644
index 0000000000..1cef85be35
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.png
new file mode 100644
index 0000000000..42f1f8e60b
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-7.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-8-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-8-av1.mp4
new file mode 100644
index 0000000000..556c92cf97
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-8-av1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.avif
new file mode 100644
index 0000000000..9d4a1e9776
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.mp4
new file mode 100644
index 0000000000..54357f54a4
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.png
new file mode 100644
index 0000000000..803e335c5f
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-8.png differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-9-av1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-9-av1.mp4
new file mode 100644
index 0000000000..b1db907180
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-9-av1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.avif
new file mode 100644
index 0000000000..4f7da45fdb
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.mp4
new file mode 100644
index 0000000000..9a221b02a2
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.png b/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.png
new file mode 100644
index 0000000000..dc4117f54c
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-9.png differ
diff --git a/src/less/components/sidebar.less b/src/less/components/sidebar.less
index c8c893682e..bd9ceeabf6 100644
--- a/src/less/components/sidebar.less
+++ b/src/less/components/sidebar.less
@@ -126,6 +126,7 @@
 					position: absolute;
 					top: 0;
 					left: 100%;
+					text-align: left;
 
 					&:hover {
 						overflow-y: auto;
diff --git a/src/less/documentation-swedbankpay.less b/src/less/documentation-swedbankpay.less
index e8b0f30a1e..93dbf2cd40 100644
--- a/src/less/documentation-swedbankpay.less
+++ b/src/less/documentation-swedbankpay.less
@@ -720,6 +720,183 @@
 			}
 		}
 
+		.container.playbook {
+			.row {
+				gap: 8px;
+
+				img {
+					border-radius: 2px;
+				}
+			}
+		}
+
+		.playbook-overview {
+			a.cards-secondary i {
+				color: var(--brand-turquoise);
+			}
+		}
+
+		.playbook-mozaic {
+			--gap: 10px;
+			--radius: 0;
+
+			.row {
+				gap: var(--gap);
+
+				> div {
+					padding-left: 0;
+					padding-right: 0;
+				}
+
+				img,
+				video {
+					width: 100%;
+					object-fit: cover;
+					border-radius: var(--radius, 0);
+				}
+
+				img {
+					height: 100%;
+				}
+
+				video {
+					max-width: 100%;
+					max-height: 100%;
+
+					@media (max-width: @screen-sm-min) {
+						height: auto;
+						width: 100%;
+					}
+				}
+			}
+		}
+
+		.playbook-showroom-portrait-phones-19 {
+			background-color: var(--brand-primary-light-3);
+		}
+
+		.playbook-glued-grid {
+			.row {
+				padding-left: 1px;
+				padding-right: 1px;
+
+				img {
+					margin: -2px;
+				}
+			}
+		}
+
+		#bold-typography .playbook .row {
+			@media (max-width: @screen-sm-min) {
+				& > div:nth-child(1) {
+					flex: 1;
+
+					img {
+						height: 100%;
+						object-fit: fill;
+					}
+				}
+
+				& > div:nth-child(2) {
+					width: 35.5%;
+				}
+			}
+		}
+
+		.ratio-responsive-row {
+			@media (min-width: @screen-sm-min) {
+				aspect-ratio: var(--row-width) / var(--row-height);
+				height: calc(678px * var(--row-height) / var(--row-width));
+
+				> div.col-sm {
+					height: 100%;
+
+					> img {
+						max-height: 100%;
+					}
+				}
+
+				.col-sm {
+					flex-basis: initial;
+					flex-grow: initial;
+					max-width: initial;
+					position: static;
+					width: unset;
+					min-height: unset;
+					padding-right: unset;
+					padding-left: unset;
+
+					.w-100 {
+						width: auto;
+					}
+				}
+			}
+		}
+
+		.grid-row {
+			&.delicate-lines {
+				display: grid;
+				grid-template:
+					"one three four five" 1fr
+					"two three four six" 2fr
+					/ 1fr 1fr 1fr 1fr;
+				gap: 10px;
+
+				@media (max-width: @screen-sm-min) {
+					grid-template:
+						"one one" auto
+						"two two" auto
+						"three four" auto
+						"five five" auto
+						"six six" auto
+						/ 1fr 1fr;
+				}
+
+				img {
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+					border-radius: 3px;
+				}
+
+				img:nth-child(1) {
+					grid-area: one;
+				}
+
+				img:nth-child(2) {
+					grid-area: two;
+				}
+
+				img:nth-child(3) {
+					grid-area: three;
+				}
+
+				img:nth-child(4) {
+					grid-area: four;
+				}
+
+				img:nth-child(5) {
+					grid-area: five;
+				}
+
+				img:nth-child(6) {
+					grid-area: six;
+				}
+			}
+		}
+
+		figure figcaption {
+			color: var(--text-muted);
+		}
+
+		.shift-right-1 {
+			margin-right: -1px;
+		}
+
+		.shift-left-1 {
+			margin-left: -1px;
+		}
+
 		section {
 			margin-bottom: 2rem;
 
diff --git a/src/less/utilities/images.less b/src/less/utilities/images.less
index 25ec8eaf89..23ad2bbf5b 100644
--- a/src/less/utilities/images.less
+++ b/src/less/utilities/images.less
@@ -19,3 +19,7 @@
 	max-width: 100%;
 	height: auto;
 }
+
+.object-fit-cover {
+	object-fit: cover;
+}
diff --git a/src/less/variables-swedbankpay.less b/src/less/variables-swedbankpay.less
index 1d0b68ef79..fe73349e88 100644
--- a/src/less/variables-swedbankpay.less
+++ b/src/less/variables-swedbankpay.less
@@ -172,6 +172,7 @@
 	--brand-turquoise-light: #8acdc3;
 
 	/* Main Brand Color Variants */
+	--brand-primary-light-3: #fff3d5;
 	--brand-secondary-light-1: var(--brown-medium, #72605e);
 	--brand-secondary-light-2: var(--brown-soft, #a38b80);
 	--brand-secondary-light-3: var(--brown-light, #d4c4bc);
diff --git a/tools/generate-routes-copy-array.js b/tools/generate-routes-copy-array.js
index 24f4048b31..430fd6c0ae 100644
--- a/tools/generate-routes-copy-array.js
+++ b/tools/generate-routes-copy-array.js
@@ -3,6 +3,7 @@ const componentsRoutes = require("../src/App/routes/components");
 const identityRoutes = require("../src/App/routes/identity");
 const getStartedRoutes = require("../src/App/routes/get-started");
 const patternsRoutes = require("../src/App/routes/patterns");
+const playbookRoutes = require("../src/App/routes/playbook");
 
 const getRoutes = () => {
 	const ROUTES = [...ROOTROUTES];
@@ -12,6 +13,7 @@ const getRoutes = () => {
 		...identityRoutes,
 		...getStartedRoutes,
 		...patternsRoutes,
+		...playbookRoutes,
 	].forEach((route) => {
 		ROUTES.push(route.path);
 		route.routes.forEach((r) => ROUTES.push(r.rootPath));
diff --git a/webpack.config.js b/webpack.config.js
index 16ff4700f3..17a758b26b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -16,6 +16,11 @@ const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
 module.exports = (env, argv) => {
 	const brand = argv.env.brand || "swedbankpay";
 	const brandTitle = brand === "swedbankpay" ? "Swedbank Pay" : "PayEx"; // <-- Used with the HTML plugin for titles etc...
+	/**
+	 * Checks if the brand is Swedbank Pay
+	 * @type {boolean}
+	 */
+	const isSwedbankPay = Boolean(brand.toLowerCase().includes("swedbank"));
 	const isProd = argv.mode === "production";
 	const isDevServer = !!argv.env.WEBPACK_SERVE;
 	const isAnalyze = !!argv.env.analyze;
@@ -194,6 +199,7 @@ module.exports = (env, argv) => {
 					google: isRelease,
 					brand: JSON.stringify(brand),
 					brandTitle: JSON.stringify(brandTitle),
+					isSwedbankPay: JSON.stringify(isSwedbankPay),
 				},
 			}),
 			// Ignores moments locale folder which doubles the size of the package, moment is a dependency of chart.js [EH]
@@ -357,6 +363,10 @@ module.exports = (env, argv) => {
 									source: `./src/img/${brand}/documentation/topbar/*.png`,
 									destination: `./dist${basename}img/documentation/topbar`,
 								},
+								{
+									source: `./src/img/${brand}/documentation/playbook/*.{png,jpg,avif,mp4}`,
+									destination: `./dist${basename}img/documentation/playbook`,
+								},
 								{
 									source: "./src/img/background/*.svg",
 									destination: `./dist${basename}img/background/`,