큐레이션 · 오픈 · 무료

Evm Elektramontreal Ca

시각적 아이콘과 간결한 텍스트를 통해 명확한 진단 정보를 제공하는 실용적인 오류 페이지입니다.

01

디자인 DNA

네트워크 오류를 위한 명확하고 실용적인 시스템 상태 대시보드입니다.

02

컬러

상태를 위한 의미론적 색상 강조가 포함된 고대비 중성 팔레트입니다.

03

타이포그래피

system-sans · system-mono

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

04

여백

명확성을 위한 충분한 수직 간격을 갖춘 표준 4px 기본 그리드입니다.

05

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

상태 다이어그램 섹션을 위한 미묘한 밝은 회색 그라데이션 배경입니다.

06

레이아웃

모바일에서 단일 열 세로 스택으로 축소되는 세로 가로 상태 다이어그램입니다.

07

모션과 인터랙션

링크 hover 상태를 위한 표준 CSS 트랜지션.

링크의 미묘한 색상 변경. · 표준 링크 내비게이션.

08

컴포넌트

• button 눈에 보이는 버튼은 없으며, 링크만 있습니다.
• card 아이콘과 레이블이 포함된 세로 가로 상태 다이어그램입니다.
• chip 밝은 회색 배경을 가진 작은 알약 모양의 오류 코드 배지입니다.
• input 눈에 보이는 양식 입력 필드가 없습니다.
• hero 하위 텍스트 링크와 타임스탬프가 포함된 크고 가벼운 무게의 헤드라인입니다.

09

보이스와 금지 목록

• 톤 직설적이고, 정보 전달적이며, 기술적으로 정확합니다.
• 헤드라인 크고, 가벼우며, 선언적입니다.
• CTA 행동 유도 버튼 대신 정보성 링크를 사용합니다.

• 장식용 글꼴을 사용하지 마세요 — 스크린샷은 매우 읽기 쉬운 시스템 sans-serif 스택을 보여줍니다.
• 복잡한 그림자나 깊이를 추가하지 마세요 — 스크린샷은 미묘한 그라데이션 배경만 있는 평면 디자인을 보여줍니다.
• 다크 컬러 스킴을 사용하지 마세요 — 스크린샷은 진한 회색 텍스트가 있는 밝은 흰색 배경을 보여줍니다.
• 오류 코드를 숨기지 마세요 — 스크린샷은 헤드라인 옆에 작은 뚜렷한 배지로 눈에 띄게 표시합니다.
• 여러 강조 색상을 사용하지 마세요 — 스크린샷은 빨간색과 초록색이 상태 아이콘에만 엄격히 사용되는 제한된 팔레트를 사용합니다.
• 복잡한 레이아웃을 만들지 마세요 — 스크린샷은 넉넉한 여백과 큰 제목으로 명확한 시각적 계층 구조를 보여줍니다.
• 피하기: 설명 없는 전문 용어
• 피하기: 장난스럽거나 비공식적인 언어
• 피하기: 빽빽하고 끊어지지 않는 문단
• 피하기: 모호한 지침
• 피하기: 굵은 글씨 또는 강조의 과도한 사용

10

팩 안의 실제 스크린샷

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

11

System Prompt

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