厳選・オープン・無料

Rolls-Royce

没入感のあるシネマティック写真と抑制されたタイポグラフィを通じて、エレガントな車両を紹介するウルトララグジュアリー自動車ブランド。

automotiveluxury
Rolls-Royce のスクリーンショット
↓ デザインシステムをダウンロード (15 MB)OpenDesign で開く

オリジナル: https://www.rolls-roycemotorcars.com

📦 パックの中身を見る →

01

デザイン DNA

ウルトララグジュアリー伝統自動車職人技

ハイエンドなラグジュアリーオートモービル誌

02

カラー

#FFFFFFInk
#151515BG
#222222BG soft
#888888Muted
rgba(255, 255, 255, 0.2)Line

写真を活かすための、高コントラストな白テキストを用いたモノクロームダークベース。

03

タイポグラフィ

geometric-sans · sans-serif

すべてのテキストは大文字 · 大きなディスプレイテキストには軽いウェイトを使用 · 見出しには適度な文字間隔を設定

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

ラグジュアリーさを強調し、余白を豊かに確保

05

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

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

区切りやアウトラインには繊細な細線を使用

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

中央にコンテンツを配置したフルブリードヒーロー

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

テキストやUI要素に対する滑らかなフェードイン

繊細な不透明度の変化または背景色のトランジション · 滑らかなトランジションを伴う即座のレスポンス

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

これはラグジュアリー自動車ブランドのウェブサイトです。デザイン言語はシネマティックであり、ダークでモノクロームのカラーパレット（#151515、#222222）を使用したフルブリードの写真を特徴とします。タイポグラフィはすべて大文字で、クリーンな幾何学的サンセリフ（Jost）を使用し、適度な文字間隔（例：大きな見出しに11.2px）と軽いウェイト（300-400）でエレガンスを伝えます。インタラクションは繊細で、滑らかな不透明度とトランスフォームのトランジション（0.4秒）に依存しています。重要な禁止事項は、明るいアクセントカラーの使用回避、重い太いフォントウェイトの使用回避、競合する要素が多すぎるごちゃごちゃしたインターフェースの使用回避です。全体的な印象は、極度の抑制、プレミアムな職人技、永遠の洗練であり、製品写真が主な焦点となるようにすべきです。

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

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

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

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