큐레이션 · 오픈 · 무료

Joinlava

활기찬 그라데이션과 굵은 타이포그래피를 사용하여 에너지 넘치고 표현력 있는 아이덴티티를 만드는 소셜 오디오 플랫폼입니다.

01

디자인 DNA

자정의 하늘을 배경으로 한 활기적인 네온 쇼로, 다양한 목소리의 에너지를 상징합니다.

02

컬러

활기와 창의성을 나타내는 다색 그라데이션을 사용한 다크 모드 기반.

03

타이포그래피

grotesque-sans · humanist-sans

• display53px · 900
• subtitle18px · 400
• body14px · 400
• label11px · 700

헤드라인은 두꺼운 굵기(900)와 네거티브 트래킹을 가진 타이트한 grotesque-sans를 사용합니다. · 본문 텍스트는 14px의 가독성이 뛰어난 humanist-sans를 사용합니다. · 강조 라벨은 무지개 그라데이션으로 채워진 넓은 트래킹의 대문자 스타일을 사용합니다.

04

여백

일관된 4px 그리드와 넉넉한 수직 패딩(약 37px)을 사용하여, 다크 배경 위에서 요소들이 숨 쉴 공간을 확보합니다.

05

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

주요 테두리는 미세한 흰색 또는 다크 그레이를 사용하며, 보통 1px solid로, 그리드 영역을 구분하는 데 사용되기도 합니다.

None: None

06

레이아웃

히어로는 중앙 정렬 단일 컬럼 레이아웃으로, 기능 섹션은 이중 컬럼 레이아웃으로 전환됩니다.

07

모션과 인터랙션

인터랙티브 요소의 미묘한 hover 전환. · 상단 테두리와 같은 주요 강조 영역의 그라데이션 애니메이션 또는 글로우.

버튼과 인터랙티브 요소는 미묘한 색상 변화 또는 테두리 글로우 기능을 갖추고 있을 가능성이 높습니다. · 모든 주요 인터랙티브 요소에 표준 포인터 커서를 사용합니다.

08

컴포넌트

• button 검은색 배경, 흰색 텍스트, 1px 다색 그라데이션 테두리를 가진 필(알약) 모양 버튼.
• card 이미지나 UI 목업을 포함하는 둥근 모서리(15-20px) 카드로, 때로는 깊은 드롭 섀도우가 적용됩니다.
• chip 다크 배경에 밝은 텍스트를 가진 작고 둥근 태그 또는 라벨.
• input 다크 배경에 미세한 테두리를 가진 미니멀한 입력 필드.
• hero 다크 배경에 굵고 큰 흰색 텍스트가 중앙에 위치하며, 화려한 플로팅 요소로 포인트를 준 큰 섹션.

09

보이스와 금지 목록

• 톤 활기차고 자신감 있으며 커뮤니티 중심적.
• 헤드라인 대담하고 표현적이며 직설적. 보통 크고 굵은 서체를 사용합니다.
• CTA 간단하고 행동 지향적. 예: 'Get The App'.

• 흰색 배경을 사용하지 마세요 — 스크린샷은 깊은 검정(#010101) 배경을 보여줍니다.
• 헤드라인에 세리프 폰트를 사용하지 마세요 — 스크린샷은 굵고 타이트한 grotesque-sans를 보여줍니다.
• 단색 악센트 버튼을 사용하지 마세요 — 스크린샷은 다색 그라데이션 테두리를 가진 버튼을 보여줍니다.
• 헤드라인에 넓고 여유로운 트래킹을 사용하지 마세요 — 스크린샷은 타이트하고 네거티브 트래킹(-1px)을 보여줍니다.
• 본문 텍스트에 연약하고 가느다란 폰트 웨이트를 사용하지 마세요 — 스크린샷은 명확하고 읽기 쉬운 미디엄 웨이트를 보여줍니다.
• 브랜딩에 단일 정적 색상을 사용하지 마세요 — 스크린샷은 핵심 식별자로서 두드러진 다색 그라데이션을 보여줍니다.
• 피하기: 격식 있거나 지나치게 기업적인 언어.
• 피하기: 활기가 부족한 무채색 팔레트.
• 피하기: 연약하고 가느다란 타이포그래피.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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