따뜻한 뉴트럴 베이스에 강렬한 다크 텍스트를 사용하며, 시각적 흥미를 위해 인터페이스 강조색보다는 컬러풀한 이미지에 의존합니다.
03
타이포그래피
transitional-serif · geometric-sans
display64px · 700
display-sm32px · 700
body18px · 400
caption12px · 400
디스플레이 텍스트는 강한 시각적 임팩트를 위해 고대비 트랜지셔널 세리프(Millik)를 사용합니다. · 본문 및 UI 텍스트는 뛰어난 가독성을 위해 깔끔한 기하학산세리프(Moderat)를 사용합니다. · 큰 디스플레이 텍스트는 컴팩트한 에디토리얼 느낌을 위해 좁은 자간(-0.8px ~ -1px)을 적용합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
여유로운
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 999px
최소화
06
레이아웃
1280container
12columns
24pxgutter
768 / 1024breakpoints
텍스트용 중앙 컬럼, 시각적 콘텐츠용 수평 스크롤 캐러셀
07
모션과 인터랙션
220msmicro
400mssmall
800msmedium
cubic-bezier(0.16, 1, 0.3, 1)easing
수평 스크롤 · 부드러운 트랜지션
인터랙티브 요소에 포인터 커서 · 드래그 가능한 캐러셀에 grab 커서
08
컴포넌트
button최소 무게감의 둥근 윤곽선 버튼
card오버레이 텍스트가 포함된 이미지 중심의 대형 카드
hero부제가 있는 대형 중앙 헤드라인
09
보이스와 금지 목록
톤친근한
헤드라인볼드하고 직접적이며 약간 장난기 있는
CTA대문자, 미니멀, 텍스트 기반
건조하고 회색 일색의 기업 팔레트를 사용하지 마세요 — 스크린샷은 따뜻한 복숭아색(#FCD2BA)과 생동감 있는 이미지를 보여줍니다.
헤드라인에 가늘고 라이트한 서체를 사용하지 마세요 — 스크린샷은 볼드하고 고대비의 세리프 디스플레이 폰트를 보여줍니다.
좁은 패딩과 밀집된 레이아웃을 적용하지 마세요 — 스크린샷은 요소 주변의 여유로운 여백을 보여줍니다.
감정 표현을 위해 UI 색상에만 의존하지 마세요 — 스크린샷은 분위기가 큐레이션된 사진과 일러스트레이션에서 나옴을 보여줍니다.
인터랙티브 요소에 날카롭고 각진 모서리를 사용하지 마세요 — 스크린샷은 5px 둥근 테두리를 보여줍니다.
시각적 계층을 평탄화하지 마세요 — 스크린샷은 큰 디스플레이 타입과 본문 텍스트 간의 명확한 구분을 유지합니다.
크리에이티브 스튜디오 또는 디자인 팀을 위한 친근한 에디토리얼 스타일 웹사이트를 디자인하세요. 레이아웃은 큐레이션된 디지털 매거진처럼 느껴야 하며, 순백 배경과 섹션 구분을 위한 보조 따뜻한 복숭아색(#FCD2BA)을 사용합니다. 디스플레이 헤드라인에는 볼드한 트랜지셔널 세리프(Millik 등), 본문에는 깔끔한 기하학산세리프(Moderat 등)를 사용하고, 큰 타입에는 좁은 음수 자간을 적용합니다. 핵심 인터랙션 모델은 시각적 작업을 소개하기 위한 수평 스크롤 캐러셀을 특징으로 하며, 'grab' 커서를 사용합니다. 다음은 철저히 피해야 합니다: 무거운 그림자, 밀집/비좁은 레이아웃, 건조한 기업 팔레트, 단일 강조색에만 의존한 UI — 시각적 흥미는 포트폴리오 작업의 풍부하고 컬러풀한 이미지에서 나와야 합니다.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
