크리에이티브 테크놀로지스트를 위한 현대적 브루탈리즘 포스터 역할을 하는 디지털 포트폴리오입니다.
02
컬러
#FFFFFFInk
#000000BG
rgba(255,255,255,1.0)Line
악센트 컬러를 사용하지 않는 엄격한 모노크롬이며, 계층은 타이포그래피 스케일과 두께에 전적으로 의존합니다.
03
타이포그래피
geometric-sans · grotesque-sans
display-xl144px · 700
display-lg97px · 700
body16px · 400
caption10px · 400
대형 디스플레이 텍스트에는 컴팩트하고 임팩트 있는 외관을 위해 타이트한 네거티브 자간을 사용합니다. · 구조화된 브루탈리즘 느낌을 유지하기 위해 디스플레이 텍스트와 내비게이션 링크에 대문자를 광범위하게 사용합니다. · 본문 텍스트는 복잡한 배경 대비 가독성을 위해 표준 16px를 유지해야 합니다.
04
여백
4px
8px
12px
16px
20px
24px
32px
48px
64px
모든 간격에 4px 기본 스케일을 사용하며, 12px와 20px가 내부 컴포넌트 패딩의 주요 거터로 활용됩니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 0px
md · 0px
lg · 0px
pill · 999px
보이는 테두리는 없으며, 구분은 공간적 배치와 타이포그래피를 통해 달성됩니다.
06
레이아웃
4columns
20pxgutter
768 / 1024breakpoints
복잡한 배경이 있는 풀블리드 몰입형 레이아웃으로, 고정 상단 내비게이션 바와 유연한 그리드에 분산된 콘텐츠가 특징입니다.
07
모션과 인터랙션
0msmicro
300mssmall
800msmedium
cubic-bezier(0.645, 0.045, 0.355, 1)easing
인터랙티브 요소와 배경 컴포넌트에 약간의 지연이 있는 transform 및 background-size 전환이 적용됩니다. · 배경 질감의 변화를 통해 섬세하고 지속적인 모션이 암시됩니다.
인터랙티브 요소는 'cursor: pointer'를 사용하여 클릭 가능성을 나타내며, transform 전환을 통해 섬세한 피드백을 제공합니다. · CSS 전환을 통한 즉각적인 시각적 상태 변화를 가진 표준 포인터 이벤트입니다.
08
컴포넌트
button전통적인 버튼 테두리나 배경 없이 포인터 커서와 대문자 스타일을 사용하는 텍스트 기반 링크입니다.
card전통적인 카드는 없으며, 정보는 배경 위에 직접 떠 있는 텍스트 블록으로 표시됩니다.
chip보이는 칩이나 태그는 없습니다.
input랜딩 페이지에 보이는 폼 입력은 없습니다.
hero복잡하고 질감 있는 배경 위에 겹쳐진 거대한 다중 라인 타이포그래피 문구가 지배하는 전체 뷰포트 몰입형 섹션입니다.
09
보이스와 금지 목록
톤크래프트와 기술에 초점을 맞춘 전문적이고 직접적이며 자신감 있는 어조입니다.
헤드라인주요 초점 역할을 하는 크고 대문자이며 두꺼운 두께의 타이포그래피 문구입니다.
CTA현재 페이지에서 벗어나는 내비게이션을 나타내기 위해 외부 링크 아이콘을 사용하는 간결한 텍스트 링크입니다.
악센트용 세 번째 색상을 도입하지 마세요 — 스크린샷은 블랙 온 화이트의 엄격한 모노크롬 팔레트를 보여줍니다.
대형 텍스트에 넓은 자간을 사용하지 마세요 — 스크린샷은 밀집된 브루탈리즘 외관을 위한 타이트한 네거티브 자간을 보여줍니다.
디스플레이 텍스트에 세리프 또는 스크립트 서체를 사용하지 마세요 — 스크린샷은 모든 주요 제목에 기하학적 산세리프를 보여줍니다.
인터랙티브 요소에 테두리, 그림자 또는 배경색을 적용하지 마세요 — 스크린샷은 일반 텍스트 링크를 보여줍니다.
전통적인 버튼 컴포넌트를 사용하지 마세요 — 스크린샷은 포인터 커서가 있는 대문자 텍스트 링크를 대신 보여줍니다.
주요 문구에 다중 열 그리드를 사용하지 마세요 — 스크린샷은 거대한 단일 열 타이포그래피 블록을 보여줍니다.
엄격한 모노크롬 팔레트(#000000 배경, #FFFFFF 텍스트)와 강렬한 브루탈리즘 타이포그래피를 사용하는 인터랙티브 개발자 포트폴리오 사이트입니다. 이 디자인은 기하학적 산세리프로 분류되는 거대한 대문자 디스플레이 폰트와 본문 텍스트용 깔끔한 그로테스크 산세리프의 조합에 의존합니다. 레이아웃은 몰입형이며 풀블리드로, 카드나 컬러 버튼과 같은 전통적인 UI 컴포넌트를 피합니다. 인터랙션 피드백은 매끄러운 0.3s cubic-bezier 전환을 통해 제공됩니다. 핵심 제약 조건: 악센트 컬러를 절대 사용하지 마세요, 대형 텍스트에 넓은 자간을 절대 사용하지 마세요, 전통적인 테두리 버튼을 절대 사용하지 마세요.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
