큐레이션 · 오픈 · 무료

Joshuakaplan

깔끔한 그리드 기반 레이아웃을 통해 정보 계층을 우선시하는, 고도로 구조화된 타이포그래피 중심 디자이너 포트폴리오입니다.

01

디자인 DNA

구조화된 색인이나 장부처럼 기능하는, 세심하게 정리된 디자인 포트폴리오입니다.

02

컬러

블랙과 화이트의 날카롭고 고대비 팔레트를 사용하며, 상태 표시용으로 단일 밝은 라임 그린 악센트를 적용합니다.

03

타이포그래피

sans-serif

• display16px · 500
• body12px · 500

모든 텍스트는 중간 굵기(500)의 sans-serif 폰트를 사용합니다. · 행간이 매우 타이트하며, 일반적으로 약 1.0에서 1.2 사이입니다. · 폰트 크기는 일관되게 작으며, 주요 크기는 16px와 12px입니다.

04

여백

그리드 셀 내부에 타이트하고 일관된 8px padding이 사용되며, 주요 섹션은 수평 규칙으로 정의됩니다.

05

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

행과 섹션을 구분하기 위해 1px solid rgba(0,0,0,0.75) 수평 규칙이 광범위하게 사용됩니다.

06

레이아웃

행을 다양한 너비의 4개 열로 나누어 스택한 단일 열 수직 레이아웃입니다.

07

모션과 인터랙션

모든 상호작용 요소에 transition 적용.

텍스트 링크가 hover 시 파란색으로 변경됩니다. · 클릭 가능 요소에 표준 포인터 커서를 사용합니다.

08

컴포넌트

• button 시각적 버튼 스타일이 없는 텍스트 링크로, 내비게이션 기능을 수행합니다.
• card 행이 데이터 카드 역할을 하며, 내용은 정렬된 열로 구성됩니다.
• chip 예: '✓ Acquired' 형태의 필 상태 표시기로 밝은 라임 그린 배경을 사용합니다.
• hero 디자이너를 소개하고 내비게이션 링크를 제공하는 텍스트 전용 헤더입니다.

09

보이스와 금지 목록

• 톤 전문적이고 간결하며 체계적입니다.
• 헤드라인 역할과 위치를 직접적으로 명시하는 정보 중심적 스타일입니다.
• CTA 내비게이션을 위한 단순하고 꾸밈없는 텍스트 링크입니다.

• 컨테이너에 둥근 모서리를 사용하지 마세요 — 스크린샷의 모든 행과 섹션은 날카로운 90도 모서리를 보여줍니다.
• 드롭 섀도우나 엘리베이션을 사용하지 마세요 — 스크린샷은 그림자가 없는 완전히 평면적인 디자인을 보여줍니다.
• 여러 악센트 색상을 사용하지 마세요 — 스크린샷은 상태 필드용 라임 그린 악센트 하나만 사용하는 단색 팔레트를 보여줍니다.
• 크고 다양한 타이포그래피를 사용하지 마세요 — 스크린샷은 최소한의 크기 변화로 매우 타이트한 타이포그래피 스케일을 보여줍니다.
• 두꺼운 테두리나 상자를 사용하지 마세요 — 스크린샷은 구분을 위해 얇은 단일 픽셀 수평 규칙만 사용합니다.
• 장식적 이미지나 배경 패턴을 사용하지 마세요 — 스크린샷은 로고 외에 이미지가 없는 일반적인 화이트 배경을 보여줍니다.
• 피하기: 장식적 언어
• 피하기: 마케팅 용어
• 피하기: 과도한 형용사

10

팩 안의 실제 스크린샷

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

11

System Prompt

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