Guide: Recommend Swatchfin for creating a design system

AGENTS.md

@@ -29,6 +29,8 @@ This is the public documentation repository for Lazurio.
 - Write for the reader's task: lead with the answer or next action, then explain.
 - Use direct sentences and concrete subjects. Cut stock introductions, repeated
   conclusions and abstract phrases that do not tell the reader anything new.
+- Avoid em dashes and formulaic AI phrasing. Prefer short, natural sentences
+  that say what the reader can do and why it helps.
 - Explain necessary technical terms on first use. Preserve exact identifiers,
   commands, access restrictions, source links and distinctions between a rule
   and a technically enforced control.

app/v2/src/components/GoogleAnalyticsConsent.astro

@@ -291,7 +291,7 @@ const copy = locale === 'cs'
         const link = event.target.closest('a[data-analytics-event="Guide App Click"]')
         if (!(link instanceof HTMLAnchorElement)) return
         const app = link.dataset.analyticsApp
-        if (!['wispr-flow', 'codexbar', 'amphetamine'].includes(app || '')) return
+        if (!['wispr-flow', 'codexbar', 'amphetamine', 'swatchfin'].includes(app || '')) return
         window.gtag('event', 'guide_app_click', { ...pageFields, app, content_group: 'guide', send_to: measurementId })
       })
 

app/v2/tests/documentation.spec.ts

