厳選・オープン・無料

Shortwave

AI搭載のメール自動化およびチームコラボレーションプラットフォーム

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

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

📦 パックの中身を見る →

01

デザイン DNA

AIメール自動化生産性コラボレーションエージェント

チームメンバーのように動作するインテリジェントメールアシスタント

02

カラー

#356affAccent
#ffffffInk
#a1a1a1Ink soft
#161620BG
#1e1e2eBG soft
#0f0f16BG quiet
#dededeMuted
rgba(53, 106, 255, 1)Line

ダークネイビーの背景に、高コントラストの白テキストと、フォーカスエリアのための鮮やかなブルーアクセント

03

タイポグラフィ

humanist-sans · monospace

全インターフェーステキストにhumanist-sansを使用 · 見出しは较大サイズでよりタイトな文字間隔を使用 · 本文テキストは一貫した0.2pxの文字間隔を維持

04

余白

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

8pxの基本ユニットと、プレミアム感のための余裕のある垂直スペース

05

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

sm · 4px
md · 8px
lg · 12px
xl · 32px
pill · 999px

低不透明度の1pxソリッドボーダーカラー

0 4px 24px rgba(0, 0, 0, 0.3)

06

レイアウト

1200container
12columns
24pxgutter
768 / 1024breakpoints

ヒーローはセンタリングされたシングルカラム、機能セクションはツーカラム

07

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

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

インタラクティブ要素の滑らかなカラートランジション · 微細なbackdrop-filterぼかし効果

0.2秒のease-in-outによるカラーおよびbackground-colorトランジション · 即座の視覚フィードバック

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

ShortwaveはAI搭載のメール自動化およびチームコラボレーションSaaSプラットフォームです。ポジショニング：インテリジェント自動化機能を備えたプレミアム生産性ツール。主要カラー：ダークネイビー背景（#161620、#0f0f16）、白テキスト（#ffffff）、グレイアクセント（#a1a1a1）、鮮やかなブルーアクセント（#356aff）。フォントカテゴリ：Poppinsをプライマリタイプフェイスとする全インターフェース要素のhumanist-sans。レイアウト特徴：余裕のあるホワイトスペースを備えたセンタリングされたヒーローセクションとツーカラム機能グリッド。重要な禁止事項：明るい背景を使用しない（ダークテーマを維持）、装飾的なタイポグラフィを使用しない（クリーンなサンセリフを維持）、UI要素を詰め込まない（余裕のあるスペースを維持）、暖色を使用しない（クールブルーパレットに固執）、複雑なアニメーションを使用しない（インタラクションを微細に保つ）、インターフェースを雑然とさせない（集中した最小限のアプローチを維持）。

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

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

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

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