큐레이션 · 오픈 · 무료

Aristide Benoist

극단적인 타이포그래피 스케일과 사진 그리드를 갖춘, 다크하고 모션 중심의 개발자 포트폴리오입니다.

01

디자인 DNA

어두운 갤러리에 걸린 시네마틱 필름 릴로, 비주얼 공예를 선보입니다.

02

컬러

주된 밝은 세이지 잉크와 가끔 사용되는 골든 악센트를 사용한 깊은 단색 다크 모드입니다.

03

타이포그래피

slab-serif · grotesque-sans · monospaced

• display337px · 400
• h1257px · 400
• body16px · 400
• caption10px · 400

04

여백

4px 단위의 명확한 리듬과, 탐색 및 연락처 영역에 넉넉한 padding을 적용합니다.

05

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

전체적으로 하드 엣지 테두리와 날카로운 모서리를 사용하며, 'ABOUT' 링크에는 두드러진 1px 하단 테두리가 있습니다.

06

레이아웃

수직 이미지의 수평 캐러셀과 고정된 탐색 요소를 중앙에 배치한 풀스크린 다크 캔버스입니다.

07

모션과 인터랙션

인터랙티브 요소에서의 부드러운 색상 및 배경 트랜지션

0.5s cubic-bezier 트랜지션을 사용한 미묘한 색상 변화. · 눈에 띄는 활성 상태 없이 즉각적인 탐색.

08

컴포넌트

• button 날카로운 대문자 스타일과 선택적 화살표 표시가 있는 텍스트 기반 링크입니다.
• card 수평 스크롤 컨테이너에 배치된 수직 사진 카드입니다.
• hero 흑백 사진의 수평 스크롤 그리드를 특징으로 하는 몰입감 있는 풀스크린 다크 영역입니다.

09

보이스와 금지 목록

• 톤 미니멀리스틱하고, 세련되며, 전문적입니다.
• 헤드라인 좁은 네거티브 트래킹이 적용된 대문자, 대형, 강렬한 인상의 디스플레이 타이포그래피.
• CTA 과하지 않은 대문자 텍스트 링크, 종종 단순한 밑줄이나 화살표와 함께.

• 부드러운 드롭 그림자를 사용하지 마십시오 — 스크린샷은 완전히 평평하고 하드 엣지 디자인을 보여줍니다.
• 둥근 모서리를 사용하지 마십시오 — 스크린샷은 모든 요소에 0px 반경의 날카로운 모서리를 보여줍니다.
• 다양한 색상을 사용하지 마십시오 — 스크린샷은 어두운 배경과 세이지 잉크의 제한된 팔레트를 보여줍니다.
• 작고 소심한 디스플레이 텍스트를 사용하지 마십시오 — 스크린샷은 뷰포트를 지배하는 대형 타이포그래피를 보여줍니다.
• 복잡한 배경 패턴을 사용하지 마십시오 — 스크린샷은 단색 어두운 채우기와 사진 콘텐츠를 보여줍니다.
• 지나치게 복잡한 탐색을 사용하지 마십시오 — 스크린샷은 단순한 밑줄이 있는 최소한의 'ABOUT' 링크를 보여줍니다.
• 피하기: 장식적인 아이콘 사용을 피하십시오
• 피하기: 불필요한 테두리를 피하십시오
• 피하기: 여러 가지 배경색을 피하십시오

10

팩 안의 실제 스크린샷

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

11

System Prompt

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