厳選・オープン・無料

beehiiv

ニュースレターの成長と収益化のためのオールインワンプラットフォーム。

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

オリジナル: https://www.beehiiv.com

📦 パックの中身を見る →

01

デザイン DNA

ニュースレター出版クリエイターエコノミー成長収益化

現代のニュースレターパブリッシャーのためのオペレーティングシステム

02

カラー

#2F39BAAccent
#FFFFFFInk
#C4C4D6Ink soft
#060419BG
#0a0821BG soft
#100e30BG quiet
#6B6B82Muted
rgba(255, 255, 255, 0.1)Line

ダークな背景に、高コントラストの白いテキストと鮮やかなアクセント

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

見出しにはジオメトリック・サンセリフを使用 · 本文テキストにはヒューマニスト・サンセリフを使用 · ナビゲーションと補助テキストにはウェイト500を使用

04

余白

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

4pxの基本単位、4px刻みで増加

05

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

sm · 4px
md · 8px
lg · 12px
pill · 9999px

1px solid rgba(255, 255, 255, 0.1)

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

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

中央揃えのテキストを備えたフルワイドヒーローと、サイドバイト形式のダッシュボードUI

07

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

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

hover時の滑らかなカラーと背景の遷移 · インタラクティブ要素のスケール変換

150msにわたるカラーと背景カラーの遷移 · アクティブ状態でのスケール変換

08

コンポーネント

09

文体と禁止事項

10

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

beehiiv — 桌面首屏（hero）
桌面首屏（hero）
beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
beehiiv — 移动首屏
移动首屏

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

11

System Prompt

beehiivはニュースレタークリエイターのためのプレミアムSaaSプラットフォームであり、ニュースレターの成長と収益化のためのオペレーティングシステムとしてポジショニングされている。デザインは深いネイビーの背景（#060419）に、高コントラストの白いテキストと鮮やかなブルー（#2F39BA）、ピンク（#FF5EC4）のアクセントを使用している。タイポグラフィは、ジオメトリック・サンセリフ（Clash Grotesk）を太字見出しに、ヒューマニスト・サンセリフ（Satoshi）を本文に組み合わせ、すべて4pxの基本リズムで設定されている。重要な禁止事項：細いフォントを使わない（すべて太字／ウェイト付き）、明るい白い背景を使わない（ダークテーマが支配的）、詰まったスペーシングを使わない（全体を通して十分なパディング）。システムは自信に満ち、将来志向の言語と、明確でメリット focusedなCTAを重視している。

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

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

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

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