厳選・オープン・無料
Anytype
デジタルコラボレーションのためのプライベートでオフラインファーストなワークスペース。
productivitynotes
01
デザイン DNA
プライバシーローカルファーストコラボレーション主権暗号化
ノートやワークフローのためのデジタルスイス銀行の金庫
02
カラー
#000000Ink
#666666Ink soft
#FFFFFFBG
#FFF2D2BG soft
#FFBCC3BG quiet
#808080Muted
rgba(0,0,0,0.1)Line
ハイコントラストな白黒を基盤とし、単一の暖色グラデーションと、強調のための明確なセリフ書体のアクセントを用います。
03
タイポグラフィ
humanist-sans · monospace
- display
76px · 300 - display-emphasis
76px · 400 - h2
24px · 500 - body
18px · 400 - small
14px · 400
ヒーローセクション内でのみ、スタイル上の強調としてイタリック体のセリフ書体を使用します。 · プライマリテキストの階層は厳密に白黒を維持します。 · 大型のディスプレイタイポグラフィには、広めのネガティブトッキングを使用します。
04
余白
4px
8px
16px
24px
32px
48px
64px
80px
96px
120px
主要セクション間の80pxの垂直リズム
05
サーフェス (角丸 / 影 / 罫線)
sm · 6px
md · 16px
lg · 16px
pill · 100px
グリッドセルと丸みを帯びた角のヒーローコンテナを定義する、細い黒のアウトライン(1px)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
大きなヒーローセクションの後に、控えめなグリッドシステムで区切られた3カラムの機能グリッドが続きます。
07
モーションとインタラクション
150msmicro
500mssmall
1000msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
オーバーレイとフェードイン/アウトのための、滑らかなopacityトランジション。 · 背景色やボーダーの変更のための、標準的なcubic-bezierイージング。 · 特定の装飾的またはヒーロー要素のための、より長い持続時間(1秒)。
控えめな色やopacityのトランジション。 · ボタンとリンクのための、標準的なカーソルポインタインタラクション。
08
コンポーネント
- button 白文字の塗りつぶし黒背景、または黒文字の透明背景を持つ、ピル型ボタン。
- card 1px黒のグリッドレイアウトで区切られた、テキスト多めの機能カード。
- chip 半透明背景とぼかし効果を持つ、下部中央にフローティングするピル型ナビゲーション。
- input 最小限のスタイリングを施した標準テキストフィールド。
- hero 左側に巨大なタイポグラフィ、右側に白黒の線画イラストを配置した、大きな枠付きコンテナ。
09
文体と禁止事項
- トーン 直接的で安心感を与え、ユーザーのコントロールとプライバシーに焦点を当てています。
- 見出し 温かみを加えるために、時折セリフ書体のイタリック体を用いた、大きくインパクトのあるステートメント。
- CTA ハイコントラストなピル型ボタン内の、明確で行動を促すテキスト。
- 複数の明るいアクセントカラーを使用しない — スクリーンショットでは主に黒、白、および控えめなグラデーションのパレットが示されています
- 重いドロップシャドウやグローを使用しない — スクリーンショットではシャドウのない、フラットでアウトライン付きの要素が示されています
- 密で詰まったレイアウトを使用しない — スクリーンショットではたっぷりとした余白と明確なグリッド構造が示されています
- 太くて角が丸いコンテナを使用しない — スクリーンショットでは、ほとんどのセクションに細い(1px)黒のボーダーが使われています
- すべてセリフ書体のタイポグラフィシステムを使用しない — スクリーンショットでは、強調にのみセリフ書体が使われるサンセリフの基盤が示されています
- ダークモードをプライマリテーマとして使用しない — スクリーンショットでは白背景に黒テキストが示されています
- 避ける: 技術用語
- 避ける: アグレッシブなセールス言語
- 避ける: 複雑な企業用語
- 避ける: 明るいネオンカラー
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これは、クリーンでプライバシーに焦点を当てた生産性アプリのランディングページです。ヒーロー背景に白黒を基盤とした暖かく控えめなグラデーションを使用します。プライマリタイポグラフィはヒューマニストサンセリフ(inter)で、見出しには広めのネガティブトッキングを、強調にはセリフ書体をイタリック体で使用します。レイアウトは構造化されたグリッドベースで、セクションを定義するために細い黒のボーダーを使用します。ハイコントラストと広い余白を維持します。ドロップシャドウは使用せず、密なレイアウトは避け、複数の高彩度アクセントカラーは決して使用しません。デザインは明瞭さ、主権、そして洗練された非攻撃的な美的デザインに焦点を当てます。
en · zh-CN · zh-TW · ja · ko