큐레이션 · 오픈 · 무료

Magic Spoon

깊은 보라색 톤과 강렬한 타이포그래피를 사용하여 향수와 현대적인 건강을 잇는 대담하고 장난기 있는 DTC 시리얼 브랜드입니다.

brandfoodretro

↓ 디자인 시스템 다운로드 (9 MB)OpenDesign 에서 열기

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

📦 팩 내용 보기 →

디자인 DNA

장난기 있는대담한프리미엄레트로-모던식품

건강을 의식하는 성인을 위해 재해석된 생생하고 향수를 불러일으키는 시리얼 브랜드입니다.

컬러

#9100EDAccent

#3F0791Ink

#5D23DDInk soft

#FFFFFFBG

#DAD9FFBG soft

#F5F3FFBG quiet

rgba(63,7,145,0.2)Line

깨끗한 흰색 위에 고대비 보라색 아이덴티티를 구축하고, 제품 사진의 생생한 파스텔 톤으로 포인트를 줍니다.

타이포그래피

geometric-sans · humanist-sans

display48px · 900
heading24px · 700
body16px · 400
caption13px · 400

타이포그래피는 주로 디스플레이 및 본문에 Poppins를, 브랜드 로고 요소에는 Mabry를 사용합니다. · 텍스트는 제목과 행동 유도(CTA) 문구에 대문자로 강하게 변환됩니다. · 본문 텍스트는 생생한 팔레트 대비에 가독성을 위해 중립적인 400 웨이트를 유지합니다.

여백

4px

8px

16px

24px

32px

48px

64px

96px

내비게이션에는 타이트한 간격을, 히어로 섹션에는 넉넉한 padding을 적용하는 표준 4px 기본 그리드를 따릅니다.

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

sm · 4px

md · 10px

lg · 28px

pill · 50px

1px solid rgba(63,7,145,0.2)

rgba(0, 0, 0, 0.1) 0px 20px 60px 0px · rgba(0, 0, 0, 0.08) 0px 15px 50px 0px · rgba(0, 0, 0, 0.25) 0px 5px 15px 0px

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

표준 이커머스 구조: 공지 바, 고정형 내비게이션, 분할 레이아웃의 전체 너비 히어로, 그 다음 제품 그리드가 이어집니다.

모션과 인터랙션

150msmicro

300mssmall

900msmedium

cubic-bezier(0.25, 1, 0.5, 1)easing

쿠키 동의 모달과 같은 모달 창의 부드러운 fade-in 및 slide-up. · 히어로 섹션의 제품 이미지에 대한 떠 있는 패럴라ックス 유사 움직임. · 버튼 hover 상태에서의 즉각적인 배경 및 색상 전환.

버튼의 색상 반전 또는 미세한 opacity 변화와 함께 빠른 0.15s 배경 전환이 일어납니다. · 'BUILD YOUR OWN BUNDLE'과 같은 인터랙티브 요소의 시각적 눌림이나 scale 변환이 일어납니다.

컴포넌트

button 보라색으로 채워진 솔리드 또는 보라색 테두리의 투명 배경을 사용하는 알약 모양 버튼이며, 대문자 볼드 타이포그래피를 활용합니다.
card 부드러운 둥근 모서리(28px)와 섬세한 드롭 섀도우를 특징으로 하는 제품 카드이며, 종종 떠 있는 제품 이미지를 포함합니다.
chip 'BESTSELLER'와 같은 라벨에 사용되는 솔리드 배경 채우기의 작고 둥근 알약 모양 배지입니다.
input 미세한 테두리가 있는 깔끔한 직사각형 입력 필드이며, focus 상태에서 강조된 상태로 전환됩니다.
hero 한쪽에는 거대한 타이포그래피 헤드라인, 반대쪽에는 동적으로 배치된 떠 있는 제품 이미지가 있는 전체 너비 분할 레이아웃입니다.

보이스와 금지 목록

톤 자신감 있고, 장난기 있으며, 건강을 의식하는 어조입니다.
헤드라인 대담하고, 대문자이며, 시각적 계층을 지배하기 위해 종종 거대한 글꼴 크기를 사용하는 펀치력 있는 스타일입니다.
CTA 행동 지향적이고 명령형인 스타일로, 모든 대문자 알약 모양 버튼으로 제시됩니다.

섬세한 세리프 폰트를 사용하지 마세요 — 스크린샷에는 대담한 기하학적 및 휴머니스트 산세리프가 보입니다.
레이아웃을 엄격한 그리드로 단순화하지 마세요 — 스크린샷에는 겹치고 떠 있는 제품 이미지가 보입니다.
단색 또는 음전된 색상 체계를 사용하지 마세요 — 스크린샷에는 생생한 보라색과 다채로운 제품 사진이 보입니다.
헤드라인에 소문자 문장형을 사용하지 마세요 — 스크린샷에는 공격적인 대문자 텍스트 변환이 보입니다.
인터랙티브 요소에 날카롭고 둥글지 않은 모서리를 사용하지 마세요 — 스크린샷에는 넉넉한 알약 모양이 보입니다.
메인 내비게이션에서 색상을 배제하지 마세요 — 스크린샷에는 어두운 배경과 생생한 텍스트 및 포인트가 보입니다.
피하기: 작고 섬세한 세리프 타이포그래피.
피하기: 음전된, 단색 또는 완전히 그레이스케일인 팔레트.
피하기: 겹치거나 떠 있는 요소가 없는 엄격한 그리드 중심 레이아웃.
피하기: 미세하고 절제된 브랜딩.

팩 안의 실제 스크린샷

Magic Spoon — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

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

System Prompt

Magic Spoon은 건강을 의식하는 성인을 위한 장난기 있는 프리미엄 DTC 시리얼 브랜드입니다. 시각적 아이덴티티는 깨끗한 흰색 배경과 대비되는 생생한 딥 퍼플(#3F0791)을 주요 색상으로 정의하며, 종종 제품 사진의 밝은 파스텔로 포인트를 줍니다. 주요 폰트 카테고리에는 기하학적 및 휴머니스트 산세리프가 포함되며, 볼드하고 대문자로 변환되어 표시됩니다. 핵심 디자인 제약 조건: 섬세한 세리프 사용 회피, 고대비 유지, 넉넉하고 장난기 있는 border-radius 보장. 레이아웃은 엄격한 그리드보다는 겹치고 떠 있는 이미지를 빈번하게 사용하여 역동적이고 레트로-모던한 이커머스 경험을 만듭니다.

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

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

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

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