厳選・オープン・無料

Zen Browser

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

browserproduct
Zen Browser のスクリーンショット
↓ デザインシステムをダウンロード (11 MB)OpenDesign で開く

オリジナル: https://zen-browser.app

📦 パックの中身を見る →

01

デザイン DNA

落ち着きプライバシー美しいクリーン

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

02

カラー

#F76F53Accent
#2E2E2EInk
#F2F0E3BG
#9E9E9EMuted
rgba(46, 46, 46, 0.1)Line

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

03

タイポグラフィ

transitional-serif · humanist-sans

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

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

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

05

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

sm · 8px
md · 12px
lg · 24px
pill · 999px

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

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

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

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

150msmicro
200mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

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

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

08

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

Zen Browserのデザインは、落ち着いた、美しい、プライバシー重視の体験を優先します。パレットは、温かみのあるオフホワイトの背景(#F2F0E3)、深いチャコールのテキスト(#2E2E2E)、そして一つのコーラルアクセント(#F76F53)で構成されています。タイポグラフィは、優雅な見出しのためのトランジショナルセリフと、可読性の高い本文のためのクリーンなヒューマニストサンセリフを組み合わせています。レイアウトはゆったりと中央揃えで息抜きが良く、主要コンポーネントには十分な縦の余白と角丸(24px)を採用しています。重要な禁止事項:冷たいブルーのアクセントは使用しない;密集したぎゅうぎゅう詰めのレイアウトを作らない;プライマリ要素に鋭い90度の角を使用しない;純白の背景を使用しない;アグレッシブで派手なタイポグラフィを使用しない;不要なビジュアルノイズでインターフェースを雑然とさせない。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック(エージェント用) ↗

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