厳選・オープン・無料

Kit

成長を自動化し、クリエイターのワークフローを簡素化するように設計されたメールマーケティングプラットフォーム。

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

オリジナル: https://kit.com

📦 パックの中身を見る →

01

デザイン DNA

クリエイターツールメールオートメーショングロースマーケティングワークフローの簡素化SaaSプラットフォーム

デジタルクリエイターがオーディエンスの成長を管理するための、統合されたコマンドセンター。

02

カラー

#44B1FFAccent
#1E1E1EInk
#F9F7F4BG
#F2EFE9BG soft
#FFFFFFBG quiet
rgba(227, 227, 227, 1)Line

中立的で暖かいオフホワイトとダークグレーで清潔でアクセシブルなインターフェースを構築し、プライマリアクションには鮮やかなブルーアクセント1色を採用。

03

タイポグラフィ

humanist-sans · monospace

プライマリヘッドラインには太字ウェイト（700）を使用し、強いビジュアル階層を実現。 · ディスプレイタイポグラフィには字間を詰め、モダンな印象を強調。

04

余白

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

一貫した4pxベースグリッドと十分な余白を採用し、清潔で呼吸のあるレイアウトを維持。

05

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

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

1px solid #E3E3E3

0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 4px 6px -4px rgba(0, 0, 0, 0.1)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

最大幅コンテナを持つ12カラムグリッド。モバイルとデスクトップビューのためのレスポンシブブレークポイントを使用。

07

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

100msmicro
150mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

hoverおよびfocus状態での、スムーズなcolorおよびbackground-colorトランジション。

ボタンやリンクなどのインタラクティブ要素に、繊細なカラートランジション。 · 標準のポインターカーソルと即座のビジュアルフィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

このデザインは、メールマーケティングオートメーションの統合ツールとしてポジショニングされた、クリエイター向けの現代的SaaSプラットフォームを対象としている。パレットは、暖かいオフホワイト（#F9F7F4）背景、ダークチャコール（#1E1E1E）テキスト、およびコールツーアクション用の鮮やかなブルー（#44B1FF）アクセント1色で構成。タイポグラフィは、モダンな印象のため字間を詰めた、ディスプレイおよび本文両方の清潔なhumanist-sansカテゴリに依存。重要な注意点：メインセクションに真っ白な背景を使用しない、競合するアクセントカラーを導入しない、セリフフォントを使用しない。レイアウトはグリッドベースで広々としており、明確さと使いやすさを重視。

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

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

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

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