큐레이션 · 오픈 · 무료

Garden Eight

표현적인 타이포그래피와 넓은 여백으로 정의된 도쿄 기반 디지털 디자인 스튜디오 포트폴리오.

01

디자인 DNA

타이포그래피가 주요 전시물인 미니멀 갤러리입니다.

02

컬러

표현적인 타이포그래피와 3D 이미지가 모든 주목을 받도록, 단색 팔레트를 사용한 극도의 절제.

03

타이포그래피

didone-serif · humanist-sans

• display215px · 400
• body15px · 400

내비게이션 링크에는 대문자 간격(tracking)을 사용합니다. · 디스플레이 웨이트와 본문 웨이트 간에 높은 대비를 적용합니다. · 헤드라인과 본문 텍스트 간에 거대한 크기 차이를 허용합니다.

04

여백

콘텐츠 블록을 프레임화하기 위해 넓은 여백을 사용한 풍부한 패딩.

05

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

1px solid rgb(30, 31, 31)

rgb(30, 31, 31) 0px 2px 2px 0px inset · rgb(219, 214, 208) 0px 3px 2px 0px inset

06

레이아웃

콘텐츠를 절대적인 가장자리로 밀어내는 미니멀 그리드.

07

모션과 인터랙션

이미지 표시를 위한 느리고 부드러운 불투명도 전환. · 3D 배경 요소를 위한 완만한 변환 이동.

텍스트 링크에서 미묘한 커서 변화 또는 불투명도 변화. · 최소한의 즉각적인 시각적 피드백을 제공하는 표준 포인터 상태.

08

컴포넌트

• button 대문자 스타일링과 배경 채우기가 없는 미니멀한 텍스트 기반 링크.
• card 테두리 반지름이나 그림자가 없는 깔끔한 모서리.
• chip 존재하는 경우, 미니멀한 텍스트 전용 태그일 가능성이 높습니다.
• input 존재하는 경우, 미니멀한 얇은 밑줄 입력 필드일 가능성이 높습니다.
• hero 전체 뷰포트 높이를 차지하는 거대한 타이포그래피.

09

보이스와 금지 목록

• 톤 자신감 있고, 세련되며, 조용한 어조.
• 헤드라인 표현적이고, 과장된 크기의, 철학적인 헤드라인 (예: 'WHAT CAN WE MAKE NEXT').
• CTA 버튼보다는 맥락에 의존하는 미니멀한 대문자 텍스트 링크.

• 밝은 색상을 사용하지 마십시오 — 스크린샷은 엄격한 중성 베이지와 검정 팔레트를 보여줍니다.
• 심하게 둥근 모서리를 사용하지 마십시오 — 스크린샷은 날카롭고 정사각형 모서리를 보여줍니다.
• 작은 헤드라인 타이포그래피를 사용하지 마십시오 — 스크린샷은 전체 뷰포트를 차지하는 디스플레이 타입을 보여줍니다.
• 바쁜 배경을 사용하지 마십시오 — 스크린샷은 깔끔하고 넓은 베이지 표면을 보여줍니다.
• 대담한 버튼 스타일을 사용하지 마십시오 — 스크린샷은 단순한 대문자 텍스트 링크를 보여줍니다.
• 다크 테마를 사용하지 마십시오 — 스크린샷은 주로 밝은, 따뜻한 톤의 인터페이스를 보여줍니다.
• 피하기: 지저분한 레이아웃
• 피하기: 밝고 채도 높은 색상
• 피하기: 장식적인 UI 요소
• 피하기: 작고 비좁은 타이포그래피

10

팩 안의 실제 스크린샷

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

11

System Prompt

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