精选 · 开放 · 免费

Standards

一个简洁、以排版为先的 SaaS 界面，用于管理动态的品牌指南。

SaaSDesign ToolsCleanProductivityPremium
Standards 网站截图
↓ 下载设计系统包 (17 MB)在 OpenDesign 中打开

原站: https://standards.site

📦 浏览包内文件 →

01

设计气质 DNA

标准品牌指南现代自动化清晰度

一个数字设计系统工具，用交互式的、自动化的品牌标准取代静态的 PDF 指南。

02

色彩

#FF2E00Accent
#000000Ink
#EAEAEABG
#F2F2F2BG soft
#A1A1A1Muted
rgba(0,0,0,0.1)Line

一个严格单色的调色板（黑、白、灰），点缀以单一、高饱和度的红色作为强调色，用于品牌标识和重点强调。

03

字体

grotesque-sans

所有文本使用 weight 400 · 在较大的显示尺寸上收紧字间距 · 为正文保持充裕的行高

04

间距

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

充裕的留白，在容器中保持一致的 30px 水平内边距，维持干净、开放的布局。

05

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

sm · 0px
md · 4px
lg · 0px
pill · 999px

使用微妙的 1px 边框和细轮廓来定义卡片边界和交互状态，避免厚重阴影。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

一个多栏布局，在移动端转为单栏，特点是一个醒目的左对齐主视觉区域和交替的内容板块。

07

动效与交互

200msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

hover 状态下微妙的 opacity 过渡 · focus 状态下平滑的边框颜色变化 · 交互元素的 transform 运动

文本颜色变为柔和的灰色，或背景/透明度发生微妙变化。 · 通过光标状态变化和 focus 环激活提供即时响应。

08

组件

09

文案语气与禁用清单

10

包内真实截图

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

抓自真实页面 · 真 computed styles

11

System Prompt

设计一个简洁、自信的 SaaS 界面，用于一个强调清晰度和自动化的设计工具。使用单色色调板，背景为灰白色（#EAEAEA），文本为纯黑色（#000000），并使用一个单一的高饱和度红色（#FF2E00）作为品牌强调色。使用 weight 400 的中性 grotesque-sans 字体族，并在大显示尺寸上收紧字间距。布局应宽敞，使用大量留白和简单的矩形容器，边框半径极小。关键规则：不要使用投影或渐变；不要使用多种强调色；不要使用衬线或过度装饰的字体；不要用密集信息使界面显得杂乱；不要为长文本使用厚重的字重。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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