精选 · 开放 · 免费

Svz

粗犷排版与深邃精致，打造高端数字机构。

AgencyPortfolioBold TypographyDark ModePremium

Svz 网站截图

↓ 下载设计系统包 (11 MB)在 OpenDesign 中打开

原站: https://www.svz.io

📦 浏览包内文件 →

01

设计气质 DNA

数字机构品牌建设大胆高端

一个高端设计机构的作品集，采用粗犷的编辑式排版和深邃、精致的氛围。

02

色彩

#FF4D5CAccent

#fcfcfcInk

#f3efefInk soft

#080808BG

#262525BG soft

#0d0d0dBG quiet

rgba(255,255,255,0.1)Line

高对比度深色模式，搭配鲜明的珊瑚色点缀

03

字体

transitional-serif · humanist-sans

display64px · 700
display32px · 400
body14px · 400

导航和标签使用大写字母 · 混合使用衬线体与无衬线体以形成排版对比 · 大尺寸展示文字采用紧凑的字间距

04

间距

4px

8px

12px

16px

24px

32px

48px

64px

96px

基于4px的统一网格，辅以充裕的留白

05

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

sm · 2px

md · 4px

lg · 8px

pill · 999px

1px solid rgba(255,255,255,0.1)

rgba(255, 255, 255, 0.2) 0px 2px 5px 0px inset

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

全宽深色区块，内容居中于容器

07

动效与交互

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

平滑的淡入过渡 · 背景元素视差效果 · hover状态动画

颜色过渡与透明度变化 · 通过状态变化提供视觉反馈

08

组件

button 带边框的按钮，大写文字和箭头图标
card 深色卡片，带细微边框和hover状态
chip 小型大写标签或标记
input 极简的无边框输入框
hero 全屏深色区块，包含大型排版标题和几何背景元素

09

文案语气与禁用清单

语气自信、高端、略带挑衅
标题风格 粗体、全大写的展示字体，混合衬线/无衬线
按钮文案 直接、行动导向，带有箭头指示

不要使用浅色背景 — 截图显示主要为深色（#080808）主题
不要在正文使用装饰性字体 — 截图显示UI元素使用简洁的无衬线体
不要给按钮添加圆角 — 截图显示为带微妙圆角的矩形按钮
不要使用低饱和度颜色做强调 — 截图显示在深色背景上使用高对比度白色文字
不要在标题使用小字号 — 截图显示使用64px的大尺寸展示文字
不要避免使用大写导航 — 截图显示导航项均为大写
避免: 随意语言
避免: 过于专业的术语
避免: 泛泛的企业套话

10

包内真实截图

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Svz — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

高端数字机构作品集，深邃精致氛围。主色调：#080808背景，#fcfcfc白色文字，#FF4D5C珊瑚色点缀。字体混合使用过渡衬线展示体与人文主义无衬线正文体。关键禁忌：永不使用浅色背景，避免正文使用装饰性字体，保持高对比度，使用大写导航，按钮保持矩形并带最小圆角。定位：面向前瞻性品牌的大胆机构。布局采用12列网格，留白充裕。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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