厳選・オープン・無料

Thebrowser Company

文学的センスで構築された、開発者ツールのための洗練された、エディトリアル重視のプレゼンテーション。

01

デザイン DNA

古き良き文芸ギャズティンと、現代のソフトウェア技術の融合

02

カラー

暖色オフホワイトと深みのある黒に依存し、最大限のエディトリアル・コントラストを実現する厳密な2トーンパレット

03

タイポグラフィ

transitional-serif · geometric-mono

• display36px · 400
• caption14px · 400
• micro10px · 400

すべての本文見出しに、トランジショナル・セリフを使用 · すべてのUIラベル、ナビゲーション、マイクロコピーに、ジオメトリック・モノを使用 · モノラベルには大文字と十分な字間（トラッキング）を適用

04

余白

エディトリアルな呼吸空間を強調する、豊かな余白を備えた中心垂直リズム

05

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

1px solid rgba(0,0,0,0.15)

06

レイアウト

極めて大きな垂直パディングと中央揃えの要素を持つ、単一の中央揃えカラムレイアウト

07

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

インタラクティブ要素上の、滑らかなカラーおよびフィルの遷移

インタラクティブ要素上の、微細な色調のシフトまたはフィルの変化 · 即座の状態変化

08

コンポーネント

• button 背景を持たず、ホバー遷移に依存するシンプルなテキストベースのボタン
• card 未使用
• chip 未使用
• input 未使用
• hero タイポグラフィック・ロゴマークと2行のセリフ見出しを特徴とする、中心対称の構図

09

文体と禁止事項

• トーン 職人的、静か、自信に満ちた
• 見出し 詩的な、セリフ、強調のための優しいイタリック体
• CTA 控えめな、モノスペース、大文字ラベル

• 明るく彩度の高いバックグラウンドカラーを使用しない — スクリーンショットは温かみのある、落ち着いたオフホワイト（#EDEEE7）を示しています
• 重いドロップシャドウや3D効果を使用しない — スクリーンショットは完全にフラットで、ボーダレスなサーフェスを示しています
• 見出しにサンセリフフォントを使用しない — スクリーンショットはイタリック体のトランジショナル・セリフ見出しを示しています
• すべての本文を中央揃えにしない — スクリーンショットは中央揃えのレイアウトですが、長文コンテンツには左揃えのフローを意図しています
• プライマリコンテナに丸みのある角を使用しない — スクリーンショットは全体的にシャープで幾何学的なエッジを示しています
• 攻撃的なコール・トゥ・アクションボタンを使用しない — スクリーンショットは控えめな、モノスペースのテキストリンクを示しています
• 避ける: 派手なカラー
• 避ける: 見出しにおける攻撃的な大文字使用
• 避ける: 情報の密集したブロック
• 避ける: 重厚なグラフィカルオーバーレイ
• 避ける: 雑然としたナビゲーション

10

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

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

11

System Prompt

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