厳選・オープン・無料

Anytype

デジタルコラボレーションのためのプライベートでオフラインファーストなワークスペース。

01

デザイン DNA

ノートやワークフローのためのデジタルスイス銀行の金庫

02

カラー

ハイコントラストな白黒を基盤とし、単一の暖色グラデーションと、強調のための明確なセリフ書体のアクセントを用います。

03

タイポグラフィ

humanist-sans · monospace

• display76px · 300
• display-emphasis76px · 400
• h224px · 500
• body18px · 400
• small14px · 400

ヒーローセクション内でのみ、スタイル上の強調としてイタリック体のセリフ書体を使用します。 · プライマリテキストの階層は厳密に白黒を維持します。 · 大型のディスプレイタイポグラフィには、広めのネガティブトッキングを使用します。

04

余白

主要セクション間の80pxの垂直リズム

05

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

グリッドセルと丸みを帯びた角のヒーローコンテナを定義する、細い黒のアウトライン（1px）

06

レイアウト

大きなヒーローセクションの後に、控えめなグリッドシステムで区切られた3カラムの機能グリッドが続きます。

07

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

オーバーレイとフェードイン/アウトのための、滑らかなopacityトランジション。 · 背景色やボーダーの変更のための、標準的なcubic-bezierイージング。 · 特定の装飾的またはヒーロー要素のための、より長い持続時間（1秒）。

控えめな色やopacityのトランジション。 · ボタンとリンクのための、標準的なカーソルポインタインタラクション。

08

コンポーネント

• button 白文字の塗りつぶし黒背景、または黒文字の透明背景を持つ、ピル型ボタン。
• card 1px黒のグリッドレイアウトで区切られた、テキスト多めの機能カード。
• chip 半透明背景とぼかし効果を持つ、下部中央にフローティングするピル型ナビゲーション。
• input 最小限のスタイリングを施した標準テキストフィールド。
• hero 左側に巨大なタイポグラフィ、右側に白黒の線画イラストを配置した、大きな枠付きコンテナ。

09

文体と禁止事項

• トーン 直接的で安心感を与え、ユーザーのコントロールとプライバシーに焦点を当てています。
• 見出し 温かみを加えるために、時折セリフ書体のイタリック体を用いた、大きくインパクトのあるステートメント。
• CTA ハイコントラストなピル型ボタン内の、明確で行動を促すテキスト。

• 複数の明るいアクセントカラーを使用しない — スクリーンショットでは主に黒、白、および控えめなグラデーションのパレットが示されています
• 重いドロップシャドウやグローを使用しない — スクリーンショットではシャドウのない、フラットでアウトライン付きの要素が示されています
• 密で詰まったレイアウトを使用しない — スクリーンショットではたっぷりとした余白と明確なグリッド構造が示されています
• 太くて角が丸いコンテナを使用しない — スクリーンショットでは、ほとんどのセクションに細い（1px）黒のボーダーが使われています
• すべてセリフ書体のタイポグラフィシステムを使用しない — スクリーンショットでは、強調にのみセリフ書体が使われるサンセリフの基盤が示されています
• ダークモードをプライマリテーマとして使用しない — スクリーンショットでは白背景に黒テキストが示されています
• 避ける: 技術用語
• 避ける: アグレッシブなセールス言語
• 避ける: 複雑な企業用語
• 避ける: 明るいネオンカラー

10

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

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

11

System Prompt

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