큐레이션 · 오픈 · 무료

Turso

AI 에이전트 시대를 위한 데이터베이스.

01

디자인 DNA

현대적인 핀테크 대시보드의 미학을 갖춘, 정밀하게 설계된 개발자 도구입니다.

02

컬러

중요한 행동 유도 요소를 위해 고대비 네온 강조색을 사용하는 다크 모드 기반입니다.

03

타이포그래피

geometric-sans · ui-monospace

• display64px · 800
• body16px · 400

모든 UI 및 본문 텍스트에 Inter(기하학적 산세리프)를 사용합니다. · 큰 디스플레이 제목에는 좁은 음수 자간을 유지합니다. · 모든 UI 요소에 깔끔하고 가독성이 높은 기하학적 산세리프를 사용합니다.

04

여백

명확하고 여유 있는 패딩과 간격을 제공하는 일관된 4px 기반 스케일입니다.

05

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

1px solid rgba(255,255,255,0.1)

06

레이아웃

중앙에 배치된 제한된 콘텐츠 블록을 포함하는 전체 너비의 어두운 섹션입니다.

07

모션과 인터랙션

hover 상태에서의 부드러운 배경색 및 색상 트랜지션. · 인터랙티브 요소를 위한 미세한 불투명도 변화.

150-200ms에 걸친 부드러운 배경색 및 텍스트색 트랜지션. · 불투명도 감소 또는 색상 변화를 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 네온 배경과 어두운 텍스트를 사용한 고대비 둥근 모서리 버튼입니다.
• card 어두운 배경과 부드러운 둥근 모서리를 가진 미세한 테두리의 카드입니다.
• chip 차분한 배경을 가진 작은 둥근 모서리 라벨입니다.
• input 미세한 테두리와 어두운 배경을 가진 깔끔한 입력 필드입니다.
• hero 돋보이는 네온 강조 요소를 사용한, 거대한 중앙 정렬형 텍스트 중심 히어로입니다.

09

보이스와 금지 목록

• 톤 권위 있고, 기술적이며, 미래 지향적입니다.
• 헤드라인 짧고 강렬하며 매우 설명적인 기술적 진술입니다.
• CTA 직관적이고 행동 지향적인 명령어에 네온 강조를 사용합니다.

• 흰색 배경을 사용하지 않습니다 — 스크린샷은 깊은 어두운(#0D1318) 기반을 보여줍니다.
• 장식용 세리프 폰트를 사용하지 않습니다 — 스크린샷은 깔끔한 기하학적 산세리프를 보여줍니다.
• 여러 강조색을 사용하지 않습니다 — 스크린샷은 유일한 지배적인 고채도 강조색인 네온 민트(#4FF7D1)를 보여줍니다.
• 부드러운 그림자를 사용하지 않습니다 — 스크린샷은 높이감을 위해 미세한 1px 테두리와 배경색 변화를 보여줍니다.
• 좁고 꽉 찬 간격을 사용하지 않습니다 — 스크린샷은 콘텐츠 블록 주변의 여유 있는 패딩(예: 40px, 128px)을 보여줍니다.
• 모든 제목에 소문자를 사용하지 않습니다 — 스크린샷은 기술적 진술에 표준 타이틀 케이스 또는 문장 케이스를 보여줍니다.
• 피하기: 격식 없는 언어는 피합니다.
• 피하기: 기술적 내용 없는 일반적인 마케팅 문구는 피합니다.
• 피하기: 지나치게 복잡하거나 장식적인 문장은 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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