큐레이션 · 오픈 · 무료

Reveal

연결 시간 초과를 진단하기 위한 기능적 오류 상태 UI입니다.

01

디자인 DNA

연결 상태를 표시하는 시스템 진단 대시보드와 같습니다.

02

컬러

시스템 상태를 위한 실용적 색상 코딩(초록은 성공, 빨강은 오류, 파랑은 링크).

03

타이포그래피

system-ui

• display60px · 300
• h130px · 400
• body16px · 400
• caption13px · 400

04

여백

수직 간격은 엄격한 타이포그래피 리듬보다는 섹션의 padding에 의해 결정됩니다.

05

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

푸터 위의 미세한 1px 구분선을 제외하고는 보이는 테두리가 없습니다.

06

레이아웃

상태 아이콘용 3열 그리드, 설명 텍스트용 2열 그리드.

07

모션과 인터랙션

hover 가능한 요소(링크, 아이콘)의 전환 효과.

링크가 더 진한 파랑색으로 변합니다. · 인터랙티브 요소에서 커서가 포인터로 변경됩니다.

08

컴포넌트

• button 이 오류 상태에서는 보이는 버튼이 없습니다.
• card 보이는 카드가 없습니다.
• chip 알약 모양의 오류 코드 배지.
• input 보이는 입력 필드가 없습니다.
• hero 연결 경로와 상태를 보여주는 세 가지 아이콘이 있는 상태 표시 영역.

09

보이스와 금지 목록

• 톤 기술적이고, 객관적이며, 도움이 되는 어조.
• 헤드라인 크고 가벼운 두께의 시스템 폰트.
• CTA 문제 해결을 위한 표준 파랑색 텍스트 링크.

• 장식적인 테두리를 사용하지 마세요 — 스크린샷은 깔끔하고 테두리 없는 레이아웃을 보여줍니다
• 높은 대비의 그림자를 사용하지 마세요 — 스크린샷은 플랫하고 그림자 없는 UI를 보여줍니다
• 커스텀 세리프 또는 디스플레이 폰트를 사용하지 마세요 — 스크린샷은 시스템-ui를 일관되게 사용합니다
• 다크 배경을 사용하지 마세요 — 스크린샷은 밝은 하이키 디자인을 보여줍니다
• 복잡한 애니메이션을 사용하지 마세요 — 스크린샷은 정적이고 기능적인 페이지를 보여줍니다
• 컨테이너에 둥근 모서리를 사용하지 마세요 — 스크린샷은 상태 섹션에 사각형 가장자리를 보여줍니다
• 피하기: 감정적인 언어
• 피하기: 기술적 필요성을 넘어선 복잡한 전문 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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