큐레이션 · 오픈 · 무료

Cydstumpel Nl

크리에이티브 개발자이자 연사를 위한 대담하고 표현력이 풍부한 포트폴리오 사이트입니다.

01

디자인 DNA

크리에이티브 개발자의 포트폴리오를 장난스럽고 대담하게 선보입니다.

02

컬러

따뜻한 오프화이트 배경에 굵은 검정과 고채도 레드 악센트, 그리고 콘텐츠 카드를 위한 2차 팔레트입니다.

03

타이포그래피

grotesque-sans · transitional-serif

• display80px · 400
• heading40px · 700
• body16px · 400

04

여백

카드 레이아웃을 위한 넉넉한 간격의 일관된 4px 기본값입니다.

05

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

카드에 강조색인 레드, 블루, 블랙 컬러를 사용한 두드러진 2px solid 테두리입니다.

None: None · None: None

06

레이아웃

크고 겹치는 마키와 3열 카드 그리드가 있는 비대칭적, 에디토리얼 스타일 레이아웃입니다.

07

모션과 인터랙션

hover 및 focus 상태에서 부드러운 전환 · 인터랙티브 요소에서의 border-radius 형태 변화 · 미세한 opacity 페이드

색상이나 테두리 전환을 포함하는 미세한 상태 변화입니다. · 버튼과 링크의 활성 상태입니다.

08

컴포넌트

• button 대문자 텍스트 버튼으로, 종종 뚜렷한 border-radius와 hover 효과가 있습니다.
• card 두꺼운 컬러 테두리, 접힌 모서리 디테일, 그리고 알약 모양 태그를 가진 카드입니다.
• chip CSS, JS, ANIMATION과 같은 태그를 위한 작고 둥근 알약 모양입니다.
• input 제공된 스크린샷에서 명확하게 보이지 않습니다.
• hero 겹치는 텍스트와 중앙 일러스트레이션이 있는 거대한 수평 스크롤 마키입니다.

09

보이스와 금지 목록

• 톤 자신감 있고, 장난스러우며, 전문적입니다.
• 헤드라인 굵은 대문자로 Highly expressive하게, condensed sans-serif 및 이탤릭 세리프 폰트를 사용합니다.
• CTA 직설적이고 대문자이며, 행동을 유도하는 스타일로, 종종 테두리가 있는 컨테이너 안에 배치됩니다.

• 플랫하고 기업적인 레이아웃을 사용하지 마세요 — 스크린샷은 거대한 마키가 있는 표현적이고 겹치는 에디토리얼 스타일을 보여줍니다.
• 차갑고 어두운 색상 팔레트를 사용하지 마세요 — 스크린샷은 굵은 레드 악센트가 있는 따뜻한 오프화이트 배경을 보여줍니다.
• 표준 시스템 폰트를 사용하지 마세요 — 스크린샷은 굵은 condensed grotesque와 우아한 transitional serif 폰트의 조합을 보여줍니다.
• 얇고 1px 테두리를 사용하지 마세요 — 스크린샷은 카드와 컨테이너에 두드러진 2px solid 테두리를 보여줍니다.
• 모든 것에 미세하고 흐릿한 색상을 사용하지 마세요 — 스크린샷은 고채도 레드를 지배적인 악센트 컬러로 사용합니다.
• 순수하게 그리드 기반의 대칭적 레이아웃을 사용하지 마세요 — 스크린샷은 요소들의 겹치고 비대칭적인 배치를 보여줍니다.
• 피하기: 수동적인 어조
• 피하기: 일반적인 기업 관용구
• 피하기: 지나치게 격식을 차린 어조

10

팩 안의 실제 스크린샷

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

11

System Prompt

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