厳選・オープン・無料

Jupi

AIが駆動するスピードを navigation するテクノロジーのリーダーのための、洗練されたライトテーマの意思決定システム。

01

デザイン DNA

高リスクの戦略的意思決定のための、冷静で集中力の高い司令塔。

02

カラー

落ち着いた温かみのあるオフホワイトの背景に、高コントラストのインクを配置することで、シリアスな意思決定に適した冷静で集中力の高い環境を生み出します。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display36px · 400
• headline36px · 500
• body16px · 400
• caption11px · 400

大きなディスプレイテキストと見出しにはジオメトリックsansを使用 · 本文とUIテキストにはヒューマニストsansを使用 · コードスニペットと技術コンテンツにはモノスペースを使用

04

余白

paddingとgapを8の倍数に設定し、8pxの垂直リズムを維持します。

05

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

1px solid rgba(0,0,0,0.09)

0px 1px 8px -2px rgba(0,0,0,0.06) · 0px 4px 7px 0px rgba(0,0,0,0.05) · 0px 1px 2px 0px rgba(0,0,0,0.07)

06

レイアウト

ライトカード内に主要テキストエリアを配置した、中央揃えのシングルカラムヒーローレイアウト。

07

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

hover時の微細なopacity変化 · インタラクティブ要素でのスムーズなcolorとbackground-colorの変化

インタラクティブ要素の背景や色の微細な変化。 · 色やopacityの変化による即座の視覚的フィードバック。

08

コンポーネント

• button 強調されたコントラストを持つピル型。黒の塗りつぶし、または微妙なシャドウを持つライトの塗りつぶし。
• card 内側に微細なシャドウとソフトボーダーを持つ、ライトオフホワイトのコンテナ。
• chip クイック選択オプションのための、小さな角丸矩形。
• input ソフトシャドウと角丸を持つ大きなテキストエリア。
• hero 大きな太字のステートメントと補足サブヘッドを持つ、中央揃えのテキスト主体セクション。

09

文体と禁止事項

• トーン 自信に満ち、率直で、専門的。
• 見出し 問題や洞察を明確にする、簡潔で力強いステートメント。
• CTA 「会話する」「試す」のような動詞を用いた、行動を促す明確な表現。

• 鮮やかで彩度の高いアクセントカラーを使用しない — スクリーンショットでは、温かみのあるオフホワイト背景の厳密にモノクロのカラーパレットが示されています。
• 重いドロップシャドウを使用しない — スクリーンショットでは、奥行きを出すための非常に微細でソフトなシャドウが示されています。
• シャープな90度の角を使用しない — スクリーンショットでは、ボタンでさえも一貫して角丸が示されています。
• 見出しに細く軽いフォントを使用しない — スクリーンショットでは、ディスプレイテキストと本文の間にはっきりとしたウェイトのコントラストが示されています。
• 幅広で塊のようなレイアウトを使用しない — スクリーンショットでは、中央揃えでゆったりとした余白のあるレイアウトが示されています。
• 複雑で多色のグラデーションを使用しない — スクリーンショットでは、ほぼモノクロの微細な背景の変化が示されています。
• 避ける: 見出しにおける過度な専門用語や技術的な言葉の使用
• 避ける: 意思決定のシリアスさを損なうような遊び心のあるまたはカジュアルな言葉の使用
• 避ける: 曖昧な、または受動的な表現

10

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

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

11

System Prompt

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