厳選・オープン・無料

Courier

通知を設計・送信するための、プレミアムなダークテーマSaaSプラットフォーム。

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

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

📦 パックの中身を見る →

01

デザイン DNA

通知オーケストレーションメッセージングプラットフォーム開発者

クロスチャネル通知をオーケストレーションするための、開発者ファーストなコントロールセンター。

02

カラー

#FFFFFFInk
rgba(255,255,255,0.72)Ink soft
#0A0A0ABG
rgba(255,255,255,0.56)Muted
rgba(255,255,255,0.04)Line

微妙な段階感を用いた、高コントラストのダークUI。

03

タイポグラフィ

humanist-sans · monospaced

大きなディスプレイテキストには、 tightenされたline-height（1.0-1.2）を使用する。 · セクション間には、豊かな垂直パディングを維持する。 · コードスニペットや変数には、monospacedフォントを使用する。

04

余白

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

8pxを基準単位とし、垂直方向のスペースを一貫して保持する。

05

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

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

微妙な区切りをつけるための、薄く低コントラストのボーダー。

0px 1px 1px 0px rgba(0, 0, 0, 0.12) · 0px 0.602187px 0.602187px -1.25px rgba(0, 0, 0, 0.25) · 0px 2.28853px 2.28853px -2.5px rgba(0, 0, 0, 0.22)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

全幅のヒーローセクションを含む、標準的な中央揃えカラムレイアウト。

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

スムーズなフェードインと、scroll時の微妙なparallax。 · インタラクティブ要素は、hover時に微妙なscaleやopacityの変化で応答する。

インタラクティブ要素に対する、微妙な背景やopacityの変化。 · アクティブ状態を示すための、微妙なscaleや深さの変化。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

Courierは、開発者中心の通知オーケストレーションのためのプレミアムB2B SaaSプラットフォームです。ダークモード（#0A0A0A）のデザインシステムを採用し、高コントラストの白（#FFFFFF）と控えめな（#rgba(255,255,255,0.72)）テキストを使用しています。タイポグラフィはクリーンなhumanist sans-serifを、コード要素にはmonospacedフォントを組み合わせています。レイアウトはゆったりとし、中央揃えで、製品モックアップに焦点を当てています。重要な注意点：明るい複数カラーアクセントを使用しない。装飾的またはセリフフォントを使用しない。不要なパターンやテクスチャでインターフェースを雑然とさせない。鋭い角を使用しない。明るい背景を使用しない。口調は自信に満ち、テクニカルで、開発者やプロダクトマネージャーに直接語りかけるものとする。

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

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

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

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