Website & Landing Page · 官网与落地页
Use full-width hero or campaign bands. Keep the H1 literal and useful; place product, installment, or service proof below the fold instead of crowding the hero.
Easy Connect, More Expect.
ภาพลักษณ์แบรนด์ · บริบทการมองเห็น
品牌印象 · 视觉语境
This standard is drawn from CellMore's physical stores: minimal white space, light-wood display tables, and Klein Blue as the single precise accent. Every digital material should carry the same calm, premium retail character.本标准源自线下门店的真实视觉语言——极简白空间、浅木展示桌、克莱茵蓝点睛。
Three visual principles run through everything.三条视觉原则贯穿始终
Real in-store Thai copy · 门店真实泰语文案 (分期购机卖点 · 泰文待母语者校对)
Logo 组合规范
These lockups follow the in-store signage: the infinity mark, the CELLMORE wordmark, and the tagline locked at fixed proportions. Reproduce them as supplied — never recreate or rearrange.以下组合源自门店招牌:图标 + 字标 + Slogan 固定比例锁版,按提供文件使用,不得重组。
Full Lockup
Mark + Wordmark + Tagline · 招牌主视觉
Horizontal
Mark + Wordmark · 页头 / 导航
Mark only
∞ icon · favicon / app / 小尺寸
Wordmark only
CELLMORE · 正式署名 / 文字组合
Reversed
On dark — use white assets · 深色底用反白资源
Clear space · min padding = 50% of mark height, all sides四周最小留白 = 图标高度的 50%
Tagline lockup · tagline left-aligned under the wordmark, ~40% its heightSlogan 置于字标下方左对齐,约字标高 40%
ระบบสี
色彩系统
Klein Blue is the only high-saturation color allowed — the less it appears, the more precious it feels. White dominates; warm wood adds temperature.克莱茵蓝是唯一允许的高纯度彩色——用得越少越贵。
ตัวอักษร
字体规范
Montserrat for Latin, Noto Sans Thai for Thai, Noto Sans SC for Chinese — geometric and harmonious. Bold 700 for power, Light 300 for elegant taglines.西文 Montserrat、泰文 Noto Sans Thai、中文思源黑体,几何协调。
Latin · 300 / 400 / 500 / 700
Thai · Noto Sans Thai
Chinese · Noto Sans SC
ระยะห่างและเลย์เอาต์
间距与布局
8px grid base. Major sections breathe with 96–128px vertical padding. Container max 1200px. White space is CellMore's luxury.8px 栅格,区块留白 96–128px,容器 1200px。
มุมโค้ง เงา และเส้นขอบ
圆角 · 阴影 · 描边
Rounded corners echo the logo's looped connection; shadows stay matte and restrained, with a blue-tinted lift on hover.圆角呼应 Logo 连接感,阴影克制哑光。
การเคลื่อนไหว
动效
Easing cubic-bezier(0.4,0,0.2,1), fluid like an infinite connection. Three durations: 150 / 250 / 400ms. Hover the card below.缓动如「无限连接」,150/250/400ms 三档。
250ms lift + blue shadow. Motion guides, never shows off.
micro 150ms — buttons, tooltips
normal 250ms — cards, fade-up
transition 400ms — large sections
คอมโพเนนต์
组件规范
Live, interactive examples — buttons, cards, inputs, tags — all built from the tokens above.真实可交互组件,全部使用上述 token。
White, 16px radius, lifts to shadow-lg on hover.
ตัวอย่างการใช้งานในสื่อ
应用物料规范
Application materials should feel like the store translated into media: white-led, quiet, practical, with Klein Blue as the one decisive brand signal. Generated imagery is used only for environment and product context; exact logo and copy are always placed by the design system.应用物料应像“把门店搬到媒介里”:白场主导、克制、实用,克莱茵蓝只作为明确品牌信号。生成图只用于场景与产品语境,Logo 与文案必须由设计系统精确叠加。
Use full-width hero or campaign bands. Keep the H1 literal and useful; place product, installment, or service proof below the fold instead of crowding the hero.
Reserve large empty areas for exact copy overlay. Avoid promotional clutter, multiple badges, and saturated colors beyond Klein Blue.
Keep layouts modular: product flat-lay, clean headline zone, small logo. Do not use sticker-like sale bursts or rainbow accessory palettes.
Physical materials should stay almost blank. The logo, one blue field, and one service message are enough; material quality and spacing do the rest.
ข้อควรทำและข้อห้าม
规范精髓与反模式