큐레이션 · 오픈 · 무료

Superlog Sh

프로덕션 사건에 대한 해결 PR을 자동으로 생성하는 AI 기반 관찰 가능성 플랫폼.

Developer ToolsAISaaSDark ModeProductivity
Superlog Sh 스크린샷
OpenDesign 에서 열기

원본 사이트: https://superlog.sh/

01

디자인 DNA

관찰 가능성버그 수정코딩 에이전트엔지니어링

프로덕션 버그를 감지, 분석 및 자율적으로 수정하는 끊임없는 시니어 엔지니어.

02

컬러

#485AE2Accent
#F5F5F6Ink
#8A8A8FInk soft
#141415BG
#232325BG soft
#5A5A60Muted
rgba(255,255,255,0.07)Line

깊은 블랙과 거의 흰색을 사용한 높은 명도의 다크 모드와, 주요 작업을 위한 단일 일렉트릭 블루 악센트.

03

타이포그래피

humanist-sans · geometric-mono

04

여백

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

여유로운 수직 패딩(32px-64px)이 주요 섹션을 분리하며, 기본 8px 그리드가 컴포넌트 간격을 조율합니다.

05

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

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

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

0px 12px 30px rgba(0,0,0,0.24) · 0px 28px 100px rgba(0,0,0,0.65) · 0px 6px 14px -6px rgba(72,90,226,0.55)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

여유로운 마진을 가진 중앙 정렬 단일 열 레이아웃으로, 기능 쇼케이스를 위해 다중 열 그리드로 전환됩니다.

07

모션과 인터랙션

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

인터랙티브 요소에서 부드러운 색상 및 배경색 전환 · hover 상태에서의 스케일 및 변환 효과

부드러운 색상 변화와 box-shadow를 통한 미묘한 높이 변화. · 미묘한 스케일 변환 또는 즉각적인 시각적 피드백.

08

컴포넌트

09

보이스와 금지 목록

11

System Prompt

Superlog, AI 기반 관찰 가능성 플랫폼을 위한 현대적인 개발자 도구 랜딩 페이지입니다. 디자인은 깊은 근접 블랙 다크 모드(#141415)를 기반으로 높은 명도의 흰색 텍스트(#F5F5F6)와 주요 작업을 위한 단일 강렬한 일렉트릭 블루 악센트(#485AE2)를 사용합니다. 타이포그래피는 본문 및 전시 텍스트를 위한 깔끔한 휴머니스틱 산세리프와 터미널 및 코드 요소를 위한 기하학적 모노스페이스 폰트를 사용합니다. 레이아웃은 넓고 중앙 정렬되어 있으며, 섹션을 분리하기 위해 여유로운 수직 리듬에 의존합니다. 주요 핵심 디자인 제약 사항으로는 라이트 모드 인터페이스 사용 회피, 장난스럽거나 지나치게 장식적인 타이포그래피 거부, 그리고 텍스트와 어두운 배경 사이의 높은 명도 유지가 있습니다. 미학은 정교하고 기술적이며 전문적이어서, 시각적 화려함보다 명확성과 효율성을 강조하며, 현대적인 SaaS 개발자 도구 디자인의 완벽한 예시입니다.

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

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

OpenDesign 스킬 ↗

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