큐레이션 · 오픈 · 무료
Simonfosters Website
절제된 미학으로 프리미엄 케이스 스터디를 보여주는 시니어 프로덕트 디자이너의 포트폴리오
PortfolioCleanPremiumTypographyAgency
01
디자인 DNA
포트폴리오시니어 프로덕트 디자이너케이스 스터디깔끔한전문적인
조용한 자신감과 정확한 타이포그래피로 제시된 디자인 작품의 큐레이션된 갤러리
02
컬러
#393737Ink
#F6F7F6BG
rgba(57,55,55,0.5)Muted
rgb(57,55,55)Line
미세한 노이즈 텍스처가 있는 중립적인 따뜻한 그레이를 사용하며, 모든 색상은 프로젝트 이미지에서 비롯됩니다
03
타이포그래피
grotesque-sans · monospace
- display
61px · 400 - heading
55px · 400 - subhead
24px · 400 - body
16px · 400 - small
14px · 400
모든 텍스트는 일관되게 두께 400을 사용합니다 · 대문자는 레이블과 태그에 절제 있게 사용됩니다 · 인상을 위해 디스플레이 사이즈의 줄간격을 타이트하게 조정합니다
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
섹션 간 일관된 32px 및 96px 간격으로 여유로운 수직 간격을 두어 숨 쉬는 공간을 만듭니다
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 48px
버튼과 태그에 여유로운 둥근 모서리를 둔 1px 실선 borders(어두운 그레이 #393737)
06
레이아웃
1280container
12columns
32pxgutter
768 / 1024breakpoints
여유로운 패딩과 중앙 정렬 콘텐츠를 둔 단일 열 포트폴리오 레이아웃
07
모션과 인터랙션
200msmicro
200mssmall
800msmedium
cubic-bezier(0.645, 0.045, 0.355, 1)easing
모든 인터랙티브 요소에서 부드러운 0.2초 전환 · 모든 전환은 일관된 cubic-bezier 완화를 사용합니다
맞춤 cubic-bezier 완화를 사용하여 0.2초 내의 미세한 불투명도 또는 색상 전환 · 23개 인터랙티브 요소에서 포인터 커서를 둔 표준 클릭 동작
08
컴포넌트
- button 여유로운 패딩(16px 32px)과 48px border-radius을 둔 둥근 형태의 outline 버튼으로, 투명 배경에 어두운 텍스트
- card 노이즈 텍스처 그라디언트 배경과 내장된 브라우저 스크린샷을 둔 전체 폭 프로젝트 쇼케이스
- chip 분류용 1px 실선 border과 타이트한 패딩을 둔 소문자 대문자 레이블 태그
- hero 연도 범위, 태그 레이블, 전체 폭 프로젝트 미리보기 이미지 위의 설명적인 부제목을 둔 큰 타이포그래피 프로젝트 제목
09
보이스와 금지 목록
- 톤 화려하지 않으면서도 전문적이고 절제된 자신감
- 헤드라인 연도 범위를 포함한 크고 깔끔한 grotesque-sans 제목으로, 절제된 우아함으로 제시
- CTA 둥근 형태의 outline 버튼에 간단한 대문자 텍스트 레이블
- 여러 글꼴 두께를 사용하지 마세요—스크린샷은 전체적으로 균일한 두께 400을 보여줍니다
- 장식 그래픽이나 일러스트레이션을 추가하지 마세요—스크린샷은 타이포그래피와 프로젝트 이미지만 보여줍니다
- UI에서 밝은 강조 색상을 사용하지 마세요—스크린샷은 프로젝트 콘텐츠에서만 색상이 오는 중립적인 그레이를 보여줍니다
- 복잡한 다중 열 레이아웃을 만들지 마세요—스크린샷은 깔끔한 단일 열 중앙 정렬 레이아웃을 보여줍니다
- 카드나 요소에 그림자를 추가하지 마세요—스크린샷은 완전히 평면적이고 그림자가 없는 표면을 보여줍니다
- 어디에도 세리프 글꼴을 사용하지 마세요—스크린샷은 깔끔한 선을 가진 grotesque-sans 타이포그래피만 독점적으로 보여줍니다
- 버튼에 배경 색상을 추가하지 마세요—스크린샷은 outline 스타일의 둥근 버튼만 보여줍니다
- 피하기: 강렬한 색상
- 피하기: 장식 요소
- 피하기: 복잡한 애니메이션
- 피하기: 지나치게 바쁜 레이아웃
10
팩 안의 실제 스크린샷
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
これは清潔で控えめな美学を持つシニアプロダクトデザイナーのポートフォリオサイトです。デザインは微妙なノイズテクスチャを持つ中立的な温かいグレー（#F6F7F6）背景とダークシャーリー（#393737）のタイポグラフィを使用しています。すべてのテキストはNeue Montreal（グロテスク Sansカテゴリ）のウェイト400を使用し、一貫した洗練された外観を作り出しています。プロジェクトタイトルは Tight leading を使用して大きく（55-61px）表示されます。レイアウトは単一列で、セクション間に十分な96pxの間隔があります。ボタンは48pxのボーダーラディウスと1pxの実線ボーダーを持つピル型です。アクセントカラーはUI自体には存在しません—色はプロジェクトショーケース画像から独占的に来ます。重要な禁止事項：複数のフォントウェイトを使用しない、影を追加しない、装飾グラフィックを使用しない、パレットを厳密に中立的なグレーに保つこと。サイトはビジュアルの複雑さよりもコンテンツの明瞭さと余白を優先します。
en · zh-CN · zh-TW · ja · ko