큐레이션 · 오픈 · 무료

Giuliatonon It

기술적 상태를 명확하고 권위 있게 전달하기 위해 설계된 미니멀리스트, 유틸리티 중심의 시스템 진단 페이지입니다.

01

디자인 DNA

깨끗하고 표준적인 시스템 진단 패널 또는 유틸리티 인터페이스입니다.

02

컬러

명확한 상태 전달을 위한 기능적 의미론적 색상이 포함된 고대비 중립색입니다.

03

타이포그래피

system-ui

• display60px · 400
• h230px · 400
• body16px · 400

최대한의 호환성과 네이티브 느낌을 위해 시스템 폰트 스택을 사용합니다 · 깨끗하고 공격적이지 않은 느낌을 위해 제목의 두께를 유지하지 않습니다(400) · 두께가 아닌 크기 차이를 통해 명확한 계층 구조를 유지합니다

04

여백

명확한 섹션 구분을 위한 일관된 4px 기본 리듬

05

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

섹션 구분을 위한 은은한 1px의 무채색 그레이 테두리

0 1px 3px rgba(0,0,0,0.1)

06

레이아웃

명확한 수직 리듬을 가진 중앙 정렬 단일 열 레이아웃

07

모션과 인터랙션

상호작용 요소의 미묘한 전환

링크의 색상 전환 · 표준 링크 동작

08

컴포넌트

• button 최소 스타일링의 표준 시스템 링크
• card 가로 흐름의 아이콘 기반 상태 카드
• chip 미니멀 인라인 상태 뱃지
• input 미사용
• hero 타임스탬프와 참조 링크가 포함된 대형 텍스트 기반 오류 상태

09

보이스와 금지 목록

• 톤 직설적, 기술적, 정보 전달적
• 헤드라인 명확하고 모호하지 않은 상태 선언
• CTA 사용자 역할(방문자 vs 소유자)별로 구분된 유용한 안내

• 장식용 폰트를 사용하지 않습니다 — 스크린샷은 system-ui 스택을 보여줍니다
• 메인 레이아웃 요소에 둥근 모서리를 추가하지 않습니다 — 스크린샷은 날카로운 모서리를 보여줍니다
• 제목에 두꺼운 폰트 두께를 사용하지 않습니다 — 스크린샷은 전체적으로 400 두께를 보여줍니다
• 복잡한 배경 패턴을 도입하지 않습니다 — 스크린샷은 단색 화이트와 단순 그라디언트를 보여줍니다
• 기능적이지 않은 밝은 액센트 색상을 사용하지 않습니다 — 스크린샷은 링크와 상태에만 파랑색을 보여줍니다
• 밀집되고 비좁은 레이아웃을 만들지 않습니다 — 스크린샷은 넉넉한 60px 수직 패딩을 보여줍니다
• 피하기: 마케팅 언어
• 피하기: 감정적 호소
• 피하기: 불필요한 인사말

10

팩 안의 실제 스크린샷

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

11

System Prompt

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