From bf77f3376f1a6e5d1fe38ab4f6e0ac48bea862c5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 26 Dec 2025 23:58:23 +0000
Subject: [PATCH 1/2] feat: Add visible gaps between pixels in BS logo

Add a 0.7px gap between individual pixels to create a more pronounced
pixelated/retro look. Previously the pixels were seamlessly adjacent,
making the pixel art effect difficult to see at smaller sizes.
---
 packages/web/app/components/brand/logo.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/web/app/components/brand/logo.tsx b/packages/web/app/components/brand/logo.tsx
index d42b43e4..20723988 100644
--- a/packages/web/app/components/brand/logo.tsx
+++ b/packages/web/app/components/brand/logo.tsx
@@ -52,12 +52,14 @@ const PixelLetter = ({
   startX,
   startY,
   pixelSize,
+  gap,
   fill,
 }: {
   pixels: number[][];
   startX: number;
   startY: number;
   pixelSize: number;
+  gap: number;
   fill: string;
 }) => (
   <>
@@ -68,8 +70,8 @@ const PixelLetter = ({
             key={`${x}-${y}`}
             x={startX + x * pixelSize}
             y={startY + y * pixelSize}
-            width={pixelSize}
-            height={pixelSize}
+            width={pixelSize - gap}
+            height={pixelSize - gap}
             fill={fill}
           />
         ) : null,
@@ -79,8 +81,9 @@ const PixelLetter = ({
 );
 
 export const Logo = ({ size = 'md', showText = true, linkToHome = true }: LogoProps) => {
-  const { icon, fontSize, gap } = sizes[size];
+  const { icon, fontSize, gap: textGap } = sizes[size];
   const pixelSize = 3;
+  const pixelGap = 0.7; // Gap between pixels for visible grid effect
   const shadowOffset = 2;
 
   const logoContent = (
@@ -88,7 +91,7 @@ export const Logo = ({ size = 'md', showText = true, linkToHome = true }: LogoPr
       style={{
         display: 'flex',
         alignItems: 'center',
-        gap,
+        gap: textGap,
         textDecoration: 'none',
         color: 'inherit',
       }}
@@ -105,12 +108,12 @@ export const Logo = ({ size = 'md', showText = true, linkToHome = true }: LogoPr
         <rect x="0" y="0" width="48" height="48" rx="4" fill="transparent" />
 
         {/* Pink shadow layers */}
-        <PixelLetter pixels={B_PIXELS} startX={3 + shadowOffset} startY={6 + shadowOffset} pixelSize={pixelSize} fill={KILTER_PINK} />
-        <PixelLetter pixels={S_PIXELS} startX={24 + shadowOffset} startY={6 + shadowOffset} pixelSize={pixelSize} fill={KILTER_PINK} />
+        <PixelLetter pixels={B_PIXELS} startX={3 + shadowOffset} startY={6 + shadowOffset} pixelSize={pixelSize} gap={pixelGap} fill={KILTER_PINK} />
+        <PixelLetter pixels={S_PIXELS} startX={24 + shadowOffset} startY={6 + shadowOffset} pixelSize={pixelSize} gap={pixelGap} fill={KILTER_PINK} />
 
         {/* Cyan letters */}
-        <PixelLetter pixels={B_PIXELS} startX={3} startY={6} pixelSize={pixelSize} fill={KILTER_CYAN} />
-        <PixelLetter pixels={S_PIXELS} startX={24} startY={6} pixelSize={pixelSize} fill={KILTER_CYAN} />
+        <PixelLetter pixels={B_PIXELS} startX={3} startY={6} pixelSize={pixelSize} gap={pixelGap} fill={KILTER_CYAN} />
+        <PixelLetter pixels={S_PIXELS} startX={24} startY={6} pixelSize={pixelSize} gap={pixelGap} fill={KILTER_CYAN} />
       </svg>
       {showText && (
         <span

From ddf3d5d9ca7dbebf15a03f1aa43b4bec7bb6811d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 27 Dec 2025 00:05:57 +0000
Subject: [PATCH 2/2] refactor: Use chunkier pixels for BS logo instead of gaps

Instead of adding whitespace gaps between pixels (which looked weird),
use simpler 5x7 letter grids with larger 4px pixels. This creates a
more authentic chunky pixel art look while maintaining solid pixels.
---
 packages/web/app/components/brand/logo.tsx | 53 ++++++++++------------
 1 file changed, 23 insertions(+), 30 deletions(-)

diff --git a/packages/web/app/components/brand/logo.tsx b/packages/web/app/components/brand/logo.tsx
index 20723988..a5c83b90 100644
--- a/packages/web/app/components/brand/logo.tsx
+++ b/packages/web/app/components/brand/logo.tsx
@@ -21,30 +21,26 @@ const sizes = {
 };
 
 // Pixel art letter definitions (each letter on a grid)
-// B letter - 7 wide x 9 tall pixels
+// B letter - 5 wide x 7 tall pixels (chunky style)
 const B_PIXELS = [
-  [1, 1, 1, 1, 1, 1, 0],
-  [1, 1, 1, 1, 1, 1, 1],
-  [1, 1, 0, 0, 0, 1, 1],
-  [1, 1, 1, 1, 1, 1, 0],
-  [1, 1, 1, 1, 1, 1, 1],
-  [1, 1, 0, 0, 0, 1, 1],
-  [1, 1, 0, 0, 0, 1, 1],
-  [1, 1, 1, 1, 1, 1, 1],
-  [1, 1, 1, 1, 1, 1, 0],
+  [1, 1, 1, 1, 0],
+  [1, 0, 0, 0, 1],
+  [1, 0, 0, 0, 1],
+  [1, 1, 1, 1, 0],
+  [1, 0, 0, 0, 1],
+  [1, 0, 0, 0, 1],
+  [1, 1, 1, 1, 0],
 ];
 
-// S letter - 7 wide x 9 tall pixels
+// S letter - 5 wide x 7 tall pixels (chunky style)
 const S_PIXELS = [
-  [0, 1, 1, 1, 1, 1, 1],
-  [1, 1, 1, 1, 1, 1, 1],
-  [1, 1, 0, 0, 0, 0, 0],
-  [1, 1, 1, 1, 1, 1, 0],
-  [0, 1, 1, 1, 1, 1, 1],
-  [0, 0, 0, 0, 0, 1, 1],
-  [0, 0, 0, 0, 0, 1, 1],
-  [1, 1, 1, 1, 1, 1, 1],
-  [1, 1, 1, 1, 1, 1, 0],
+  [0, 1, 1, 1, 1],
+  [1, 0, 0, 0, 0],
+  [1, 0, 0, 0, 0],
+  [0, 1, 1, 1, 0],
+  [0, 0, 0, 0, 1],
+  [0, 0, 0, 0, 1],
+  [1, 1, 1, 1, 0],
 ];
 
 const PixelLetter = ({
@@ -52,14 +48,12 @@ const PixelLetter = ({
   startX,
   startY,
   pixelSize,
-  gap,
   fill,
 }: {
   pixels: number[][];
   startX: number;
   startY: number;
   pixelSize: number;
-  gap: number;
   fill: string;
 }) => (
   <>
@@ -70,8 +64,8 @@ const PixelLetter = ({
             key={`${x}-${y}`}
             x={startX + x * pixelSize}
             y={startY + y * pixelSize}
-            width={pixelSize - gap}
-            height={pixelSize - gap}
+            width={pixelSize}
+            height={pixelSize}
             fill={fill}
           />
         ) : null,
@@ -82,8 +76,7 @@ const PixelLetter = ({
 
 export const Logo = ({ size = 'md', showText = true, linkToHome = true }: LogoProps) => {
   const { icon, fontSize, gap: textGap } = sizes[size];
-  const pixelSize = 3;
-  const pixelGap = 0.7; // Gap between pixels for visible grid effect
+  const pixelSize = 4;
   const shadowOffset = 2;
 
   const logoContent = (
@@ -108,12 +101,12 @@ export const Logo = ({ size = 'md', showText = true, linkToHome = true }: LogoPr
         <rect x="0" y="0" width="48" height="48" rx="4" fill="transparent" />
 
         {/* Pink shadow layers */}
-        <PixelLetter pixels={B_PIXELS} startX={3 + shadowOffset} startY={6 + shadowOffset} pixelSize={pixelSize} gap={pixelGap} fill={KILTER_PINK} />
-        <PixelLetter pixels={S_PIXELS} startX={24 + shadowOffset} startY={6 + shadowOffset} pixelSize={pixelSize} gap={pixelGap} fill={KILTER_PINK} />
+        <PixelLetter pixels={B_PIXELS} startX={2 + shadowOffset} startY={10 + shadowOffset} pixelSize={pixelSize} fill={KILTER_PINK} />
+        <PixelLetter pixels={S_PIXELS} startX={26 + shadowOffset} startY={10 + shadowOffset} pixelSize={pixelSize} fill={KILTER_PINK} />
 
         {/* Cyan letters */}
-        <PixelLetter pixels={B_PIXELS} startX={3} startY={6} pixelSize={pixelSize} gap={pixelGap} fill={KILTER_CYAN} />
-        <PixelLetter pixels={S_PIXELS} startX={24} startY={6} pixelSize={pixelSize} gap={pixelGap} fill={KILTER_CYAN} />
+        <PixelLetter pixels={B_PIXELS} startX={2} startY={10} pixelSize={pixelSize} fill={KILTER_CYAN} />
+        <PixelLetter pixels={S_PIXELS} startX={26} startY={10} pixelSize={pixelSize} fill={KILTER_CYAN} />
       </svg>
       {showText && (
         <span