add square logo variants to brand page

7 files changed, 96 insertions, 0 deletions

diff --git a/packages/console/app/src/asset/brand/opencode-logo-dark-square.png b/packages/console/app/src/asset/brand/opencode-logo-dark-square.png
new file mode 100644
index 000000000..673c7e3a2
--- /dev/null
+++ b/packages/console/app/src/asset/brand/opencode-logo-dark-square.png
diff --git a/packages/console/app/src/asset/brand/opencode-logo-dark-square.svg b/packages/console/app/src/asset/brand/opencode-logo-dark-square.svg
new file mode 100644
index 000000000..6a67f6271
--- /dev/null
+++ b/packages/console/app/src/asset/brand/opencode-logo-dark-square.svg
@@ -0,0 +1,18 @@
+<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g transform="translate(30, 0)">
+<g clip-path="url(#clip0_1401_86283)">
+<mask id="mask0_1401_86283" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="300">
+<path d="M240 0H0V300H240V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86283)">
+<path d="M180 240H60V120H180V240Z" fill="#4B4646"/>
+<path d="M180 60H60V240H180V60ZM240 300H0V0H240V300Z" fill="#F1ECEC"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86283">
+<rect width="240" height="300" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/console/app/src/asset/brand/opencode-logo-light-square.png b/packages/console/app/src/asset/brand/opencode-logo-light-square.png
new file mode 100644
index 000000000..5c710474a
--- /dev/null
+++ b/packages/console/app/src/asset/brand/opencode-logo-light-square.png
diff --git a/packages/console/app/src/asset/brand/opencode-logo-light-square.svg b/packages/console/app/src/asset/brand/opencode-logo-light-square.svg
new file mode 100644
index 000000000..a738ad87d
--- /dev/null
+++ b/packages/console/app/src/asset/brand/opencode-logo-light-square.svg
@@ -0,0 +1,18 @@
+<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g transform="translate(30, 0)">
+<g clip-path="url(#clip0_1401_86274)">
+<mask id="mask0_1401_86274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="300">
+<path d="M240 0H0V300H240V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86274)">
+<path d="M180 240H60V120H180V240Z" fill="#CFCECD"/>
+<path d="M180 60H60V240H180V60ZM240 300H0V0H240V300Z" fill="#211E1E"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86274">
+<rect width="240" height="300" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/console/app/src/asset/brand/preview-opencode-logo-dark-square.png b/packages/console/app/src/asset/brand/preview-opencode-logo-dark-square.png
new file mode 100644
index 000000000..604ad7aa7
--- /dev/null
+++ b/packages/console/app/src/asset/brand/preview-opencode-logo-dark-square.png
diff --git a/packages/console/app/src/asset/brand/preview-opencode-logo-light-square.png b/packages/console/app/src/asset/brand/preview-opencode-logo-light-square.png
new file mode 100644
index 000000000..3964d8528
--- /dev/null
+++ b/packages/console/app/src/asset/brand/preview-opencode-logo-light-square.png
diff --git a/packages/console/app/src/routes/brand/index.tsx b/packages/console/app/src/routes/brand/index.tsx
index eda3c8472..9140462c7 100644
--- a/packages/console/app/src/routes/brand/index.tsx
+++ b/packages/console/app/src/routes/brand/index.tsx
@@ -7,18 +7,24 @@ import { useI18n } from "~/context/i18n"
 import { LocaleLinks } from "~/component/locale-links"
 import previewLogoLight from "../../asset/brand/preview-opencode-logo-light.png"
 import previewLogoDark from "../../asset/brand/preview-opencode-logo-dark.png"
+import previewLogoLightSquare from "../../asset/brand/preview-opencode-logo-light-square.png"
+import previewLogoDarkSquare from "../../asset/brand/preview-opencode-logo-dark-square.png"
 import previewWordmarkLight from "../../asset/brand/preview-opencode-wordmark-light.png"
 import previewWordmarkDark from "../../asset/brand/preview-opencode-wordmark-dark.png"
 import previewWordmarkSimpleLight from "../../asset/brand/preview-opencode-wordmark-simple-light.png"
 import previewWordmarkSimpleDark from "../../asset/brand/preview-opencode-wordmark-simple-dark.png"
 import logoLightPng from "../../asset/brand/opencode-logo-light.png"
 import logoDarkPng from "../../asset/brand/opencode-logo-dark.png"
+import logoLightSquarePng from "../../asset/brand/opencode-logo-light-square.png"
+import logoDarkSquarePng from "../../asset/brand/opencode-logo-dark-square.png"
 import wordmarkLightPng from "../../asset/brand/opencode-wordmark-light.png"
 import wordmarkDarkPng from "../../asset/brand/opencode-wordmark-dark.png"
 import wordmarkSimpleLightPng from "../../asset/brand/opencode-wordmark-simple-light.png"
 import wordmarkSimpleDarkPng from "../../asset/brand/opencode-wordmark-simple-dark.png"
 import logoLightSvg from "../../asset/brand/opencode-logo-light.svg"
 import logoDarkSvg from "../../asset/brand/opencode-logo-dark.svg"
+import logoLightSquareSvg from "../../asset/brand/opencode-logo-light-square.svg"
+import logoDarkSquareSvg from "../../asset/brand/opencode-logo-dark-square.svg"
 import wordmarkLightSvg from "../../asset/brand/opencode-wordmark-light.svg"
 import wordmarkDarkSvg from "../../asset/brand/opencode-wordmark-dark.svg"
 import wordmarkSimpleLightSvg from "../../asset/brand/opencode-wordmark-simple-light.svg"
@@ -136,6 +142,60 @@ export default function Brand() {
                 </div>
               </div>
               <div>
+                <img src={previewLogoLightSquare} alt="OpenCode brand guidelines" />
+                <div data-component="actions">
+                  <button onClick={() => downloadFile(logoLightSquarePng, "opencode-logo-light-square.png")}>
+                    PNG
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                  <button onClick={() => downloadFile(logoLightSquareSvg, "opencode-logo-light-square.svg")}>
+                    SVG
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                <img src={previewLogoDarkSquare} alt="OpenCode brand guidelines" />
+                <div data-component="actions">
+                  <button onClick={() => downloadFile(logoDarkSquarePng, "opencode-logo-dark-square.png")}>
+                    PNG
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                  <button onClick={() => downloadFile(logoDarkSquareSvg, "opencode-logo-dark-square.svg")}>
+                    SVG
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="square"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
                 <img src={previewWordmarkLight} alt="OpenCode brand guidelines" />
                 <div data-component="actions">
                   <button onClick={() => downloadFile(wordmarkLightPng, "opencode-wordmark-light.png")}>