← OpenDesign
큐레이션 · 오픈 · 무료
Littletroop
장난기 넘치는 3D 대화형 구체와 대담한 타이포그래피를 특징으로 하는 실험적 디자인 스튜디오 포트폴리오입니다.
Agency Playful 3D Experimental Expressive
01
디자인 DNA
장인 정신 문화 상상력 장난기 3D
몰입감 있는 3D 스튜디오 작업을 선보이는 장난감 상자와 같은 디지털 경험입니다.
02
컬러
#000000Ink
#ffffffBG
rgba(0,0,0,0.1)Line
다채롭고 대화형 3D 히어로 요소를 주요 시각적 초점으로 만드는 극도로 미니멀한 캔버스입니다.
03
타이포그래피
grotesque-sans
04
여백
4px
8px
16px
20px
24px
30px
40px
60px
89px
플로팅 UI 요소에 특별한 패딩을 적용한 유체 그리드입니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 50px
pill · 999px
미세한 수평 구분선을 위한 1px 얇은 실선입니다.
06
레이아웃
1920 container
12 columns
20px gutter
768 / 1024 breakpoints
플로팅 코너 네비게이션과 중앙 3D 초점을 가진 풀블리드 레이아웃입니다.
07
모션과 인터랙션
220ms micro
400ms small
800ms medium
cubic-bezier(0.25, 0.1, 0.25, 1) easing
히어로 요소의 대화형 3D 회전 · 풀블리드 프로젝트 쇼케이스 간의 매끄러운 스크롤 전환
텍스트 기반 피드백을 제공하는 기본 포인터 커서입니다. · 밑줄이 그어진 텍스트 링크를 통한 직접 네비게이션입니다.
08
컴포넌트
button 배경 없이 볼드한 두께를 사용한 텍스트 전용 내비게이션 링크입니다. card 전통적인 카드 컨테이너 없이 배치된 대형 평면 프로젝트 이미지입니다. hero 뷰포트를 지배하는 대규모 대화형 3D 구체 또는 그래픽입니다.
09
보이스와 금지 목록
톤 자신감 있고 창의적이며 약간 독특한 어조입니다. 헤드라인 볼드하고 좁은 간격으로 설정된 고딕체 선언문 스타일입니다. CTA '프로젝트 보기'와 같은 미니멀한 텍스트 전용 링크입니다. 밀집된 그리드를 사용하지 마십시오 — 스크린샷은 풀블리드 단일 초점 레이아웃을 보여줍니다. 드롭 그림자나 무거운 테두리를 사용하지 마십시오 — 스크린샷은 완전히 평면적인 타이포그래피를 보여줍니다. 흐릿한 배경색을 사용하지 마십시오 — 스크린샷은 순백(#ffffff) 캔버스를 보여줍니다. 본문 텍스트를 중앙 정렬하지 마십시오 — 스크린샷은 왼쪽 정렬된 설명 텍스트를 보여줍니다. 표준 글머리 기호를 사용하지 마십시오 — 스크린샷은 인라인 쉼표 구분 태그를 보여줍니다. 내비게이션을 위한 장식적 아이콘을 사용하지 마십시오 — 스크린샷은 간단한 텍스트 링크를 보여줍니다. 피하기: 표준 그리드 레이아웃 피하기: 무거운 테두리나 그림자 피하기: 기존 카드 구조
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
Little Troop은 대규모 대화형 3D 히어로 요소가 극도로 하얀(#ffffff) 캔버스를 지배하는 실험적 디자인 스튜디오 포트폴리오입니다. 타이포그래피는 디스플레이와 본문 텍스트 모두 얇은 고딕체(Arial Narrow)를 사용하며, 좁은 간격과 볼드한 두께로 네비게이션을 설정합니다. 레이아웃은 완전히 유체적이고 비그리드 기반으로, 뷰포트 모서리에 고정된 플로팅 텍스트로 구성됩니다. 핵심 지침: 절대로 드롭 그림자나 무거운 테두리를 적용하지 마십시오, 레이아웃에 그리드를 사용하지 마십시오, 그리고 기본 대화형 3D 요소를 표준 UI 컨테이너 뒤에 숨기지 마십시오.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 실험적인 3D WebGL 요소를 주요 스토리텔링 장치로 사용하는 스튜디오 포트폴리오의 우수한 사례입니다.