精選 · 開放 · 免費

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

所有文字使用字重 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 移動

文字顏色變為柔和的灰色，或背景/opacity 的細微變化。 · 立即回應，伴隨游標狀態變化與 focus ring 啟用。

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）用於品牌識別。使用中性的 grotesque-sans 字體系列，字重 400，並在較大的展示尺寸下縮緊字間距。佈局應寬敞，運用充足的留白與簡單的矩形容器，邊框半徑極小。關鍵規則：不要使用陰影或漸層；不要使用多種強調色；不要使用襯線體或過度裝飾的字體；不要用密集資訊使介面雜亂；不要對長篇文字使用厚重的字重。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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