精选 · 开放 · 免费

Nofilter

一个为时尚与摄影打造的、以排版为核心驱动的简洁编辑平台。

01

设计气质 DNA

高端时尚杂志网站

02

色彩

单色方案，通过白色背景上的高对比度黑色文本强调内容。

03

字体

grotesque-sans

• display120px · 400
• heading35px · 400
• body24px · 400
• small15px · 400

所有文本使用 pragmatica sans-serif 字体。 · 导航链接采用大写形式。 · 作者和日期行使用较小的正文字号。

04

间距

统一的 4px 倍数内边距和外边距。

05

表面 (圆角 / 阴影 / 边线)

主容器上使用 1px 实线 rgb(51, 51, 51) 边框。

06

布局

基于网格的编辑式布局，搭配大尺寸图像和非对称列。

07

动效与交互

鼠标指针指示可点击元素。 · 鼠标指针指示可点击元素。

08

组件

• button 采用大写样式并带鼠标指针的文本链接。
• card 带边框的容器，用于展示带有大尺寸图像的文章。
• chip 无
• input 无
• hero 横跨宽度的大尺寸排版标题。

09

文案语气与禁用清单

• 语气 权威、精致、极简。
• 标题风格 直接有力，采用大号排版。
• 按钮文案 低调内敛，基于文本的导航。

• 避免使用装饰性字体——截图显示全文使用 pragmatica sans-serif。
• 避免添加背景渐变——截图显示纯白色背景。
• 避免在卡片上使用投影——截图显示扁平的带边框容器。
• 避免使用圆角——截图显示棱角分明的矩形元素。
• 避免引入鲜艳的强调色——截图显示单色方案。
• 避免用不必要的元素使布局显得杂乱——截图显示充足的留白。
• 避免: 避免使用装饰性字体。
• 避免: 避免添加背景渐变。
• 避免: 避免在卡片上使用投影。
• 避免: 避免使用圆角。
• 避免: 避免引入鲜艳的强调色。
• 避免: 避免用不必要的元素使布局显得杂乱。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko