큐레이션 · 오픈 · 무료

Frere-Jones Type

단일한 편집 디자인을 통해 독자적인 서체를 선보이는 프리미엄 독립 폰트 파운드리.

01

디자인 DNA

활자의 명확성과 아름다움을 우선시하는 정제된 옛날 방식의 공방.

02

컬러

단일 더스티 블루 악센트가 특징을 강조하는 고대비 단색 팔레트.

03

타이포그래피

transitional-serif · humanist-sans · monospaced

• display86px · 700
• h156px · 700
• body16px · 400
• caption12px · 400

대형 디스플레이 타입에는 트랜지셔널 세리프를 사용하여 서체의 세부 사항을 강조합니다 · 모든 기능적 UI 및 본문 텍스트에는 휴머니스트 산세리프를 사용합니다

04

여백

엄격한 4px 기준선 격자와 함께 넉넉한 여백을 적용합니다.

05

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

미세한 구분선 및 버튼용 1px solid 검정 테두리.

06

레이아웃

히어로, 소개, 블로그, 커스텀 작업 영역을 명확히 구분하는 깔끔한 격자.

07

모션과 인터랙션

히어로 캐러셀 내 폰트 시안 간 미세한 크로스 페이드

텍스트 링크 및 버튼에 은은한 색상 변화 또는 줄이 나타남. · 즉시 다음 상태 또는 페이지로 전환.

08

컴포넌트

• button 텍스트에 줄을 긋거나, 검정 배경에 흰색 텍스트를 사용한 단순한 형태; 둥근 모서리 없음.
• card 전체 너비 섹션이나 커스텀 작업용 강렬한 격자 블록. 주로 검정 배경에 흰색 텍스트.
• chip '출시'와 같이 단순한 줄 텍스트 태그.
• input 테두리 없는 최소주의적 검색 바.
• hero 폰트를 시각적으로 선보이도록 설계된 검정 또는 블루 컬러의 거대한 전체 폭 타이포그래피 시안.

09

보이스와 금지 목록

• 톤 권위 있고, 정제되며, 절제된 어조.
• 헤드라인 간결하고 직접적이며, 종종 서체 자체의 이름을 사용.
• CTA '더 알아보기' 또는 '글 읽기 →'와 같은 조용한 텍스트 링크. 큰 버튼은 거의 사용하지 않음.

• 버튼이나 카드에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카로운 90도 각도를 보여줍니다.
• UI 요소에 드롭 섀도우를 사용하지 마세요 — 스크린샷은 완전히 평면적인 표면을 보여줍니다.
• 넓고 화려한 팔레트를 사용하지 마세요 — 스크린샷은 엄격한 흑백과 단일 악센트 팔레트를 보여줍니다.
• 장식용 산세리프를 대형 디스플레이에 사용하지 마세요 — 스크린샷은 시안용으로 굵은 트랜지셔널 세리프를 보여줍니다.
• 두껍거나 뭉툭한 테두리를 사용하지 마세요 — 스크린샷은 매우 가늘고 1px의 테두리 또는 아예 없는 상태를 보여줍니다.
• 아이콘으로 인터페이스를 어지럽히지 마세요 — 스크린샷은 거의 전적으로 텍스트와 타이포그래피에 의존합니다.
• 피하기: 지나치게 표현적이거나 장식적인 요소 사용 지양
• 피하기: 밝은 네온색 또는 부조화스러운 색상 사용 지양
• 피하기: 주요 UI 요소에 둥근 모서리 사용 지양

10

팩 안의 실제 스크린샷

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

11

System Prompt

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