精選 · 開放 · 免費

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

使用過渡襯線字體作為大型、權威性的標題與展示文字。 · 使用人文無襯線字體作為所有內文與功能性 UI 元素，以維持高可讀性。 · 在大型展示字體上保持緊湊的字距 (-1px)，以營造現代編輯感。 · 內文使用寬鬆的行高 (~1.5)，確保舒適的閱讀體驗。

04

間距

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

使用 8px 基準網格，以實現一致的垂直節奏與元件間距。

05

表面 (圓角 / 陰影 / 邊線)

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

採用極簡的 1px 實線邊框，使用深墨色 (#2B2B2B) 進行結構性分隔。

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

經典的編輯雜誌佈局，包含簡潔的頂部導覽、水平 feed 與多樣化的網格式內容區塊。

07

動效與互動

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

背景元素與 UI 狀態採用細膩的 opacity 轉場。 · 互動元素採用快速的背景色與顏色變化。

連結與按鈕在 0.1s ease-in 內進行細膩的背景色與顏色轉場。 · 透過快速的背景色更新提供即時視覺回饋。

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) 作為唯一的高彩度強調色。使用過渡襯線字體作為標題，人文無襯線字體作為內文。佈局應受雜誌啟發，允許不同的圖片長寬比與水平滾動 feed。關鍵的避免事項：永遠不要使用深色模式基礎、永遠不要使用幾何無襯線字體作為展示文字、永遠不要使用刺眼且飽和的顏色作為背景。保持互動快速，使用 0.1s 的轉場效果。專注於寬鬆的留白與清晰的字體層次結構。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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