큐레이션 · 오픈 · 무료

Matteroffact Fr

대규모 서체 스케일과 선명한 흑백 대비에 전적으로 의존하는 미니멀한 프랑스 크리에이티브 스튜디오 포트폴리오.

01

디자인 DNA

대규모 서체가 주요 전시물이고 인터랙션이 필수적인 상자 형태의 트리거로 축소된, 미니멀한 갤러리.

02

컬러

순백 배경에 블랙 텍스트와 테두리를 사용한 엄격한 단색 체계로, 그레이스케일을 시각적 계층에 활용합니다.

03

타이포그래피

grotesque-sans

• display160px · 400
• h136px · 400
• body22px · 400

모든 UI 및 서체 요소에 FreeSans 패밀리를 사용합니다. · 모든 텍스트의 font-weight을 400으로 유지합니다. · 본문과 부제목의 line-height를 1.2로 타이트하게 유지합니다.

04

여백

4px 그리드를 기반으로 하며, 상자 형태 요소의 18px 및 45px padding에 중점을 둔 느슨한 리듬.

05

표면 (라운드 / 그림자 / 경계선)

버튼이나 내비게이션 링크와 같은 상자 형태의 UI 요소에만 3px solid 블랙 테두리를 독점 사용합니다.

06

레이아웃

경계를 향해 밀어내는 대규모 서체 블록과 모서리에 위치한 상자 형태의 내비게이션을 가진 비대칭적, 모서리 정렬 레이아웃.

07

모션과 인터랙션

모든 속성에 대한 전환 · opacity 페이딩 · color 변화

클릭 가능한 상자 형태 요소에서 트리거되며, text-color 또는 border-color가 변경될 가능성이 높습니다. · 인터랙티브 요소에 표준 포인터 커서.

08

컴포넌트

• button 기본 HTML form 요소와 유사한, 내부 padding이 있는 3px solid 블랙 테두리의 단순 직사각형 상자.
• hero 네비게이션 요소로 작용하는 과장된 흐르는 서체로 뷰포트를 지배합니다.

09

보이스와 금지 목록

• 톤 직설적이고, 걸러지지 않으며, 약간 공격적.
• 헤드라인 Fact, Fake, Tab, Hack과 같은 라임이나 반복 단어를 사용하는 장난스럽고 거대한 서체.
• CTA 단순하고 기능적이며 시각적 장식이 배제된 스타일.

• rounded corners를 사용하지 마세요 — 스크린샷은 모든 버튼과 요소의 날카로운 0px 직사각형 모서리를 보여줍니다.
• drop shadows를 적용하지 마세요 — 스크린샷은 고도감이 없는 완전히 플랫한, 테두리 없는 UI를 보여줍니다.
• 색상 배경을 사용하지 마세요 — 스크린샷은 철저히 순수한 #ffffff 흰색 배경을 보여줍니다.
• 뚜렷한 특징을 가진 장식용 sans-serif를 사용하지 마세요 — 스크린샷은 중립적인 grotesque-sans의 균일한 사용을 보여줍니다.
• 모든 텍스트를 중앙 정렬하지 마세요 — 스크린샷은 공격적으로 왼쪽 정렬 및 오른쪽 정렬된 서체를 보여줍니다.
• 굵은 font-weight를 사용하지 마세요 — 스크린샷은 모든 텍스트가 정확히 regular font-weight 400으로 설정된 것을 보여줍니다.
• 피하기: Gradients
• 피하기: Soft shadows
• 피하기: Rounded corners
• 피하기: Bright accent colors
• 피하기: Decorative icons

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko