큐레이션 · 오픈 · 무료

Drink818

우아하고 차분한 흙내음 팔레트와 세리프 및 모노 타이포그래피의 혼합을 특징으로 하는 프리미엄 데킬라 브랜드 사이트.

01

디자인 DNA

정교하고 흙내음 나는 미학을 갖춘 고급 부티크 데킬라 브랜드 웹사이트.

02

컬러

따뜻한 크림 배경, 다크 차콜 텍스트, 그리고 보조 섹션을 위한 차분한 올리브 그린을 사용하는 흙내음 나는 정교한 팔레트.

03

타이포그래피

transitional-serif · monospaced

• display34px · 700
• body20px · 400

내비게이션과 법적 텍스트에 전면 대문자 스타일을 적용합니다. · 정교한 느낌을 위해 전체 인터페이스에 넓은 자간을 적용합니다. · 표현력 있는 텍스트에는 트랜지셔널 세리프를, 거의 모든 UI 요소에는 모노스페이스를 사용합니다.

04

여백

패딩, 마진 및 컴포넌트 간격에 일관된 4px 기본 그리드를 사용합니다.

05

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

입력 필드 및 미묘한 구분선을 위한 1px solid rgba(14, 17, 17, 0.12).

모달 오버레이용 0px 9999px 0px 9999px rgba(0, 0, 0, 0.4) · 미묘한 부양감을 위한 0px 0px 10px 3px rgba(122, 122, 122, 0.2)

06

레이아웃

넉넉한 수직 간격과 큰 타이포그래피를 갖춘 중앙 정렬 단일 컬럼 레이아웃.

07

모션과 인터랙션

background-size 및 opacity 변화를 위한 부드러운 전환. · 커스텀 cubic-bezier 이징이 적용된 페이지 요소 기반 transform 애니메이션.

인터랙티브 요소에 미묘한 background-size 또는 opacity 전환. · 즉각적인 피드백을 제공하는 표준 active 상태.

08

컴포넌트

• button 모노스페이스 대문자 텍스트와 작은 border-radius를 적용한 단색 크림 또는 그린 배경.
• card 두드러지게 사용되지는 않지만, 넉넉한 패딩이 적용된 섹션 블록으로 암시됩니다.
• chip 존재하지 않습니다.
• input 가벼운 테두리와 미묘한 border-radius가 적용된 모노스페이스 대문자 텍스트.
• hero 거대하고 굵은 세리프 타이포그래피가 적용된 대형 이미지 배경 또는 단색 블록.

09

보이스와 금지 목록

• 톤 세련되고 자신감 있으며 법적으로 정확한 어조.
• 헤드라인 굵고, 전면 대문자이며, 표현력 있는 세리프 타이포그래피.
• CTA 직설적이고, 대문자이며, 깔끔한 모노스페이드 폰트를 사용하는 기능적 스타일.

• 밝고 고채도의 강조색을 사용하지 마십시오 — 스크린샷은 올리브와 크림으로 구성된 차분한 흙내음 팔레트를 보여줍니다.
• UI에 둥근 기하학적 산세리프 폰트를 사용하지 마십시오 — 스크린샷은 전적으로 트랜지셔널 세리프 및 모노스페이드 폰트를 사용합니다.
• 좁고 비좁은 간격을 사용하지 마십시오 — 스크린샷은 넉넉한 패딩과 요소 사이의 큰 간격을 보여줍니다.
• 콘텐츠를 위해 복잡한 다중 컬럼 레이아웃을 사용하지 마십시오 — 스크린샷은 깨끗하고 중앙 정렬된 단일 컬럼 레이아웃을 보여줍니다.
• 주요 내비게이션이나 CTA에 소문자 텍스트를 사용하지 마십시오 — 스크린샷은 일관된 대문자 사용을 보여줍니다.
• 주요 UI 요소에 깊이감을 위해 그림자를 사용하지 마십시오 — 스크린샷은 오버레이에만 매우 미묘한 그림자가 적용된 평면 색상을 사용합니다.
• 피하기: 지나치게 장난스럽거나 캐주얼한 언어를 피할 것.
• 피하기: 밝고 고채도의 네온 컬러를 피할 것.
• 피하기: 넉넉한 간격 없이 밀집된 텍스트 블록을 피할 것.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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