对齐全局框架、信息清晰度、跨页面一致性和服务路径的完整程度。
SERENDIPITY
PARIS
Digital Visual System · V2
The Art of Encounter
以作品建立欲望，以系统维持克制，以咨询完成一次真正的相遇。
Align
Adapt
Signature
Encounter Axis
连接影像焦点、作品事实与客户行动
Brand thesis
VCA-level maturity, Serendipity expression
对齐完成度，
不复制品牌表面。
借鉴成熟奢侈品网站的结构、服务闭环与状态完整性；视觉资产、品牌母题与 动效语言继续由 Serendipity 自己定义。
保留功能目的，重新设计色彩、影像、文案、组件比例与运动方式。
让影像焦点、标题、作品事实和咨询动作沿同一视觉关系相遇。
01 · Foundation
Visual foundation
安静的背景，
精确的层级。
色彩让位于珠宝，字体承担品牌性格，栅格与留白负责把复杂内容变得从容。
Porcelain#FCFBF7
Ivory#F4F0E8
Ink#171717
Graphite#5F5A53
Pearl#D9D2C7
Editorial Night#18223A
The Art of Encounter
邂逅作品
L’art de la rencontre
Use for
Hero、系列名称、章节标题与 PDP 作品名。保持正常字重，不用极细字体模拟奢华。
一件珠宝在与身体、光线和记忆的关系中真正鲜活起来。Typography 负责让品牌叙事保持从容，也让每一项操作清楚可读。
咨询这件作品
Book a private viewing
Prendre rendez-vous
Use for
正文、导航、按钮、表单与辅助标签。正文使用 400，关键动作允许 600。
ReferenceGB0618
Material18K AU 750
Carat12.22 ct
CNY¥68,000
EUR€8,500
Size17.5 cm
Use for
价格、SKU、克拉、尺寸与规格。数字对齐清晰，不使用 Display 字体承载数据。
Display Hero
相遇
56–128 px · 0.94
Display Section
系列世界
42–78 px · 0.96
Display PDP
金织软呢手链
36–67 px · 1.02
Lead
让作品在属于它的光线中被看见。
20–30 px · 1.70
Body
正文用于作品说明、品牌故事与服务解释。它需要在中文、英文与法文中保持
舒适阅读，而不是通过过细字重制造距离感。
15 px · 1.65
Utility
Menu · Search · Consult this piece · GB0618
11 px · 0.14 em
中文标题不机械放大英文比例；三语分别检查行数、换行与字面密度，但维持同一 信息层级。
公开模板前仍需确认拉丁与中文字体授权、简繁覆盖、货币符号、Web Font 子集和性能预算。
08
16
24
40
64
112
小间距组织事实，大间距分隔叙事。页面不依赖圆角卡片制造层级。
02 · Global shell
Header & navigation
品牌始终居中，
服务随时可达。
左侧工具、中间 Logo、右侧服务使用稳定三段式结构。菜单从触发它的左侧进入， 并以第二层承载系列与内容预览。
Search
SERENDIPITY
中
Boutique
咨询作品
Haute Joaillerie
Nymphéa Levant
在一颗宝石的晨曦色彩中，让两种文化产生一次相遇。
左右功能数量可以不同，但 Logo 必须相对整个视口保持几何居中。
当前公开页面隐藏不可用能力；Visual Guide 只记录未来布局位置。
Account · Future
Wishlist · Future
Bag · Future
03 · Components
Core interaction language
动作清楚，
界面保持安静。
组件不追求装饰变化。状态通过边界、对比、文案与焦点表达，不依赖圆角、 阴影或高饱和强调色。
Buttons & links
Inputs & selection
请输入完整的电子邮箱地址。
准确，不填充
- 材质
- 18K 黄金
- 主石
- 雕刻黑玛瑙
- 宝石重量
- 12.22 ct
- 作品编号
- GB0618
从作品进入服务
每个状态都提供下一步
清除筛选，或返回系列继续探索。
保留当前选择，并提供明确的重试入口。
说明后续联系渠道与预计回复方式。
04 · Discovery
PLP & product cards
可以比较，
仍然像珠宝。
商品发现需要结果、筛选与状态，但不能把高级珠宝压缩成通用电商货架。
Inquiry
金织软呢手链
18K 黄金 · 雕刻黑玛瑙
咨询作品
Priced
金织软呢短项链
18K 黄金 · 雕刻黑玛瑙
¥124,000 · 咨询作品
Archive
S-Signature Choker
18K 白金 · 钻石 · 澳白珍珠
档案作品
Inquiry
Torsade Tubogas 手链
18K 黄金 · 钻石
咨询作品优先佩戴、细节或结构图；没有对应素材时，不用无关 Campaign 图制造变化。
Inquiry、Priced、Archive 与 Future Commerce 具有明确且互不混淆的含义。
05 · PDP & consultation
From creation to conversation
看清作品，
自然开始对话。
Gallery、作品事实、状态与服务构成同一条路径。当前以咨询为主，未来交易能力 不提前伪装成可用功能。
06 · Motion & application
One orchestrated moment
运动用于显现，
不是用于表演。
Header、Drawer 与 Loading 共用克制的时间语言。Reduced Motion 保留信息和 操作，只移除位移与呼吸效果。
S
Shown only after 300ms
- Header
- 350ms
- translateY · 带迟滞阈值
- Drawer A
- 650ms
- 主要空间进入
- Drawer B
- 350ms
- 延迟 80ms · 次级关系
- Page reveal
- 450ms
- 每页只保留一个主要显现
- Feedback
- 160ms
- 状态变化快速且明确
- Reduced
- 1ms
- 静态替代，不删除内容
Homepage
Collection
PLP
PDP
Always
- 作品、信息与动作保持明确层级。
- 咨询过程保留当前作品上下文。
- 为键盘、Reduced Motion 和长文本设计。
- 只展示真实存在的素材、服务与状态。
Never
- 复制 VCA 的绿色、字体、花卉、蝴蝶或品牌动效。
- 用假库存、倒计时或稀缺标签制造压力。
- 在功能上线前显示 Account、Bag 或 Checkout。
- 用 Loading 掩盖没有边界的等待。