厳選・オープン・無料

Vanta

自動化を通じてコンプライアンスを簡素化し、信頼を構築するエンタープライズSaaSプラットフォーム。

saassecurity
Vanta のスクリーンショット
↓ デザインシステムをダウンロード (12 MB)OpenDesign で開く

オリジナル: https://www.vanta.com

📦 パックの中身を見る →

01

デザイン DNA

信頼コンプライアンスセキュリティ自動化監査

現代のSaaS企業のための、自信に満ちたプロフェッショナルな盾。

02

カラー

#5E05C4Accent
#181822Ink
#6D6E87Ink soft
#FFFFFFBG
#F7F8FABG soft
#EDE9F6BG quiet
#484960Muted
rgba(24, 24, 34, 0.1)Line

深いネイビーブラックを基調とし、一点の高彩度パープルアクセントを用いた、抑制の効いたプロフェッショナルなパレット。

03

タイポグラフィ

transitional-serif · geometric-sans · monospace

すべてのディスプレイおよび見出しテキストにRecklessを使用し、温かみと編集的権威を加える。 · 本文、UI、ラベルテキストにはInterを使用し、明瞭さと現代的なテクノロジー感を維持する。 · テキストのウェイト変動を400と500に限定し、インターフェースをクリーンに保つ。

04

余白

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

広めの垂直および水平パディングが明瞭さを強調し、視覚的 clutter を軽減する。

05

サーフェス (角丸 / 影 / 罫線)

sm · 4px
md · 8px
lg · 16px
pill · 999px

rgba(24, 24, 34, 0.1)の控えめな1pxボーダーを必要最小限に使用し、構造を定義する。

0px 0px 2px 2px rgba(204, 204, 204, 1)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

広いガターを持つ構造化された12カラムグリッドが、クリーンなモジュラーレイアウトを支える。

07

モーションとインタラクション

200msmicro
350mssmall
645msmedium
cubic-bezier(0.455, 0.03, 0.515, 0.955)easing

テキストとUI要素の滑らかな0.2秒カラートランジション。 · 構造アニメーションのやや長い0.3秒から0.35秒のcubic-bezierトランジション。

テキストカラーが滑らかにトランジションし、ボタンは控えめな背景シフトやスケール変化を持つ場合がある。 · 標準のアクティブステートによる即座の視覚フィードバック。

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

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

実ページから取得 · 実 computed styles

11

System Prompt

コンプライアンスおよびセキュリティSaaSプラットフォームVantaのデザインシステム。ビジュアル言語は、ハイエディトリアルな温かみと現代的なテクノロジーの精密さをバランスさせ、ブランドを複雑なエンタープライズニーズの信頼できるパートナーとして位置づける。主要カラーには、鮮やかなホワイト（#FFFFFF）とソフトグレー（#F7F8FA）の背景、テキストの深いインクブラック（#181822）、プライマリアクセントおよびCTAの鮮やかなパープル（#5E05C4）が含まれる。タイポグラフィには、太字のディスプレイ見出し用のトランジションセリフ（Reckless）、本文およびUIテキスト用の幾何学サンセリフ（Inter）を採用。重要禁止事項：刺激的で過度に飽和した背景色を決して使用しない；角張った角丸のないUI要素（長方形ボタンなど）を避ける；広い余白を維持し、視覚的 clutter を避ける；重く煩わしいドロップシャドウや過度に複雑なグラデーションを使用しない。

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

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

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

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