큐레이션 · 오픈 · 무료

Milieu Grotesque

프리미엄 타입페이스와 디자인 파운드리를 위한 큐레이션 플랫폼.

01

디자인 DNA

타입 디자이너를 위한 하이엔드 갤러리.

02

컬러

깔끔한 밝은 배경 위의 고대비 어두운 텍스트와, 인터랙티브 요소를 위한 강한 블루 악센트.

03

타이포그래피

grotesque-sans · humanist-sans

• display56px · 500
• heading26px · 400
• body13px · 400

04

여백

패딩과 마진에 4px의 배수를 일관되게 사용합니다.

05

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

기본 잉크 색상을 사용한 1px 실선 테두리.

rgba(0, 0, 0, 0.06) 0px 1px 6px 0px · rgba(0, 0, 0, 0.16) 0px 2px 32px 0px

06

레이아웃

전체 너비의 히어로 섹션에서 콘텐츠 카드를 위한 구조화된 그리드 레이아웃으로 전환됩니다.

07

모션과 인터랙션

모든 인터랙티브 요소에 부드러운 트랜지션 · 넓은 레이아웃 전환에 0.5초 지속 시간

인터랙티브 요소에 섬세한 색상 변화 또는 불투명도 변경. · 크기 변환 없이 즉각적인 피드백.

08

컴포넌트

• button 알약 형태의 반경과 흰색 텍스트를 가진 실선 악센트 색상 버튼.
• card 최소한의 장식으로 이미지가 강조된 카드로, 종종 전체 블리드 사진을 특징으로 합니다.
• chip 필터링이나 분류에 사용되는 작고 둥근 태그.
• input 돋보기 아이콘과 'AI Search' CTA가 강조된 검색 바.
• hero 오버레이 텍스트와 고대비 타이포그래피가 있는 대형, 인상적인 사진 배경.

09

보이스와 금지 목록

• 톤 전문적이고 권위 있으며, 창의적으로 세련된.
• 헤드라인 대담하고 클린하며, 종종 타입페이스를 과시하기 위해 과도하게 큼직함.
• CTA 직접적이고 행동 지향적이며, 강한 색상 대비 사용.

• 둥글고 친근한 아이콘을 사용하지 마세요 — 스크린샷은 날카롭고 기하학적인 UI 요소를 보여줍니다
• 그림자를 모든 곳에 적용하지 마세요 — 스크린샷은 대부분 플랫하고 클린한 표면을 보여줍니다
• 다색 무지개 팔레트를 사용하지 마세요 — 스크린샷은 규율 잡힌 블루와 다크 중성색 체계를 보여줍니다
• UI에 스크립트나 장식적 폰트를 사용하지 마세요 — 스크린샷은 엄격히 기능적인 산세리프를 보여줍니다
• 저대비 회색 텍스트를 사용하지 마세요 — 스크린샷은 가독성을 위한 고대비 잉크를 보여줍니다
• 텍스트 뒤에 지저분한 배경을 사용하지 마세요 — 스크린샷은 클린한 흰색 또는 단색 다크 섹션을 보여줍니다
• 피하기: 장난스럽거나 공상적인 언어
• 피하기: 지나치게 복잡한 전문 용어
• 피하기: 지저분한 레이아웃
• 피하기: 불필요한 장식적 요소

10

팩 안의 실제 스크린샷

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

11

System Prompt

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