큐레이션 · 오픈 · 무료

Readymag

표현력 있는 갤러리 스타일 웹사이트를 만들기 위한 프리미엄 디자인 도구 플랫폼.

01

디자인 DNA

디자인 도구를 위한 스위스 스타일 갤러리.

02

컬러

굵고 포화된 강조색과 넉넉한 여백을 가진 고대비 기본값.

03

타이포그래피

humanist-sans · system-sans

• display80px · 500
• headline30px · 400
• body16px · 400
• caption14px · 400

디스플레이 헤드라인에는 기하학적/휴머니스트 산세리프를 사용합니다. · UI 요소에는 시스템 폰트를 사용합니다. · 큰 디스플레이 텍스트에는 타이트한 자간을 적용합니다.

04

여백

컴팩트 UI 요소를 위한 타이트하고 의도적인 간격을 가진 4px 기본 그리드.

05

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

1px solid rgba(40,40,40,0.24)

0 2px 8px rgba(0,0,0,0.05)

06

레이아웃

유연한 거터와 고밀도 갤러리 레이아웃을 갖춘 표준 12컬럼 그리드.

07

모션과 인터랙션

UI 상태 변화를 위한 부드러운 불투명도 전환. · 인터랙티브 요소를 위한 섬세한 변형 애니메이션. · 모달 및 오버레이가 나타날 때의 페이드 인/아웃.

인터랙티브 요소의 미세한 밝기 또는 불투명도 변화. · 약간의 변형이나 색상 변화로 즉각적인 시각적 피드백.

08

컴포넌트

• button 굵은 오렌지 배경에 흰색 텍스트가 있는 알약 모양이거나, 짙은 테두리가 있는 윤곽선 스타일.
• card 이미지 위주에 타이트한 테두리와 최소한의 패딩을 사용하여 시각적 콘텐츠에 초점을 맞춥니다.
• chip 두드러지게 사용되지 않으며, 태그 또는 작은 상태 레이블로 사용됩니다.
• input 하단 테두리 또는 섬세한 배경이 있는 깔끔한 텍스트 입력 필드.
• hero 대규모 표현적 타이포그래피와 고밀도 이미지 갤러리 또는 굵은 색상 블록을 결합합니다.

09

보이스와 금지 목록

• 톤 자신감 있고 직접적이며 창의적으로 초점을 맞춥니다.
• 헤드라인 굵고 미니멀하며 종종 실�적이거나 과장된 크기.
• CTA 직접적이고 행동 지향적이며, 종종 굵은 기본 색상을 사용합니다.

• 장식적이거나 붓글꼴을 사용하지 마세요 — 스크린샷은 깔끔하고 기능적인 산세리프 타이포그래피를 보여줍니다.
• 텍스트에 저대비 색상을 사용하지 마세요 — 스크린샷은 굵은 강조색이 포함된 고대비 흑백을 보여줍니다.
• 복잡하고 지저분한 레이아웃을 사용하지 마세요 — 스크린샷은 명확하고 그리드 기반의 갤러리 레이아웃을 보여줍니다.
• 모든 곳에 둥글고 통통한 UI 컴포넌트를 사용하지 마세요 — 스크린샷은 날카롭고 의도적인 테두리와 버튼에만 사용되는 알약 모양을 보여줍니다.
• 뮤트된 파스텔 팔레트를 사용하지 마세요 — 스크린샷은 오렌지와 보라색과 같은 굵고 포화된 색상을 보여줍니다.
• 상호작용 뒤에 시각적 콘텐츠를 숨기지 마세요 — 스크린샷은 주요 콘텐츠로서 고밀도 이미지 갤러리를 보여줍니다.
• 피하기: 전문 용어가 많이 포함된 기술적 언어
• 피하기: 지나치게 기업적이거나 건조한 톤
• 피하기: 저대비이거나 읽기 어려운 타이포그래피

10

팩 안의 실제 스크린샷

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

11

System Prompt

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