가독성을 극대화하기 위해 기본 파우더 스카이블루와 높은 대비를 가진 어두운 텍스트 색상으로 구성된, 빛이 지배적인 단색 팔레트입니다.
03
타이포그래피
humanist-sans
display36px · 700
body16px · 400
모든 표시 및 본문 텍스트에 깔끔한 산세리프를 사용합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
요소 간 명확한 공간 분리를 위해 넉넉한 패딩을 적용한 4px 기본 단위의 단순한 리듬입니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 0px
md · 0px
lg · 0px
pill · 0px
일러스트레이션 외곽선에 다크 ��� 색상의 1px 실선이 사용됩니다.
06
레이아웃
1280container
12columns
24pxgutter
768 / 1024breakpoints
상단에 큰 일러스트레이션 그래픽이 있고 그 아래에 텍스트 블록이 오는, 단일 중앙 정렬 세로 열 레이아웃입니다.
07
모션과 인터랙션
0msmicro
0mssmall
0msmedium
lineareasing
08
컴포넌트
hero잠금 장치가 달린 컴퓨터 모니터를 묘사하는 large, centered, 벡터 기반 일러스트레이션으로, 주변에 떠다니는 기하학적 형태와 구름 모양의 베이스가 있습니다.
09
보이스와 금지 목록
톤직설적이고 유용하지만, 장난기 있는 시각 스타일로 부드럽게 표현됩니다.
헤드라인오류 코드와 상태를 명확하고 크고 굵게 진술합니다.
복잡하거나 다단계 레이아웃을 사용하지 마세요 — 스크린샷은 간단한 중앙 정렬 세로 스택을 보여줍니다.
어두운 배경을 사용하지 마세요 — 스크린샷은 밝은 파스텔 블루 배경을 보여줍니다.
오류에 공격적인 빨간색을 사용하지 마세요 — 스크린샷은 차분하고 위협적이지 않은 팔레트를 사용합니다.
무겁고 사실적인 이미지를 사용하지 마세요 — 스크린샷은 단순하고 평면적인 벡터 일러스트레이션을 사용합니다.
여러 굵기와 스타일이 있는 복잡한 타이포그래피를 사용하지 마세요 — 스크린샷은 제한적이고 깔끔한 산세리프 시스템을 사용합니다.
복잡한 내비게이션 또는 푸터를 추가하지 마세요 — 스크린샷은 핵심 오류 콘텐츠와 장식 요소만 보여줍니다.
피하기: 지나치게 기술적인 전문 용어 사용
피하기: 공황 상태 유발
피하기: 오류 상태에 공격적인 빨간색 사용
11
System Prompt
이 디자인 시스템은 미니멀하고 일러스트레이션이 있는 오류 페이지를 위한 것입니다. 배경은 밝은 파스텔 블루(#B0E0E9), 텍스트는 검은색(#000000), 일러스트레이션용 악센트는 다크 틸(#226D7A)을 사용합니다. 타이포그래피는 헤드라인에 36px, 본문에 16px의 깔끔한 휴머니스트 산세리프(Open Sans 또는 Roboto와 같은)입니다. 레이아웃은 큰 장난기 있는 벡터 그래픽이 있는 간단한 중앙 정렬 열입니다. 핵심 주의 사항: 어두운 배경을 사용하지 마세요; 오류에 빨간색을 사용하지 마세요; 복잡한 다단계 레이아웃을 사용하지 마세요; 사실적인 사진을 사용하지 마세요; 두 가지 이상의 폰트 크기를 사용하지 마세요; 불필요한 내비게이션 요소를 포함하지 마세요.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
