厳選・オープン・無料

Zen Browser

より落ち着いたインターネットのためにデザインされた、美しいプライバシー重視のブラウザ。

01

デザイン DNA

落ち着いたデジタル環境を提供する、現代的でプライバシー重視のブラウザ。

02

カラー

オフホワイトのキャンバスに、深いチャコールのテキストと、一つの温かみのあるコーラルアクセントを配置。

03

タイポグラフィ

transitional-serif · humanist-sans

• display60px · 500
• body16px · 400

優雅さと温かみを加えるため、大きなディスプレイ見出しにはトランジショナルセリフを使用。 · 可読性と親しみやすいトーンを確保するため、本文テキストにはクリーンなヒューマニストサンセリフを使用。

04

余白

十分な縦の余白（例：96px、144px）が、落ち着いた息抜きできるレイアウトを生み出します。

05

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

薄墨色のインクカラーを使った、繊細な1pxボーダーでかすかな区切りをつけます。

0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 10px 15px -3px rgba(0, 0, 0, 0.1)

06

レイアウト

ヒーローセクションには中央揃えのシングルカラムレイアウトを採用し、フィーチャーセクションへと流れます。

07

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

インタラクティブ要素やページ表示のための、滑らかなopacityとtransformのトランジション。

インタラクティブ要素上の、繊細な背景色の変化や、わずかなスケール/transform効果。 · ステート変化による即座のビジュアルフィードバック。

08

コンポーネント

• button 高コントラスト（ダーク背景、ライトテキスト）または繊細なアウトラインを持つ、ピル型ボタン。
• card フィーチャーやブラウザウィンドウを紹介するために使用される、角丸（24px radius）のコンテナ。
• chip 提供されたスクリーンショットでは目立っては見られません。
• input 提供されたスクリーンショットでは目立っては見られません。
• hero 中央揃えの大きなセリフ見出しに、アクセントカラーの単語を配置。その下にサブヘッドラインとプライマリアクションが続きます。

09

文体と禁止事項

• トーン 落ち着いた、安心感を与える、ユーザー体験とプライバシーに焦点を当てたトーン。
• 見出し アクセントカラーで特定のキーワードを強調する、大きくエレガントなセリフタイポグラフィ。
• CTA 「ベータ版が利用可能になりました！」や「我們をサポート」といった、明確で行動を促す言葉。

• 純白の背景は使用しない — スクリーンショットでは代わりに、温かみのあるオフホワイト（#F2F0E3）が示されています。
• プライマリ要素に鋭い直角の角を使用しない — スクリーンショットでは代わりに、角丸（8px、24px）が示されています。
• 冷たいテックブルーのアクセントを使用しない — スクリーンショットでは代わりに、温かみのあるコーラル（#F76F53）が示されています。
• 密集したぎゅうぎゅう詰めのレイアウトを作らない — スクリーンショットでは代わりに、十分な縦の余白（96px、144px）が示されています。
• ヒーローに堅苦しくグリッドを多用したデザインを使用しない — スクリーンショットでは代わりに、タイポグラフィ中心の中央揃えレイアウトが示されています。
• プライマリキャンバスにダーク背景を使用しない — スクリーンショットでは代わりに、明るい、温かみのあるテーマが示されています。
• 避ける: アグレッシブなマーケティング言語
• 避ける: 雑然としたレイアウト
• 避ける: 冷たく临床的な美学
• 避ける: 派手なパレット

10

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

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

11

System Prompt

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