精选 · 开放 · 免费

It's Nice That

通过视觉资讯与策展项目推动全球创意的领先在线出版物及社区平台。

editorialdesign
It's Nice That 网站截图
↓ 下载设计系统包 (30 MB)在 OpenDesign 中打开

原站: https://www.itsnicethat.com

📦 浏览包内文件 →

01

设计气质 DNA

创意灵感设计资讯社区策展

如同将充满活力的创意总监情绪板化为每日数字出版物。

02

色彩

#6219FFAccent
#2B2B2BInk
#676767Ink soft
#FFFFFFBG
#F4F4F4BG soft
#FFEDD1BG quiet
rgba(43,43,43,1.0)Line

高对比度黑白基底，搭配鲜明紫色强调色及用于内容策展的暖调柔和色块。

03

字体

transitional-serif · humanist-sans

大标题与展示性文字使用过渡衬线字体以体现权威感。 · 所有正文及功能界面元素使用人文无衬线字体以确保高可读性。 · 大号展示字体采用紧凑字距（-1px）以呈现现代编辑风格。 · 正文采用充裕行高（约1.5倍）以确保舒适阅读体验。

04

间距

4px
8px
12px
16px
24px
32px
48px
64px
96px

采用8px基线网格实现统一的垂直节奏与组件间距。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

使用深墨色（#2B2B2B）的1px细实线边框进行结构分隔，保持极简。

0px 24px 38px 0px rgba(0, 0, 0, 0.08) · 0px 9px 46px 0px rgba(0, 0, 0, 0.08) · 0px 11px 15px 0px rgba(0, 0, 0, 0.08)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

经典编辑杂志布局，包含简洁顶部导航、横向信息流及基于网格的多样化内容区块。

07

动效与交互

100msmicro
300mssmall
2000msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

背景元素与UI状态采用细腻透明度过渡。 · 交互元素的背景色与文字色快速切换。

链接与按钮在0.1秒内进行细腻的背景色与文字色过渡。 · 通过快速背景色更新提供即时视觉反馈。

08

组件

09

文案语气与禁用清单

10

包内真实截图

It's Nice That — 桌面首屏（hero）
桌面首屏（hero）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

设计一个灵感源自'It's Nice That'的简洁编辑风格网站，定位为面向创意社区的高端数字出版物。基底采用白色（#FFFFFF），搭配浅灰（#F4F4F4）与暖桃色（#FFEDD1）背景。主色为深灰（#2B2B2B），鲜明紫色（#6219FF）作为唯一高饱和度强调色。标题使用过渡衬线字体，正文使用人文无衬线字体。布局采用杂志风格，允许多样化图像长宽比与横向滚动信息流。关键禁忌：切勿使用深色模式基底，切勿用几何无衬线字体作展示性文字，切勿使用刺眼饱和的背景色。保持交互快速（0.1秒过渡），注重充足留白与清晰的字体层次。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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