큐레이션 · 오픈 · 무료

Driesbos

크리에이티브 개발자를 위한 미니멀한 텍스트 중심 포트폴리오.

01

디자인 DNA

밝은 스튜디오에 정리된 도구 상자.

02

컬러

따뜻한 종이 같은 배경의 고대비 단색과 타이포그래피에 대한 절대적인 집중.

03

타이포그래피

grotesque-sans

• body20px · 400

아이덴티티에 커스텀 산세리프 사용 · 400의 엄격한 단일 웨이트 유지 · 일관된 블록 리듬을 위해 25px 패딩 사용

04

여백

고정된 25px 내부 패딩으로 일관된 시각적 리듬을 만드는 그리드 기반.

05

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

블록과 테이블을 정의하는 1px 검정색 실선과 히어로 섹션의 독특한 3D 와이어프레임 효과.

06

레이아웃

프로젝트를 위한 테이블형 목록을 포함한 단일 열 블록 기반 레이아웃.

07

모션과 인터랙션

수평 마퀴 티커 · 텍스트와 배경의 부드러운 330ms 트랜지션 · 복잡한 변환을 위한 700ms cubic-bezier 이징

미묘한 330ms 색상 및 배경 트랜지션. · 최소한의 시각적 피드백, 주로 트랜지션 지속 시간에 의존.

08

컴포넌트

• button 커스텀 화살표 아이콘이 있는 미니멀한 텍스트 전용 링크.
• card 주요 초점 역할을 하는 3D 와이어프레임 윤곽선의 히어로 컨테이너.
• input 현재 뷰에서는 해당 없음.
• hero 사이트 이름과 소개 텍스트를 담은 원근감이 있는 와이어프레임 박스.

09

보이스와 금지 목록

• 톤 직설적이고 전문적이며 간결합니다.
• 헤드라인 대시로 분리된 짧고 임팩트 있는 문구.
• CTA 화살표 아이콘과 반복되는 마퀴 티커로 암시됨.

• 둥근 모서리를 사용하지 마세요 — 스크린샷은 모든 컨테이너와 카드에 날카로운 0px 반지름을 보여줍니다.
• 무거운 섀도우를 사용하지 마세요 — 스크린샷은 정의를 위해 플랫한 1px 실선 테두리만 보여줍니다.
• 장식용 이미지를 사용하지 마세요 — 스크린샷은 엄격한 텍스트 기반 와이어프레임 미학을 보여줍니다.
• 볼드 웨이트를 사용하지 마세요 — 스크린샷은 전체적으로 400의 균일한 폰트 웨이트를 보여줍니다.
• 선명한 강조색을 사용하지 마세요 — 스크린샷은 오프화이트와 검정색만 사용하는 엄격한 단색입니다.
• 복잡한 다중 열 그리드를 사용하지 마세요 — 스크린샷은 엄격한 단일 열 블록 기반 수직 흐름을 보여줍니다.
• 피하기: 무거운 드롭 섀도우 또는 부드러운 블러 피하기
• 피하기: 주요 컨테이너의 둥근 모서리 피하기
• 피하기: 주요 콘텐츠의 다중 열 레이아웃 피하기

10

팩 안의 실제 스크린샷

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

11

System Prompt

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