Move intro theory around

exercises/01.figma-to-tailwind/README.mdx

@@ -1,6 +1,8 @@
 # Figma to Tailwind CSS
 
-This first chapter is about exploring the Figma file.
+This exercise is about converting the Figma design to a Tailwind CSS project — both for the mobile and desktop layouts.
+
+We're not going to worry about the colors just yet — but we'll build a "grayscale" high fidelity version of the designs.
 
 <iframe
 	width="100%"
@@ -9,43 +11,4 @@ This first chapter is about exploring the Figma file.
 	allowfullscreen
 ></iframe>
 
-As you can see, colors are first defined as "raw" color palette values — but there is an extra layer of abstraction that defines **semantic color tokens**.
-
-Those design tokens are scoped to **background**, **text** and **border** colors.
-
-## Color Variables in Figma
-
-The design leverages Figma's variables to power the UI.
-
-### Raw color tokens
-
-First, "raw" color accessors are mapped to the color values directly:
-
-<img
-	src="/images/raw-color-tokens.png"
-	alt="screenshot of Figma's variables panel, showing the raw color tokens"
-/>
-
-### Semantic color tokens
-
-Then, those raw color values are aliased to semantic color tokens:
-
-<img
-	src="/images/semantic-color-tokens.png"
-	alt="screenshot of Figma's variables panel, showing the semantic color tokens"
-/>
-
-### Usage in the design
-
-The design is consuming these semantic tokens to compose the UI:
-
-<img
-	src="/images/color-tokens-usage.png"
-	alt="screenshot of Figma's side panel, showing the use of semantic color tokens"
-/>
-
-## Figma to Taiwind Conversion
-
-This exercise is about converting the Figma design to a Tailwind CSS project.
-
 When you're ready, hit the "Start Learning" button.

exercises/README.mdx

@@ -4,6 +4,18 @@ In this workshop, we're going to define **semantic color tokens** in Tailwind CS
 
 We'll cover both Tailwind CSS v3 and v4 approaches 🔥
 
+## What this workshop covers
+
+In this workshop, you will...
+
+- Convert a Figma design to a Tailwind CSS project
+- Define custom colors in the Tailwind theme
+- Create a semantic color token layer in the Tailwind theme
+- Replace "hardcoded" colors with semantic color tokens in the UI
+- Leverage CSS variables to make the color tokens themable
+- Support dark mode 🌑 and multiple color themes 🎨
+- Port a JS Tailwind theme configuration (v3) to a CSS-only configuration (v4)
+
 ## The Figma File
 
 <iframe
@@ -15,10 +27,41 @@ We'll cover both Tailwind CSS v3 and v4 approaches 🔥
 
 ## Semantic Design Tokens
 
-As you can see in the Figma file, colors are first defined as "raw" color palette values — but there is an extra layer of abstraction that defines **semantic color tokens**.
+As you can see, colors are first defined as "raw" color palette values — but there is an extra layer of abstraction that defines **semantic color tokens**.
 
 Those design tokens are scoped to **background**, **text** and **border** colors.
 
+## Color Variables in Figma
+
+The design leverages Figma's variables to power the UI.
+
+### Raw color tokens
+
+First, "raw" color accessors are mapped to the color values directly:
+
+<img
+	src="/images/raw-color-tokens.png"
+	alt="screenshot of Figma's variables panel, showing the raw color tokens"
+/>
+
+### Semantic color tokens
+
+Then, those raw color values are aliased to semantic color tokens:
+
+<img
+	src="/images/semantic-color-tokens.png"
+	alt="screenshot of Figma's variables panel, showing the semantic color tokens"
+/>
+
+### Usage in the design
+
+The design is consuming these semantic tokens to compose the UI:
+
+<img
+	src="/images/color-tokens-usage.png"
+	alt="screenshot of Figma's side panel, showing the use of semantic color tokens"
+/>
+
 ### Multi-Theme Support
 
 The idea behind this layer of design token abstraction: UI elements should not be directly connected to a specific color value — but instead us an aliased reference token.
@@ -33,19 +76,6 @@ Here's a visual representation of this design token layer, as presented on the [
 
 <img src="/images/token-layers.png" />
 
----
-
-## What this workshop covers
-
-In this workshop, you will...
-
-- Convert a Figma design to a Tailwind CSS project
-- Define custom colors in the Tailwind theme
-- Create a semantic color token layer in the Tailwind theme
-- Replace "hardcoded" colors with semantic color tokens in the UI
-- Leverage CSS variables to make the color tokens themable
-- Support dark mode 🌑 and multiple color themes 🎨
-- Port a JS Tailwind theme configuration (v3) to a CSS-only configuration (v4)
 
 ## Let's do this!