큐레이션 · 오픈 · 무료

Lusion

Lusion은 브랜드가 돋보이도록 돕는 3D 비주얼 스토리텔링과 인터랙티브 웹 경험을 창조합니다.

01

디자인 DNA

몰입감 있는 3D 내러티브를 만드는 디지털 대장간.

02

컬러

단색 형태 위에 전기 블루 악센트를 단독으로 사용하는 고대비 캔버스.

03

타이포그래피

geometric-sans · monospace

• display144px · 500
• heading143px · 400
• body16px · 400
• caption14px · 400

대형 디스플레이 텍스트에는 타이트한 네거티브 자간 사용 · 모든 타이포그래피에 깔끔하고 기하학적인 미학 유지 · 긴 콘텐츠의 가독성을 위해 좌측 정렬 텍스트 선호

04

여백

수직 및 수평 리듬을 위한 일관된 8px 기본 증가 단위.

05

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

카드에 미묘한 box-shadows를 제외하고는 눈에 보이는 테두리를 사용하지 않음.

0px 2px 4px rgba(0, 0, 0, 0.04) · 0px 6px 10px rgba(0, 0, 0, 0.04)

06

레이아웃

대규모 3D 비주얼 히어로 섹션이 주도하는 유동적이고 반응형 레이아웃.

07

모션과 인터랙션

호버 시 부드러운 트랜스폼 애니메이션 · UI 요소를 위한 미묘한 불투명도 전환 · 히어로 섹션에서의 지속적인 3D 오브젝트 움직임

인터랙티브 요소의 스케일 및 색상 전환. · 미묘한 트랜스폼 변화로 즉각적인 시각적 피드백.

08

컴포넌트

• button 둥근 모서리를 가진, 어두운 배경과 밝은 텍스트의 알약 모양 버튼.
• card 3D 프로젝트 썸네일을 선보이기 위한 크고 둥근 모서리의 컨테이너.
• chip 탐색이나 카테고리를 위한 간단한 대문자 텍스트 레이블.
• input 둥근 모서리와 미묘한 테두리가 있는 미니멀리스트 입력 필드.
• hero 3D 비주얼과 대규모 타이포그래피가 주도하는 전체 폭 섹션.

09

보이스와 금지 목록

• 톤 자신감 있고, 전문적이며, 혁신적인.
• 헤드라인 비주얼 임팩트와 스토리텔링을 강조하는 굵고 간결한 진술.
• CTA 직접적이고 행동 지향적이며, 종종 대문자 텍스트 사용.

• 여러 악센트 색상을 사용하지 마세요 — 스크린샷은 단 하나의 전기 블루 악센트(#1A2FFB)가 지배하는 것을 보여줍니다.
• 장식적 또는 세리프 글꼴을 사용하지 마세요 — 스크린샷은 깔끔하고 기하학적인 산세리프 글꼴(Aeonik)을 보여줍니다.
• 바쁘거나 복잡한 배경을 사용하지 마세요 — 스크린샷은 단색의 밝은 오프화이트 배경(#F0F1FA)을 보여줍니다.
• 모서리가 네모나게 사용하지 마세요 — 스크린샷은 모든 컨테이너와 버튼에 둥근 모서리(15px-100px)를 보여줍니다.
• 가볍고 섬세한 타이포그래피를 사용하지 마세요 — 스크린샷은 헤딩에 무겁고 기하학적인 글꼴 두께를 보여줍니다.
• 밝고 채도 높은 배경을 사용하지 마세요 — 스크린샷은 단일 팝 컬러와 함께 은은하고 채도가 낮은 팔레트를 보여줍니다.
• 피하기: 전문 용어가 많은 설명
• 피하기: 수동태
• 피하기: 복잡하고 지저분한 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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