큐레이션 · 오픈 · 무료

Oatly

Oatly는 제한된 팔레트와 표현력 있는 타이포그래피를 활용한 장난기 넘치는 스케치 스타일의 미학으로 독특하고 솔직한 브랜드 성격을 전달합니다.

01

디자인 DNA

냅킨 위에 낙서한 듯한 느낌을 주는 반항적이고 스케치 같은 브랜드입니다.

02

컬러

최소한의 기능적 그리드를 기반으로 한 고대비 흑백입니다.

03

타이포그래피

transitional-serif · sans-serif · monospaced

• display32px · 400
• body16px · 400

주요 제목에는 전이체(transition serif)를 사용합니다. · 본문에는 sans-serif를 사용합니다. · 라벨이나 UI 요소에는 monospaced 폰트를 사용합니다.

04

여백

기본 4px 간격과 넉넉한 여백을 사용합니다.

05

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

1px solid black

2px 2px 0px 0px rgb(0, 0, 0)

06

레이아웃

중앙 정렬과 흩어진 요소들이 혼합된 그리드 기반 레이아웃입니다.

07

모션과 인터랙션

0.3s translate 트랜지션이 적용된 hover 상태입니다.

hover 시 요소가 약간 이동합니다. · 해당 없음

08

컴포넌트

• button 심플하고 아웃라인이 있으며, 2px의 검은색 드롭 섀도우가 있습니다.
• card 흰색 배경에 1px 검은색 테두리와 2px 검은색 드롭 섀도우가 있습니다.
• chip 해당 없음
• input 해당 없음
• hero 중앙 정렬된 제목과 상호작용하는 듯한 흩어진 요소들로 구성됩니다.

09

보이스와 금지 목록

• 톤 장난기 있고, 직설적이며, 다소 건방진 느낌입니다.
• 헤드라인 대화체이며 종종 유머를 섞습니다.
• CTA 심플하고 행동을 유도하는 방식입니다.

• 복잡한 색상 팔레트를 사용하지 마세요. 스크린샷에서는 엄격한 흑백 체계를 보여줍니다.
• 장식용 세리프 폰트를 사용하지 마세요. 스크린샷에서는 깔끔한 sans-serif와 하나의 전이체(transition serif)가 혼용된 것을 볼 수 있습니다.
• UI 요소의 모서리를 둥글게 하지 마세요. 스크린샷에서는 날카롭고 사각형인 모서리를 보여줍니다.
• 미세한 섀도우를 사용하지 마세요. 스크린샷에서는 강렬하고 경계가 명확한 2px 검은색 드롭 섀도우를 보여줍니다.
• 지저분한 배경을 사용하지 마세요. 스크린샷에서는 흰색/백색 배경 위의 깔끔하고 미니멀한 그리드를 보여줍니다.
• 정교한 아이콘을 사용하지 마세요. 스크린샷에서는 단순한 손그림이나 플랫 SVG 스타일의 아이콘을 사용합니다.
• 피하기: 기업형 전문 용어
• 피하기: 지나치게 격식을 차린 언어
• 피하기: 복잡한 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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