厳選・オープン・無料

Spark

AI駆動の明瞭さとプラットフォーム間の一貫性にフォーカスした、モダンなメールクライアント。

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

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

📦 パックの中身を見る →

01

デザイン DNA

集中生産性スマートAIクロスプラットフォーム

散らかった机を、一つの集中できるワークスペースに整える。

02

カラー

#205EFFAccent
#111111Ink
#333333Ink soft
#FBFBFDBG
#F5F5F7BG soft
#F8F8FABG quiet
#6E6E6EMuted
rgba(175,175,175,1.0)Line

クリーンで広がりを感じる白を基調とし、鮮やかなブルーのアクセションカラーと高コントラストテキストを採用。

03

タイポグラフィ

humanist-sans · system-sans

印象を与えるための tightening されたトラッキングの太字表示タイプ · 最大限の可読性を実現するウェイトの本文 · ジオメトリックなヒューマニスト一次フォントとシステムフォールバック

04

余白

4px
8px
12px
16px
24px
32px
40px
64px

8pxをベースユニットとし、セクションごとに広めのパディングを採用

05

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

sm · 6px
md · 16px
lg · 24px
pill · 999px

1px solid rgba(175,175,175,0.25)

0px 20px 40px 0px rgba(34,41,69,0.12) · 0px 7px 30px 0px rgba(160,165,209,0.2)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

標準的な12カラム中央揃いグリッドと、余裕のあるホワイトスペース

07

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

200msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

hover時の滑らかなカラー遷移（0.3秒） · 状態変化のための透明度フェード · インタラクティブなカードの微細なリフト

0.3秒の遷移で滑らかに背景色をフェードイン、モックアップは微細にスケールアップ · 微細な陰影の軽減とともに、即座にカラーがシフト

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

Sparkは、モダンなプロフェッショナル向けのスマートで集中できるソリューションとしてポジショニングされた生産性重視のメールクライアントです。デザインDNAは、主にホワイト（#FBFBFD）背景と、プライマリアクションに単一の高クロマブルー（#205EFF）を用いた、クリーンで広がりを感じる美学が特徴です。タイポグラフィは、表示ヘッドラインにtight letter-spacing（-1.5px）とウェイト800のヒューマニストサンセリフ（Sofia-Pro）を採用し、本文にはシステムフォントを使用。レイアウトは余裕のあるホワイトスペース（64pxパディング）と柔らかい角丸（16〜24px）を活用。重要な禁止事項：プライマリインターフェースとしてダークモードを導入しない、表示タイプにセリフフォントを使用しない、複数の競合するアクセントカラーでカラーシステムを断片化しないこと。

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

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

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

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