큐레이션 · 오픈 · 무료

Editbrandstudio

부드러운 청록색과 기발한 라인 아트를 사용한 장난스러운 403 오류 페이지입니다.

PlayfulConsumerCalmFriendlyGeometric

↓ 디자인 시스템 다운로드 (3 MB)OpenDesign 에서 열기

원본 사이트: https://editbrandstudio.co.uk

📦 팩 내용 보기 →

디자인 DNA

기발한가벼운반가운

친근한 하늘 위의 일러스트레이션입니다.

컬러

#000000Ink

#B0E0E9BG

#226D7AMuted

rgba(0,0,0,1)Line

부드럽고 차분한 청록색 배경에 높은 대비의 블랙 텍스트를 사용합니다.

타이포그래피

transitional-serif · humanist-sans · monospace

display36px · 700
body16px · 400

여백

4px

8px

16px

20px

24px

32px

40px

60px

수평 간격을 제한하고 수직 패딩을 넉넉하게 둡니다.

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

sm · 0px

md · 0px

lg · 0px

pill · 999px

테두리를 보이지 않게 합니다.

레이아웃

1280container

12columns

20pxgutter

768 / 1024breakpoints

일러스트와 텍스트가 위아래로 쌓인 단일 칼럼 중앙 정렬입니다.

모션과 인터랙션

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

hover/focus 시 암시적인 전환 효과.

암시적인 전환 효과. · 암시적인 전환 효과.

컴포넌트

button 사용하지 않음.
card 사용하지 않음.
chip 사용하지 않음.
input 사용하지 않음.
hero 전체 폭의 일러스트 히어로로, 중앙에 큰 그래픽과 장식적인 배경 요소가 있습니다.

보이스와 금지 목록

톤 친근하고 도움이 되는 어조입니다.
헤드라인 오류를 명확하고 직접적으로 전달하는 헤드라인 스타일.
CTA 해당 없음.

다크 모드를 사용하지 마세요 — 스크린샷은 대신 밝은 하늘 테마를 보여줍니다.
날카롭고 기술적인 서체를 사용하지 마세요 — 스크린샷은 대신 친근한 트랜지셔널 세리프와 휴머니스트 산스를 사용합니다.
고채도 강조색을 사용하지 마세요 — 스크린샷은 대신 단색 청록색 팔레트에 의존합니다.
복잡한 다칼럼 레이아웃을 사용하지 마세요 — 스크린샷은 대신 간결하고 중앙 정렬된 단일 칼럼 레이아웃을 보여줍니다.
무거운 드롭 섀도우나 깊이감을 사용하지 마세요 — 스크린샷은 대신 플랫한 라인 아트 일러스트레이션을 보여줍니다.
밀도 높고 텍스트가 많은 오류 메시지를 사용하지 마세요 — 스크린샷은 대신 짧고 친근한 문장을 사용합니다.
피하기: 가혹한 전문 용어
피하기: 밀도 높은 문단
피하기: 공격적인 오류 메시징

팩 안의 실제 스크린샷

Editbrandstudio — 桌面首屏（hero） — 桌面首屏（hero）

Editbrandstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

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

System Prompt

이것은 브랜드 스튜디오를 위한 소비자향 장난스러운 403 오류 페이지입니다. 밝은 청록색 배경(#B0E0E9)과 부드러운 라인 아트 일러스트레이션을 사용하여 친근하고 기발한 이미지를 구현합니다. 타이포그래피는 헤드라인에 트랜지셔널 세리프, 본문에 휴머니스트 산스를 혼합하여 접근 가능한 어조를 유지합니다. 주요 색상은 청록색 배경과 블랙/다크 청록색 잉크입니다. 중요한 제약 사항: 다크 모드를 사용하지 않습니다(사이트는 명백히 밝고 가벼움), 격자 기반의 뻣뻣한 레이아웃을 사용하지 않습니다(단일 칼럼 중앙 정렬), 공격적인 빨간색 오류 상태를 사용하지 않습니다(차분하고 친근함을 유지).

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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