큐레이션 · 오픈 · 무료

Louisiana

타이포그래피와 여백을 강조하는 세련되고 차분한 박물관 웹사이트.

01

디자인 DNA

고요하고 현대적인 미술관 입구

02

컬러

콘텐츠를 위해 날카롭고 고대비의 흑백을 사용하고, 차분하고 물 같은 시안색으로 악센트를 줍니다.

03

타이포그래피

transitional-serif · humanist-sans

• display36px · 700

제목은 고전적이고 권위 있는 느낌을 주기 위해 두꺼운 전환체 세리프를 사용합니다. · 본문 및 UI 텍스트는 깨끗하고 인간주의적인 느낌을 주기 위해 Open Sans를 사용합니다.

04

여백

상단과 하단에 큰 패딩을 사용하여 차분하고 집중적인 느낌을 주는 넉넉한 수직 리듬을 적용합니다.

05

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

메인 콘텐츠 영역에는 눈에 띄는 테두리가 없으며, 평면적이고 깨끗한 미학을 유지합니다.

06

레이아웃

넉넉한 컨테이너 내 중앙 정렬된 콘텐츠 열이, 전체 폭의 색상 블록으로 자연스럽게 전환됩니다.

07

모션과 인터랙션

인터랙티브 요소의 hover 상태에 대한 트랜지션.

인터랙티브 요소의 미묘한 상태 변화. · 표준 내비게이션 및 콘텐츠 섹션 확장.

08

컴포넌트

• button 간단한 텍스트 기반 인터랙션 요소로, 확장을 위해 종종 chevron을 포함합니다.
• card 텍스트와 간격으로 주로 정의되는 미니멀리스트 카드입니다.
• chip 관찰되지 않음.
• input 관찰되지 않음.
• hero 단색 배경과 거대하고 두꺼운 세리프 타이포그래피를 가진 전체 폭의 큰 블록.

09

보이스와 금지 목록

• 톤 정보를 전달하며, 문화적이며, 약간 격식을 갖춘 어조.
• 헤드라인 주의를 끌기 위해 두껍고 대문자이며 큰 세리프 텍스트.
• CTA 눈에 띄는 버튼 대신 통합된 미묘한 텍스트 링크.

• 밝고 채도 높은 색상은 사용하지 마세요 — 스크린샷은 흑백과 둔탁한 시안색의 절제된 팔레트를 보여줍니다.
• 요소에 둥근 모서리를 적용하지 마세요 — 스크린샷은 날카로운 모서리를 가진 엄격하게 직사각형인 형태를 보여줍니다.
• 본문 텍스트에 여러 글꼴 패밀리를 사용하지 마세요 — 스크린샷은 UI 요소에 일관된 산세리프 사용을 보여줍니다.
• 밀집되고 혼란스러운 레이아웃을 만들지 마세요 — 스크린샷은 넉넉한 여백과 집중적인 타이포그래피를 강조합니다.
• 무거운 drop shadow나 깊이 효과를 사용하지 마세요 — 스크린샷은 평면적이고 깨끗한 디자인을 보여줍니다.
• 메인 디스플레이 제목에 산세리프를 사용하지 마세요 — 스크린샷은 두꺼운 전환체 세리프를 보여줍니다.
• 피하기: 화려한 색상
• 피하기: 공격적인 행동 유도(CTA)
• 피하기: 시각적 혼잡

10

팩 안의 실제 스크린샷

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

11

System Prompt

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