厳選・オープン・無料

Svelte

ハイコントラストなタイポグラフィと遊び心のある3Dヒーローイラストレーションを特徴とする、クリーンでエディトリアルな開発者ドキュメントサイト。

01

デザイン DNA

エディトリアルな魂を持つ、洗練されたオープンソースの開発者ツール。

02

カラー

クリーンな白とグレーの基盤に対して単一の鮮やかなオレンジアクセントを用いた、ハイコントラストなエディトリアルパレット。

03

タイポグラフィ

didone-serif · humanist-sans · monospaced

• display54px · 400
• headline22px · 400
• body16px · 400
• mono12px · 400

04

余白

標準の4pxグリッドと100pxのセクション垂直パディング。

05

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

1px solid #EBEBEB

06

レイアウト

標準のセンタリングされたシングルカラムのドキュメントレイアウト。

07

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

控えめなインタラクティブ状態のためのfilterとopacityトランジション。

控えめなopacityとscaleの調整。 · 標準のポインターステート。

08

コンポーネント

• button 大文字のテキストアクションリンクと矢印。
• card 2pxのsolidボーダーを持つフラットな背景コンテナ。
• chip ダークな背景を持つ小さな大文字テキストバッジ。
• input 角丸とキーボードショートカットインジケーターを持つ検索バー。
• hero オーバーサイズのセリフ見出しと組み合わされた、大きな3Dイラストレーション。

09

文体と禁止事項

• トーン 歓迎的、自信に満ち、教育的。
• 見出し 遊び心のある、小文字のセリフスタイルの定言。
• CTA 直接的な大文字のサンセリフコマンド。

• プライマリ見出しにサンセリフを使用しない — スクリーンショットでは見出しにdidone-serifを使用している。
• カードに角丸を使用しない — スクリーンショットではシャープな2pxまたは4pxのボーダーを使用している。
• 複数の競合するアクセントカラーを使用しない — スクリーンショットではオレンジのみ使用している。
• ダークモードをデフォルトにしない — スクリーンショットでは白（#FFFFFF）の背景を使用している。
• 小さく詰まったタイポグラフィを使用しない — スクリーンショットでは寛大な1.5のline-heightを使用している。
• 複雑なボックスシャドウを使用しない — スクリーンショットではフラットまたは最小限のシャドウが施されたサーフェスを使用している。
• 避ける: 専門用語の多用または攻撃的な言葉遣い

10

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

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

11

System Prompt

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