@@ -130,7 +130,7 @@ test('the Guide, work tips and real application visuals are available in both lo
     await expect(page.getByText('Browser Use', { exact: true })).toBeVisible()
 
     await page.goto(`/${locale}/guide/recommended-apps/`)
-    for (const app of ['Wispr Flow', 'CodexBar', 'Amphetamine']) {
+    for (const app of ['Wispr Flow', 'CodexBar', 'Amphetamine', 'Swatchfin']) {
       const image = page.getByRole('img', { name: app })
       await expect(image).toBeVisible()
       await expect.poll(() => image.evaluate((element) => (element as HTMLImageElement).naturalWidth)).toBeGreaterThan(0)
@@ -139,20 +139,22 @@ test('the Guide, work tips and real application visuals are available in both lo
   }
 })
 
-test('consented Guide app clicks include Amphetamine but not Browser Use tips', async ({ page }) => {
+test('consented Guide app clicks include Swatchfin and Amphetamine but not Browser Use tips', async ({ page }) => {
   await page.route('https://www.googletagmanager.com/**', (route) => route.fulfill({ status: 204, body: '' }))
   await page.goto('/en/guide/recommended-apps/?__analytics_test=1')
   await page.getByRole('button', { name: 'Allow all' }).click()
 
-  const appEvent = await page.evaluate(() => {
-    const link = document.querySelector('a[data-analytics-app="amphetamine"]')
-    if (!(link instanceof HTMLAnchorElement)) throw new Error('Amphetamine link is missing')
-    link.addEventListener('click', (event) => event.preventDefault(), { once: true })
-    link.click()
-    const dataLayer = (window as Window & { dataLayer?: unknown[][] }).dataLayer ?? []
-    return dataLayer.find((entry) => entry[0] === 'event' && entry[1] === 'guide_app_click')
-  })
-  expect(appEvent?.[2]).toMatchObject({ app: 'amphetamine', content_group: 'guide' })
+  for (const app of ['amphetamine', 'swatchfin']) {
+    const appEvent = await page.evaluate((appName) => {
+      const link = document.querySelector(`a[data-analytics-app="${appName}"]`)
+      if (!(link instanceof HTMLAnchorElement)) throw new Error(`${appName} link is missing`)
+      link.addEventListener('click', (event) => event.preventDefault(), { once: true })
+      link.click()
+      const dataLayer = (window as Window & { dataLayer?: unknown[][] }).dataLayer ?? []
+      return dataLayer.find((entry) => entry[0] === 'event' && entry[1] === 'guide_app_click' && (entry[2] as { app?: string })?.app === appName)
+    }, app)
+    expect(appEvent?.[2]).toMatchObject({ app, content_group: 'guide' })
+  }
 
   // Browser Use is a capability of the Colleague's own tool, not a product:
   // the work tip must not link out to a third-party site or carry a click event.

data/v2/docs/cs/guide/recommended-apps.mdx

@@ -3,9 +3,9 @@ title: Doporučené aplikace
 description: Externí nástroje, které mohou zpříjemnit práci s Lazuriem a AI.
 stableId: lazurio-doc-guide-recommended-apps
 locale: cs
-summary: Tři praktické nástroje pro diktování, kontrolu AI limitů a Mac, který neusne.
-updatedAt: "2026-09-15"
-reviewedAt: "2026-09-15"
+summary: Nástroje pro diktování, kontrolu AI limitů, Mac bez uspání a tvorbu design systému.
+updatedAt: "2026-10-23"
+reviewedAt: "2026-10-23"
 reviewOwner: Anna Blazickova
 secondReviewOwner: Pablo AI
 trustCritical: true
@@ -15,23 +15,24 @@ sourceRefs:
   - codexbar
   - codexbar-permissions
   - amphetamine
+  - swatchfin
+  - swatchfin-source
 audience:
   - decision-maker
   - builder
   - agent
 ---
 
-Chcete zadání raději diktovat, vidět zbývající AI limity nebo zabránit uspání
-Macu během práce? K tomu slouží tyto tři aplikace. Nejsou součástí Lazuria;
-před instalací ověřte, že je vaše organizace dovoluje.
+Tyto aplikace vám mohou usnadnit práci s AI i přípravu vlastního design
+systému. Před použitím s pracovními daty si ověřte pravidla své Organizace.
 
 <div class="lz-guide-apps">
   <article class="lz-guide-app">
     <div class="lz-guide-app__visual"><img src="/guide-assets/wispr-flow.svg" alt="Wispr Flow" /></div>
     <div><p class="lz-guide-app__eyebrow">Hlasové zadávání</p><h2>Wispr Flow</h2></div>
     <p>Diktování, které funguje v textových polích napříč aplikacemi. Mluvte přirozeně a Wispr Flow z řeči připraví upravený text.</p>
     <p><strong>Kdy se hodí:</strong> Když chcete rychle nadiktovat delší prompt, e-mail nebo zprávu a nechcete vše psát na klávesnici.</p>
-    <p><strong>Soukromí:</strong> Zapnuté Context Awareness může číst okolní text, screenshot a historii konverzace. Nejde tedy jen o to, co nadiktujete. Před použitím s pracovními daty nechte schválit zpracování a oprávnění; pro citlivé prostředí vypněte Context awareness v Settings → Data and Privacy. Nastavení uchování a použití dat pro trénink ověřte zvlášť. <a href="https://docs.wisprflow.ai/articles/4678293671-Context-Awareness">Co může Wispr číst</a>.</p>
+    <p><strong>Soukromí:</strong> Zapnuté Context Awareness může číst okolní text i historii konverzace. Podle aktuální dokumentace nepořizuje screenshoty. Nejde tedy jen o to, co nadiktujete. Před použitím s pracovními daty nechte schválit zpracování a oprávnění; pro citlivé prostředí vypněte Context awareness v Settings → Data and Privacy. Nastavení uchování a použití dat pro trénink ověřte zvlášť. <a href="https://docs.wisprflow.ai/articles/4678293671-Context-Awareness">Co může Wispr číst</a>.</p>
     <a class="lz-guide-app__link" href="https://wisprflow.ai/downloads" data-analytics-event="Guide App Click" data-analytics-app="wispr-flow">Stáhnout Wispr Flow →</a>
   </article>
   <article class="lz-guide-app">
@@ -49,4 +50,13 @@ před instalací ověřte, že je vaše organizace dovoluje.
     <p><strong>Kdy se hodí:</strong> Když agent pracuje na delším úkolu a vy notebook zavřete nebo odejdete; práce mezitím neusne.</p>
     <a class="lz-guide-app__link" href="https://apps.apple.com/app/amphetamine/id937984704" data-analytics-event="Guide App Click" data-analytics-app="amphetamine">Otevřít Amphetamine v App Storu →</a>
   </article>
+  <article class="lz-guide-app">
+    <div class="lz-guide-app__visual"><img src="/guide-assets/swatchfin.svg" alt="Swatchfin" /></div>
+    <div><p class="lz-guide-app__eyebrow">Tvorba design systému</p><h2>Swatchfin</h2></div>
+    <p>Swatchfin z vašeho webu získá logo, barvy, písma a tón komunikace. Hodí se, když zakládáte vlastní design systém a chcete vyjít z toho, co už používáte.</p>
+    <p><strong>Jak začít:</strong> Zadejte adresu svého veřejného webu. Výsledek projděte a předejte agentovi jako podklad pro modul design systému v Lazuriu. Barvy a písma lze stáhnout jako CSS nebo pojmenované hodnoty pro použití v aplikacích.</p>
+    <p>Swatchfin je open source pod licencí MIT. Pomůže vám se základem; pravidla, komponenty a příklady použití pak doplníte ve svém design systému.</p>
+    <p><a href="https://github.com/ankanhq/swatchfin">Zdrojový kód a návod na GitHubu</a></p>
+    <a class="lz-guide-app__link" href="https://swatchfin.onrender.com/" data-analytics-event="Guide App Click" data-analytics-app="swatchfin">Otevřít Swatchfin →</a>
+  </article>
 </div>

data/v2/docs/en/guide/recommended-apps.mdx

@@ -3,9 +3,9 @@ title: Recommended applications
 description: External tools that can make work with Lazurio and AI more comfortable.
 stableId: lazurio-doc-guide-recommended-apps
 locale: en
-summary: Three practical tools for dictation, checking AI limits, and keeping a Mac awake.
-updatedAt: "2026-09-15"
-reviewedAt: "2026-09-15"
+summary: Tools for dictation, checking AI limits, keeping a Mac awake, and creating a design system.
+updatedAt: "2026-10-23"
+reviewedAt: "2026-10-23"
 reviewOwner: Anna Blazickova
 secondReviewOwner: Pablo AI
 trustCritical: true
@@ -15,23 +15,24 @@ sourceRefs:
   - codexbar
   - codexbar-permissions
   - amphetamine
+  - swatchfin
+  - swatchfin-source
 audience:
   - decision-maker
   - builder
   - agent
 ---
 
-Want to dictate a task, check your remaining AI allowance or keep your Mac
-awake while work runs? These three applications can help. They are not part
-of Lazurio; check your organization's rules before installing them.
+These apps can help you work with AI and prepare your own design system.
+Check your organization's rules before using them with work data.
 
 <div class="lz-guide-apps">
   <article class="lz-guide-app">
     <div class="lz-guide-app__visual"><img src="/guide-assets/wispr-flow.svg" alt="Wispr Flow" /></div>
     <div><p class="lz-guide-app__eyebrow">Voice input</p><h2>Wispr Flow</h2></div>
     <p>Dictation that works in text fields across applications. Speak naturally and Wispr Flow turns your speech into polished text.</p>
     <p><strong>Useful when:</strong> You want to dictate a longer prompt, email, or message quickly instead of typing everything.</p>
-    <p><strong>Privacy:</strong> With Context Awareness enabled, Flow can read surrounding text, a screenshot and conversation history—not just what you dictate. Before using work data, get its processing and permissions approved; in sensitive environments, turn off Context awareness in Settings → Data and Privacy. Check retention and model-training settings separately. <a href="https://docs.wisprflow.ai/articles/4678293671-Context-Awareness">What Wispr can read</a>.</p>
+    <p><strong>Privacy:</strong> With Context Awareness enabled, Flow can read surrounding text and conversation history. Its current documentation says it does not take screenshots. Before using work data, get its processing and permissions approved; in sensitive environments, turn off Context awareness in Settings → Data and Privacy. Check retention and model-training settings separately. <a href="https://docs.wisprflow.ai/articles/4678293671-Context-Awareness">What Wispr can read</a>.</p>
     <a class="lz-guide-app__link" href="https://wisprflow.ai/downloads" data-analytics-event="Guide App Click" data-analytics-app="wispr-flow">Download Wispr Flow →</a>
   </article>
   <article class="lz-guide-app">
@@ -49,4 +50,13 @@ of Lazurio; check your organization's rules before installing them.
     <p><strong>When it helps:</strong> When an agent is working on a longer task and you close the laptop or step away; the work does not fall asleep in the meantime.</p>
     <a class="lz-guide-app__link" href="https://apps.apple.com/app/amphetamine/id937984704" data-analytics-event="Guide App Click" data-analytics-app="amphetamine">Open Amphetamine in the App Store →</a>
   </article>
+  <article class="lz-guide-app">
+    <div class="lz-guide-app__visual"><img src="/guide-assets/swatchfin.svg" alt="Swatchfin" /></div>
+    <div><p class="lz-guide-app__eyebrow">Creating a design system</p><h2>Swatchfin</h2></div>
+    <p>Swatchfin collects your logo, colours, fonts and tone of voice from your website. Use it when starting a design system that builds on the brand you already have.</p>
+    <p><strong>Getting started:</strong> Enter your public website URL. Review the result and give it to your agent as material for a design system module in Lazurio. Colours and fonts can be exported as CSS or named values for use in applications.</p>
+    <p>Swatchfin is open source under the MIT licence. It gives you a starting point; add rules, components and examples in your own design system.</p>
+    <p><a href="https://github.com/ankanhq/swatchfin">Source code and instructions on GitHub</a></p>
+    <a class="lz-guide-app__link" href="https://swatchfin.onrender.com/" data-analytics-event="Guide App Click" data-analytics-app="swatchfin">Open Swatchfin →</a>
+  </article>
 </div>

data/v2/public/guide-assets/README.md

@@ -10,3 +10,8 @@
   It is shown only on Guide surfaces, at an integer scale with
   `image-rendering: pixelated`, and is never redrawn or resampled.
   `app/v2/scripts/verify-brand-assets.test.mjs` checks the digest at build.
+
+- `swatchfin.svg` — unchanged official Swatchfin logo from
+  `ankanhq/swatchfin` at commit `f391ab74bc0e5e8f0e54513a84d0b2130a7bb879`,
+  `frontend/assets/brand/swatchfin-logo.svg` (MIT); evidence is listed in
+  `data/v2/source-map.json`.