精选 · 开放 · 免费

Apartamento

一个生活方式杂志网站，融合了经典的编辑式排版与大胆、高对比度的图形强调色。

01

设计气质 DNA

一本精致的印刷杂志经过网页化改造，具有大胆、独特的视觉冲击力。

02

色彩

柔和、温暖的中性色主导画布，通过一个单一、强烈的高饱和度黄色来点缀关键交互元素。

03

字体

transitional-serif · humanist-sans

• display42px · 700
• h224px · 700
• body16px · 400

使用高对比度的过渡衬线字体用于主要标题，以唤起印刷杂志的格调。 · 使用几何人文主义无衬线字体用于UI元素、导航和正文，以确保清晰的易读性。 · 对无衬线文本应用宽字间距，以增强其现代、通透的感觉。

04

间距

充足的内边距和留白，以支持编辑式布局并让图片有呼吸的空间

05

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

极简，使用细黑色边框用于输入框和导航下划线

06

布局

经典的杂志网格布局，包含一个突出的全宽主图和一个用于文章卡片的结构化列布局。

07

动效与交互

淡入模态框 · 交互元素的平滑过渡

文本链接上微妙的颜色变化或下划线 · 交互元素上的标准指针光标

08

组件

• button 极简的纯文本按钮，采用药丸形圆角边框。
• card 内容卡片，包含大型编辑式摄影图片、衬线标题和无衬线元数据。
• chip 简单的文本链接或标签式元素。
• input 高对比度的圆角药丸形输入框，黑色边框置于鲜艳的黄色背景上。
• hero 全视口摄影主图，中央带有一个醒目的图形模态框覆盖层。

09

文案语气与禁用清单

• 语气 精致、亲切且有文化格调
• 标题风格 直接、大胆且略带内敛，依靠排版来传达冲击力。
• 按钮文案 清晰、直接，并融入编辑式内容流中。

• 不要使用纯白色背景——截图显示基底色是暖白色（#F8F4EC）
• 不要让所有按钮都使用亮黄色——截图显示黄色严格保留给模态框覆盖层使用
• 不要用无衬线字体做主要标题——截图显示“最新文章”使用了高对比度的过渡衬线字体
• 不要用圆角方正的形状做输入框——截图显示使用了极端的药丸形圆角
• 不要用密集的UI图案让布局显得拥挤——截图显示的是干净、有呼吸感的编辑网格
• 不要给UI卡片添加复杂的投影——截图显示是完全扁平、无阴影的组件
• 避免: 激进的营销语言
• 避免: 喧闹、冲突的霓虹色调
• 避免: 厚重的投影
• 避免: 过于花哨或圆润的UI组件

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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