모든 스페시멘에 검은 배경 위의 흰색 텍스트를 엄격히 사용하여 높은 대비를 유지합니다. · 대형 전시 타이포그래피에 극단적인 트래킹(음의 자간)을 사용하여 시각적 밀도를 높입니다. · 볼드 웨이트는 특정 스페시멘 쇼케이스에만 엄격히 예약하고, UI는 400 웨이트로 엄격히 유지합니다.
04
여백
7px
14px
28px
56px
모든 패딩, 간격 및 마진에 적용되는 엄격한 7-point 기본 단위로, 매우 제약된 공간 그리드를 만듭니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 0px
md · 0px
lg · 24px
pill · 999px
평탄하고 깔끔한 모서리 또는 점선 윤곽선(히어로 그래픽에 사용), 그리고 상호작용 그리드 상태를 위해 간헐적으로 1px 또는 2px 실선 스트로크.
06
레이아웃
1280container
12columns
28pxgutter
768 / 1024breakpoints
데스크톱에서 엄격한 두 열 비대칭 그리드를 사용하며, 모바일에서는 단일 연속 수직 스택으로 완전히 접힙니다.
07
모션과 인터랙션
220msmicro
400mssmall
600msmedium
cubic-bezier(0.52, 0.07, 0.2, 0.99)easing
모든 구조적 변환 및 컨테이너 슬라이드에 매끄러운 cubic-bezier 이징 적용. · 메인 캐러셀 및 그리드 상태 변경을 위한 엄격한 0.45초에서 0.6초 트랜지션 지속 시간. · 상호작용 스페시멘 영역 위에 마우스를 올리면 맞춤 SVG 화살표로 즉각적인 커서 업데이트.
기본 포인터를 대체하여 상호작용 캐러셀 또는 그리드 내비게이션을 나타내는 맞춤 SVG 커서(좌우 화살표). · 스페시멘 상세 페이지로 안내하거나 이미지 캐러셀을 진행하며, 매끄러운 상태 변경을 유지.
08
컴포넌트
button전통적인 UI를 숨기고 직접적인 상호작용을 위해 맞춤 포인터 커서(좌우 화살표)를 사용하는 미니멀한 텍스트 전용 링크.
card화이트 배경 그리드와 뚜렷한 24px 모서리 둥글기로 프레임된 풀블랙 블록이 스페시멘 컨테이너 역할.
chip'업데이트됨'과 같은 상태를 위한 활기찬 옐로우 배경(#FFFF00)과 검정 텍스트를 특징으로 하는 고대비 직사각형 배지.
input제공된 스크린샷에 보이지 않음.
hero오버사이즈 세리프 스페시멘 그래픽과 맞춤 점선 윤곽선을 특징으로 하는 거대하고 지배적인 검은 컨테이너.
09
보이스와 금지 목록
톤전문적이고, 미니멀하며, 지극히 자신감 있는.
헤드라인단순한 헤딩보다 시각적 앵커 역할을 하는, 변명의 여지 없이 크고 트래킹이 넓은 스페시멘 이름.
CTA타이포그래피에 초점을 맞추기 위해 표준 버튼 미학을 의도적으로 피하는, 미묘하고 방해가 되지 않는 텍스트 링크.
보조 색상을 도입하지 마세요 — 스크린샷은 하나의 기능적 옐로우 배지를 제외하면 엄격한 비색상 검정 및 흰색 팔레트를 보여줍니다.
볼드 또는 무거운 UI 웨이트를 사용하지 마세요 — 스크린샷은 모든 내비게이션 및 UI 요소가 일관된 400 웨이트로 렌더링됨을 보여줍니다.
드롭 섀도우 또는 3D 효과를 적용하지 마세요 — 스크린샷은 깊이 단서가 없는 완전히 평탄한 그래픽 표면을 보여줍니다.
카드에 둥근 모서리를 사용하지 마세요 — 스크린샷은 검은 스페시멘 컨테이너가 24px 둥글기의 바깥 프레임 내에 완벽하게 정사각형으로 맞는 것을 보여줍니다.
밀집된 텍스트 단락을 만들지 마세요 — 스크린샷은 UI가 거의 전적으로 거대한 전시 타이포그래피와 드문 내비게이션 링크에 의존함을 보여줍니다.
상호작용 영역에서 기본 브라우저 커서를 사용하지 마세요 — 스크린샷은 좌우 내비게이션을 위한 명확히 맞춤 화살표 커서 이미지를 보여줍니다.
피하기: 스페시멘에서 주의를 산만하게 하는 표준 HTML 버튼이나 밝은 색상의 UI 요소를 사용하지 않기.
피하기: 다중 열 텍스트 블록을 피하고, 텍스트를 엄격히 단일 라인 또는 매우 짧고 강렬한 단편으로 유지하기.
205TF는 프리미엄 디지털 타입 파운드리 웹사이트로, 폰트 스페시멘이 스스로 말하게 하기 위해 날카로운 미니멀한 흑백 미학을 활용합니다. UI는 엄격한 7-point 간격 그리드와 12열 레이아웃에 의존하여 구조적이면서도 극적인 프레젠테이션을 보장합니다. 주요 색상은 순수 검정(#000000)과 흰색(#FFFFFF)으로 제한되며, '업데이트됨'과 같은 상태 배지에 절제되게 사용되는 단 하나의 고대비 옐로우(#FFFF00)가 있습니다. 타이포그래피 카테고리는 주로 트랜지셔널 세리프와 디도네 세리프이지만, UI 내비게이션은 모노와 유사한 기하학적 산세리프로 설정됩니다. 핵심 제약 조건은 다음과 같습니다: 보조 또는 장식 색상을 절대 도입하지 않으며, 모든 표준 UI 요소에서 엄격한 400 폰트 웨이트를 유지하며, 갤러리와 같은 레이아웃의 순수성을 보존하기 위해 전통적인 버튼 컴포넌트 대신 맞춤 SVG 커서와 텍스트 링크를 사용합니다.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
