← OpenDesign
큐레이션 · 오픈 · 무료
Egstad
그래픽 디자이너이자 웹 개발자를 위한 대담하고 표현적인 개인 포트폴리오입니다.
Portfolio Bold Typography Studio Clean Restraint
01
디자인 DNA
그래픽 디자인 웹 개발 표현적 지속적 장난기 있는
대담한 타이포그래피 문구와 장난스러운 대화형 요소를 갖춘 그래픽 디자이너의 개인 포트폴리오입니다.
02
컬러
#252422Ink
#e2e0d9BG
#808080Muted
rgba(37, 36, 34, 1)Line
따뜻한 오프 화이트 배경을 가진 고대비 단색입니다.
03
타이포그래피
grotesque-sans · humanist-sans · monospace
display 398px · 400body-lg 58px · 400body 16px · 400대담한 시각적 문구를 만들기 위해 주요 브랜드 이름에 극단적인 스케일을 사용합니다. · 내비게이션 텍스트는 대문자로 넓은 자간을 적용합니다. · 본문은 깔끔하고 읽기 쉬운 산세리프 스타일을 유지합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
대담한 타이포그래피가 숨 쉴 수 있도록 넉넉한 여백을 두되, 내비게이션과 푸터 요소 내부의 간격은 더 좁게 조정합니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 36px
lg · 1440px
pill · 999px
1px solid rgba(37, 36, 34, 1)
rgba(0, 0, 0, 0.063) 0px 1.3px 5.3px 0px · rgba(0, 0, 0, 0.09) 0px 4.5px 17.9px 0px · rgba(0, 0, 0, 0.15) 0px 20px 80px 0px
06
레이아웃
1440 container
12 columns
24px gutter
768 / 1024 breakpoints
단일 컬럼의 히어로 뒤에 바이오와 푸터를 위한 다중 컬럼 격자가 옵니다.
07
모션과 인터랙션
200ms micro
400ms small
750ms medium
cubic-bezier(0.375, 0.39, 0, 1.175) easing
대화형 요소의 느리고 부드러운 페이드인 및 색상 전환. · 부유 요소의 장난스러운 transform 기반 hover 효과.
대화형 요소의 미묘한 색상 변화와 transform 기반 움직임. · 배경과 테두리 색상의 매끄러운 전환.
08
컴포넌트
button 진한 배경과 흰색 텍스트를 사용한 알약 모양으로, hover 전환을 포함합니다. card 제공된 뷰에서 두드러지게 나타나지 않습니다. chip 제공된 뷰에서 두드러지게 나타나지 않습니다. input 제공된 뷰에서 두드러지게 나타나지 않습니다. hero 상호작용하는 겹치는 3D 같은 부유 요소를 포함한 거대하고 전체 너비의 타이포그래피 히어로입니다.
09
보이스와 금지 목록
톤 자신감 있고 개인적이며 약간 장난기 있는 어조. 헤드라인 시각 영역을 지배하는 매우 굵고 대규모의 타이포그래피. CTA 알약 모양 버튼으로 제시되는 직접적이고 간결한 스타일. 작고 절제된 헤드라인을 사용하지 마세요 — 스크린샷은 화면을 가득 채우는 거대한 타이포그래피 문구를 보여줍니다. 복잡하거나 선명한 팔레트를 사용하지 마세요 — 스크린샷은 엄격히 절제된 단색 및 오프 화이트 계획을 보여줍니다. 대화형 요소에 날카로운 직사각형 모서리를 사용하지 마세요 — 스크린샷은 높은 border-radius를 가진 두드러진 알약 모양 버튼을 보여줍니다. 전시용으로 범용적이고 기본 시스템 폰트를 사용하지 마세요 — 스크린샷은 커스텀 Highly stylized grotesque sans-serif를 보여줍니다. 여백을 피하지 마세요 — 스크린샷은 모든 콘텐츠 블록 주위의 넉넉한 마진과 padding을 보여줍니다. 복잡하고 지저분한 레이아웃을 사용하지 마세요 — 스크린샷은 깔끔하고 집중된 단일 컬럼 및 다중 컬럼 격자 구조를 보여줍니다. 피하기: 격식 있는 기업 언어 피하기: 작고 절제된 헤드라인 피하기: 복잡한 팔레트
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
This is a personal portfolio for a graphic designer and web developer. It features extreme typographic scale and a restrained color palette. Key colors are a warm off-white background (#e2e0d9) and near-black text (#252422). The primary font is a custom grotesque sans-serif, with a secondary humanist sans-serif for body copy. Critical donts: Do not use small, understated headlines—use massive, screen-filling type. Do not use a complex color palette—stick to strict monochrome. Do not use sharp corners on buttons—use pill-shaped, highly rounded forms.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 강력하고 기억에 남는 포트폴리오를 만들기 위한 극단적인 타이포그래피 스케일과 절제의 숙련된 활용이 인상적이라 포함할 가치가 있습니다.