精选 · 开放 · 免费
Zora
一个极简主义的社交平台,用于分享与收藏数字艺术和NFT。
cryptonft
01
设计气质 DNA
创作者趋势交易者NFT社交
数字艺术与Web3收藏者的Instagram
02
色彩
#00DF00Accent
#121212Ink
#4D4D4DInk soft
#FFFFFFBG
#F5F5F5BG soft
#878787Muted
rgba(77,77,77,1.0)Line
单色UI界面,搭配高对比度文本及用于操作状态的霓虹绿强调色。
03
字体
grotesque-sans · monospace
- display
34px · 500 - h2
21px · 500 - body
15px · 410 - small
13px · 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
悬停/交互时淡入淡出与缩放。 · 平滑的颜色与背景过渡。
交互元素呈现透明度或色彩偏移。 · 细腻的缩放或阴影变化。
08
组件
- button 主操作按钮为胶囊形(如注册),次要按钮为圆角形(如关注)。
- card 内容卡片拥有大面积媒体区域,元数据置于下方。
- chip 不适用
- input 搜索栏采用圆角设计与灰色占位符文本。
- hero 全宽度媒体流(图片、视频)。
09
文案语气与禁用清单
- 语气 中性、平台导向且聚焦创作者。
- 标题风格 直接且功能化(例如'建议关注')。
- 按钮文案 简洁动词(登录、注册、关注、购买)。
- 请勿使用暖色调色板——截图显示为严格的单色UI搭配绿色强调色
- 请勿使用装饰性衬线字体——截图显示仅使用无衬线字体(Monument Grotesk)
- 请勿使用复杂阴影——截图显示为极简的扁平化层级
- 请勿为使用主CTA按钮采用圆角方形——截图显示为胶囊形的'注册'按钮
- 请勿将深色模式设为默认状态——截图显示为白色背景主题
- 请勿使用多栏文本布局——截图显示内容居中于单栏信息流
- 避免: 过度装饰性文本
- 避免: 杂乱的UI
- 避免: 厚重的品牌元素
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Zora 是一个极简主义的、以创作者为中心的数字艺术与NFT社交平台。设计DNA包含干净的白色(#FFFFFF)背景,搭配深墨色(#121212)与中性灰(#878787)文本,并以鲜明的霓虹绿(#00DF00)作为强调。字体仅限怪诞无衬线体(Monument Grotesk),正文使用410字重,强调文本使用500字重,并采用紧凑的负字间距。布局遵循三栏桌面端结构,中央信息流与最大宽度为1280px的容器。关键约束:绝不使用装饰性衬线体,避免暖色调色板,并保持4px网格间距。交互快速(120ms)并采用cubic-bezier缓动。
en · zh-CN · zh-TW · ja · ko