큐레이션 · 오픈 · 무료

Chirpley

진단 정보를 제공하는 표준 Cloudflare 연결 시간 초과 오류 페이지입니다.

01

디자인 DNA

기술 지원 데스크 상태 페이지입니다.

02

컬러

상태 표시를 위한 기능적 색상이 포함된 실용적인 팔레트입니다.

03

타이포그래피

system-sans

• display60px · 400
• heading30px · 400
• body16px · 400

광범위한 호환성을 위해 시스템 폰트 스택을 사용합니다. · 명확한 계층 구조를 위해 표준 폰트 굵기(400, 600)를 사용합니다. · 가독성을 위해 일관된 행 간격을 유지합니다.

04

여백

기본 16px 크기를 기준으로 한 표준 4px 그리드입니다.

05

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

1px solid #404040

none

06

레이아웃

오류 상태를 위한 간단한 단일 열 레이아웃입니다.

07

모션과 인터랙션

인터랙티브 요소에 대한 표준 hover 전환 효과.

링크에서 커서가 포인터로 변경됩니다. · 표준 브라우저 동작입니다.

08

컴포넌트

• button 존재하지 않습니다.
• card 레이블과 상태 표시기가 있는 상태 아이콘 행입니다.
• chip 오류 코드 배지입니다.
• input 존재하지 않습니다.
• hero 타임스탬프가 포함된 큰 오류 제목입니다.

09

보이스와 금지 목록

• 톤 기술적이고 직접적인 어조입니다.
• 헤드라인 명확한 오류 메시지입니다.
• CTA 정보성 링크입니다.

• 커스텀 폰트를 사용하지 마세요 — 스크린샷은 시스템 폰트 스택을 보여줍니다.
• 복잡한 그라디언트를 사용하지 마세요 — 스크린샷은 단색을 보여줍니다.
• 장식적 그림자를 사용하지 마세요 — 스크린샷은 미니멀한 UI를 보여줍니다.
• 폭넓은 색상 팔레트를 사용하지 마세요 — 스크린샷은 제한적인 기능적 색상을 보여줍니다.
• 모서리를 모두 둥글게 하지 마세요 — 스크린샷은 주로 직선 모서리를 보여줍니다.
• 장식적 아이콘을 사용하지 마세요 — 스크린샷은 표준 기능적 아이콘을 보여줍니다.
• 피하기: 마케팅 언어
• 피하기: 감정적 어조
• 피하기: 불분명한 오류 코드

10

팩 안의 실제 스크린샷

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

11

System Prompt

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