← OpenDesign
큐레이션 · 오픈 · 무료
Matteroffact Fr
대규모 서체 스케일과 선명한 흑백 대비에 전적으로 의존하는 미니멀한 프랑스 크리에이티브 스튜디오 포트폴리오.
Studio Editorial Photographic Bold Typography Clean
01
디자인 DNA
크리에이티브 에이전시 미니멀리즘 서체 중심 예술적 직설적
대규모 서체가 주요 전시물이고 인터랙션이 필수적인 상자 형태의 트리거로 축소된, 미니멀한 갤러리.
02
컬러
#000000Ink
#a0a0a0Ink soft
#ffffffBG
#c0c0c0Muted
rgba(0,0,0,1.0)Line
순백 배경에 블랙 텍스트와 테두리를 사용한 엄격한 단색 체계로, 그레이스케일을 시각적 계층에 활용합니다.
03
타이포그래피
grotesque-sans
display 160px · 400h1 36px · 400body 22px · 400모든 UI 및 서체 요소에 FreeSans 패밀리를 사용합니다. · 모든 텍스트의 font-weight을 400으로 유지합니다. · 본문과 부제목의 line-height를 1.2로 타이트하게 유지합니다.
04
여백
4px
8px
16px
18px
24px
32px
48px
64px
4px 그리드를 기반으로 하며, 상자 형태 요소의 18px 및 45px padding에 중점을 둔 느슨한 리듬.
05
표면 (라운드 / 그림자 / 경계선)
sm · 0px
md · 0px
lg · 0px
pill · 0px
버튼이나 내비게이션 링크와 같은 상자 형태의 UI 요소에만 3px solid 블랙 테두리를 독점 사용합니다.
06
레이아웃
1920 container
12 columns
18px gutter
768 / 1024 breakpoints
경계를 향해 밀어내는 대규모 서체 블록과 모서리에 위치한 상자 형태의 내비게이션을 가진 비대칭적, 모서리 정렬 레이아웃.
07
모션과 인터랙션
200ms micro
250ms small
1000ms medium
cubic-bezier(0.25, 0.1, 0.25, 1.0) easing
모든 속성에 대한 전환 · 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
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
Matter of Fact는 전통적인 UI의 세련됨보다 원시적인 서체 스케일을 우선시하는 미니멀한 프랑스 크리에이티브 스튜디오 포트폴리오입니다. #ffffff 배경에 #000000 잉크를 사용하는 엄격한 흑백 팔레트와, 일정한 400 weight를 유지하는 중립적인 FreeSans 서체에 기반합니다. 내비게이션과 인터랙티브 요소는 모든 현대적인 장식을 거부하는, 3px solid 블랙 테두리의 선명한 상자로 축소됩니다. 핵심 금지 사항: 절대로 rounded corners를 사용하지 마세요 (UI는 완전히 날카롭습니다), 절대로 shadows나 gradients를 적용하지 마세요 (미학은 완전히 플랫합니다), 그리고 절대로 굵은 font-weight를 사용하지 마세요 (모든 텍스트는 regular로 유지됩니다). 레이아웃은 대규모, 비대칭적 서체를 사용하여 사용자의 시선을 안내하며, 원시적이면서도 의도적으로 다듬어지지 않은 느낌을 만들어냅니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 사이트는 반디자인의 마스터클래스로, 극단적인 서체와 원시적인 HTML 스타일의 테두리를 사용하여 매우 기억에 남고 예술적인 포트폴리오를 만듭니다.