WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit 9363952

Browse files
CaliCastleCaliCastle
authored
feat: brand (#93)
2 parents 1f40b9f + 914942d commit 9363952

28 files changed

+1395
-61
lines changed

‎app/[locale]/brand/page.en.mdx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import { ButtonLink } from '~/components/ui/button'
2+
import { LogoHelmetFilled, LogoWordmark, LogoLockup } from '~/components/logo'
3+
4+
# Zolplay Brand Guidelines
5+
6+
Resources to present Zolplay with taste and consistency.
7+
8+
<div className='not-prose mt-6 mb-8'>
9+
<WithFrame className='inline-flex'>
10+
<ButtonLink href='https://cdn.zolplay.com/brand/Zolplay-Brand-Assets.zip' size='lg'>Download Brand Assets</ButtonLink>
11+
</WithFrame>
12+
</div>
13+
14+
## Naming
15+
16+
“Zolplay” is a single word, always spelled with a capital “Z”. It’s the name of our company and our studio. Treat initiatives as proper nouns (e.g., Zolplay Studio).
17+
18+
## Usage
19+
20+
Give Zolplay assets room to breathe. Scale them up or down—but never crowd them.
21+
Do not stretch, skew, recolor arbitrarily, or change proportions. Avoid effects, outlines, or busy backgrounds that reduce legibility.
22+
23+
<aside className='not-prose mt-6 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 p-4 text-[13px] leading-6'>
24+
<b>Friendly reminder:</b> Zolplay graphics are proprietary and protected by IP laws. Don’t alter the files, imply endorsement, or combine them with other marks without written consent from Zolplay. For questions, email
25+
{' '}<a className='underline' href='mailto:[email protected]'>[email protected]</a>.
26+
</aside>
27+
28+
## Logo lockup
29+
30+
Use the combined Zolplay lockup (logomark + wordmark) when a horizontal brand treatment is preferred. Apply on light or dark backgrounds using approved colors.
31+
32+
<Grid cols={1} md={2} gap={4} className='my-5'>
33+
<GridItem
34+
className='bg-neutral-50 text-neutral-900'
35+
action={{ kind: 'download', href: '/assets/brand/logo-lockup-dark.svg', label: 'Download SVG' }}
36+
>
37+
<LogoLockup className='w-[82%]' />
38+
</GridItem>
39+
<GridItem
40+
className='bg-neutral-900 text-white'
41+
action={{ kind: 'download', href: '/assets/brand/logo-lockup-light.svg', label: 'Download SVG' }}
42+
>
43+
<LogoLockup className='w-[82%]' />
44+
</GridItem>
45+
</Grid>
46+
47+
## Wordmark
48+
49+
Use the Zolplay wordmark in most cases. Monochrome is preferred. Apply it on light or dark backgrounds using the approved colors below.
50+
51+
<Grid cols={1} md={2} gap={4} className='my-5'>
52+
<GridItem
53+
className='bg-neutral-50 text-neutral-900'
54+
action={{ kind: 'download', href: '/assets/brand/wordmark-dark.svg', label: 'Download SVG' }}
55+
>
56+
<LogoWordmark className='w-[82%]' />
57+
</GridItem>
58+
<GridItem
59+
className='bg-neutral-900 text-white'
60+
action={{ kind: 'download', href: '/assets/brand/wordmark-light.svg', label: 'Download SVG' }}
61+
>
62+
<LogoWordmark className='w-[82%]' />
63+
</GridItem>
64+
</Grid>
65+
66+
## Logo
67+
68+
For tight layouts or logo-only grids, use the Zolplay logomark. Use with judgment—the wordmark has stronger recognition.
69+
70+
<Grid cols={1} md={2} gap={4} className='my-5'>
71+
<GridItem className='bg-neutral-50' action={{ kind: 'download', href: '/assets/brand/logo-dark.svg', label: 'Download SVG' }}>
72+
<div className='w-20 h-20 text-black flex items-center justify-center'>
73+
<LogoHelmetFilled className='w-9 h-9' />
74+
</div>
75+
</GridItem>
76+
<GridItem className='bg-neutral-900' action={{ kind: 'download', href: '/assets/brand/logo-light.svg', label: 'Download SVG' }}>
77+
<div className='w-20 h-20 text-white flex items-center justify-center'>
78+
<LogoHelmetFilled className='w-9 h-9' />
79+
</div>
80+
</GridItem>
81+
</Grid>
82+
83+
## Colors
84+
85+
Our primary color is Space Black, comfortable on light and dark surfaces. For monochrome wordmark usage, prefer black, white, or Space Black. Keep accents minimal and consistent with the system.
86+
87+
<Grid cols={1} md={2} gap={4} className='my-6'>
88+
<GridItem
89+
className='overflow-hidden p-0 flex flex-col gap-4 w-full bg-[#FAFAFA]'
90+
action={{ kind: 'copy', text: '#FAFAFA', label: 'Copy #FAFAFA', copiedLabel: 'Copied!' }}
91+
>
92+
<div className='px-4 py-12 text-sm'>
93+
<span className='block text-neutral-800'>Ice White</span>
94+
<div className='text-neutral-500 mt-1'>RGB 250, 250, 250<br/>#FAFAFA</div>
95+
</div>
96+
</GridItem>
97+
<GridItem
98+
className='overflow-hidden p-0 flex flex-col gap-4 w-full bg-[#262626]'
99+
action={{ kind: 'copy', text: '#262626', label: 'Copy #262626', copiedLabel: 'Copied!' }}
100+
>
101+
<div className='px-4 py-12 text-sm'>
102+
<span className='block text-neutral-300'>Space Black</span>
103+
<div className='text-neutral-500 mt-1'>RGB 38, 38, 38<br/>#262626</div>
104+
</div>
105+
</GridItem>
106+
</Grid>

‎app/[locale]/brand/page.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type { Metadata } from 'next'
2+
import type { RootParams } from '~/types/app'
3+
import { getTranslations, setRequestLocale } from 'next-intl/server'
4+
5+
export async function generateMetadata({ params }: { params: RootParams }): Promise<Metadata> {
6+
const { locale } = await params
7+
const t = await getTranslations({ locale, namespace: 'Brand' })
8+
9+
const title = t('Title')
10+
const description = t('Description')
11+
12+
return {
13+
title,
14+
description,
15+
openGraph: {
16+
title,
17+
description,
18+
},
19+
alternates: {
20+
canonical: '/brand',
21+
},
22+
robots: {
23+
index: true,
24+
follow: true,
25+
},
26+
}
27+
}
28+
29+
export default async function BrandPage({ params }: { params: Promise<RootParams> }) {
30+
const { locale } = await params
31+
32+
// Enable static rendering
33+
setRequestLocale(locale)
34+
35+
const Content = (await import(`./page.${locale}.mdx`)).default
36+
return <Content />
37+
}

‎app/[locale]/brand/page.zh-CN.mdx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import { ButtonLink } from '~/components/ui/button'
2+
import { LogoHelmetFilled, LogoWordmark, LogoLockup } from '~/components/logo'
3+
4+
# Zolplay 品牌指南
5+
6+
以统一而有品的方式呈现 Zolplay 的资源。
7+
8+
<div className='not-prose mt-6 mb-8'>
9+
<WithFrame className='inline-flex'>
10+
<ButtonLink href='https://cdn.zolplay.com/brand/Zolplay-Brand-Assets.zip' size='lg'>下载品牌素材</ButtonLink>
11+
</WithFrame>
12+
</div>
13+
14+
## 命名
15+
16+
“Zolplay”为一个单词，首字母 Z 必须大写。它既是我们公司的名称，也是工作室的名称。相关计划或项目按专有名词书写（例如：Zolplay 设计工作室）。
17+
18+
## 中文用法
19+
20+
- 中文品牌名：佐玩。
21+
- 文案建议：首次出现可写作“Zolplay（佐玩）”或“佐玩（Zolplay）”，其后可简写为“佐玩”。
22+
- 标识使用：无论中文或英文语境，图形标与文字标均保持英文原样“Zolplay”，不制作中文字标。
23+
- 误用避免：不要写作“ZOLPLAY”“zolplay”“佐普雷”等；中文名不与其他词组合造新词标识。
24+
- 对外场景：中文媒体稿、招聘与社交媒体中文账号建议使用“佐玩”；涉外或跨语境材料优先使用“Zolplay”。
25+
26+
## 使用
27+
28+
给 Zolplay 的品牌素材留出足够留白。可以按需放大或缩小，但不要让它们显得拥挤。
29+
请勿拉伸、倾斜、随意改色或改变比例。避免使用降低可读性的效果、描边或复杂背景。
30+
31+
<aside className='not-prose mt-6 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 p-4 text-[13px] leading-6'>
32+
<b>友情提醒：</b> Zolplay 的图形素材为专有资产，受知识产权法律保护。未经 Zolplay 书面许可，请勿修改文件、暗示任何背书，或与其他标识组合使用。若有疑问，请发送邮件至
33+
{' '}<a className='underline' href='mailto:[email protected]'>[email protected]</a>。
34+
</aside>
35+
36+
## 组合标识（Lockup）
37+
38+
当需要横向的品牌呈现时，可使用 Zolplay 的组合标识（图形标 + 文字标）。可在浅色或深色背景上使用，并限定在批准的颜色范围内。
39+
40+
<Grid cols={1} md={2} gap={4} className='my-5'>
41+
<GridItem
42+
className='bg-neutral-50 text-neutral-900'
43+
action={{ kind: 'download', href: '/assets/brand/logo-lockup-dark.svg', label: '下载 SVG' }}
44+
>
45+
<LogoLockup className='w-[82%]' />
46+
</GridItem>
47+
<GridItem
48+
className='bg-neutral-900 text-white'
49+
action={{ kind: 'download', href: '/assets/brand/logo-lockup-light.svg', label: '下载 SVG' }}
50+
>
51+
<LogoLockup className='w-[82%]' />
52+
</GridItem>
53+
54+
</Grid>
55+
56+
## 文字标识（Wordmark）
57+
58+
在大多数场景下请使用 Zolplay 文字标识。优先使用单色版本。可在浅色或深色背景上使用，下方为推荐颜色。
59+
60+
<Grid cols={1} md={2} gap={4} className='my-5'>
61+
<GridItem
62+
className='bg-neutral-50 text-neutral-900'
63+
action={{ kind: 'download', href: '/assets/brand/wordmark-dark.svg', label: '下载 SVG' }}
64+
>
65+
<LogoWordmark className='w-[82%]' />
66+
</GridItem>
67+
<GridItem
68+
className='bg-neutral-900 text-white'
69+
action={{ kind: 'download', href: '/assets/brand/wordmark-light.svg', label: '下载 SVG' }}
70+
>
71+
<LogoWordmark className='w-[82%]' />
72+
</GridItem>
73+
74+
</Grid>
75+
76+
## 图形标识（Logo）
77+
78+
在紧凑布局或仅图标网格的场景，可使用 Zolplay 图形标。请酌情选择使用场景——文字标识通常具有更高的识别度。
79+
80+
<Grid cols={1} md={2} gap={4} className='my-5'>
81+
<GridItem className='bg-neutral-50' action={{ kind: 'download', href: '/assets/brand/logo-dark.svg', label: '下载 SVG' }}>
82+
<div className='w-20 h-20 text-black flex items-center justify-center'>
83+
<LogoHelmetFilled className='w-9 h-9' />
84+
</div>
85+
</GridItem>
86+
<GridItem className='bg-neutral-900' action={{ kind: 'download', href: '/assets/brand/logo-light.svg', label: '下载 SVG' }}>
87+
<div className='w-20 h-20 text-white flex items-center justify-center'>
88+
<LogoHelmetFilled className='w-9 h-9' />
89+
</div>
90+
</GridItem>
91+
92+
</Grid>
93+
94+
## 配色
95+
96+
我们的主色为「深空黑」（Space Black），在浅色与深色背景上都具有良好观感。用于文字标识的单色时，优先选择深空黑或冰松白色。点缀色请保持克制，并与整体系统风格一致。
97+
98+
<Grid cols={1} md={2} gap={4} className='my-6'>
99+
<GridItem
100+
className='overflow-hidden p-0 flex flex-col gap-4 w-full bg-[#FAFAFA]'
101+
action={{ kind: 'copy', text: '#FAFAFA', label: '复制 #FAFAFA', copiedLabel: '已复制！' }}
102+
>
103+
<div className='px-4 py-12 text-sm'>
104+
<span className='block text-neutral-800'>冰松白</span>
105+
<div className='text-neutral-500 mt-1'>RGB 250, 250, 250<br/>#FAFAFA</div>
106+
</div>
107+
</GridItem>
108+
<GridItem
109+
className='overflow-hidden p-0 flex flex-col gap-4 w-full bg-[#262626]'
110+
action={{ kind: 'copy', text: '#262626', label: '复制 #262626', copiedLabel: '已复制！' }}
111+
>
112+
<div className='px-4 py-12 text-sm'>
113+
<span className='block text-neutral-300'>深空黑</span>
114+
<div className='text-neutral-500 mt-1'>RGB 38, 38, 38<br/>#262626</div>
115+
</div>
116+
</GridItem>
117+
118+
</Grid>

‎app/[locale]/headline-art-dark.png‎

646 KB
Loading

‎app/[locale]/headline-art.png‎

542 KB
Loading

‎app/[locale]/page.en.mdx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import headline from './zolplay-headline-illustration.png'
1+
import headline from './headline-art.png'
2+
import headlineDark from './headline-art-dark.png'
23
import mantra from './mantra.webp'
34
import founderTalking from './founder-talking.webp'
45
import { PricingPlans } from '~/components/mdx'
56
import { Zolplayers } from '~/components/zolplayers'
67

7-
<NakedImage src={headline} alt='Zolplay Headline Illustration' priority className='dark:invert-90' />
8+
<NakedImage src={headline} alt='Zolplay Headline Illustration' priority className='block visible dark:hidden dark:invisible' />
9+
<NakedImage src={headlineDark} alt='Zolplay Headline Illustration' priority className='mt-0 hidden invisible dark:block dark:visible' />
810

911
# A <Gradient>design studio</Gradient> for people with high standards
1012

‎app/[locale]/page.zh-CN.mdx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import headline from './zolplay-headline-illustration.png'
1+
import headline from './headline-art.png'
2+
import headlineDark from './headline-art-dark.png'
23
import mantra from './mantra.webp'
34
import founderTalking from './founder-talking.webp'
45
import { PricingPlans } from '~/components/mdx'
56
import { Zolplayers } from '~/components/zolplayers'
67

7-
<NakedImage src={headline} alt='佐玩头图' priority className='dark:invert-90' />
8+
<NakedImage src={headline} alt='佐玩头图' priority className='block visible dark:hidden dark:invisible' />
9+
<NakedImage src={headlineDark} alt='佐玩头图' priority className='mt-0 hidden invisible dark:block dark:visible' />
810

911
# 一家专为高标准人士打造的<br /><Gradient>设计工作室</Gradient>
1012

@@ -70,10 +72,13 @@ import { Zolplayers } from '~/components/zolplayers'
7072
<Gradient>好的工艺应当让人爱不释手</Gradient>
7173
。我们曾为亲朋好友与支持者们打造周边，甚至还搭建过一个小型商城售卖那些有纪念意义的限量服饰、包袋与小物件。
7274

73-
<BackgroundVideo src='/vids/hangouts-reel.mp4' aspectRatio='4/3' />
74-
75-
<BackgroundVideo src='/vids/swag-shop-reel.mp4' aspectRatio='16/9' />
75+
<WithFrame>
76+
<BackgroundVideo src='/vids/hangouts-reel.mp4' aspectRatio='4/3' />
77+
</WithFrame>
7678

79+
<WithFrame>
80+
<BackgroundVideo src='/vids/swag-shop-reel.mp4' aspectRatio='16/9' />
81+
</WithFrame>
7782
---
7883

7984
<Zolplayers />

‎components/footer.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { clsxm } from '@zolplay/utils'
22
import { useLocale, useTranslations } from 'next-intl'
3-
import Image from 'next/image'
4-
import Wordmark from '~/public/images/drawn-wordmark.png'
3+
import WordmarkGrainGradient from '~/modules/fx/wordmark-grain-gradient'
54
import { WithFrame } from './mdx'
65

76
export function Footer() {
@@ -16,8 +15,8 @@ export function Footer() {
1615
'after:absolute after:bottom-0 after:right-[-100vw] after:w-[200vw] after:h-px after:bg-(--grid-border-color)',
1716
)}
1817
>
19-
<WithFrame className='p-6 my-4'>
20-
<Image src={Wordmark} alt='Zolplay Wordmark' className='opacity-50 w-full dark:invert' placeholder='blur' />
18+
<WithFrame className='w-full'>
19+
<WordmarkGrainGradient />
2120
</WithFrame>
2221

2322
<p className='my-6 text-sm opacity-50'>

‎components/logo.tsx‎

Lines changed: 32 additions & 0 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)