diff --git a/packages/console/app/src/asset/brand/opencode-logo-dark.png b/packages/console/app/src/asset/brand/opencode-logo-dark.png new file mode 100644 index 00000000..cf868c8e Binary files /dev/null and b/packages/console/app/src/asset/brand/opencode-logo-dark.png differ diff --git a/packages/console/app/src/asset/brand/opencode-logo-dark.svg b/packages/console/app/src/asset/brand/opencode-logo-dark.svg new file mode 100644 index 00000000..c28babff --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-logo-dark.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/console/app/src/asset/brand/opencode-logo-light.png b/packages/console/app/src/asset/brand/opencode-logo-light.png new file mode 100644 index 00000000..a2ffc9b9 Binary files /dev/null and b/packages/console/app/src/asset/brand/opencode-logo-light.png differ diff --git a/packages/console/app/src/asset/brand/opencode-logo-light.svg b/packages/console/app/src/asset/brand/opencode-logo-light.svg new file mode 100644 index 00000000..7ed0af00 --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-logo-light.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-dark.png b/packages/console/app/src/asset/brand/opencode-wordmark-dark.png new file mode 100644 index 00000000..f8e2c3f4 Binary files /dev/null and b/packages/console/app/src/asset/brand/opencode-wordmark-dark.png differ diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-dark.svg b/packages/console/app/src/asset/brand/opencode-wordmark-dark.svg new file mode 100644 index 00000000..a242eeea --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-wordmark-dark.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-light.png b/packages/console/app/src/asset/brand/opencode-wordmark-light.png new file mode 100644 index 00000000..f53607f7 Binary files /dev/null and b/packages/console/app/src/asset/brand/opencode-wordmark-light.png differ diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-light.svg b/packages/console/app/src/asset/brand/opencode-wordmark-light.svg new file mode 100644 index 00000000..24a36c7c --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-wordmark-light.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.png b/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.png new file mode 100644 index 00000000..2e600713 Binary files /dev/null and b/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.png differ diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.svg b/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.svg new file mode 100644 index 00000000..170be57c --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-wordmark-simple-dark.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.png b/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.png new file mode 100644 index 00000000..aa08768b Binary files /dev/null and b/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.png differ diff --git a/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.svg b/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.svg new file mode 100644 index 00000000..3c70adeb --- /dev/null +++ b/packages/console/app/src/asset/brand/opencode-wordmark-simple-light.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/console/app/src/asset/brand/preview-opencode-dark.png b/packages/console/app/src/asset/brand/preview-opencode-dark.png new file mode 100644 index 00000000..3c19242a Binary files /dev/null and b/packages/console/app/src/asset/brand/preview-opencode-dark.png differ diff --git a/packages/console/app/src/asset/brand/preview-opencode-logo-dark.png b/packages/console/app/src/asset/brand/preview-opencode-logo-dark.png new file mode 100644 index 00000000..d1ef7137 Binary files /dev/null and b/packages/console/app/src/asset/brand/preview-opencode-logo-dark.png differ diff --git a/packages/console/app/src/asset/brand/preview-opencode-logo-light.png b/packages/console/app/src/asset/brand/preview-opencode-logo-light.png new file mode 100644 index 00000000..d77bbc38 Binary files /dev/null and b/packages/console/app/src/asset/brand/preview-opencode-logo-light.png differ diff --git a/packages/console/app/src/asset/brand/preview-opencode-wordmark-dark.png b/packages/console/app/src/asset/brand/preview-opencode-wordmark-dark.png new file mode 100644 index 00000000..58bcf936 Binary files /dev/null and b/packages/console/app/src/asset/brand/preview-opencode-wordmark-dark.png differ diff --git a/packages/console/app/src/asset/brand/preview-opencode-wordmark-light.png b/packages/console/app/src/asset/brand/preview-opencode-wordmark-light.png new file mode 100644 index 00000000..b39b7997 Binary files /dev/null and b/packages/console/app/src/asset/brand/preview-opencode-wordmark-light.png differ diff --git a/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-dark.png b/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-dark.png new file mode 100644 index 00000000..b2cc02bb Binary files /dev/null and b/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-dark.png differ diff --git a/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-light.png b/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-light.png new file mode 100644 index 00000000..106ccaf4 Binary files /dev/null and b/packages/console/app/src/asset/brand/preview-opencode-wordmark-simple-light.png differ diff --git a/packages/console/app/src/asset/lander/brand.png b/packages/console/app/src/asset/lander/brand.png index 6172775e..9c1653ed 100644 Binary files a/packages/console/app/src/asset/lander/brand.png and b/packages/console/app/src/asset/lander/brand.png differ diff --git a/packages/console/app/src/component/legal.tsx b/packages/console/app/src/component/legal.tsx index b55a20d3..c055977e 100644 --- a/packages/console/app/src/component/legal.tsx +++ b/packages/console/app/src/component/legal.tsx @@ -1,3 +1,5 @@ +import { A } from "@solidjs/router" + export function Legal() { return (
@@ -5,10 +7,7 @@ export function Legal() { ©{new Date().getFullYear()} Anomaly - Brand - - - Legal + Brand
) diff --git a/packages/console/app/src/routes/brand/index.css b/packages/console/app/src/routes/brand/index.css index 7c85a7ed..042e26ec 100644 --- a/packages/console/app/src/routes/brand/index.css +++ b/packages/console/app/src/routes/brand/index.css @@ -294,10 +294,12 @@ cursor: pointer; display: flex; width: fit-content; - gap: 32px; + align-items: center; + gap: 12px; transition: background-color 0.2s ease; text-decoration: none; + &:hover:not(:disabled) { background: var(--color-background-strong-hover); } @@ -308,14 +310,83 @@ } } - img { - width: 100%; - height: auto; - display: block; + [data-component="brand-grid"] { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; margin-top: 4rem; margin-bottom: 2rem; } + [data-component="brand-grid"] img { + width: 100%; + height: auto; + display: block; + border-radius: 4px; + border: 1px solid var(--color-border-weak); + } + + [data-component="brand-grid"] > div { + position: relative; + } + + [data-component="actions"] { + position: absolute; + background: rgba(4, 0, 0, 0.08); + border-radius: 4px; + bottom: 0; + right: 0; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + gap: 16px; + opacity: 0; + transition: opacity 0.2s ease; + + @media (max-width: 60rem) { + position: static; + opacity: 1; + margin-top: 1rem; + justify-content: center; + } + } + + [data-component="brand-grid"] > div:hover [data-component="actions"] { + opacity: 1; + + @media (max-width: 60rem) { + opacity: 1; + } + } + + [data-component="actions"] button { + padding: 6px 12px; + background: var(--color-background); + color: var(--color-text); + border: none; + border-radius: 4px; + font-weight: 500; + display: flex; + align-items: center; + gap: 12px; + transition: background-color 0.2s ease; + cursor: pointer; + box-shadow: + 0 0 0 1px rgba(19, 16, 16, 0.08), + 0 6px 8px -4px rgba(19, 16, 16, 0.12), + 0 4px 3px -2px rgba(19, 16, 16, 0.12), + 0 1px 2px -1px rgba(19, 16, 16, 0.12); + + + &:hover { + background: var(--color-background); + } + } + + + @media (max-width: 60rem) { padding: 2rem 1.5rem; } diff --git a/packages/console/app/src/routes/brand/index.tsx b/packages/console/app/src/routes/brand/index.tsx index 53ce22bb..4109b68f 100644 --- a/packages/console/app/src/routes/brand/index.tsx +++ b/packages/console/app/src/routes/brand/index.tsx @@ -3,11 +3,23 @@ import { Title, Meta } from "@solidjs/meta" import { Header } from "~/component/header" import { Footer } from "~/component/footer" import { Legal } from "~/component/legal" -import { Faq } from "~/component/faq" -import brand from "../../asset/lander/brand.png" +import previewLogoLight from "../../asset/brand/preview-opencode-logo-light.png" +import previewLogoDark from "../../asset/brand/preview-opencode-logo-dark.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" export default function Brand() { + const downloadFile = (url: string, filename: string) => { + const link = document.createElement("a") + link.href = url + link.download = filename + document.body.appendChild(link) + link.click() + document.body.removeChild(link) + } return (
@@ -19,82 +31,183 @@ export default function Brand() {

Brand guidelines

-

- Resources and assets to help you work with the OpenCode brand. -

- Download brand assets - - - - +

Resources and assets to help you work with the OpenCode brand.

+ -

If you need any help with anything brand related contact us.

-
- -
-
-

FAQ

+
+
+ OpenCode brand guidelines +
+ + +
+
+
+ OpenCode brand guidelines +
+ + +
+
+
+ OpenCode brand guidelines +
+ + +
+
+
+ OpenCode brand guidelines +
+ + +
+
+
+ OpenCode brand guidelines +
+ + +
+
+
+ OpenCode brand guidelines +
+ + +
+
-
    -
  • - - No. OpenCode never stores your code or context data. All - processing happens locally or directly with your AI provider. - -
    • -
  • - - You do. All code produced is yours, with no licensing - restrictions or ownership claims. - -
    • -
  • - - Simply install and run an internal trial with your team. Since - OpenCode doesn’t store any data, your developers can get - started right away. - -
    • -
  • - - By default, sharing is disabled. If enabled, conversations are - sent to our share service and cached through our CDN. For - enterprise use, we recommend disabling or self-hosting this - feature. - -
    • -
  • - - Yes. Enterprise deployments can include SSO integration so all - sessions and shared conversations are protected by your - authentication system. - -
    • -
  • - - Absolutely. You can fully self-host OpenCode, including the - share feature, ensuring that data and pages are accessible - only after authentication. - -
    • -
  • - - Contact us to discuss pricing, implementation, and enterprise - options like SSO, private registries, and self-hosting. - -
    • -
-
) }