From 4abaa5251384903cc9b7faa1fdccda2e426ec474 Mon Sep 17 00:00:00 2001
From: Tony Ketcham <aketcham@figma.com>
Date: Sat, 22 Aug 2026 01:34:47 +0000
Subject: [PATCH] docs: add Flatbread brand marks

## Describe

Replace the old raster README header with the new centered SVG mark and a centered Flatbread title. Add full-color transparent and one-color light and dark SVG variants with simple usage guidance.

## Test Plan

- Run `pnpm verify`.
- Render all four SVG variants at 16, 32, 256, and 1024 px with resvg.
- Review the primary, transparent, dark, and light variants on their intended backgrounds.

Change-Id: I325cf679e1e220cafc9824a9a6c2d3a83ca03638
---
 assets/brand/README.md                        | 15 +++++
 .../brand/flatbread-mark-monochrome-dark.svg  | 66 +++++++++++++++++++
 .../brand/flatbread-mark-monochrome-light.svg | 66 +++++++++++++++++++
 assets/brand/flatbread-mark-transparent.svg   | 55 ++++++++++++++++
 assets/brand/flatbread-mark.svg               | 59 +++++++++++++++++
 packages/flatbread/README.md                  |  4 +-
 6 files changed, 263 insertions(+), 2 deletions(-)
 create mode 100644 assets/brand/README.md
 create mode 100644 assets/brand/flatbread-mark-monochrome-dark.svg
 create mode 100644 assets/brand/flatbread-mark-monochrome-light.svg
 create mode 100644 assets/brand/flatbread-mark-transparent.svg
 create mode 100644 assets/brand/flatbread-mark.svg

