厳選・オープン・無料

Rivian

アドベンチャー、ラuggedな性能、洗練されたミニマリズムを重視するプレミアム電気自動車ブランド。

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

オリジナル: https://rivian.com

📦 パックの中身を見る →

01

デザイン DNA

アドベンチャー電気ラuggedミニマルアウトドア

ハイエンドのアウトドアブランドと自動車工学の融合。

02

カラー

#f5a623Accent
#151515Ink
#616161Ink soft
#ffffffBG
#f2f2f2BG soft
#9fa1b8BG quiet
#b8b8b8Muted
rgba(0,0,0,0.1)Line

アクション用の温かいゴールデンオレンジアクセントを持つ、ハイコントラストのモノクロームベースを基盤とし、グラデーションにマットなブルーグレーを補助として使用します。

03

タイポグラフィ

humanist-sans

大きなディスプレイテキストにはタイトな文字間隔を設定 · ディスプレイと本文のウェイトに高いコントラストをつける · ナビゲーション要素には大文字を控えめに使用

04

余白

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

厳密な4pxグリッドシステムを採用し、主要コンテンツブロックの周囲に十分な余白を設けます。

05

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

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

1px solid rgb(229, 231, 235) による控えめな構造を実現します。

0px 2px 8px 0px rgba(0, 0, 0, 0.15) · 0px 0px 10px 0px rgb(159, 161, 184) · 0px 0px 5px 0px rgb(128, 128, 128)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

フルワイドのヘッダーセクションに続き、明るい背景の中央揃えコンテンツブロックを配置します。

07

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

100msmicro
200mssmall
300msmedium
500mslarge
cubic-bezier(0.83, 0, 0.17, 1)easing

hover時の滑らかなカラーおよびbackground-colorトランジション · 展開可能要素の幅および不透明度トランジション

テキストおよび背景要素の滑らかなカラートランジション。 · 不透明度の変化による即座のビジュアルフィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

これはアドベンチャーと性能に焦点を当てた電気自動車ブランドのプレミアム自動車ウェブサイトです。デザインシステムは、ハイコントラストのモノクロームベース（#151515インク on #ffffff背景）を基盤とし、主要なCTA用に温かいゴールデンオレンジのアクセント（#f5a623）を使用します。タイポグラフィはクリーンなヒューマニストサンセリフで、ヘッドライン用に-boldでタイトな間隔のディスプレイテキスト（最大72px、-2.5px文字間隔）と、本文用に軽いウェイトを採用します。レイアウトはフルブリードで写真重視で、テキスト多めのセクションよりもシネマティックなヘッダーイメージを優先します。サーフェスはミニマルで、豊かな余白と控えめなシャドウを使用します。重要な避けるべき点：装飾的なセリフの使用、ごちゃごちゃしたレイアウト、アクセントカラーの過度な使用を避けてください。

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

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

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

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