큐레이션 · 오픈 · 무료

Dialitdown Co Nz

장난스러운 일러스트와 따뜻한 색상을 사용하여 긍정적인 온라인 행동을 장려하는 기발하고 캐릭터 중심의 에디토리얼 사이트.

01

디자인 DNA

독특한 레트로-장난기 있는 특성을 가진 디지털 예절에 대한 친근한 일러스트 가이드북.

02

컬러

따뜻하고, 친근하며, 일러스트적인 느낌을 주며, 가혹한 대비나 공격적인 네온 톤은 피합니다.

03

타이포그래피

transitional-serif · humanist-sans

• display68px · 400
• body16px · 400

디스플레이 텍스트는 높은 대비를 가진 과도기적 세리프를 사용합니다. · 본문 텍스트는 깔끔한 system-ui 또는 휴머니스트 산세리프를 사용합니다. · 풍부한 행간을 사용하여 타이포그래피를 깔끔하고 읽기 쉽게 유지합니다.

04

여백

섹션 간 및 콘텐츠 블록 내에 풍부한 수직 간격.

05

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

주요 잉크 색상의 얇고 단색 테두리.

06

레이아웃

미디어나 포스터를 위해 그리드로 전환되는 중앙 정렬된 단일 열 콘텐츠.

07

모션과 인터랙션

스크롤 시 페이드인 · hover 상태 전환 · 단순 캐릭터 애니메이션

버튼 및 대화형 요소에서의 색상 반전 또는 섬세한 크기 변화. · 약간의 아래쪽 이동이나 색상 변화가 있는 활성 상태.

08

컴포넌트

• button 높은 대비 텍스트를 가진 알약 모양 버튼.
• card 단색 배경, 굵은 타이포그래피, 중앙 일러스트를 가진 포스터 스타일 카드.
• chip 해시태그 또는 키워드를 위한 타원형 태그.
• input 얇은 하단 테두리를 가진 미니멀 텍스트 필드.
• hero 눈에 띄는 캐릭터 일러스트가 위 또는 아래에 있는 크고 중앙 정렬된 헤드라인.

09

보이스와 금지 목록

• 톤 친근하고, 따뜻하며, 격려하는.
• 헤드라인 장난스러운 비주얼과 단어를 결합한 굵고 일러스트적인 문장.
• CTA 직접적이고 초대하는 느낌으로, 종종 해시태그나 짧은 구절을 사용합니다.

• 다크 모드를 사용하지 않습니다 — 사이트는 밝고 다채로운 배경에 의존합니다.
• 가혹한 네온 색상을 사용하지 않습니다 — 팔레트는 부드럽고, 따뜻하며, 친근합니다.
• 헤드라인에 무거운 산세리프를 사용하지 않습니다 — 디스플레이 텍스트는 과도기적 세리프입니다.
• 복잡한 다중 열 그리드를 사용하지 않습니다 — 레이아웃은 대부분 중앙 정렬되고 단일 열입니다.
• 사실적인 사진을 사용하지 않습니다 — 사이트는 맞춤형 캐릭터 일러스트를 사용합니다.
• 좁은 행간을 사용하지 않습니다 — 풍부한 여백과 행간이 핵심입니다.
• 피하기: 공격적인 언어
• 피하기: 복잡한 전문 용어
• 피하기: 밀도 높은 텍스트 블록

10

팩 안의 실제 스크린샷

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

11

System Prompt

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