큐레이션 · 오픈 · 무료

Recess

장난스러운 기발함과 현대적 미니멀리즘을 결합한 프리미엄 음료 브랜드 웹사이트.

beveragedtc
Recess 스크린샷
↓ 디자인 시스템 다운로드 (26 MB)OpenDesign 에서 열기

원본 사이트: https://www.takearecess.com

📦 팩 내용 보기 →

01

디자인 DNA

차분한현대적인장난스러운상쾌한미니멀한

현대적 미니멀리즘과 장난기 넘치는 기발한 요소를 결합한 차분하고 세련된 음료 브랜드.

02

컬러

#25385BInk
#394A6AInk soft
#C8D8FFBG
#E8F0FFBG soft
rgba(37, 56, 91, 1)Line

가독성을 위한 높은 대비의 짙은 네이비 텍스트와 부드러운 파스텔 배경.

03

타이포그래피

grotesque-sans

단단한 타이포그래피 블록을 만들기 위해 큰 헤드라인에 타이트한 자간을 사용합니다. · 리듬감 있는 읽기를 위해 다양한 글꼴 크기에서 일관된 행간을 유지합니다.

04

여백

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

표준 웹 간격을 제공하는 일관된 4px 기본 스케일.

05

표면 (라운드 / 그림자 / 경계선)

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

버튼과 입력 필드에 단색 2px 짙은 네이비 테두리.

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

왼쪽에 텍스트, 오른쪽에 이미지가 있는 비대칭 히어로 레이아웃.

07

모션과 인터랙션

150msmicro
300mssmall
600msmedium
cubic-bezier(0.175, 0.885, 0.32, 1.275)easing

hover 시 부드러운 불투명도와 변환 전환. · 배경 요소에 대한 parallax와 유사한 효과.

미세한 색상 또는 불투명도 변화. · 눈에 띄는 사용자 정의 클릭 애니메이션 없음.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

포지셔닝: 현대적이고 건강 의식이 있는 소비자를 대상으로 하는 프리미엄이고 장난스러운 음료 브랜드. 주요 hex 색상: #C8D8FF (배경), #25385B (잉크), #163BF3 (강조 블루), #A8B2FF (부드러운 배경). 글꼴 계열: 대담하고 현대적인 느낌을 주는 개성 있는 grotesque-sans. 중요 금지 사항: 다크 모드 사용 금지, 복잡한 격자 피하기, 무거운 섀도우 사용 금지. 톤은 캐주얼하고 강렬하게 유지하여 브랜드의 편안한 에너지를 반영합니다.

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

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

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

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