厳選・オープン・無料

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を微妙にシフトさせます。 · カーソル状態の変化や、フォーカスリングのアクティブ化による即座の応答。

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）のみのモノクロマティックパレットを使用してください。中立的なゴシックサンセリフフォントファミリーをウェイト400で使用し、大きなディスプレイサイズでは文字間隔を詰めてください。レイアウトは余白をたっぷりと使い、最小限またはゼロのボーダーラディウスを持つシンプルな長方形コンテナを使用してください。重要なルール：ドロップシャドウやグラデーションを使用しない。複数のアクセントカラーを使用しない。セリフや過度に装飾的なフォントを使用しない。情報過多でインターフェースを雑然とさせない。長文テキストに太いフォントウェイトを使用しない。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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