厳選・オープン・無料

Penpot

スケーラブルなコラボレーションを必要とするチームのための、オープンソースデザインプラットフォーム。

01

デザイン DNA

チームコラボレーションとスケーラブルなデザインシステムに焦点を当てた、オープンソースのFigma代替ツール。

02

カラー

プライマリアクションに1色の鮮やかなティールアクセントを使用した、高コントラストのダークテーマ。

03

タイポグラフィ

humanist-sans · monospace

• display72px · 500
• heading52px · 500
• body18px · 400
• small16px · 400
• tiny12px · 500

04

余白

すべてのスペーシング、パディング、およびサイズ設定に、一貫した4pxグリッドシステムを使用。

05

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

構造的な区切りとして、rgba(255, 255, 255, 0.15)の微妙な1pxボーダー、または背景色に合わせたボーダーを使用。

elevation-1: none · elevation-2: none

06

レイアウト

コンテンツ用の最大幅コンテナを持つ、中央揃えの単一カラムレイアウト。

07

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

背景やtransformプロパティに対する滑らかな遷移。 · インタラクティブ状態に対する微妙な不透明度の変化。

背景色がわずかにシフトし、テキスト色がインタラクティブ性を示すために変化することがある。 · 色の変化や微妙なtransformによる、即座の視覚的フィードバック。

08

コンポーネント

• button 高コントラストのピル型ボタン（ティール背景に暗いテキスト、または暗い背景に白テキスト/ボーダー）。
• card 角丸や内部パディングを特徴とする、微妙なボーダーを持つ暗いコンテナ。
• chip ステータスやカテゴリに使用される、小さなピル型タグやバッジ。
• input 暗いテーマの入力フィールド。微妙なボーダーと明るいテキストを採用。
• hero 太字で大きな見出し、説明文、および目立つCTAボタンを特徴とする、全幅の暗い背景セクション。

09

文体と禁止事項

• トーン プロフェッショナルで、自信に満ち、かつ協調的。
• 見出し エンパワメントとチームワークを強調する、太字で率直な表現。
• CTA 'Sign up, it's free' や 'Self-host install' のような、明確で行動を促すフレーズ。

• ライトテーマを使用しない — スクリーンショットでは一貫した深い暗い背景（#151035）が示されている。
• 見出しにセリフフォントを使用しない — スクリーンショットでは全体的にヒューマンサンセリフ（Work Sans）が使用されている。
• 複数の競合するアクセントカラーを使用しない — スクリーンショットでは強調に単一の支配的なティール（#14CECA）が使用されている。
• ボタンやカードに鋭い直角を使用しない — スクリーンショットでは角丸（8px-12px）やピル型が使用されている。
• 背景に複雑で複数色のグラデーションを使用しない — スクリーンショットでは特定のUIモックアップにのみ微妙なグラデーションを含む、固体の暗い背景が示されている。
• 重厚で装飾的なタイポグラフィを使用しない — スクリーンショットではクリーンで非常に視認性の高いヒューマンサンセリフフォントが使用されている。
• 避ける: 文脈のない曖昧、または過度に技術的な専門用語。
• 避ける: 攻撃的または売り込みがましい言葉。
• 避ける: 受動態。

10

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

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

11

System Prompt

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