주 타이프페이스는 기하학적 산세리프(Montserrat 계열)이며, 주요 웨이트는 300입니다. · 브랜딩 요소를 위해 보조 디스플레이 산세리프로 강조합니다. · 네비게이션과 기능 태그에 대문자 변환을 광범위하게 적용합니다. · 넓은 느낌을 위해 큰 숫자 디스플레이에는 넉넉한 트래킹을 적용합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
수직 리듬은 115px의 극도로 넉넉한 패딩 블록으로 확립하여, 차분하고 호흡이 편안한 레이아웃을 만듭니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 22px
pill · 999px
알약 모양 버튼과 작은 태그 컴포넌트에 1px solid 보더를 사용합니다.
06
레이아웃
1280container
12columns
24pxgutter
768 / 1024breakpoints
표준 열 정렬을 깨는 비대칭 메이슨리 스타일 그리드로, 편집적이고 잡지 같은 흐름을 만들어냅니다.
07
모션과 인터랙션
400msmicro
600mssmall
1000msmedium
cubic-bezier(0.76, 0, 0.24, 1)easing
이미지에 드라마틱한 시네마틱 리빌 효과를 위해 clip-path 전환을 적극적으로 활용합니다. · 부드러운 페이지 전환을 위해 0.4s에서 1.5s 사이의 지속 시간을 가진 페이드인 및 페이드아웃 패턴.
부드러운 0.4s ease-out 전환으로 투명도와 배경색 변경. · 지연된 transform 전환을 동반하는 즉각적인 커서 포인터 반응.
08
컴포넌트
button대문자 텍스트와 넉넉한 수평 패딩을 가진 알약 모양 아웃라인 버튼.
card무거운 보더나 그림자가 아닌, 크고 고해상도 사진 콘텐츠로 주로 정의되는 미니멀리스트 카드.
chip카테고리 레이블용 대문자 텍스트와 얇은 1px 보더를 가진 작은 알약 모양 태그.
input밝은 배경에 자연스럽게 녹아드는 미니멀리스트 폼 필드.
hero절대 위치 타이포그래피와 함께 주요 초점 역할을 하는 전체 뷰포트 시네마틱 이미지.
09
보이스와 금지 목록
톤세련되고, 자신감 있으며, 고요합니다.
헤드라인미니멀리스트로, 종종 전통적인 텍스트 헤더 대신 큰 숫자 디스플레이(타임스탬프)를 활용합니다.
CTA대문자 트래킹을 가진 절제된 알약 모양 버튼.
밝고 채도 높은 포인트 색상을 사용하지 마세요 — 스크린샷은 사진이 지배하는 엄격한 단색 팔레트를 보여줍니다.
카드에 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 이미지만으로 정의된 플랫하고 보더 없는 요소를 보여줍니다.
빽빽하고 복잡한 레이아웃을 사용하지 마세요 — 스크린샷은 거대한 여백(115px 수직 패딩)과 호흡이 편안한 간격을 보여줍니다.
디스플레이용으로 과도하게 스타일화되거나 장식적인 세리프 폰트를 사용하지 마세요 — 스크린샷은 모든 타이포그래피에 엄격한 기하학적 산세리프를 보여줍니다.
UI 컴포넌트에 복잡한 다단계 border-radius를 사용하지 마세요 — 스��크린샷은 엄격한 알약 모양(완전히 둥근) 버튼을 보여줍니다.
바쁘고 복잡한 배경을 사용하지 마세요 — 스크린샷은 모든 텍스트 중심 섹션에 단색 오프 화이트 배경(#F5F4F3)을 보여줍니다.
피하기: 밝고 채도 높은 색상이나 자극적인 그래디언트를 사용하지 마세요.
피하기: 무거운 드롭 섀도우나 복잡한 드롭 섀도우 보더에 의존하지 마세요.
피하기: 여러 작은 요소가 있는 지나치게 복잡한 그리드를 사용하지 마세요. 대규모 포토그래픽 영역을 우선시하세요.
피하기: 장식적이거나 과도하게 스타일화된 세리프 폰트를 사용하지 마세요.
피하기: 빽빽하고 작은 텍스트를 사용하지 마세요. 모든 요소 사이에 넉넉한 여백을 유지하세요.
피하기: 작은 모서리 반경을 가진 둥근 사각형을 사용하지 마세요. 엄격한 알약 모양이나 날카로운 모서리를 고수하세요.
'ALBA'라는 프리미엄 도시 주거 개발사를 위해 디자인하고 있습니다. 시각적 언어는 넓고 시네마틱한 사진, 넉넉한 여백, 엄격한 단색 팔레트로 정의됩니다. 주요 배경은 따뜻한 오프 화이트(#F5F4F3)이며 텍스트는 순수 블랙(#000000)입니다. 타이포그래피는 세련되고 가벼운 느낌을 위해 밝은 웨이트(300)의 기하학적 산세리프에 크게 의존합니다. UI 요소, 특히 버튼과 태그는 얇은 1px 아웃라인과 대문자 트래킹을 가진 엄격한 알약 모면입니다. 이미지 리빌을 위해 복잡한 clip-path 애니메이션이 사용됩니다. 주요 제약 조건: 밝은 포인트 색상, 드롭 섀도우, 또는 복잡한 다열 그리드를 피하세요. 항상 대규모 포토그래픽 영역과 극단적인 수직 간격(115px 패딩)을 우선시하여 럭셔리하고 차분한 느낌을 유지하세요. 장식적이거나 무거운 디스플레이 폰트는 절대 사용하지 마세요.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
