큐레이션 · 오픈 · 무료

Egstad

그래픽 디자이너이자 웹 개발자를 위한 대담하고 표현적인 개인 포트폴리오입니다.

01

디자인 DNA

대담한 타이포그래피 문구와 장난스러운 대화형 요소를 갖춘 그래픽 디자이너의 개인 포트폴리오입니다.

02

컬러

따뜻한 오프 화이트 배경을 가진 고대비 단색입니다.

03

타이포그래피

grotesque-sans · humanist-sans · monospace

• display398px · 400
• body-lg58px · 400
• body16px · 400

대담한 시각적 문구를 만들기 위해 주요 브랜드 이름에 극단적인 스케일을 사용합니다. · 내비게이션 텍스트는 대문자로 넓은 자간을 적용합니다. · 본문은 깔끔하고 읽기 쉬운 산세리프 스타일을 유지합니다.

04

여백

대담한 타이포그래피가 숨 쉴 수 있도록 넉넉한 여백을 두되, 내비게이션과 푸터 요소 내부의 간격은 더 좁게 조정합니다.

05

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

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

레이아웃

단일 컬럼의 히어로 뒤에 바이오와 푸터를 위한 다중 컬럼 격자가 옵니다.

07

모션과 인터랙션

대화형 요소의 느리고 부드러운 페이드인 및 색상 전환. · 부유 요소의 장난스러운 transform 기반 hover 효과.

대화형 요소의 미묘한 색상 변화와 transform 기반 움직임. · 배경과 테두리 색상의 매끄러운 전환.

08

컴포넌트

• button 진한 배경과 흰색 텍스트를 사용한 알약 모양으로, hover 전환을 포함합니다.
• card 제공된 뷰에서 두드러지게 나타나지 않습니다.
• chip 제공된 뷰에서 두드러지게 나타나지 않습니다.
• input 제공된 뷰에서 두드러지게 나타나지 않습니다.
• hero 상호작용하는 겹치는 3D 같은 부유 요소를 포함한 거대하고 전체 너비의 타이포그래피 히어로입니다.

09

보이스와 금지 목록

• 톤 자신감 있고 개인적이며 약간 장난기 있는 어조.
• 헤드라인 시각 영역을 지배하는 매우 굵고 대규모의 타이포그래피.
• CTA 알약 모양 버튼으로 제시되는 직접적이고 간결한 스타일.

• 작고 절제된 헤드라인을 사용하지 마세요 — 스크린샷은 화면을 가득 채우는 거대한 타이포그래피 문구를 보여줍니다.
• 복잡하거나 선명한 팔레트를 사용하지 마세요 — 스크린샷은 엄격히 절제된 단색 및 오프 화이트 계획을 보여줍니다.
• 대화형 요소에 날카로운 직사각형 모서리를 사용하지 마세요 — 스크린샷은 높은 border-radius를 가진 두드러진 알약 모양 버튼을 보여줍니다.
• 전시용으로 범용적이고 기본 시스템 폰트를 사용하지 마세요 — 스크린샷은 커스텀 Highly stylized grotesque sans-serif를 보여줍니다.
• 여백을 피하지 마세요 — 스크린샷은 모든 콘텐츠 블록 주위의 넉넉한 마진과 padding을 보여줍니다.
• 복잡하고 지저분한 레이아웃을 사용하지 마세요 — 스크린샷은 깔끔하고 집중된 단일 컬럼 및 다중 컬럼 격자 구조를 보여줍니다.
• 피하기: 격식 있는 기업 언어
• 피하기: 작고 절제된 헤드라인
• 피하기: 복잡한 팔레트

10

팩 안의 실제 스크린샷

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

11

System Prompt

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