큐레이션 · 오픈 · 무료

Guillermo Rauch

저명한 기술 인물의 초洁净하고 타이포그래피 중심의 개인 아카이브입니다.

01

디자인 DNA

미니멀리스트 기술 저널 또는 깔끔한 학술적_reading list입니다.

02

컬러

메타데이터를 위한 은은한 회색을 사용한 고대비 흰색 위 검정으로 극도로 절제된 색상 사용입니다.

03

타이포그래피

geometric-sans · monospace

• display18px · 700
• body14px · 400
• caption12px · 400

04

여백

4px 단위의 엄격한 수직 간격을 기반으로 하며, 주로 목록 항목과 섹션에 8px와 24px를 사용합니다.

05

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

태그에 주로 사용되는 은은한 1px solid border로, rgb(229,231,235)로 정의됩니다.

06

레이아웃

목록 항목을 위한 엄격한 3열 테이블 형식 레이아웃: 연도(왼쪽), 제목(가운데), 개수(오른쪽).

07

모션과 인터랙션

hover 상태와 border-color 변경을 위한 모든 요소의 은은한 트랜지션(0.15초).

커서가 포인터로 변경되며, 0.15초의 은은한 트랜지션이 적용됩니다. · 표준 링크 내비게이션입니다.

08

컴포넌트

• button 태그 형식이 아닌 한 눈에 보이는 padding이나 배경이 없는 미니멀 텍스트 링크입니다.
• card 연도, 제목, 개수를 포함하는 행으로 구성된 개념적 카드입니다.
• chip 푸터에 보이는 1px border와 약간의 padding이 있는 작은 알약 모양의 태그입니다.
• input 눈에 띄는 입력 컴포넌트가 없습니다.
• hero 왼쪽에 사이트 제목, 오른쪽에 내비게이션 링크가 있는 간단한 헤더입니다.

09

보이스와 금지 목록

• 톤 전문적이고, 직설적이며, 절제된 어조입니다.
• 헤드라인 단순하고, 굵게 처리되며, 왼쪽 정렬입니다.
• CTA 은은한 텍스트 링크로, 종종 아이콘(예: X)과 함께 사용됩니다.

• 여러 색상을 사용하지 마세요 — 스크린샷은 단색 검정/흰색/회색 팔레트를 엄격히 보여줍니다.
• 카드나 컨테이너에 드롭 쉐도우를 추가하지 마세요 — 스크린샷은 완전히 평면적이고 쉐도우 없는 디자인을 보여줍니다.
• 장식적 border나 무거운 구분선을 사용하지 마세요 — 스크린샷은 대신 수직 간격과 정렬을 사용합니다.
• 복잡한 그리드나 겹치는 요소를 사용하지 마세요 — 스크린샷은 엄격하고 선형적인 3열 목록 레이아웃을 보여줍니다.
• 굵은 글꼴을 과도하게 사용하지 마세요 — 스크린샷은 메인 사이트 제목에만 굵기 700을 사용합니다.
• 메인 컨테이너에 둥근 모서리를 사용하지 마세요 — 스크린샷은 메인 목록에 날카로운 모서리를 사용합니다.
• 피하기: 과장된 마케팅 언어
• 피하기: 시각적 혼란
• 피하기: 장식적 이미지

10

팩 안의 실제 스크린샷

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

11

System Prompt

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