COS

一个画廊空间，服装是艺术品，界面则是安静的白墙。

严格采用无彩色系，仅依靠摄影的温度与负空间提供所有视觉趣味。

geometric-sans · humanist-sans

• display56px · 500
• headline16px · 500
• body13px · 400

用于高冲击力展示标题的几何无衬线字体。 · 用于功能性正文的人文主义无衬线字体。 · 保持展示标题与正文字号间的高对比度。

标准8像素网格，内边距充裕，为编辑内容留出呼吸空间。

输入框使用1像素细实线黑色边框，按钮无边框。

0 4px 20px rgba(0,0,0,0.15)

全出血摄影分割布局，搭配居中模态覆盖层。

模态淡入 · 菜单覆盖层平滑过渡

微妙的透明度变化或颜色反转。 · 即时状态变化，最小化动画。

• button 黑底白字，直角（圆角半径为0）。
• card 边缘到边缘的摄影卡片，文字覆盖极少或无。
• chip 用于简单选择的圆形单选按钮。
• input 白色背景，细黑色边框，无圆角。
• hero 分割屏幕的编辑摄影，搭配大型白色排版覆盖层。

• 语气 自信、直接、聚焦编辑感。
• 标题风格 简短、有力、以行动为导向（例如：'促销进行中'）。
• 按钮文案 简单祈使动词，全大写（例如：'继续'、'全部接受'）。

• 不要为按钮或输入框使用border-radius —— 截图显示为尖锐的方角。
• 不要使用明亮的强调色 —— 配色严格限于黑、白及摄影色彩。
• 不要使用装饰性或手写体字体 —— 排版严格使用干净的几何与人文主义无衬线体。
• 不要过度拥挤布局 —— 模态框和主视觉使用了大量的负空间。
• 不要为界面元素添加投影 —— 唯一的阴影是模态容器上的微妙阴影。
• 不要为主要行动号召使用小写 —— 截图显示 'CONTINUE' 和 'ACCEPT ALL' 均为全大写。
• 避免: 过度使用形容词
• 避免: 过于随意的俚语
• 避免: 冗长的解释
• 避免: 明亮、冲突的色彩