큐레이션 · 오픈 · 무료

Howmanyplants

대담한 타이포그래피와 수제 그래픽을 결합한, 식물 애호가를 위한 따뜻한 일러스트 에디토리얼 플랫폼입니다.

01

디자인 DNA

식물 애호가를 위한 기발하고 큐레이션된 서점으로, 수제 일러스트레이션과 개성 있는 타이포그래피로 가득합니다.

02

컬러

거의 흰색 캔버스에 기반을 둔 흙빛 따뜻함에 활기찬 차트러즈-골드와 장난기 있는 파스텔 악센트로 포인트를 줍니다.

03

타이포그래피

geometric-sans · humanist-sans · transitional-serif

• display96px · 400
• heading36px · 400
• body14px · 400

대문자 내비게이션과 사이드바 레이블은 강력한 기하학적 리듬을 만듭니다. · 방대한 디스플레이 텍스트가 겹쳐진 일러스트레이션과 물리적으로 상호작용합니다. · 기하학적 산세리프와 타이프라이터 스타일 세리프를 혼합하여 에디토리얼 특성을 더합니다.

04

여백

에디토리얼 콘텐츠를 프레임화하기 위한 넉넉한 측면 padding(64px)으로, 풍부하고 넓은 리듬을 제공합니다.

05

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

rgb(191, 179, 59) 6px 6px 0px 0px

06

레이아웃

텍스트와 맞춤 일러스트레이션이 물리적으로 겹치고 표준 그리드 경계를 벗어나는 모자이크 같은 콜라주입니다.

07

모션과 인터랙션

기본 상호작용을 위한 표준 220ms 상태 트랜지션.

전역에 맞춤 물 주전자 커서가 나타나 기본 포인터를 대체합니다. · 인터랙티브 요소에 대한 표준 포인터 상태입니다.

08

컴포넌트

• button 두꺼운 실선 테두리와 오프셋 배경 드롭 섀도우로 스타일링된 텍스트 링크로, 촉각적인 3D 버튼 효과를 만듭니다.
• card 뚜렷한 배경색 사각형 또는 윤곽 프레임으로 정의된 콘텐츠 블록으로, 종종 오려낸 일러스트레이션과 레이어링됩니다.
• chip 채워진 컨테이너보다는 타이포그래피에 의존하여 분류 또는 내비게이션에 사용되는 소형 대문자 텍스트 레이블입니다.
• input 기본 내비게이션 헤더에 숨겨진 미니멀리스트, 테두리 없는 검색 상호작용입니다.
• hero 일러스트 선반에 걸쳐 브랜드 이름을 철자하는 헤드라인으로, 역동적이고 방대한 타이포그래피 조합입니다.

09

보이스와 금지 목록

• 톤 장난기 있고, 격려하며, 따뜻한 권위를 가집니다.
• 헤드라인 대담하고, 대화적이며, 타이포그래피적으로 표현적입니다.
• CTA 실물 버튼을 모방하기 위해 촉각적인 드롭 섀도우가 있는 단단한 테두리로 프레임됩니다.

• 깔끔하고 빈 미니멀리즘을 사용하지 마세요 - 스크린샷은 일러스트레이션과 텍스트의 조밀하고 겹쳐진 콜라주를 보여줍니다.
• 미묘한 드롭 섀도우에 의존하지 마세요 - 스크린샷은 두꺼운 6px 오프셋 블록 섀도우를 보여줍니다.
• 다크 모드 또는 무거운 그라데이션을 사용하지 마세요 - 스크린샷은 거의 흰색 캔버스에 실선 파스텔 악센트가 있는 밝은 톤을 보여줍니다.
• 표준 UI 그리드 레이아웃을 사용하지 마세요 - 스크린샷은 텍스트와 이미지가 물리적으로 겹치고 경계를 벗어나는 것을 보여줍니다.
• 전역적으로 표준 시스템 커서를 사용하지 마세요 - 스크린샷은 맞춤 물 주전자 커서를 보여줍니다.
• 순전히 타이포그래피 CTA 버튼을 사용하지 마세요 - 스크린샷은 단단한 오프셋 배경 채우기가 있는 윤곽 상자를 보여줍니다.
• 피하기: 임상적 무미건조함
• 피하기: 지나치게 공식적인 기업 언어
• 피하기: 미니멀리스트 빈 공간
• 피하기: 표준 UI 컴포넌트 패턴

10

팩 안의 실제 스크린샷

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

11

System Prompt

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