큐레이션 · 오픈 · 무료

Algolia

심층적인 기술 역량과 접근 가능하고 대담한 비주얼 커뮤니케이션의 균형을 맞춘 프리미엄 AI 기반 검색 플랫폼입니다.

01

디자인 DNA

어둡고 기술적인 미학과 밝고 친근한 악센트를 조화시킨 고급 개발자 중심 검색 인프라입니다.

02

컬러

콘텐츠 섹션용 중립적인 밝은 표면과 생동감 있는 1차 블루 악센트를 사용하는 고대비 다크 모드 기반입니다.

03

타이포그래피

humanist-sans · geometric-sans · monospace

• display56px · 700
• h240px · 700
• body16px · 400

제목은 타이트한 트래킹을 적용한 볼드한 기하학적 산세리프를 사용합니다. · 본문 텍스트는 최대 가독성을 위해 깔끔한 기하학적 산세리프를 기본으로 사용합니다. · 코드 스니펫은 표준 모노스페이스 폰트를 활용합니다.

04

여백

여유로운 간격을 위한 4px 기본 그리드입니다.

05

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

1px solid rgb(229, 231, 235)

rgba(0, 0, 0, 0.05) 0px 1px 2px 0px · rgba(0, 61, 255, 0.12) 0px 0px 6px 2px

06

레이아웃

24px 거터가 있는 12컬럼 그리드와 함께 중앙 정렬된 최대 너비 컨테이너입니다.

07

모션과 인터랙션

버튼과 링크에 대한 hover 시 매끄러운 색상 및 불투명도 전환. · 인터랙티브 요소에 대한 미묘한 scale 또는 transform 효과.

미묘한 배경색 변화 또는 불투명도 변화. · 과도한 애니메이션 없이 즉각적인 시각적 피드백.

08

컴포넌트

• button 필 또는 둥근 모서리를 가진 솔리드 블루 1차 버튼과 고스트/아웃라인 2차 버튼입니다.
• card 미묘한 그림자나 테두리를 가진 깔끔한 직사각형 카드로, 주로 고객 로고를 표시하는 데 사용됩니다.
• chip 스크린샷에서 눈에 띄게 보이지 않습니다.
• input 미묘한 테두리와 돋보기 아이콘이 있는 검색 입력 필드입니다.
• hero 왼쪽에 대담한 텍스트, 오른쪽에 크고 다크 테마의 제품 스크린샷 또는 인터랙티브 비주얼을 배치하는 분리형 레이아웃입니다.

09

보이스와 금지 목록

• 톤 전문적이고 자신감 있으며 기술적으로 권위 있는 어조입니다.
• 헤드라인 간결하고 임팩트 있으며 직접적인 스타일로, 종종 '에이전틱(Agentic)' 또는 '제너러티브(Generative)'와 같은 강력한 형용사를 사용합니다.
• CTA '플랫폼 살펴보기' 또는 '시작하기'와 같은 행동 지향적 구문을 사용합니다.

• 순수한 블랙 배경을 사용하지 마세요. 사이트는 대신 깊은 자정 블루(#000033)를 사용합니다.
• 본문 텍스트에 얇고 가벼운 글꼴 굵기를 사용하지 마세요. 사이트는 볼드(700) 또는 레귤러(400) 굵기를 강하게 선호합니다.
• 모든 곳에 날카롭고 사각형 모서리를 구현하지 마세요. 디자인은 주로 8px 또는 12px의 둥근 모서리를 활용합니다.
• 밝고 네온 같은 악센트 색상을 사용하지 마세요. 1차 악센트는 안정적이고 자신감 있는 블루(#003DFF)입니다.
• 지나치게 밀집하고 비좁은 레이아웃을 만들지 마세요. 사이트는 여유로운 간격(24px 거터, 64px 섹션 간격)을 사용합니다.
• UI 구성 요소에 복잡하고 무거운 드롭 섀도우를 사용하지 마세요. 섀도우는 미묘하며 주로 부드러운 높이감이나 글로우 효과를 위해 사용됩니다.
• 피하기: 지나치게 캐주얼하거나 장난스러운 속어를 사용하지 마세요.
• 피하기: 핵심 메시지를 흐리게 하는 복잡한 레이아웃을 피하세요.
• 피하기: 약하거나 설명력이 부족한 호출을 사용하지 마세요.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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