큐레이션 · 오픈 · 무료

Henryheffernan

대담한 타이포그래피와 명령줄 미학에 의존하여 작업을 선보이는, 엄격하고 단색의 인터랙티브 포트폴리오.

01

디자인 DNA

디지털 포트폴리오를 위한 미니멀리스트 터미널 부팅 화면.

02

컬러

경고용으로 네온 악센트가 하나 추가된 고대비 단색.

03

타이포그래피

transitional-serif · monospace

• body16px · 400

모든 텍스트는 균일한 기본 크기로 일관된 모노스페이스 또는 세리프 서체로 렌더링됩니다. · 어두운 배경에서 가독성을 높이기 위해 자간이 약간 넓게 조정됩니다.

04

여백

텍스트가 경계선에 닿지 않도록 컨테이너 내부에 충분한 내부 패딩을 둡니다.

05

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

주요 컨테이너 및 인터랙티브 요소에 두껍고 강한 흰색 또는 검정선이 사용됩니다.

06

레이아웃

중첩된 테두리 컨테이너가 있는 중앙 정렬 단일 열 레이아웃.

07

모션과 인터랙션

요소 표시를 위한 불투명도 및 변환 트랜지션. · 프롬프트로 암시되는 타이프라이터 스타일의 깜빡이는 커서 효과.

커서가 포인터로 변경되며, 요소는 불투명도 또는 색상 반전으로 반응할 가능성이 높습니다. · 상태 변화를 유발하거나 다음 포트폴리오 섹션으로 전환합니다.

08

컴포넌트

• button 대문자 모노스페이스 텍스트가 포함된 윤곽선 상자.
• card 높은 내부 패딩이 있는 사각형 컨테이너.
• chip 해당 없음
• input 해당 없음
• hero 중앙에 하나의 테두리 프롬프트 상자가 있는 전체 화면 어두운 캔버스.

09

보이스와 금지 목록

• 톤 직접적이고, 기술적이며, 미니멀리스틱합니다.
• 헤드라인 단단한 테두리 내에 배치된 대문자 모노스페이스 또는 굵은 세리프.
• CTA 간결하고 명확한 모노스페이스 지시문 뒤에 테두리 버튼이 옵니다.

• 둥근 모서리를 사용하지 마십시오 — 스크린샷은 대신 날카롭고 경계가 뚜렷한 직사각형 테두리를 보여줍니다.
• 부드러운 그라데이션을 사용하지 마십시오 — 스크린샷은 대신 평면적이고 고대비의 단색을 보여줍니다.
• 장식적 이미지를 사용하지 마십시오 — 스크린샷은 순수히 타이포그래피에 기반한 텍스트 기반 인터페이스를 보여줍니다.
• 밝은 테마를 사용하지 마십시오 — 스크린샷은 흰색 텍스트가 있는 지배적인 검정 배경을 보여줍니다.
• 장식적 산세리프를 사용하지 마십시오 — 스크린샷은 모노스페이스와 트랜지션 세리프 서체의 혼합을 보여줍니다.
• 미묘한 그림자를 사용하지 마십시오 — 스크린샷은 두꺼운 테두리로 순수하게 정의된 평면 요소를 보여줍니다.
• 피하기: 부드러운 그라데이션이나 둥근 모서리를 피하십시오.
• 피하기: 장식적 일러스트레이션이나 복잡한 배경 이미지를 피하십시오.
• 피하기: 따뜻하거나, 친근하거나, 지나치게 캐주얼한 언어를 피하십시오.
• 피하기: 경쟁하는 여러 서체 계열이나 굵기를 피하십시오.
• 피하기: 기본적이고 스타일이 없는 웹 요소를 피하십시오.
• 피하기: 많은 컨트롤이 눈에 띄는 지저분한 레이아웃을 피하십시오.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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