큐레이션 · 오픈 · 무료

Highlight

현대 웹 애플리케이션을 위한 오픈소스 풀스택 모니터링 플랫폼.

01

디자인 DNA

풀스택 모니터링을 위한 다크 테마 깔끔한 IDE 대시보드.

02

컬러

다크 모드 우선, 고대비 시안 포인트 컬러와 절제된 네온 옐로우 하이라이트 적용.

03

타이포그래피

humanist-sans · monospace

• display58px · 600
• heading44px · 600
• body-lg18px · 400
• body16px · 400

04

여백

가독성을 위한 일관된 4px 그리드 기반 및 넉넉한 여백.

05

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

1px solid rgba(48, 41, 78, 1)

rgb(108, 55, 244) 8px 8px 0px -2px

06

레이아웃

넓은 마진을 갖춘 중앙 정렬 콘텐츠, 기능 탭에 flexbox 활용.

07

모션과 인터랙션

대화형 요소의 hover 시 미세한 색상 전환. · 기능 탭 간 부드러운 트랜지션.

버튼 및 링크의 미세한 색상 변화와 불투명도 변경. · 색상 전환을 통한 즉각적인 피드백.

08

컴포넌트

• button 단색 시안 주요 버튼과 윤곽선 보조 변형이 있는 알약형 버튼.
• card 미세한 테두리가 있는 다크 카드, 통합 아이콘이 포함된 경우 많음.
• chip 기능 네비게이션을 위한 탭 형태 칩 (세션 리플레이, 에러 모니터링 등).
• input 히어로에서 두드러지게 나타나지 않는 미니멀 다크 입력 필드.
• hero 포인트 컬러가 적용된 큰 중앙 헤드라인, 스택형 CTA 및 기능 개요 탭.

09

보이스와 금지 목록

• 톤 기술적이면서도 접근 가능한, 전문적이며 개발자 중심적.
• 헤드라인 직접적이고 가치 지향적이며 오픈소스 특성을 강조.
• CTA 명확한 시각적 계층을 갖춘 행동 지향적 (시작하기, 라이브 데모).

• 라이트 테마 사용 금지 — 스크린샷은 깊은 네이비 배경(#0D0225)의 다크 모드 인터페이스를 보여줌.
• 보조 포인트 컬러 사용 금지 — 스크린샷은 단일 지배적 고채도 시안(#72E4FC) 포인트 컬러를 버튼 및 하이라이트에 사용.
• 장식용 세리프 폰트 사용 금지 — 스크린샷은 모든 텍스트에 깔끔하고 현대적인 휴머니스트 산세리프(Poppins) 사용.
• 모든 요소에 날카로운 모서리 사용 금지 — 스크린샷은 8px/16px 미세 둥근 모서리와 44px 알약형이 혼합되어 있음.
• 저대비 텍스트 사용 금지 — 스크린샷은 다크 배경에 고대비 흰색(#FFFFFF) 및 밝은 회색(#DFDFDF) 사용.
• 헤더 지저분하게 만들기 금지 — 스크린샷은 명확한 주요/보조 액션 버튼이 있는 깔끔한 상단 정렬 내비게이션을 보여줌.
• 피하기: 지나치게 캐주얼하거나 '스타트업 느낌' 과장된 용어 사용 지양.
• 피하기: 히어로에 복잡한 아키텍처 다이어그램 사용 지양.
• 피하기: 핵심 가치 제안을 흐리게 하는 지저분한 레이아웃 지양.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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