厳選・オープン・無料

Guillermo Rauch

有名なテクノロジー人物による、ハイパーポリッシュされたタイポグラフィ主導の個人アーカイブ。

01

デザイン DNA

ミニマリストな技術ジャーナル、またはクリーンな学術リーディングリスト。

02

カラー

メタデータに微細なグレーを用いた、ハイコントラストな白地に黒の極度に抑制されたデザイン。

03

タイポグラフィ

geometric-sans · monospace

• display18px · 700
• body14px · 400
• caption12px · 400

04

余白

4px刻みの厳格な縦間隔。主にリスト項目とセクションに8pxと24pxを使用。

05

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

主にタグに使用される、rgb(229,231,235)で定義された微細な1pxの实線ボーダー。

06

レイアウト

リスト項目に対する厳格な3カラムの表形式レイアウト：年（左）、タイトル（中央）、件数（右）。

07

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

ホバー状態とボーダーカラーの変更に対する、全要素の微細なトランジション（0.15秒）。

カーソルがポインタに変化し、0.15秒の微細なトランジション。 · 標準的なリンクナビゲーション。

08

コンポーネント

• button タグ形式でない限り、明確なパディングや背景のないミニマルなテキストリンク。
• card 年、タイトル、件数を含む行によって形成される概念的なカード。
• chip フッターに見られる、1pxボーダーとわずかなパディングを備えた小ぶりなピル型タグ。
• input 入力コンポーネントは表示されません。
• hero 左にサイトタイトル、右にナビゲーションリンクを持つシンプルなヘッダー。

09

文体と禁止事項

• トーン プロフェッショナルで、率直かつ控えめ。
• 見出し シンプル、-bold、左揃え。
• CTA （Xのような）アイコンを伴う微細なテキストリンク。

• 複数のカラーを使用しない — スクリーンショットは厳格なモノクローム（黒/白/グレー）パレットを示している。
• カードやコンテナにドロップシャドウを追加しない — スクリーンショットは完全にフラットでシャドウのないデザインを示している。
• 装飾的なボーダーや太い区切り線を使用しない — スクリーンショットは代わりに縦間隔とアライメントを使用している。
• 複雑なグリッドや重なり合う要素を使用しない — スクリーンショットは厳格でリニアな3カラムのリスト・レイアウトを示している。
• boldテキストを過度に使用しない — スクリーンショットはメインサイトタイトルにのみウェイト700を使用している。
• メインコンテナに角丸を使用しない — スクリーンショットはメインリストにシャープなエッジを使用している。
• 避ける: 大げさなマーケティング言語
• 避ける: 視覚的な雑踏
• 避ける: 装飾的な画像

10

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

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

11

System Prompt

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