厳選・オープン・無料

Rive

どこでもデザインし、アニメーションし、出荷するためのインタラクティブ体験エンジン。

01

デザイン DNA

全プラットフォームでインタラクティブなアニメーションを構築するための、スタイリッシュでプロフェッショナルなワークショップ。

02

カラー

深いダークキャンバスに、ハイコントラストの白いテキストと抑制されたグレーのアクセント。

03

タイポグラフィ

grotesque-sans · humanist-sans · monospace

• display56px · 500
• h232px · 500
• body16px · 400
• caption12px · 400

ディスプレイ见出しは大文字で、トラッキングを狭めます。 · 本文テキストは、可読性のためにやや広めの行間を使用します。 · ボタンテキストは大文字で、トラッキングを広めにします。

04

余白

標準の4pxをベースとし、8pxと16pxの刻みを一貫して適用します。

05

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

低不透明度の白を使った、抑制された1pxの実線ボーダー。

rgba(0, 0, 0, 0) 0px 0px 0px 1px inset

06

レイアウト

フルワイドのダーク背景に、中央揃えのコンテンツブロックと12カラムグリッド。

07

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

インタラクティブ要素のhoverトランジション。 · セクション間のスムーズなスクロール。

ボタンやリンクの微妙な色や不透明度の変化。 · 押下時の即座のビジュアルフィードバック。

08

コンポーネント

• button ゴールドアウトライン付きのハイコントラストプライマリボタン、抑制されたボーダー付きのセカンダリボタン。
• card 抑制されたボーダーと角丸を持つダークカード。ビジュアル例を表示します。
• chip 主要に使用されていません。
• input 主要に使用されていません。
• hero 中央揃えの大きなタイポグラフィと、2つの顕著なCTAボタン。

09

文体と禁止事項

• トーン プロフェッショナルで、自信に満ち、革新的。
• 見出し 大胆、大文字、かつ権威ある。
• CTA 明確で、行動志向、かつ顕著。

• 明るい背景を使用しない — スクリーンショットは深い黒のキャンバスを示しています。
• 丸みを帯びた、遊び心のあるフォントを使用しない — スクリーンショットは鋭角で幾何学的なgrotesque-sansを示しています。
• カラフルなグラデーションを主な要素として使用しない — スクリーンショットは黒地にハイコントラストの白を使用しています。
• 小さく抑制されたボタンを使用しない — スクリーンショットは大きく顕著なCTAボタンを示しています。
• ヒーローセクションに複雑なマルチカラムレイアウトを使用しない — スクリーンショットは中央揃えの単一カラムに焦点を当てています。
• 奥行きを出すためにドロップシャドウを使用しない — スクリーンショットはボーダーとコントラストに依存しています。
• 避ける: 過度にカジュアルまたは遊び心のある言葉遣い。
• 避ける: 雑然としたレイアウト。
• 避ける: 低コントラストのテキスト。

10

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

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

11

System Prompt

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