update UI for smaller toolbox

docs/GraFx-Studio/concepts/barcodes/index.md

@@ -17,7 +17,7 @@ Barcodes are created and configured in GraFx Studio (different than in GraFx Pub
 - Click a barcode from the Barcode library
 - Configure using the properties panel
 
-![ui](barcodes1.gif)
+![screenshot-full](barcodes1.gif)
 
 ## Barcode-specific settings
 
@@ -38,13 +38,13 @@ The Bar height property is a decimal number in the unit of the layout
 
 Show the character that indicates the light margin
 
-![ui](barcodes2.gif)
+![screenshot-full](barcodes2.gif)
 
 ## Start and Stop characters
 
 Show the start and stop character
 
-![ui](barcodes3.gif)
+![screenshot-full](barcodes3.gif)
 
 
 ## Quiet zone
@@ -64,9 +64,9 @@ The appearance is the color for a specific part of the barcode.
 - Background represents the background color
 - Blend mode: apply [blend modes](/GraFx-Studio/concepts/blendmodes/), similar to image frames
 
-![ui](qr1.png)
+![screenshot-full](qr1.png)
 
-![ui](qr_blend.png)
+![screenshot-full](qr_blend.png)
 
 ## Magnification
 

docs/GraFx-Studio/concepts/headless/index.md

@@ -1,3 +1,11 @@
 # Headless or automated
 
-Imagine a process that runs in the background, creating collateral in an automated way.
+In the context of CHILI GraFx, **"Headless"** or **"Automated"** refers to the ability to produce design variants by interacting directly with the API, without using the graphical interface of GraFx Studio.
+
+This approach is ideal for scenarios where you want to automate the creation of large batches of content, integrate with external systems, or streamline workflows that don't require manual input. By leveraging the API, you can:
+
+- **Generate Variants at Scale**: Automatically create hundreds or thousands of variations without manual intervention.
+- **Integrate Seamlessly**: Connect GraFx Studio with your existing systems, like DAMs, PIMs, or e-commerce platforms.
+- **Run Background Processes**: Initiate batch jobs and monitor output tasks programmatically.
+
+Headless automation empowers you to use the powerful capabilities of GraFx Studio while keeping everything behind the scenes, providing flexibility and efficiency for high-volume or fully automated workflows.

docs/GraFx-Studio/overview/stylekits/index.md

@@ -1,43 +1,47 @@
 # Stylekit
 
-![appscreen](stylekit.png)
+![screenshotsmall](sk1.png)
+
+![screenshot](sk2.png)
+
+![screenshot](sk3.png)
 
 ## Text: Paragraph Styles
 
-![appscreen](paragraph-styles.png)
+![screenshot](paragraph-styles.png)
 
 The pencil button allows editting the properties.
 
 The fill color can be a custom color, or a predefined [swatch](/GraFx-Studio/concepts/stylekits/#swatch).
 
-![appscreen](select-color.png)
+![screenshot](select-color.png)
 
 
 ## Text: Character Styles
 
-![appscreen](character-styles.png)
+![screenshot](character-styles.png)
 
 ## Swatch
 
 A swatch is a color saved inside a Stylekit. You can reuse the swatch (predefined color) in paragraph- en character styles.
 
-![appscreen](swatch.png)
+![screenshot](swatch.png)
 
 Define a color, give it a name and save the named color to be used later in a style.
 
-![appscreen](swatch-2.png)
+![screenshot](swatch-2.png)
 
 ## Fonts
 
 ### Adding Fonts
 
 Select the font-book to view your fonts, and add them to the stylekit.
 
-![appscreen](fonts.png)
+![screenshot](fonts.png)
 
 Select the font family you want to add to your document.
 
-![appscreen](font-browser.png)
+![screenshot](font-browser.png)
 
 
 [See GraFx Fonts](/GraFx-Fonts/)

docs/GraFx-Studio/overview/workspace-elements/index.md

@@ -2,8 +2,6 @@
 
 When opening the GraFx Studio editor, you will see the full workspace
 
-![appscreen](editor.png)
-
 ## Elements on screen
 
 ![appscreen](editor-labeled.png)