큐레이션 · 오픈 · 무료

Typesense

오픈소스 검색 엔진을 위한 깔끔하고 개발자 중심의 SaaS 랜딩 페이지입니다.

devsearch
Typesense 스크린샷
↓ 디자인 시스템 다운로드 (29 MB)OpenDesign 에서 열기

원본 사이트: https://typesense.org

📦 팩 내용 보기 →

01

디자인 DNA

검색오픈소스빠른개발자API

두통 없이 검색 기능을 원하는 개발자를 위한 날렵하고 실속 있는 도구 키트입니다.

02

컬러

#353FD7Accent
#000000Ink
#4D4D4DInk soft
#FAFAFABG
#FFFFFFBG soft
#F1F1F1BG quiet
#999999Muted
rgba(229,231,235,1)Line

검정과 밝은 회색을 기반으로 한 고대비의 거의 단색 팔레트에, 선명한 인디고 강조색과 인터랙티브 요소용 시그니처 고채도 라임 그린이 더해져 있습니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

디스플레이 헤드라인에는 굵은 기하학적 산세리프를 사용합니다. · 본문 텍스트에는 가벼운 두께의 깔끔한 휴머니스틱 산세리프를 사용합니다. · 코드 스니펫과 기술적 하이라이트에는 고정폭 폰트를 예약합니다.

04

여백

4px
8px
12px
16px
20px
24px
32px
48px
64px
96px

일관된 4px 기본 그리드가 내부 컴포넌트 간격(padding 및 gap)에 널리 사용됩니다.

05

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

sm · 8px
md · 12px
lg · 16px
pill · 9999px

1px solid rgb(229,231,235)

rgba(0,0,0,0.1) -5px 4px 34px 0px · rgba(0,0,0,0.2) 0px 10px 15px -3px

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

중앙 정렬된 단일 열의 주 콘텐츠 영역에 넉넉한 여백을 두고, 피처 카드를 위한 다중 열 그리드로 전환됩니다.

07

모션과 인터랙션

150msmicro
200mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

인터랙티브 요소에서 부드러운 색상 및 배경 트랜지션. · 메뉴나 요소 표시를 위한 클리핑 패스 애니메이션. · 주요 액션 버튼에서의 섬세한 hover 변환.

인터랙티브 요소에서의 색상 변화, 미묘한 배경 변화 또는 약간의 상향 이동입니다. · 즉각적인 시각적 피드백을 제공하는 표준 포인터 커서입니다.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Typesense — 桌面首屏（hero）
桌面首屏（hero）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Typesense — 移动首屏
移动首屏

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

11

System Prompt

이것은 오픈소스 검색 엔진을 위한 개발자 중심의 SaaS 랜딩 페이지입니다. 시각적 아이덴티티는 깔끔하고 자신감 있으며 약간 장난스러우며, 주로 밝은 배경과 고대비 타이포그래피를 사용합니다. 주요 색상으로는 기본 잉크용 단색 검정(#000000), 강조용 선명한 인디고(#353FD7), 그리고 주요 액션 및 인터랙티브 하이라이트용 시그니처 고채도 라임 그린(#C0FF58)이 있습니다. 타이포그래피는 디스플레이 텍스트용 굵은 기하학적 산세리프와 본문 텍스트용 깔끔한 휴머니스틱 산세리프를 특징으로 합니다. 중요한 디자인 제약 조건: 절대로 다크 배경을 주 캔버스로 사용하지 마세요; 인터랙티브 요소에 날카롭고 사각의 모서리를 사용하지 마세요; 인터페이스의 선명함과 명료성을 떨어뜨릴 수 있는 무채색, 저대비 색상을 사용하지 마세요.

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

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

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

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