큐레이션 · 오픈 · 무료

ToyFight

레트로 게임 영감 미학을 가진, 장난기 있으면서도 프리미엄한 크리에이티브 에이전시 웹사이트.

01

디자인 DNA

8비트 게임의 향수와 하이엔드 크리에이티브 서비스를 결합하는 디자인 스튜디오.

02

컬러

따뜻하고 부드러운 중성 배경과 고대비 다크 잉크의 대비.

03

타이포그래피

monospaced · condensed-sans

• display56px · 400
• heading46px · 400
• body18px · 400
• caption14px · 500
• micro10px · 500

레트로 테크 미학을 강조하기 위해 주요 제목에 monospaced 폰트를 사용합니다. · 본문 및 UI 텍스트에는 condensed sans-serif를 사용합니다. · 대문자로 된 작은 레이블은 넓은 tracking을 적용합니다.

04

여백

대담한 타이포그래피와 3D 요소가 숨쉴 수 있도록 넉넉한 여백.

05

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

1px solid #0D0D0E

0 4px 12px rgba(0,0,0,0.05)

06

레이아웃

요소들이 겹쳐지고 넉넉한 padding이 있는 비대칭적이고 흩어진 레이아웃.

07

모션과 인터랙션

색상 및 배경 변화를 위한 부드러운 전환. · 3D 오브젝트를 위한 복잡한 transform 애니메이션. · scroll 트리거 entrance 애니메이션.

인터랙티브 요소의 미묘한 색상 변화와 변환. · 활성 상태로 즉각적인 시각적 피드백.

08

컴포넌트

• button 밝은 배경과 다크 테두리를 가진 알약형 또는 둥근 사각형 버튼.
• card 포트폴리오 작업을 보여주는 다크 배경 카드.
• chip 태그와 카테고리를 위한 작은 알약형 레이블.
• input 하단 테두리가 있는 깔끔한 텍스트 입력.
• hero 흩어진 대담한 타이포그래피 블록과 결합된 큰 3D 인터랙티브 오브젝트.

09

보이스와 금지 목록

• 톤 자신감 있고, 장난기 있으며, 다소 거만한 톤.
• 헤드라인 강한 개성의 대담하고 단편적인 문장.
• CTA 직접적이고 장난기 있는, 종종 비관습적인 레이블 사용.

• 디스플레이 텍스트에 일반적인 sans-serif 폰트를 사용하지 마세요 — 스크린샷에는 monospaced와 condensed 서체가 보입니다.
• 엄격하고 대칭적인 레이아웃을 적용하지 마세요 — 스크린샷에는 흩어지고 겹쳐진 요소들이 보입니다.
• 차갑고 임상적인 색상 팔레트를 사용하지 마세요 — 스크린샷에는 #F1E7E7과 같은 따뜻하고 부드러운 중성색이 보입니다.
• 3D와 장난기 있는 요소를 피하지 마세요 — 스크린샷에는 3D 게임 콘솔이 눈에 띕니다.
• 얇고 섬세한 테두리를 사용하지 마세요 — 스크린샷에는 단단하고 자신감 있는 1px 테두리가 보입니다.
• 타이포그래피를 균일한 크기로 만들지 마세요 — 스크린샷에는 10px에서 56px까지 극단적인 변화가 보입니다.
• 피하기: 지루한 기업적 어조
• 피하기: 지나치게 격식 있는 언어
• 피하기: 일반적인 디자인 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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