큐레이션 · 오픈 · 무료

PocketBase

깔끔하고 우호적인 UI를 통해 단순성과 접근성을 강조하는, 개발자 중심 백엔드입니다.

01

디자인 DNA

복잡한 백엔드 인프라를 단일의 접근 가능한 파일로 단순화하는, 친근하고 접근하기 쉬운 도구 모음.

02

컬러

친근한 파스텔 티즈 하이라이트와 최대 가독성을 위한 표준 어두운 회색을 사용하는, 고대비, 깔끔하고 기능적인 팔레트입니다.

03

타이포그래피

humanist-sans · monospace

• display48px · 600
• h228px · 600
• body15px · 400
• code14px · 400

기본 UI 및 본문 텍스트에는 Source Sans Pro를 사용합니다. · 모든 코드 블록 및 기술 스니펫에는 Ubuntu Mono를 사용합니다. · 엄격한 텍스트 정렬과 일관된 행 높이를 유지합니다.

04

여백

풍부한 섹션 패딩을 적용한 표준 4px 기준선 그리드입니다.

05

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

1px solid rgba(37,39,45,0.12)

rgba(0, 0, 0, 0.06) 0px 2px 5px 0px · rgba(0, 0, 0, 0.06) 0px 3px 10px 3px

06

레이아웃

대시보드 프리뷰를 위한 넓은 컨테이너가 포함된, 랜딩 페이지의 중앙 정렬 단일 컬럼 레이아웃입니다.

07

모션과 인터랙션

hover 시 부드러운 색상 및 배경 전환. · 인터랙티브 요소를 위한 필터 및 하단 위치 전환.

인터랙티브 요소의 미세한 배경 및 색상 변화. · 표준 포인터 피드백.

08

컴포넌트

• button 명확한 어두운 테두리와 섬세한 그림자가 있는 깔끔하고 약간 둥근(4px) 버튼; 주요 버튼은 어두운 배경을 사용합니다.
• card 섬세한 그림자와 부드럽고 둥근 테두리 반경이 있는 흰색 배경.
• chip 기능 목록 및 상태 표시를 위한 작고 알약 모양의 태그(반경 999px).
• input 밝은 배경의 둥근 알약 모양 검색창.
• hero 굵은 텍스트와 돋보이는 UI 스크린샷이 있는, 큰 파스텔 티즈 배경(#b8dbd6).

09

보이스와 금지 목록

• 톤 도움이 되고, 직접적이며, 개발자 중심적.
• 헤드라인 핵심 가치 제안을 강조하는 간결하고 굵은 텍스트.
• CTA 행동 지향적이고 직관적인 (예: '문서 읽기', '실시간 데모').

• 어두운 히어로 섹션을 사용하지 마세요 — 스크린샷에서는 밝은 파스텔 티즈(#b8dbd6) 배경을 대신 사용합니다.
• 장식적, 장난스럽거나 스크립트 폰트를 사용하지 마세요 — 스크린샷은 깔끔한 humanist-sans(Source Sans Pro)와 monospace(Ubuntu Mono)를 사용합니다.
• 무거운, 빛나는 그래디언트를 사용하지 마세요 — 스크린샷은 플랫 컬러, 미세한 그림자, 깔끔한 테두리를 사용합니다.
• 둥글고 통통한 버튼을 사용하지 마세요 — 스크린샷은 명확한 어두운 테두리가 있는 약간 둥근(4px) 버튼을 사용합니다.
• 단일 고채도 강조색에 의존하지 마세요 — 스크린샷은 회색, 티즈 및 코드 구문 색상의 균형 잡힌 팔레트를 사용합니다.
• 과도한 애니메이션으로 인터페이스를 어지럽히지 마세요 — 스크린샷은 매우 정적이고 기능적이며 깔끔한 UI를 보여줍니다.
• 장식적 아이콘을 사용하지 마세요 — 스크린샷은 간단하고 기능적인 Remixicon 라인 아이콘을 사용합니다.
• 피하기: 지나치게 많은 마케팅 용어나 화려한 표현.
• 피하기: 공격적인 판매 톤이나 복잡한 판매 퍼널.
• 피하기: 명확한 구조 없이 밀도 높고 읽기 힘든 기술 문서.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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