Brand Assets Zip

This commit is contained in:
David Hill
2025-10-30 22:38:12 +00:00
parent 9589657d21
commit bf5f34ace7
2 changed files with 19 additions and 9 deletions

View File

@@ -21,6 +21,7 @@ import wordmarkLightSvg from "../../asset/brand/opencode-wordmark-light.svg"
import wordmarkDarkSvg from "../../asset/brand/opencode-wordmark-dark.svg" import wordmarkDarkSvg from "../../asset/brand/opencode-wordmark-dark.svg"
import wordmarkSimpleLightSvg from "../../asset/brand/opencode-wordmark-simple-light.svg" import wordmarkSimpleLightSvg from "../../asset/brand/opencode-wordmark-simple-light.svg"
import wordmarkSimpleDarkSvg from "../../asset/brand/opencode-wordmark-simple-dark.svg" import wordmarkSimpleDarkSvg from "../../asset/brand/opencode-wordmark-simple-dark.svg"
import brandAssets from "../../asset/brand/opencode-brand-assets.zip"
export default function Brand() { export default function Brand() {
@@ -43,17 +44,20 @@ export default function Brand() {
<div data-component="content"> <div data-component="content">
<section data-component="brand-content"> <section data-component="brand-content">
<h2>Brand guidelines</h2> <h2>Brand guidelines</h2>
<p>Resources and assets to help you work with the OpenCode brand.</p> <p>Resources and assets to help you work with the OpenCode
<button data-component="download-button"> brand.</p>
<button data-component="download-button" onClick={() => downloadFile(brandAssets, "opencode-brand-assets.zip")}>
Download all assets Download all assets
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<path <path
d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75" 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"/> stroke="currentColor" stroke-width="1.5"
stroke-linecap="square"/>
</svg> </svg>
</button> </button>
<div data-component="brand-grid"> <div data-component="brand-grid">
<div> <div>
<img src={previewLogoLight} alt="OpenCode brand guidelines"/> <img src={previewLogoLight} alt="OpenCode brand guidelines"/>
@@ -65,16 +69,19 @@ export default function Brand() {
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<path <path
d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75" 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"/> stroke="currentColor" stroke-width="1.5"
stroke-linecap="square"/>
</svg> </svg>
</button> </button>
<button onClick={() => downloadFile(logoLightSvg, "opencode-logo-light.svg")}> <button
onClick={() => downloadFile(logoLightSvg, "opencode-logo-light.svg")}>
SVG SVG
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<path <path
d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75" 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"/> stroke="currentColor" stroke-width="1.5"
stroke-linecap="square"/>
</svg> </svg>
</button> </button>
</div> </div>
@@ -107,7 +114,8 @@ export default function Brand() {
</div> </div>
</div> </div>
<div> <div>
<img src={previewWordmarkLight} alt="OpenCode brand guidelines"/> <img src={previewWordmarkLight}
alt="OpenCode brand guidelines"/>
<div data-component="actions"> <div data-component="actions">
<button <button
onClick={() => downloadFile(wordmarkLightPng, "opencode-wordmark-light.png")}> onClick={() => downloadFile(wordmarkLightPng, "opencode-wordmark-light.png")}>
@@ -161,7 +169,8 @@ export default function Brand() {
</div> </div>
</div> </div>
<div> <div>
<img src={previewWordmarkSimpleLight} alt="OpenCode brand guidelines"/> <img src={previewWordmarkSimpleLight}
alt="OpenCode brand guidelines"/>
<div data-component="actions"> <div data-component="actions">
<button <button
onClick={() => downloadFile(wordmarkSimpleLightPng, "opencode-wordmark-simple-light.png")}> onClick={() => downloadFile(wordmarkSimpleLightPng, "opencode-wordmark-simple-light.png")}>
@@ -188,7 +197,8 @@ export default function Brand() {
</div> </div>
</div> </div>
<div> <div>
<img src={previewWordmarkSimpleDark} alt="OpenCode brand guidelines"/> <img src={previewWordmarkSimpleDark}
alt="OpenCode brand guidelines"/>
<div data-component="actions"> <div data-component="actions">
<button <button
onClick={() => downloadFile(wordmarkSimpleDarkPng, "opencode-wordmark-simple-dark.png")}> onClick={() => downloadFile(wordmarkSimpleDarkPng, "opencode-wordmark-simple-dark.png")}>