精選 · 開放 · 免費

Zora

一個用於分享與收藏數位藝術及 NFTs 的極簡主義社群平台。

cryptonft

Zora 網站截圖

↓ 下載設計系統包 (48 MB)在 OpenDesign 中開啟

原站: https://zora.co

📦 瀏覽包內檔案 →

01

設計氣質 DNA

創作者趨勢交易者NFTs社群

數位藝術與 web3 收藏家的 Instagram

02

色彩

#00DF00Accent

#121212Ink

#4D4D4DInk soft

#FFFFFFBG

#F5F5F5BG soft

#878787Muted

rgba(77,77,77,1.0)Line

單色調 UI，搭配高對比文字與霓虹綠作為操作狀態的點綴色。

03

字型

grotesque-sans · monospace

display34px · 500
h221px · 500
body15px · 410
small13px · 410

所有介面文字使用 Monument Grotesk。 · 標題與內文保持緊湊的字距調整。 · 內文使用 410 字重，強調部分使用 500 字重。

04

間距

4px

8px

12px

16px

24px

32px

48px

64px

96px

基於 4px 網格的一致間距。

05

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

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid #4D4D4D

rgba(0, 0, 0, 0.05) 0px 5px 10px 0px · rgba(0, 0, 0, 0.07) 0px 15px 25px 0px

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

三欄式桌面佈局：細窄側邊欄、中央資訊流、右側導覽列。手機版為單欄式資訊流。

07

動效與互動

120msmicro

400mssmall

800msmedium

cubic-bezier(0.65, 0, 0.35, 1)easing

在 hover/互動時淡入縮放。 · 流暢的顏色與背景轉場效果。

互動元素的透明度或顏色變化。 · 細微的縮放或陰影變化。

08

組件

button 主要操作按鈕為膠囊形狀（例如：註冊），次要操作按鈕為圓角方形（例如：追蹤）。
card 內容卡片包含大型媒體區塊，下方為後設資料。
chip 不適用
input 圓角搜尋列，帶有灰色佔位符文字。
hero 全寬媒體資訊流（圖片、影片）。

09

文案語氣與禁用清單

語氣中性、平台導向，並以創作者為中心。
標題風格 直接且功能性（例如：「建議追蹤」）。
按鈕文案 簡潔的動詞（登入、註冊、追蹤、購買）。

不要使用暖色調色板 — 螢幕截圖顯示為嚴格的單色調 UI，搭配綠色點綴
不要使用裝飾性襯線字體 — 螢幕截圖顯示僅使用無襯線字體（Monument Grotesk）
不要使用複雜陰影 — 螢幕截圖顯示為極簡、平面化的視覺層次
不要將圓角方形按鈕用於主要 CTA — 螢幕截圖顯示為膠囊形狀的「註冊」按鈕
不要將深色模式作為預設狀態 — 螢幕截圖顯示為白色背景主題
不要使用多欄式文字佈局 — 螢幕截圖顯示為單一中央內容資訊流欄位
避免: 過多裝飾性文字
避免: 雜亂的 UI
避免: 厚重的品牌元素

10

包內真實截圖

Zora — 桌面首屏（hero） — 桌面首屏（hero）

Zora — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zora — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zora — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zora — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zora — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zora — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zora — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zora — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zora — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zora — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zora — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zora — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zora — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zora — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zora — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zora — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zora — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Zora 是一個極簡主義、以創作者為中心的數位藝術與 NFTs 社群平台。其設計 DNA 特徵為乾淨的白色（#FFFFFF）背景，搭配深墨色（#121212）與中性灰（#878787）作為文字色，並以鮮明的霓虹綠（#00DF00）點綴。字體專用 Grotesque Sans（Monument Grotesk），內文使用 410 字重，強調部分使用 500 字重，並採用緊湊的負字距調整。佈局遵循三欄式桌面結構，中央資訊流與最大寬度 1280px 的容器。關鍵限制：絕不使用裝飾性襯線字體、避免暖色調色板，並維持 4px 網格間距。互動快速（120ms），並使用 cubic-bezier 緩動效果。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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