diff --git a/assets/brand/README.md b/assets/brand/README.md
new file mode 100644
index 00000000..b225530d
--- /dev/null
+++ b/assets/brand/README.md
@@ -0,0 +1,15 @@
+# Flatbread brand marks
+
+Each mark uses the same `0 0 1024 1024` view box, spacing, and tile geometry.
+
+- `flatbread-mark.svg` is the primary mark. Use it in the Flatbread README and
+  anywhere the dark plum tile fits.
+- `flatbread-mark-transparent.svg` keeps the full-color mark on a transparent
+  field. Use it on dark backgrounds.
+- `flatbread-mark-monochrome-dark.svg` is the one-color mark for light
+  backgrounds.
+- `flatbread-mark-monochrome-light.svg` is the one-color mark for dark
+  backgrounds.
+
+Keep the square view box and its clear space. Do not add shadows, gradients,
+text, or new colors to the marks.
diff --git a/assets/brand/flatbread-mark-monochrome-dark.svg b/assets/brand/flatbread-mark-monochrome-dark.svg
new file mode 100644
index 00000000..d7c13439
--- /dev/null
+++ b/assets/brand/flatbread-mark-monochrome-dark.svg
@@ -0,0 +1,66 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 1024 1024"
+  role="img"
+  aria-labelledby="title desc"
+>
+  <title id="title">Flatbread dark monochrome mark</title>
+  <desc id="desc">
+    A one-color dark plum Flatbread mark on a transparent field.
+  </desc>
+
+  <defs>
+    <mask
+      id="tile-cutouts"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="1024"
+      height="1024"
+    >
+      <rect width="1024" height="1024" fill="#fff" />
+      <rect x="178" y="698" width="500" height="132" rx="34" fill="#000" />
+      <rect x="234" y="530" width="500" height="132" rx="34" fill="#000" />
+      <rect x="290" y="362" width="500" height="132" rx="34" fill="#000" />
+      <rect x="346" y="194" width="500" height="132" rx="34" fill="#000" />
+    </mask>
+  </defs>
+
+  <g fill="#21102F" mask="url(#tile-cutouts)">
+    <rect x="268" y="678" width="376" height="4" />
+    <rect x="324" y="510" width="376" height="4" />
+    <rect x="380" y="342" width="376" height="4" />
+
+    <rect x="160" y="680" width="536" height="168" rx="52" />
+    <rect x="216" y="512" width="536" height="168" rx="52" />
+    <rect x="272" y="344" width="536" height="168" rx="52" />
+    <rect x="328" y="176" width="536" height="168" rx="52" />
+
+    <path d="M336.182 320 C346.417 336 290.417 352 280.182 368 H400 V320 Z" />
+    <path d="M855.818 320 C845.583 336 789.583 352 799.818 368 H740 V320 Z" />
+    <path d="M280.182 488 C290.417 504 234.417 520 224.182 536 H344 V488 Z" />
+    <path d="M799.818 488 C789.583 504 733.583 520 743.818 536 H684 V488 Z" />
+    <path d="M224.182 656 C234.417 672 178.417 688 168.182 704 H288 V656 Z" />
+    <path d="M743.818 656 C733.583 672 677.583 688 687.818 704 H628 V656 Z" />
+  </g>
+
+  <g fill="#21102F">
+    <path
+      d="M242 698 H212 A34 34 0 0 0 178 732 V796 A34 34 0 0 0 212 830 H242 Z"
+    />
+    <path
+      d="M298 530 H268 A34 34 0 0 0 234 564 V628 A34 34 0 0 0 268 662 H298 Z"
+    />
+    <path
+      d="M354 362 H324 A34 34 0 0 0 290 396 V460 A34 34 0 0 0 324 494 H354 Z"
+    />
+    <path
+      d="M410 194 H380 A34 34 0 0 0 346 228 V292 A34 34 0 0 0 380 326 H410 Z"
+    />
+
+    <rect x="282" y="746" width="328" height="36" rx="18" />
+    <rect x="338" y="578" width="260" height="36" rx="18" />
+    <rect x="394" y="410" width="192" height="36" rx="18" />
+    <rect x="450" y="242" width="124" height="36" rx="18" />
+  </g>
+</svg>
diff --git a/assets/brand/flatbread-mark-monochrome-light.svg b/assets/brand/flatbread-mark-monochrome-light.svg
new file mode 100644
index 00000000..72af3dc3
--- /dev/null
+++ b/assets/brand/flatbread-mark-monochrome-light.svg
@@ -0,0 +1,66 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 1024 1024"
+  role="img"
+  aria-labelledby="title desc"
+>
+  <title id="title">Flatbread light monochrome mark</title>
+  <desc id="desc">
+    A one-color warm white Flatbread mark on a transparent field.
+  </desc>
+
+  <defs>
+    <mask
+      id="tile-cutouts"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="1024"
+      height="1024"
+    >
+      <rect width="1024" height="1024" fill="#fff" />
+      <rect x="178" y="698" width="500" height="132" rx="34" fill="#000" />
+      <rect x="234" y="530" width="500" height="132" rx="34" fill="#000" />
+      <rect x="290" y="362" width="500" height="132" rx="34" fill="#000" />
+      <rect x="346" y="194" width="500" height="132" rx="34" fill="#000" />
+    </mask>
+  </defs>
+
+  <g fill="#FFE8DC" mask="url(#tile-cutouts)">
+    <rect x="268" y="678" width="376" height="4" />
+    <rect x="324" y="510" width="376" height="4" />
+    <rect x="380" y="342" width="376" height="4" />
+
+    <rect x="160" y="680" width="536" height="168" rx="52" />
+    <rect x="216" y="512" width="536" height="168" rx="52" />
+    <rect x="272" y="344" width="536" height="168" rx="52" />
+    <rect x="328" y="176" width="536" height="168" rx="52" />
+
+    <path d="M336.182 320 C346.417 336 290.417 352 280.182 368 H400 V320 Z" />
+    <path d="M855.818 320 C845.583 336 789.583 352 799.818 368 H740 V320 Z" />
+    <path d="M280.182 488 C290.417 504 234.417 520 224.182 536 H344 V488 Z" />
+    <path d="M799.818 488 C789.583 504 733.583 520 743.818 536 H684 V488 Z" />
+    <path d="M224.182 656 C234.417 672 178.417 688 168.182 704 H288 V656 Z" />
+    <path d="M743.818 656 C733.583 672 677.583 688 687.818 704 H628 V656 Z" />
+  </g>
+
+  <g fill="#FFE8DC">
+    <path
+      d="M242 698 H212 A34 34 0 0 0 178 732 V796 A34 34 0 0 0 212 830 H242 Z"
+    />
+    <path
+      d="M298 530 H268 A34 34 0 0 0 234 564 V628 A34 34 0 0 0 268 662 H298 Z"
+    />
+    <path
+      d="M354 362 H324 A34 34 0 0 0 290 396 V460 A34 34 0 0 0 324 494 H354 Z"
+    />
+    <path
+      d="M410 194 H380 A34 34 0 0 0 346 228 V292 A34 34 0 0 0 380 326 H410 Z"
+    />
+
+    <rect x="282" y="746" width="328" height="36" rx="18" />
+    <rect x="338" y="578" width="260" height="36" rx="18" />
+    <rect x="394" y="410" width="192" height="36" rx="18" />
+    <rect x="450" y="242" width="124" height="36" rx="18" />
+  </g>
+</svg>
diff --git a/assets/brand/flatbread-mark-transparent.svg b/assets/brand/flatbread-mark-transparent.svg
new file mode 100644
index 00000000..5439058b
--- /dev/null
+++ b/assets/brand/flatbread-mark-transparent.svg
@@ -0,0 +1,55 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 1024 1024"
+  role="img"
+  aria-labelledby="title desc"
+>
+  <title id="title">Flatbread transparent mark</title>
+  <desc id="desc">
+    Four offset record tiles in violet, pink, orange, and yellow on a
+    transparent field.
+  </desc>
+
+  <g fill="#FFE8DC">
+    <rect x="268" y="678" width="376" height="4" />
+    <rect x="324" y="510" width="376" height="4" />
+    <rect x="380" y="342" width="376" height="4" />
+
+    <rect x="160" y="680" width="536" height="168" rx="52" />
+    <rect x="216" y="512" width="536" height="168" rx="52" />
+    <rect x="272" y="344" width="536" height="168" rx="52" />
+    <rect x="328" y="176" width="536" height="168" rx="52" />
+
+    <path d="M336.182 320 C346.417 336 290.417 352 280.182 368 H400 V320 Z" />
+    <path d="M855.818 320 C845.583 336 789.583 352 799.818 368 H740 V320 Z" />
+    <path d="M280.182 488 C290.417 504 234.417 520 224.182 536 H344 V488 Z" />
+    <path d="M799.818 488 C789.583 504 733.583 520 743.818 536 H684 V488 Z" />
+    <path d="M224.182 656 C234.417 672 178.417 688 168.182 704 H288 V656 Z" />
+    <path d="M743.818 656 C733.583 672 677.583 688 687.818 704 H628 V656 Z" />
+  </g>
+
+  <rect x="178" y="698" width="500" height="132" rx="34" fill="#6719FB" />
+  <rect x="234" y="530" width="500" height="132" rx="34" fill="#FD2693" />
+  <rect x="290" y="362" width="500" height="132" rx="34" fill="#FF671E" />
+  <rect x="346" y="194" width="500" height="132" rx="34" fill="#FFD609" />
+
+  <g fill="#21102F">
+    <path
+      d="M242 698 H212 A34 34 0 0 0 178 732 V796 A34 34 0 0 0 212 830 H242 Z"
+    />
+    <path
+      d="M298 530 H268 A34 34 0 0 0 234 564 V628 A34 34 0 0 0 268 662 H298 Z"
+    />
+    <path
+      d="M354 362 H324 A34 34 0 0 0 290 396 V460 A34 34 0 0 0 324 494 H354 Z"
+    />
+    <path
+      d="M410 194 H380 A34 34 0 0 0 346 228 V292 A34 34 0 0 0 380 326 H410 Z"
+    />
+  </g>
+
+  <rect x="282" y="746" width="328" height="36" rx="18" fill="#FFE8DC" />
+  <rect x="338" y="578" width="260" height="36" rx="18" fill="#FFE8DC" />
+  <rect x="394" y="410" width="192" height="36" rx="18" fill="#FFE8DC" />
+  <rect x="450" y="242" width="124" height="36" rx="18" fill="#21102F" />
+</svg>
diff --git a/assets/brand/flatbread-mark.svg b/assets/brand/flatbread-mark.svg
new file mode 100644
index 00000000..8580f479
--- /dev/null
+++ b/assets/brand/flatbread-mark.svg
@@ -0,0 +1,59 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 1024 1024"
+  role="img"
+  aria-labelledby="title desc"
+>
+  <title id="title">Flatbread</title>
+  <desc id="desc">
+    Four offset record tiles in violet, pink, orange, and yellow climb across a
+    dark plum field.
+  </desc>
+
+  <rect width="1024" height="1024" rx="180" fill="#21102F" />
+
+  <g fill="#FFE8DC">
+    <!-- Same-color backstops prevent subpixel background seams at exact shared edges. -->
+    <rect x="268" y="678" width="376" height="4" />
+    <rect x="324" y="510" width="376" height="4" />
+    <rect x="380" y="342" width="376" height="4" />
+
+    <rect x="160" y="680" width="536" height="168" rx="52" />
+    <rect x="216" y="512" width="536" height="168" rx="52" />
+    <rect x="272" y="344" width="536" height="168" rx="52" />
+    <rect x="328" y="176" width="536" height="168" rx="52" />
+
+    <!-- C1 transition bridges replace the tangent pinches at the three joins. -->
+    <path d="M336.182 320 C346.417 336 290.417 352 280.182 368 H400 V320 Z" />
+    <path d="M855.818 320 C845.583 336 789.583 352 799.818 368 H740 V320 Z" />
+    <path d="M280.182 488 C290.417 504 234.417 520 224.182 536 H344 V488 Z" />
+    <path d="M799.818 488 C789.583 504 733.583 520 743.818 536 H684 V488 Z" />
+    <path d="M224.182 656 C234.417 672 178.417 688 168.182 704 H288 V656 Z" />
+    <path d="M743.818 656 C733.583 672 677.583 688 687.818 704 H628 V656 Z" />
+  </g>
+
+  <rect x="178" y="698" width="500" height="132" rx="34" fill="#6719FB" />
+  <rect x="234" y="530" width="500" height="132" rx="34" fill="#FD2693" />
+  <rect x="290" y="362" width="500" height="132" rx="34" fill="#FF671E" />
+  <rect x="346" y="194" width="500" height="132" rx="34" fill="#FFD609" />
+
+  <g fill="#21102F">
+    <path
+      d="M242 698 H212 A34 34 0 0 0 178 732 V796 A34 34 0 0 0 212 830 H242 Z"
+    />
+    <path
+      d="M298 530 H268 A34 34 0 0 0 234 564 V628 A34 34 0 0 0 268 662 H298 Z"
+    />
+    <path
+      d="M354 362 H324 A34 34 0 0 0 290 396 V460 A34 34 0 0 0 324 494 H354 Z"
+    />
+    <path
+      d="M410 194 H380 A34 34 0 0 0 346 228 V292 A34 34 0 0 0 380 326 H410 Z"
+    />
+  </g>
+
+  <rect x="282" y="746" width="328" height="36" rx="18" fill="#FFE8DC" />
+  <rect x="338" y="578" width="260" height="36" rx="18" fill="#FFE8DC" />
+  <rect x="394" y="410" width="192" height="36" rx="18" fill="#FFE8DC" />
+  <rect x="450" y="242" width="124" height="36" rx="18" fill="#21102F" />
+</svg>
diff --git a/packages/flatbread/README.md b/packages/flatbread/README.md
index d004926b..b9ddfd05 100644
--- a/packages/flatbread/README.md
+++ b/packages/flatbread/README.md
@@ -1,8 +1,8 @@
 <p align="center">
-<img src="https://raw.githubusercontent.com/FlatbreadLabs/flatbread/main/assets/flatbread%20logo%20v2%20x4%401-1728x1080%20centered%20header.png"/>
+  <img src="https://raw.githubusercontent.com/FlatbreadLabs/flatbread/main/assets/brand/flatbread-mark.svg" alt="Flatbread logo" width="256" />
 </p>
 
-<h1 align="center">Flatbread 🥪</h1>
+<h1 align="center">Flatbread</h1>
 
 <p align="center">
   <a href="https://github.com/FlatbreadLabs/flatbread/actions/workflows/pipeline.yml">