CellMore Logo

CellMore Design Standards

Easy Connect, More Expect.

Mobile & accessories retail · Single source of truth for all brand materials  |  from DESIGN.md · 2026-06-02

00

Brand Impression

ภาพลักษณ์แบรนด์ · บริบทการมองเห็น

品牌印象 · 视觉语境

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.本标准源自线下门店的真实视觉语言——极简白空间、浅木展示桌、克莱茵蓝点睛。

CellMore store

From space to screen

Three visual principles run through everything.三条视觉原则贯穿始终

White-led · พื้นที่ว่าง
Generous white space, room to breathe 留白主导
Warm balance · โทนอุ่น
Light wood softens the cool palette 暖色平衡
Klein accent · สีเน้น
The only saturated color, used sparingly 克莱茵点睛

Real in-store Thai copy · 门店真实泰语文案 (分期购机卖点 · 泰文待母语者校对)

บัตรประชาชนใบเดียว
只需一张身份证
ไม่ต้องใช้บัตรเครดิต
无需信用卡
อนุมัติง่ายรับเครื่องทันที
审批简单 · 即时取机
เครื่องแท้รับประกัน
正品 · 官方保修
02

Color System

ระบบสี

色彩系统

Klein Blue is the only high-saturation color allowed — the less it appears, the more precious it feels. White dominates; warm wood adds temperature.克莱茵蓝是唯一允许的高纯度彩色——用得越少越贵。

Klein Blue
น้ำเงินไคลน์
#002FA7
Brand core · Logo / CTA / links核心品牌色
Klein Deep
น้ำเงินเข้ม
#002485
Button hover / pressed按钮按下态
Klein Tint
ฟ้าอ่อน
#E5EAF6
Light fill / selected / tags浅蓝填充
Pure White
ขาวบริสุทธิ์
#FFFFFF
Primary background 70%+主背景
Mist Grey
เทาหมอก
#F7F8FA
Secondary surface / cards次级背景
Ink Black
ดำหมึก
#111111
Primary text / headings主文本
Slate Grey
เทาสเลต
#6B7280
Secondary text / captions次要文本
Maple Warmth
โทนไม้เมเปิล
#E0D0B0
Warm accent (small areas)材质暖色
03

Typography

ตัวอักษร

字体规范

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、中文思源黑体,几何协调。

Montserrat

Latin · 300 / 400 / 500 / 700

สวัสดี

Thai · Noto Sans Thai

思源黑体

Chinese · Noto Sans SC

Type Scale

Display 48–64Aa เชื่อมต่อ
H1 32–40Aa Page title
H2 24–28Aa Section title
Body 16Aa Easy Connect, More Expect.
Small 14Aa Supporting text
Caption 12Aa Caption / legal
04

Spacing & Layout

ระยะห่างและเลย์เอาต์

间距与布局

8px grid base. Major sections breathe with 96–128px vertical padding. Container max 1200px. White space is CellMore's luxury.8px 栅格,区块留白 96–128px,容器 1200px。

4
8
16
24
32
48
64
96
128
05

Radius · Shadow · Border

มุมโค้ง เงา และเส้นขอบ

圆角 · 阴影 · 描边

Rounded corners echo the logo's looped connection; shadows stay matte and restrained, with a blue-tinted lift on hover.圆角呼应 Logo 连接感,阴影克制哑光。

Radius

8px
Input
12px
Image / container
16px
Card
Pill
Button

Shadow

shadow-sm
Card default
shadow-md
Overlay
shadow-lg
Hover · blue-tinted
06

Motion

การเคลื่อนไหว

动效

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 三档。

Hover me

250ms lift + blue shadow. Motion guides, never shows off.

micro 150ms — buttons, tooltips

normal 250ms — cards, fade-up

transition 400ms — large sections

07

Components

คอมโพเนนต์

组件规范

Live, interactive examples — buttons, cards, inputs, tags — all built from the tokens above.真实可交互组件,全部使用上述 token。

Buttons

Card · Input · Tag

New · ใหม่

Product Card

White, 16px radius, lifts to shadow-lg on hover.

08

Application Materials

ตัวอย่างการใช้งานในสื่อ

应用物料规范

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 与文案必须由设计系统精确叠加。

Website and landing page application mockup
CELLMORE
Website / Landing

White space first, store warmth second.

Use the store environment as a calm product stage; keep the primary message short and leave the next section visible.

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.

Ratio16:9 / 21:9 hero
LogoTop-left, Klein Blue
CTAPrimary pill in #002FA7
Digital advertising banner application mockup
CELLMORE
Ads Banner

One offer. One action.

Short benefit copy, no more than two lines, with one clear CTA.

Digital Advertising · 数字广告

Reserve large empty areas for exact copy overlay. Avoid promotional clutter, multiple badges, and saturated colors beyond Klein Blue.

Ratio16:9 / 2:1 / 1.91:1
Copy1 headline + 1 CTA
BlueOne block or one CTA
Square social media application mockup
CELLMORE
Social 1:1

Product grid, generous air.

Use the upper third for message, lower area for products.

Social Media · 社媒方图

Keep layouts modular: product flat-lay, clean headline zone, small logo. Do not use sticker-like sale bursts or rainbow accessory palettes.

Ratio1:1 / 4:5
TypeDisplay 32-48
Safe area64px min
Store poster and packaging application mockup
CELLMORE
Store / Print

Blank surfaces carry the brand.

Use white materials, exact Klein Blue marks, and one small proof point.

Store Collateral · 门店海报 / 包装 / 购物袋

Physical materials should stay almost blank. The logo, one blue field, and one service message are enough; material quality and spacing do the rest.

PrintWhite stock + Klein Blue
LogoDo not stretch or recolor
MessageOne benefit per surface
Use Generated Imagery Carefully生成图只做场景、产品和材质氛围,不承载最终 Logo 或可读营销文案。
Overlay Exact AssetsLogo、Slogan、CTA、价格、条款必须用 HTML / 设计系统资源叠加,避免 AI 生成错字。
Keep One Blue Signal每个画面只保留一个强蓝信号:蓝色块、Logo、CTA 三者择主,不要互相抢戏。
Respect Retail Calm物料要像门店:明亮、干净、可信赖;避免促销噪音、复杂渐变和多彩装饰。
09

Do's & Don'ts

ข้อควรทำและข้อห้าม

规范精髓与反模式

✓ Do

  • Let white lead, Klein Blue be the one highlight让白当主角,蓝当那一个亮点
  • Balance the cool palette with warm wood用浅木暖色中和冷调
  • Align to the grid, keep generous space严格栅格、慷慨留白
  • Use only the official #002FA7克莱茵蓝只用官方值

✕ Don't

  • Don't mix many saturated colors不要多种高饱和色并用
  • Don't use the CELLMORE wordmark as body type不要把字标当正文字体
  • Don't stack heavy shadows / gradients不要堆叠重阴影渐变
  • Don't cram the layout, kill the white space不要压缩留白塞满版面