날카롭고 현대적인 느낌을 위해 큰 디스플레이 헤드라인에 타이트한 네거티브 트래킹을 사용합니다. · 읽기 경험을 차분하게 유지하기 위해 본문 텍스트의 일관된 무게 400을 유지합니다. · 프로젝트 제목은 설명과 구별하기 위해 약간 더 큰 크기나 볼드 무게를 사용해야 합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
128px
넉넉한 수직 패딩과 일관된 수평 간격이 개방적이고 숨 쉬는 레이아웃을 만듭니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 16px
lg · 24px
pill · 999px
미묘한 구조적 구분을 위한 1px solid rgba(23,23,23,0.1).
0 4px 24px rgba(0,0,0,0.08)
06
레이아웃
1280container
12columns
24pxgutter
768 / 1024breakpoints
중심에 정렬된 히어로 섹션과 그 아래에 수평으로 스크롤 가능한 프로젝트 카드 그리드.
07
모션과 인터랙션
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
인터랙티브 요소에서 부드러운 색상 및 배경 전환. · 로딩이나 상태 변화를 위한 미묘한 불투명도 페이드.
인터랙티브함을 나타내기 위한 미묘한 색상 변화 또는 불투명도 변경. · 약간의 스케일 또는 색상 조정을 통한 즉각적인 시각적 피드백.
08
컴포넌트
button최소한의 테두리와 둥근 모서리를 가진 알약 모양 버튼.
card넉넉한 둥근 모서리와 고품질 프로젝트 이미지를 가진 큰 직사각형 카드.
chip해당 없음
input해당 없음
hero큰 헤드라인과 설명적인 부제가 포함된 중심 정렬 텍스트 블록으로, 프로젝트 그리드 위에 배치됨.
09
보이스와 금지 목록
톤전문적이고 절제되며 자신감 있는.
헤드라인작업의 영향력과 미래 지향적인 성격에 초점을 맞춘 직접적이고 약간 시적인.
CTA최소한이며 명확한, 종종 탐색 또는 프로젝트 링크에 통합됨.
순백 배경을 사용하지 마세요 — 스크린샷은 따뜻하고 약간 핑크빛이 도는 오프 화이트를 보여줍니다.
UI에서 밝고 채도 높은 강조 색상을 사용하지 마세요 — 사이트는 프로젝트 이미지에 의존하여 색상을 나타냅니다.
무거운 그림자를 사용하지 마세요 — 디자인은 아주 미묘하고 부드러운 고도감(있다면)을 사용합니다.
헤드라인에 세리프 글꼴을 사용하지 마세요 — 디스플레이 타이포그래피는 깔끔한 기하학적 그로테스크 산세리프입니다.
좁고 비좁은 간격을 사용하지 마세요 — 레이아웃은 넉넉한 여백과 패딩을 우선시합니다.
장식적인 테두리나 장식을 사용하지 마세요 — 시각적 언어는 엄격히 기능적이고 미니멀합니다.
이것은 Kirschberg를 위한 세련된 디자인 포트폴리오로, 고급 제품 및 브랜드 작업을 선보입니다. 시각적 정체성은 깔끔한 에디토리얼 미학, 따뜻한 오프 화이트 배경(#FAF4F4), 어두운 잉크 텍스트(#171717)을 기반으로 구축되었습니다. 타이포그래피는 헤드라인용 그로테스크 산세리프와 본문용 휴머니스트 산세리프를 특징으로 합니다. 레이아웃은 넉넉한 패딩과 수평으로 스크롤 가능한 프로젝트 그리드를 사용하여 넓습니다. 핵심 제약 사항: 순백 배경 사용 금지, UI에 밝은 강조 색상 사용 금지, 무거운 그림자 또는 장식적 테두리 사용 금지, 미니멀하고 전문적인 톤 유지.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
