큐레이션 · 오픈 · 무료

Rivian

어드벤처, 뛰어난 내구성, 정제된 미니멀리즘을 강조하는 프리미엄 전기차 브랜드.

automotiveev
Rivian 스크린샷
↓ 디자인 시스템 다운로드 (49 MB)OpenDesign 에서 열기

원본 사이트: https://rivian.com

📦 팩 내용 보기 →

01

디자인 DNA

어드벤처전기강인함미니멀아웃도어

하이엔드 아웃도어 장비 브랜드와 자동차 공학의 만남.

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)를 사용합니다. 타이포그래피는 깔끔한 휴머니스트 산세리프로, 헤드라인용 대담하고 자간이 타이트한 디스플레이 텍스트(최대 72px, 자간 -2.5px)와 본문용 가벼운 굵기를 사용합니다. 레이아웃은 전체 폭 사진형으로, 텍스트가 많은 섹션보다는 시네마틱 히어로 이미지를 우선시합니다. 표면은 최소한으로, 여유로운 여백과 미세한 그림자를 사용합니다. 핵심 금지사항: 장식용 세리프 사용 지양, 복잡한 레이아웃 지양, 악센트 색상의 과도한 사용 지양.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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