From cc2c104e1697e4acfe74354cd3b1bbcdd8d74646 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Mon, 2 Mar 2026 15:50:32 +0100
Subject: [PATCH] :books: Move Design Tokens > Spacing image to the Spacing
 section (#8487)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julien Déramond <julien.deramond@thalesgroup.com>
---
 docs/user-guide/design-systems/design-tokens.njk | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/user-guide/design-systems/design-tokens.njk b/docs/user-guide/design-systems/design-tokens.njk
index b259a4bff0..8dd50d0b07 100644
--- a/docs/user-guide/design-systems/design-tokens.njk
+++ b/docs/user-guide/design-systems/design-tokens.njk
@@ -219,9 +219,6 @@ desc: Learn how to create, manage and apply Penpot Design Tokens using W3C DTCG
 
 <h3 id="design-tokens-sizing">Sizing</h3>
 <p>Sizing tokens can define various size-related design properties, namely the height and width of design elements.The sizing token supports numeric values, which include negative values.</p>
-<figure>
-  <img src="/img/design-tokens/11-tokens-spacing.webp" alt="Tokens spacing" />
-</figure>
 <h4>Applying Sizing Tokens</h4>
 <p>To apply the sizing token to an element, select the element and choose the token from the list:</p>
 <ul>
@@ -245,6 +242,9 @@ desc: Learn how to create, manage and apply Penpot Design Tokens using W3C DTCG
 
 <h3 id="design-tokens-spacing">Spacing</h3>
 <p>The spacing token defines the distance between design elements and supports numeric values, which include negative values. Spacing tokens must be applied to Flex Layout boards. </p>
+<figure>
+  <img src="/img/design-tokens/11-tokens-spacing.webp" alt="Tokens spacing" />
+</figure>
 <p class="advice">If you apply the token to a board before flex-layout is applied to it, you may have to remove and re-apply the token for it to take effect.</p>
 <h4>Applying Spacing Tokens</h4>
 <p>To apply the spacing token to an element, select the element and choose the token from the list:</p>