Skip to content

Commit e347152

Browse files
committed
add square logo variants to brand page
1 parent 6b30e0b commit e347152

8 files changed

Lines changed: 330 additions & 0 deletions
697 Bytes
Loading
Lines changed: 18 additions & 0 deletions
Loading
697 Bytes
Loading
Lines changed: 18 additions & 0 deletions
Loading
1.44 KB
Loading
1.43 KB
Loading

packages/console/app/src/routes/brand/index.tsx

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,24 @@ import { useI18n } from "~/context/i18n"
77
import { LocaleLinks } from "~/component/locale-links"
88
import previewLogoLight from "../../asset/brand/preview-opencode-logo-light.png"
99
import previewLogoDark from "../../asset/brand/preview-opencode-logo-dark.png"
10+
import previewLogoLightSquare from "../../asset/brand/preview-opencode-logo-light-square.png"
11+
import previewLogoDarkSquare from "../../asset/brand/preview-opencode-logo-dark-square.png"
1012
import previewWordmarkLight from "../../asset/brand/preview-opencode-wordmark-light.png"
1113
import previewWordmarkDark from "../../asset/brand/preview-opencode-wordmark-dark.png"
1214
import previewWordmarkSimpleLight from "../../asset/brand/preview-opencode-wordmark-simple-light.png"
1315
import previewWordmarkSimpleDark from "../../asset/brand/preview-opencode-wordmark-simple-dark.png"
1416
import logoLightPng from "../../asset/brand/opencode-logo-light.png"
1517
import logoDarkPng from "../../asset/brand/opencode-logo-dark.png"
18+
import logoLightSquarePng from "../../asset/brand/opencode-logo-light-square.png"
19+
import logoDarkSquarePng from "../../asset/brand/opencode-logo-dark-square.png"
1620
import wordmarkLightPng from "../../asset/brand/opencode-wordmark-light.png"
1721
import wordmarkDarkPng from "../../asset/brand/opencode-wordmark-dark.png"
1822
import wordmarkSimpleLightPng from "../../asset/brand/opencode-wordmark-simple-light.png"
1923
import wordmarkSimpleDarkPng from "../../asset/brand/opencode-wordmark-simple-dark.png"
2024
import logoLightSvg from "../../asset/brand/opencode-logo-light.svg"
2125
import logoDarkSvg from "../../asset/brand/opencode-logo-dark.svg"
26+
import logoLightSquareSvg from "../../asset/brand/opencode-logo-light-square.svg"
27+
import logoDarkSquareSvg from "../../asset/brand/opencode-logo-dark-square.svg"
2228
import wordmarkLightSvg from "../../asset/brand/opencode-wordmark-light.svg"
2329
import wordmarkDarkSvg from "../../asset/brand/opencode-wordmark-dark.svg"
2430
import wordmarkSimpleLightSvg from "../../asset/brand/opencode-wordmark-simple-light.svg"
@@ -135,6 +141,60 @@ export default function Brand() {
135141
</button>
136142
</div>
137143
</div>
144+
<div>
145+
<img src={previewLogoLightSquare} alt="OpenCode brand guidelines" />
146+
<div data-component="actions">
147+
<button onClick={() => downloadFile(logoLightSquarePng, "opencode-logo-light-square.png")}>
148+
PNG
149+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
150+
<path
151+
d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
152+
stroke="currentColor"
153+
stroke-width="1.5"
154+
stroke-linecap="square"
155+
/>
156+
</svg>
157+
</button>
158+
<button onClick={() => downloadFile(logoLightSquareSvg, "opencode-logo-light-square.svg")}>
159+
SVG
160+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
161+
<path
162+
d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
163+
stroke="currentColor"
164+
stroke-width="1.5"
165+
stroke-linecap="square"
166+
/>
167+
</svg>
168+
</button>
169+
</div>
170+
</div>
171+
<div>
172+
<img src={previewLogoDarkSquare} alt="OpenCode brand guidelines" />
173+
<div data-component="actions">
174+
<button onClick={() => downloadFile(logoDarkSquarePng, "opencode-logo-dark-square.png")}>
175+
PNG
176+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
177+
<path
178+
d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
179+
stroke="currentColor"
180+
stroke-width="1.5"
181+
stroke-linecap="square"
182+
/>
183+
</svg>
184+
</button>
185+
<button onClick={() => downloadFile(logoDarkSquareSvg, "opencode-logo-dark-square.svg")}>
186+
SVG
187+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
188+
<path
189+
d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
190+
stroke="currentColor"
191+
stroke-width="1.5"
192+
stroke-linecap="square"
193+
/>
194+
</svg>
195+
</button>
196+
</div>
197+
</div>
138198
<div>
139199
<img src={previewWordmarkLight} alt="OpenCode brand guidelines" />
140200
<div data-component="actions">

square-logos.patch

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
From 90904222b6f8c86a6d0a8ebed9661950f632a4e8 Mon Sep 17 00:00:00 2001
2+
From: OpenCode Bot <opencode@sst.dev>
3+
Date: Wed, 11 Feb 2026 18:44:27 +0000
4+
Subject: [PATCH] add square logo variants to brand page
5+
6+
---
7+
.../asset/brand/opencode-logo-dark-square.png | Bin 0 -> 697 bytes
8+
.../asset/brand/opencode-logo-dark-square.svg | 18 ++++++
9+
.../brand/opencode-logo-light-square.png | Bin 0 -> 697 bytes
10+
.../brand/opencode-logo-light-square.svg | 18 ++++++
11+
.../preview-opencode-logo-dark-square.png | Bin 0 -> 1477 bytes
12+
.../preview-opencode-logo-light-square.png | Bin 0 -> 1467 bytes
13+
.../console/app/src/routes/brand/index.tsx | 60 ++++++++++++++++++
14+
7 files changed, 96 insertions(+)
15+
create mode 100644 packages/console/app/src/asset/brand/opencode-logo-dark-square.png
16+
create mode 100644 packages/console/app/src/asset/brand/opencode-logo-dark-square.svg
17+
create mode 100644 packages/console/app/src/asset/brand/opencode-logo-light-square.png
18+
create mode 100644 packages/console/app/src/asset/brand/opencode-logo-light-square.svg
19+
create mode 100644 packages/console/app/src/asset/brand/preview-opencode-logo-dark-square.png
20+
create mode 100644 packages/console/app/src/asset/brand/preview-opencode-logo-light-square.png
21+
22+
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
23+
new file mode 100644
24+
index 0000000000000000000000000000000000000000..673c7e3a20f917fae56719ed1c35b4614ecd5f53
25+
GIT binary patch
26+
literal 697
27+
zcmeAS@N?(olHy`uVBq!ia0y~yV2S`?CT5_>VU7ZSAjOjI=<CS9u(6-}Pa-RjuaN8!
28+
z<jcTNrN+R}(89p*3n<j^f`OsbfPvvv0t1893<d`Af;qbaZGaLy0X`wFK>FjGH{Nb;
29+
zK*kCWpQS*Gu_VYZn8D%MjWiG^$=lt9p@UV{1IXbl@Q5sCU=ULUVMfm&l@CBc_7YED
30+
zSN2y-+(O#2cjOjy1NC%xx;TbZ+<JS?ke5M0fMtVmr)P-K<_$G=ESI!0Hc3x^;^R#P
31+
z@VYyUYYSCCTI00A1HzVGb*Dn;c)vb-jcFpozT1*PW*Wd~QY~?fC`m~yNwrEYN(E93
32+
zMg~S^x&}tNhK3=A7FH&PRz^nJ1_o9J26?+;7NKa!%}>cptHiBA{`nI*paup{S3j3^
33+
HP6<r_YMlsn
34+
35+
literal 0
36+
HcmV?d00001
37+
38+
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
39+
new file mode 100644
40+
index 0000000..6a67f62
41+
--- /dev/null
42+
+++ b/packages/console/app/src/asset/brand/opencode-logo-dark-square.svg
43+
@@ -0,0 +1,18 @@
44+
+<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
45+
+<g transform="translate(30, 0)">
46+
+<g clip-path="url(#clip0_1401_86283)">
47+
+<mask id="mask0_1401_86283" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="300">
48+
+<path d="M240 0H0V300H240V0Z" fill="white"/>
49+
+</mask>
50+
+<g mask="url(#mask0_1401_86283)">
51+
+<path d="M180 240H60V120H180V240Z" fill="#4B4646"/>
52+
+<path d="M180 60H60V240H180V60ZM240 300H0V0H240V300Z" fill="#F1ECEC"/>
53+
+</g>
54+
+</g>
55+
+</g>
56+
+<defs>
57+
+<clipPath id="clip0_1401_86283">
58+
+<rect width="240" height="300" fill="white"/>
59+
+</clipPath>
60+
+</defs>
61+
+</svg>
62+
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
63+
new file mode 100644
64+
index 0000000000000000000000000000000000000000..5c710474abc4668504cb9678da1de6ad33458af9
65+
GIT binary patch
66+
literal 697
67+
zcmeAS@N?(olHy`uVBq!ia0y~yV2S`?CT5_>VU7ZSAjOjI=<CS9u(6-}Pa-RjuaN8!
68+
z<jcTNrN+R}(89p*3n<j^f`OsbfPvvv0t1893<d`Af;qbaZGaLy0X`wFKw42w?)<s4
69+
zK*kyVm4AQ~V@Z%-FoVOh8)+a;lDE4HLkFv@2av;A;1OBOz#ygy!i=6lDj$G?>?NMQ
70+
zuI#UvxP`Q3@5n9a2I}eXba4!+xb^m&Auof10LupBPR|gd%^Pa$ST1R0Y?7Y-#K)To
71+
z;B|Kx*A}XPw8m+J2ZSxX>Q05w@qT^w8q-9EeYYip%rt<}q*~${QIe8al4_M)lnSI6
72+
zj0}v-bPbGj4GlvKEv!rot&EJc4GgRd4DxoxEJD$co1c=IR*74K{PQPrKn)C@u6{1-
73+
HoD!M<*)j+`
74+
75+
literal 0
76+
HcmV?d00001
77+
78+
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
79+
new file mode 100644
80+
index 0000000..a738ad8
81+
--- /dev/null
82+
+++ b/packages/console/app/src/asset/brand/opencode-logo-light-square.svg
83+
@@ -0,0 +1,18 @@
84+
+<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
85+
+<g transform="translate(30, 0)">
86+
+<g clip-path="url(#clip0_1401_86274)">
87+
+<mask id="mask0_1401_86274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="300">
88+
+<path d="M240 0H0V300H240V0Z" fill="white"/>
89+
+</mask>
90+
+<g mask="url(#mask0_1401_86274)">
91+
+<path d="M180 240H60V120H180V240Z" fill="#CFCECD"/>
92+
+<path d="M180 60H60V240H180V60ZM240 300H0V0H240V300Z" fill="#211E1E"/>
93+
+</g>
94+
+</g>
95+
+</g>
96+
+<defs>
97+
+<clipPath id="clip0_1401_86274">
98+
+<rect width="240" height="300" fill="white"/>
99+
+</clipPath>
100+
+</defs>
101+
+</svg>
102+
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
103+
new file mode 100644
104+
index 0000000000000000000000000000000000000000..604ad7aa7a87c71d4a3972f18da4044e53f745fe
105+
GIT binary patch
106+
literal 1477
107+
zcmeAS@N?(olHy`uVBq!ia0y~yV4MKL9LzwG?TN?!0V$SrM_)$<hK>E)e-c@Ne1&9>
108+
zAYTTCDm4a%h86~fUqGRT7Yq!g1`G_Z5*Qe)W-u^_7tGleXakf83GfMV1=1hiyun28
109+
zU%gs1cdnz2jklZIqq}#b!@|5=U4d+%%7=IEM1_VzxRD_to-Qsx1sTc7KrJ6$zXlo@
110+
zFuxY$Hi42LzhDLii5Gug>4^i8#NSshUI=lk@B-x+lf2zs7&=&GJ%Aj}0*}aI1_m)z
111+
z5N7lYQuzQBWH0gbb!C6W#4V()m9m%>=ouDUPZ!6Kid%0la{4g^2(UVS^9^9Ux#z#*
112+
zUM9{NA)j{pe@M$Rs$BIl=U=S8$$a1WzrRdo{gl+0z}h6r5vC9^6c`^Bx}VO;+bO}5
113+
zvNP)ZgKMjwCMdj@`|<2Y_0Pt}1ZL)gY-~-uJS@@@9A*XrISC3k4mfNWo)RazbGPm0
114+
z-*LChSmMOL4?kJISKi=fE3%ne|KQy6WQCxi5SK$J*`YY~T7$y$*OKq5Bzd2d?Vs~N
115+
z@B8fph5p+U-+hzde)4_q^MCH|=dNhx2_G663hFce=0A)TEv>6k&v^?1%NErV*NBpo
116+
z#FA92<f2p{#b9J$WTtCiq-$sxVrXGyVr*q(scm3jWnhruaU&H)LvDUbW?Cg~4U(b>
117+
RH-Q=$JYD@<);T3K0RY|)#{mEU
118+
119+
literal 0
120+
HcmV?d00001
121+
122+
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
123+
new file mode 100644
124+
index 0000000000000000000000000000000000000000..3964d8528440323730053e56f9d957539937b99d
125+
GIT binary patch
126+
literal 1467
127+
zcmeAS@N?(olHy`uVBq!ia0y~yV4MKL9LzwG?TN?!0V$SrM_)$<hK>E)e-c@Ne1&9>
128+
zAYTTCDm4a%h86~fUqGRT7Yq!g1`G_Z5*Qe)W-u^_7tGleXakh+3-AeX1=5Oga+pX-
129+
zUcR`n@W%CP=g*zh*VWm(dpD2)RHh&+YpAEUZ|@!;cmKY<7tWv4*U?$OZY@wf(5P=q
130+
zw@e07{3Stt!3+!%FaEyL69*!Rzpq|wUamVGD8-oM?e4<R!7A$k<Zu>vL>4nJh^c}w
131+
zqi2xH2cRH(iKnkC`zt1HA#JUc#jHSIuvmGzIEGZ*dV8@wmnlGi)v?HEMncg4sk@lD
132+
zIaT_<lxtU%8_(QxrNqqsn)KQ9%h&DxCN=JfRETIyU~LlR2pb9vn-fWv%cJ$!m?PI+
133+
zGv4tv%TnURa`rlle{ppQ3O5coY-nsuU}iqZ#@58k!y+xgVP+tZGdv|e#VtQu_MLV6
134+
z?L5Ea#y9-;OWOY?C_F#SfA^^jN9a(9$sv^JP@HNicjD`}`}Y4=-!3(o@cVI9<8Hfm
135+
z&5bti(|7$Y)|v3Q^Zn-UpA;4kk?aKV*|pOO`<V}&_gU>d_YAOLQ7v(eC`m~yNwrEY
136+
zN(E93Mg~S^x&}tNhK3=A7FH(4Rz{ZE1_o9J1{oeVQc*PI=BH$)RpQnlDVlH-sDZ)L
137+
L)z4*}Q$iB}B`L3|
138+
139+
literal 0
140+
HcmV?d00001
141+
142+
diff --git a/packages/console/app/src/routes/brand/index.tsx b/packages/console/app/src/routes/brand/index.tsx
143+
index eda3c84..9140462 100644
144+
--- a/packages/console/app/src/routes/brand/index.tsx
145+
+++ b/packages/console/app/src/routes/brand/index.tsx
146+
@@ -7,18 +7,24 @@ import { useI18n } from "~/context/i18n"
147+
import { LocaleLinks } from "~/component/locale-links"
148+
import previewLogoLight from "../../asset/brand/preview-opencode-logo-light.png"
149+
import previewLogoDark from "../../asset/brand/preview-opencode-logo-dark.png"
150+
+import previewLogoLightSquare from "../../asset/brand/preview-opencode-logo-light-square.png"
151+
+import previewLogoDarkSquare from "../../asset/brand/preview-opencode-logo-dark-square.png"
152+
import previewWordmarkLight from "../../asset/brand/preview-opencode-wordmark-light.png"
153+
import previewWordmarkDark from "../../asset/brand/preview-opencode-wordmark-dark.png"
154+
import previewWordmarkSimpleLight from "../../asset/brand/preview-opencode-wordmark-simple-light.png"
155+
import previewWordmarkSimpleDark from "../../asset/brand/preview-opencode-wordmark-simple-dark.png"
156+
import logoLightPng from "../../asset/brand/opencode-logo-light.png"
157+
import logoDarkPng from "../../asset/brand/opencode-logo-dark.png"
158+
+import logoLightSquarePng from "../../asset/brand/opencode-logo-light-square.png"
159+
+import logoDarkSquarePng from "../../asset/brand/opencode-logo-dark-square.png"
160+
import wordmarkLightPng from "../../asset/brand/opencode-wordmark-light.png"
161+
import wordmarkDarkPng from "../../asset/brand/opencode-wordmark-dark.png"
162+
import wordmarkSimpleLightPng from "../../asset/brand/opencode-wordmark-simple-light.png"
163+
import wordmarkSimpleDarkPng from "../../asset/brand/opencode-wordmark-simple-dark.png"
164+
import logoLightSvg from "../../asset/brand/opencode-logo-light.svg"
165+
import logoDarkSvg from "../../asset/brand/opencode-logo-dark.svg"
166+
+import logoLightSquareSvg from "../../asset/brand/opencode-logo-light-square.svg"
167+
+import logoDarkSquareSvg from "../../asset/brand/opencode-logo-dark-square.svg"
168+
import wordmarkLightSvg from "../../asset/brand/opencode-wordmark-light.svg"
169+
import wordmarkDarkSvg from "../../asset/brand/opencode-wordmark-dark.svg"
170+
import wordmarkSimpleLightSvg from "../../asset/brand/opencode-wordmark-simple-light.svg"
171+
@@ -135,6 +141,60 @@ export default function Brand() {
172+
</button>
173+
</div>
174+
</div>
175+
+ <div>
176+
+ <img src={previewLogoLightSquare} alt="OpenCode brand guidelines" />
177+
+ <div data-component="actions">
178+
+ <button onClick={() => downloadFile(logoLightSquarePng, "opencode-logo-light-square.png")}>
179+
+ PNG
180+
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
181+
+ <path
182+
+ d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
183+
+ stroke="currentColor"
184+
+ stroke-width="1.5"
185+
+ stroke-linecap="square"
186+
+ />
187+
+ </svg>
188+
+ </button>
189+
+ <button onClick={() => downloadFile(logoLightSquareSvg, "opencode-logo-light-square.svg")}>
190+
+ SVG
191+
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
192+
+ <path
193+
+ d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
194+
+ stroke="currentColor"
195+
+ stroke-width="1.5"
196+
+ stroke-linecap="square"
197+
+ />
198+
+ </svg>
199+
+ </button>
200+
+ </div>
201+
+ </div>
202+
+ <div>
203+
+ <img src={previewLogoDarkSquare} alt="OpenCode brand guidelines" />
204+
+ <div data-component="actions">
205+
+ <button onClick={() => downloadFile(logoDarkSquarePng, "opencode-logo-dark-square.png")}>
206+
+ PNG
207+
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
208+
+ <path
209+
+ d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
210+
+ stroke="currentColor"
211+
+ stroke-width="1.5"
212+
+ stroke-linecap="square"
213+
+ />
214+
+ </svg>
215+
+ </button>
216+
+ <button onClick={() => downloadFile(logoDarkSquareSvg, "opencode-logo-dark-square.svg")}>
217+
+ SVG
218+
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
219+
+ <path
220+
+ d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
221+
+ stroke="currentColor"
222+
+ stroke-width="1.5"
223+
+ stroke-linecap="square"
224+
+ />
225+
+ </svg>
226+
+ </button>
227+
+ </div>
228+
+ </div>
229+
<div>
230+
<img src={previewWordmarkLight} alt="OpenCode brand guidelines" />
231+
<div data-component="actions">
232+
--
233+
2.39.5
234+

0 commit comments

Comments
 (0)