Halfhelix

一家创意设计机构的高端时尚杂志网站

单色、高对比度的黑白搭配中性灰基底，让摄影作品占据主导地位。

humanist-sans · humanist-mono

• display72px · 400
• display-sm48px · 400
• body16px · 400
• caption12px · 400

为大号展示文字使用紧凑的字间距 · 为所有排版保持干净、无装饰的美学 · 通过一致的 400 字重确保可读性

章节之间采用充裕的垂直间距，让图像与排版得以舒展。

最少化的 1px 边框，仅用于必要的结构界定。

一个灵活的网格系统，在全出血摄影首屏与结构化内容栏之间交替切换。

hover 时平滑的背景色与文字颜色过渡 · focus 与渐显状态下的微妙透明度和缩放动画

文字链接上的微妙色彩变化，以及按钮上的背景色平移。 · 即时响应，无厚重的反馈动画。

• button 极简的纯文字按钮，采用紧凑内边距和小号字体，常伴有箭头图标。
• card 大型、无边框的摄影卡片，铺满其容器并带有圆角。
• chip 小型的矩形标签，带圆角和细边框。
• input 简洁的搜索栏，配有简单的放大镜图标和微妙的背景。
• hero 全出血、高分辨率的摄影背景，搭配透明导航覆盖层。

• 语气 自信、精致且直接。
• 标题风格 采用大号、富有冲击力的陈述，配合紧凑字间距和极简标点。
• 按钮文案 干净、克制的行动号召，使用纯文字而非厚重的按钮。

• 不要使用粗体字重——截图显示整个界面采用一致的 400 字重。
• 不要为元素添加厚重的阴影——截图显示完全扁平的 UI 界面。
• 不要使用多种强调色——截图显示严格的黑、白、灰单色方案。
• 不要用密集的文本块使布局拥挤——截图显示充裕的留白和大型摄影元素。
• 不要在所有元素上都使用尖锐的直角——截图显示混合使用了紧凑的 3px 圆角和圆形的药丸形状。
• 不要使用复杂的装饰性字体——截图显示整体采用干净、现代的无衬线系统字体。
• 避免: 避免过度使用粗体字重
• 避免: 避免过于复杂或装饰性的字体
• 避免: 避免与主要摄影作品竞争的杂乱背景
• 避免: 避免使用明亮或饱和的强调色
• 避免: 避免在屏幕上堆积过多元素导致布局拥挤
• 避免: 避免使用生硬的阴影或厚重的投影