화려한 다색 그래디언트가 주요 배경으로 사용되어, 고대비 다크 타이포그래피를 위한 대담하고 표현적인 기반을 만듭니다.
03
타이포그래피
geometric-sans
display160px · 500
body16px · 400
메인 제목은 촘촘한 자간의 큰 기하학적 산세리프를 사용합니다. · 작은 텍스트는 동일한 기하학적 산세리프 패밀리의 가벼운 무게로 설정됩니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
레이아웃은 넉넉한 여백을 사용하여 콘텐츠를 모서리와 상단으로 밀어내고, 큰 전시 타이포그래피를 기준으로 강한 수직 리듬을 만듭니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 0px
md · 0px
lg · 0px
pill · 0px
보이는 테두리나 둥근 모서리 없음; 디자인은 그래디언트 배경과 타이포그래피에 의존하여 구조를 만듭니다.
06
레이아웃
1440container
1columns
40pxgutter
768 / 1024breakpoints
비대칭적이고 엣지투엣지 레이아웃. 작은 텍스트는 좌측 상단 모서리에 고정되며, 거대한 전시 타이포그래피는 우측 상단을 지배합니다.
07
모션과 인터랙션
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
그래디언트 배경은 은은하고 느린 애니메이션 또는 변화가 있을 가능성이 높습니다.
작은 텍스트 링크는 hover 시 은은한 색상 변화나 밑줄이 나타날 가능성이 높습니다. · 표준 링크 네비게이션.
08
컴포넌트
button보이는 전통적인 버튼 없음; 네비게이션은 작은 평문 텍스트 링크로 구성됩니다.
card이 히어로 뷰에서는 보이는 카드 없음.
chip보이는 칩 없음.
input보이는 입력 필드 없음.
hero화려한 그래디언트 배경, 작은 모서리 고정 텍스트, 그리고 거대하고 과장된 전시 타이포그래피가 지배하는 전체 뷰포트 히어로 섹션.
09
보이스와 금지 목록
톤직설적이고 자신감 있으며 미니멀합니다.
헤드라인극도로 크고, 굵으며, 자간이 촘촘하여 강력한 시각적 메시지를 전달합니다.
CTA수수하고 작은 텍스트 링크가 주변에 배치됩니다.
작고 중앙 정렬된 제목을 사용하지 마세요 — 스크린샷은 뷰포트를 지배하는 거대하고 좌측 정렬된 전시 타이포그래피를 보여줍니다.
단순한 흰색 또는 단색 배경을 사용하지 마세요 — 스크린샷은 주요 표면으로 화려한 다색 그래디언트를 보여줍니다.
복잡한 네비게이션 바를 사용하지 마세요 — 스크린샷은 모서리에 고정된 간단한 작은 텍스트 링크를 보여줍니다.
드롭 섀도우 또는 카드 테두리를 사용하지 마세요 — 스크린샷은 보이는 섀도우나 테두리 컴포넌트가 없는 플랫 디자인을 보여줍니다.
둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 테두리 없는 디자인 미학을 보여줍니다.
여러 강조 색상을 사용하지 마세요 — 스크린샷은 그래디언트 자체에 의존하며, 뚜렷한 고채도 강조 색상이 없습니다.
피하기: 혼란스러운 요소
피하기: 작은 제목 텍스트
피하기: 복잡한 네비게이션 메뉴
피하기: 테두리와 구분선
11
System Prompt
이것은 디자인 컨설팅의 퍼스널 포트폴리오입니다. 디자인은 대담하고 표현적이며, 화려한 보라색에서 분홍색으로의 그래디언트 배경과 뷰포트를 지배하는 거대한 다크 기하학적 산세리프 타이포그래피로 정의됩니다. 네비게이션은 최소한으로, 모서리에 작은 텍스트 링크로 구성됩니다. 핵심 원칙은 미니멀한 구조로 맥시멀한 색상을 구현하는 것입니다. 핵심 헥스 색상은 그래디언트 자체와 다크 잉크(#1F3640)입니다. 폰트 카테고리는 기하학적 산세리프입니다. 중요하지 않게 할 것: 절대로 작고 중앙 정렬된 제목을 사용하지 마세요; 절대로 단순한 흰색 배경을 사용하지 마세요; 컴포넌트에 테두리, 드롭 섀도우 또는 둥근 모서리를 추가하지 마세요.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
