diff --git a/apps/website/e2e/brand.spec.ts b/apps/website/e2e/brand.spec.ts new file mode 100644 index 00000000000..ca831a90718 --- /dev/null +++ b/apps/website/e2e/brand.spec.ts @@ -0,0 +1,51 @@ +import { expect } from '@playwright/test' + +import { BRAND_ASSETS_ZIP, BRAND_GUIDELINES_PDF } from '../src/data/brandAssets' +import { test } from './fixtures/blockExternalMedia' + +test.describe('Brand portal @smoke', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/brand') + }) + + test('renders each brand guideline section', async ({ page }) => { + await expect( + page.getByRole('heading', { level: 1, name: 'Create with ComfyUI' }) + ).toBeVisible() + await expect( + page.getByRole('heading', { name: 'One mark, many dimensions.' }) + ).toBeVisible() + await expect( + page.getByRole('heading', { name: 'Every color earns its place.' }) + ).toBeVisible() + await expect( + page.getByRole('heading', { name: 'Precise, never cute.' }) + ).toBeVisible() + await expect( + page.getByRole('heading', { name: 'Trademark guidelines.' }) + ).toBeVisible() + }) + + test('shows all four marks', async ({ page }) => { + const logos = page.locator('#logos') + for (const name of [ + 'Core Logo', + 'Logomark', + 'Icon', + 'Amplified Logomark' + ]) { + await expect(logos.getByText(name, { exact: true })).toBeVisible() + } + }) + + test('the hero ctas open the gated guidelines and the logo bundle', async ({ + page + }) => { + await expect( + page.getByRole('link', { name: 'View brand guidelines' }) + ).toHaveAttribute('href', BRAND_GUIDELINES_PDF) + await expect( + page.getByRole('link', { name: 'Download logos' }) + ).toHaveAttribute('href', BRAND_ASSETS_ZIP) + }) +}) diff --git a/apps/website/public/icons/comfyicon.svg b/apps/website/public/icons/comfyicon.svg new file mode 100644 index 00000000000..a6d3b8dc8c9 --- /dev/null +++ b/apps/website/public/icons/comfyicon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/website/src/components/common/SiteFooter.vue b/apps/website/src/components/common/SiteFooter.vue index 4a6060b4ebc..81813fcb02a 100644 --- a/apps/website/src/components/common/SiteFooter.vue +++ b/apps/website/src/components/common/SiteFooter.vue @@ -85,6 +85,7 @@ const companyColumn: { title: string; links: FooterLink[] } = { links: [ { label: t('footer.about', locale), href: routes.about }, { label: t('nav.careers', locale), href: routes.careers }, + { label: t('nav.brand', locale), href: routes.brand }, { label: t('footer.termsOfService', locale), href: routes.termsOfService }, { label: t('footer.enterpriseMsa', locale), href: routes.enterpriseMsa }, { label: t('footer.privacyPolicy', locale), href: routes.privacyPolicy } diff --git a/apps/website/src/components/ui/button/index.ts b/apps/website/src/components/ui/button/index.ts index 393a9a6c864..86134269bf2 100644 --- a/apps/website/src/components/ui/button/index.ts +++ b/apps/website/src/components/ui/button/index.ts @@ -20,6 +20,8 @@ export const buttonVariants = cva( link: "text-primary-comfy-yellow h-auto justify-start px-0 py-1 text-base uppercase hover:opacity-90 [&_svg:not([class*='size-'])]:size-6", underlineLink: "text-primary-comfy-yellow relative h-auto justify-start px-0 py-1 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-200 hover:opacity-90 hover:after:scale-x-100 [&_svg:not([class*='size-'])]:size-6", + inline: + 'text-primary-comfy-yellow inline h-auto rounded-none p-0 align-baseline text-sm font-normal tracking-normal whitespace-normal hover:opacity-90 [&>span]:underline', nav: 'text-primary-warm-white hover:text-primary-comfy-yellow h-auto justify-between px-0 py-1 text-start text-2xl font-medium', navMuted: 'hover:text-primary-comfy-yellow h-auto w-full justify-between px-0 py-1 text-start text-2xl font-medium text-primary-comfy-canvas uppercase' diff --git a/apps/website/src/config/routes.ts b/apps/website/src/config/routes.ts index fb32277ae68..4d93e8990d8 100644 --- a/apps/website/src/config/routes.ts +++ b/apps/website/src/config/routes.ts @@ -21,7 +21,8 @@ const baseRoutes = { affiliateTerms: '/affiliates/terms', contact: '/contact', models: '/p/supported-models', - mcp: '/mcp' + mcp: '/mcp', + brand: '/brand' } as const type Routes = typeof baseRoutes diff --git a/apps/website/src/data/affiliateBrandAssets.ts b/apps/website/src/data/affiliateBrandAssets.ts index a5d573a8e66..6aba6d5547b 100644 --- a/apps/website/src/data/affiliateBrandAssets.ts +++ b/apps/website/src/data/affiliateBrandAssets.ts @@ -1,5 +1,7 @@ import type { LocalizedText } from '../i18n/translations' +import { BRAND_ASSETS_ZIP } from './brandAssets' + interface AffiliateBrandAsset { id: string title: LocalizedText @@ -7,9 +9,6 @@ interface AffiliateBrandAsset { preview: string } -const BRAND_ASSETS_ZIP = - 'https://media.comfy.org/website/comfy-org-brand-assets.zip' - export const affiliateBrandAssets: readonly AffiliateBrandAsset[] = [ { id: 'core-logo', diff --git a/apps/website/src/data/brandAssets.ts b/apps/website/src/data/brandAssets.ts new file mode 100644 index 00000000000..40e7d636ab3 --- /dev/null +++ b/apps/website/src/data/brandAssets.ts @@ -0,0 +1,9 @@ +// Shared brand download URLs served from the media bucket, used by both the +// affiliate page and the brand portal. +export const BRAND_ASSETS_ZIP = + 'https://media.comfy.org/website/comfy-org-brand-assets.zip' + +// Brand guidelines live in Google Drive, shared to Comfy Org only, so Google +// enforces the comfy.org sign-in. Opened in a new tab rather than downloaded. +export const BRAND_GUIDELINES_PDF = + 'https://drive.google.com/file/d/1EDt03JTfF_nbbY_H2n67aaUj6k11v3bS/view' diff --git a/apps/website/src/data/brandColors.ts b/apps/website/src/data/brandColors.ts new file mode 100644 index 00000000000..1cc1f9af70e --- /dev/null +++ b/apps/website/src/data/brandColors.ts @@ -0,0 +1,91 @@ +interface BrandColor { + name: string + hex: string + rgb: string + hsl: string + cmyk: string + swatchClass: string + textClass: string + wide?: boolean + border?: boolean +} + +export const brandColors: readonly BrandColor[] = [ + { + name: 'Comfy Yellow', + hex: '#F2FF59', + rgb: '242, 255, 89', + hsl: '65, 100, 67', + cmyk: '5, 0, 65, 0', + swatchClass: 'bg-primary-comfy-yellow', + textClass: 'text-primary-comfy-ink', + wide: true + }, + { + name: 'Comfy Ink', + hex: '#211927', + rgb: '33, 25, 39', + hsl: '274, 22, 13', + cmyk: '15, 36, 0, 85', + swatchClass: 'bg-primary-comfy-ink', + textClass: 'text-primary-warm-white', + border: true + }, + { + name: 'Comfy Canvas', + hex: '#C2BFB9', + rgb: '194, 191, 185', + hsl: '40, 7, 74', + cmyk: '0, 2, 5, 24', + swatchClass: 'bg-primary-comfy-canvas', + textClass: 'text-primary-comfy-ink' + }, + { + name: 'Comfy Plum', + hex: '#49378B', + rgb: '73, 55, 139', + hsl: '253, 43, 38', + cmyk: '47, 60, 0, 45', + swatchClass: 'bg-primary-comfy-plum', + textClass: 'text-primary-comfy-canvas' + }, + { + name: 'Warm White', + hex: '#F0EFED', + rgb: '240, 239, 237', + hsl: '40, 9, 94', + cmyk: '0, 0, 1, 6', + swatchClass: 'bg-primary-warm-white', + textClass: 'text-primary-comfy-ink', + wide: true + }, + { + name: 'Warm Gray', + hex: '#7E7C78', + rgb: '126, 124, 120', + hsl: '40, 2, 48', + cmyk: '0, 2, 5, 51', + swatchClass: 'bg-primary-warm-gray', + textClass: 'text-primary-warm-white', + border: true + }, + { + name: 'Cool Gray', + hex: '#3C3C3C', + rgb: '60, 60, 60', + hsl: '0, 0, 24', + cmyk: '0, 0, 0, 76', + swatchClass: 'bg-secondary-cool-gray', + textClass: 'text-primary-warm-white', + border: true + }, + { + name: 'Mauve', + hex: '#4D3762', + rgb: '77, 55, 98', + hsl: '271, 28, 30', + cmyk: '21, 44, 0, 62', + swatchClass: 'bg-secondary-mauve', + textClass: 'text-primary-warm-white' + } +] as const diff --git a/apps/website/src/i18n/translations.ts b/apps/website/src/i18n/translations.ts index 64af39a0375..93fda9cf81d 100644 --- a/apps/website/src/i18n/translations.ts +++ b/apps/website/src/i18n/translations.ts @@ -2181,6 +2181,7 @@ const translations = { 'nav.youtube': { en: 'YouTube', 'zh-CN': 'YouTube' }, 'nav.aboutUs': { en: 'About Us', 'zh-CN': '关于我们' }, 'nav.careers': { en: 'Careers', 'zh-CN': '招聘' }, + 'nav.brand': { en: 'Brand', 'zh-CN': '品牌' }, 'nav.customerStories': { en: 'Customer Stories', 'zh-CN': '客户故事' }, 'nav.launches': { en: 'Launches', 'zh-CN': '发布' }, 'nav.downloadLocal': { en: 'DOWNLOAD DESKTOP', 'zh-CN': '下载桌面版' }, @@ -4444,6 +4445,161 @@ const translations = { 'launches.section.title': { en: 'Latest Launches', 'zh-CN': '最新发布' + }, + + // Brand Portal page (/brand) + 'brand.page.title': { + en: 'Brand — Comfy', + 'zh-CN': '品牌 — Comfy' + }, + 'brand.page.description': { + en: 'The Comfy brand portal: logos, color, typography, and voice. Everything you need to build something that looks and sounds like Comfy.', + 'zh-CN': + 'Comfy 品牌门户：标志、色彩、字体与语调。打造与 Comfy 观感一致、表达一致所需的一切。' + }, + 'brand.hero.label': { + en: 'Brand Portal', + 'zh-CN': '品牌门户' + }, + 'brand.hero.heading': { + en: 'Create with ComfyUI', + 'zh-CN': '用 ComfyUI 创作' + }, + 'brand.hero.subheading': { + en: 'Logo, color, type, and voice. Everything you need to build something that looks and sounds like us.', + 'zh-CN': '标志、色彩、字体与语调。打造与我们观感一致、表达一致所需的一切。' + }, + 'brand.hero.viewGuidelines': { + en: 'View brand guidelines', + 'zh-CN': '查看品牌规范' + }, + 'brand.hero.downloadLogos': { + en: 'Download logos', + 'zh-CN': '下载标志' + }, + 'brand.logos.heading': { + en: 'One mark, many dimensions.', + 'zh-CN': '一个标志，多种维度。' + }, + 'brand.logos.subheading': { + en: 'Logos come in light and dark options. Use as provided. Do not distort, recolor, or outline. Make sure the logo is legible against its background.', + 'zh-CN': + '标志提供浅色和深色两种版本。请按原样使用，不要变形、改色或描边。确保标志在其背景上清晰可辨。' + }, + 'brand.colors.heading': { + en: 'Every color earns its place.', + 'zh-CN': '每种颜色都各得其所。' + }, + 'brand.colors.subheading': { + en: 'Our color palette helps build brand recognition. When people think of Comfy, we want them to associate it with the following colors.', + 'zh-CN': + '我们的调色板有助于建立品牌辨识度。当人们想到 Comfy 时，我们希望他们联想到以下这些颜色。' + }, + 'brand.colors.copy': { + en: 'Copy', + 'zh-CN': '复制' + }, + 'brand.colors.copied': { + en: 'Copied', + 'zh-CN': '已复制' + }, + 'brand.voice.heading': { + en: 'Precise, never cute.', + 'zh-CN': '精准，绝不卖弄。' + }, + 'brand.voice.direct.title': { + en: 'Direct', + 'zh-CN': '直接' + }, + 'brand.voice.direct.body': { + en: 'We state things. We don’t hedge, qualify, or suggest. Short sentences. Active voice. One idea at a time.', + 'zh-CN': + '我们直陈其事。不含糊、不设限、不暗示。短句。主动语态。一次只讲一个观点。' + }, + 'brand.voice.precise.title': { + en: 'Precise', + 'zh-CN': '精准' + }, + 'brand.voice.precise.body': { + en: 'We use the real names for things. Nodes, samplers, seeds, checkpoints. We don’t talk around the product or reach for metaphor when the technical term is already good.', + 'zh-CN': + '我们直呼其名：nodes、samplers、seeds、checkpoints。当技术术语已经足够贴切时，我们不绕弯子，也不借用比喻。' + }, + 'brand.voice.human.title': { + en: 'Human-first', + 'zh-CN': '以人为先' + }, + 'brand.voice.human.body': { + en: 'The human creates. Comfy makes every step visible. We never write as though the AI is doing the work.', + 'zh-CN': + '创作的是人。Comfy 让每一步都清晰可见。我们绝不把功劳写成是 AI 完成的。' + }, + 'brand.voice.antihype.title': { + en: 'Anti-hype', + 'zh-CN': '拒绝浮夸' + }, + 'brand.voice.antihype.body': { + en: 'We don’t write “stunning,” “revolutionary,” or “effortless.” We don’t promise magic. Our tagline says exactly what we mean: Method, not magic.', + 'zh-CN': + '我们不写“惊艳”“革命性”或“毫不费力”。我们不承诺魔法。我们的口号恰如其分：方法，而非魔法。' + }, + 'brand.voice.doLabel': { + en: 'Do', + 'zh-CN': '推荐' + }, + 'brand.voice.dontLabel': { + en: 'Don’t', + 'zh-CN': '避免' + }, + 'brand.voice.do.0': { + en: 'Route your prompt through a ControlNet. Wire the output to the VAE decode.', + 'zh-CN': '让你的 prompt 经过 ControlNet，再将输出连接到 VAE decode。' + }, + 'brand.voice.do.1': { + en: 'Comfy runs on your hardware. Nothing leaves your machine.', + 'zh-CN': 'Comfy 在你自己的硬件上运行。任何数据都不会离开你的机器。' + }, + 'brand.voice.dont.0': { + en: 'Simply connect your AI blocks and watch the magic happen!', + 'zh-CN': '只需连接你的 AI 模块，见证奇迹的发生！' + }, + 'brand.voice.dont.1': { + en: 'Oops! Something went wrong. Please try again later.', + 'zh-CN': '哎呀！出了点问题，请稍后再试。' + }, + 'brand.trademark.heading': { + en: 'Trademark guidelines.', + 'zh-CN': '商标使用规范。' + }, + 'brand.trademark.body1': { + en: 'Comfy and ComfyUI are trademarks of Comfy Org. You’re welcome to reference them in content that accurately describes your work with our platform. Tutorials, reviews, integrations, and affiliate content all qualify.', + 'zh-CN': + 'Comfy 和 ComfyUI 是 Comfy Org 的商标。欢迎在准确描述你与我们平台相关工作的内容中引用它们。教程、评测、集成以及联盟内容均可。' + }, + 'brand.trademark.body2': { + en: 'A few rules: don’t modify the logo, don’t use the Comfy name in your own product or company name, and don’t present your content in a way that implies official endorsement or partnership beyond what’s been agreed.', + 'zh-CN': + '几条规则：不要修改标志，不要在你自己的产品或公司名称中使用 Comfy 这一名称，也不要以暗示官方认可或合作关系（超出双方已达成的约定）的方式呈现你的内容。' + }, + 'brand.trademark.body3': { + en: 'For permissions outside these guidelines,', + 'zh-CN': '如需本规范之外的授权，请' + }, + 'brand.trademark.contact': { + en: 'contact us', + 'zh-CN': '联系我们' + }, + 'brand.questions.heading': { + en: 'Questions?', + 'zh-CN': '有疑问？' + }, + 'brand.questions.body': { + en: 'For press, partnerships, or anything outside these guidelines,', + 'zh-CN': '如涉及媒体、合作，或本规范未涵盖的任何事宜，请' + }, + 'brand.questions.contact': { + en: 'contact us', + 'zh-CN': '联系我们' } } as const satisfies Record> diff --git a/apps/website/src/pages/brand.astro b/apps/website/src/pages/brand.astro new file mode 100644 index 00000000000..d11af023d40 --- /dev/null +++ b/apps/website/src/pages/brand.astro @@ -0,0 +1,28 @@ +--- +import BaseLayout from '../layouts/BaseLayout.astro' +import BrandBackground from '../templates/brand/BrandBackground.vue' +import BrandHeroSection from '../templates/brand/BrandHeroSection.vue' +import BrandLogosSection from '../templates/brand/BrandLogosSection.vue' +import BrandColorSection from '../templates/brand/BrandColorSection.vue' +import BrandVoiceSection from '../templates/brand/BrandVoiceSection.vue' +import BrandTrademarkSection from '../templates/brand/BrandTrademarkSection.vue' +import BrandQuestionsSection from '../templates/brand/BrandQuestionsSection.vue' +import { t } from '../i18n/translations' + +const locale = 'en' as const +--- + + +
+ + + + + + + +
+ diff --git a/apps/website/src/pages/zh-CN/brand.astro b/apps/website/src/pages/zh-CN/brand.astro new file mode 100644 index 00000000000..5163c44bcc4 --- /dev/null +++ b/apps/website/src/pages/zh-CN/brand.astro @@ -0,0 +1,26 @@ +--- +import BaseLayout from '../../layouts/BaseLayout.astro' +import BrandBackground from '../../templates/brand/BrandBackground.vue' +import BrandHeroSection from '../../templates/brand/BrandHeroSection.vue' +import BrandLogosSection from '../../templates/brand/BrandLogosSection.vue' +import BrandColorSection from '../../templates/brand/BrandColorSection.vue' +import BrandVoiceSection from '../../templates/brand/BrandVoiceSection.vue' +import BrandTrademarkSection from '../../templates/brand/BrandTrademarkSection.vue' +import BrandQuestionsSection from '../../templates/brand/BrandQuestionsSection.vue' +import { t } from '../../i18n/translations' +--- + + +
+ + + + + + + +
+ diff --git a/apps/website/src/templates/brand/BrandBackground.vue b/apps/website/src/templates/brand/BrandBackground.vue new file mode 100644 index 00000000000..94b63a162b0 --- /dev/null +++ b/apps/website/src/templates/brand/BrandBackground.vue @@ -0,0 +1,112 @@ + + + diff --git a/apps/website/src/templates/brand/BrandColorSection.vue b/apps/website/src/templates/brand/BrandColorSection.vue new file mode 100644 index 00000000000..c74a4f8408a --- /dev/null +++ b/apps/website/src/templates/brand/BrandColorSection.vue @@ -0,0 +1,93 @@ + + + diff --git a/apps/website/src/templates/brand/BrandHeroSection.vue b/apps/website/src/templates/brand/BrandHeroSection.vue new file mode 100644 index 00000000000..acd981552a2 --- /dev/null +++ b/apps/website/src/templates/brand/BrandHeroSection.vue @@ -0,0 +1,55 @@ + + + diff --git a/apps/website/src/templates/brand/BrandLogosSection.vue b/apps/website/src/templates/brand/BrandLogosSection.vue new file mode 100644 index 00000000000..066b893da86 --- /dev/null +++ b/apps/website/src/templates/brand/BrandLogosSection.vue @@ -0,0 +1,58 @@ + + + diff --git a/apps/website/src/templates/brand/BrandQuestionsSection.vue b/apps/website/src/templates/brand/BrandQuestionsSection.vue new file mode 100644 index 00000000000..4ab2ed1eb4e --- /dev/null +++ b/apps/website/src/templates/brand/BrandQuestionsSection.vue @@ -0,0 +1,33 @@ + + + diff --git a/apps/website/src/templates/brand/BrandTrademarkSection.vue b/apps/website/src/templates/brand/BrandTrademarkSection.vue new file mode 100644 index 00000000000..ea6bbfbd94e --- /dev/null +++ b/apps/website/src/templates/brand/BrandTrademarkSection.vue @@ -0,0 +1,37 @@ + + + diff --git a/apps/website/src/templates/brand/BrandVoiceSection.vue b/apps/website/src/templates/brand/BrandVoiceSection.vue new file mode 100644 index 00000000000..017b1e15178 --- /dev/null +++ b/apps/website/src/templates/brand/BrandVoiceSection.vue @@ -0,0 +1,100 @@ + + +