큐레이션 · 오픈 · 무료

Littletroop

장난기 넘치는 3D 대화형 구체와 대담한 타이포그래피를 특징으로 하는 실험적 디자인 스튜디오 포트폴리오입니다.

AgencyPlayful3DExperimentalExpressive
Littletroop 스크린샷
↓ 디자인 시스템 다운로드 (60 MB)OpenDesign 에서 열기

원본 사이트: https://littletroop.com

📦 팩 내용 보기 →

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

레이아웃

1920container
12columns
20pxgutter
768 / 1024breakpoints

플로팅 코너 네비게이션과 중앙 3D 초점을 가진 풀블리드 레이아웃입니다.

07

모션과 인터랙션

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

히어로 요소의 대화형 3D 회전 · 풀블리드 프로젝트 쇼케이스 간의 매끄러운 스크롤 전환

텍스트 기반 피드백을 제공하는 기본 포인터 커서입니다. · 밑줄이 그어진 텍스트 링크를 통한 직접 네비게이션입니다.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

11

System Prompt

Little Troop은 대규모 대화형 3D 히어로 요소가 극도로 하얀(#ffffff) 캔버스를 지배하는 실험적 디자인 스튜디오 포트폴리오입니다. 타이포그래피는 디스플레이와 본문 텍스트 모두 얇은 고딕체(Arial Narrow)를 사용하며, 좁은 간격과 볼드한 두께로 네비게이션을 설정합니다. 레이아웃은 완전히 유체적이고 비그리드 기반으로, 뷰포트 모서리에 고정된 플로팅 텍스트로 구성됩니다. 핵심 지침: 절대로 드롭 그림자나 무거운 테두리를 적용하지 마십시오, 레이아웃에 그리드를 사용하지 마십시오, 그리고 기본 대화형 3D 요소를 표준 UI 컨테이너 뒤에 숨기지 마십시오.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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