큐레이션 · 오픈 · 무료

Miro

Miro는 팀과 AI 에이전트가 함께 생각하고, 계획하고, 구축하는 협업 레이어입니다.

01

디자인 DNA

팀의 아이디어 생성과 AI 에이전트 협업을 위한 중추 신경계 역할을 하는 디지털 화이트보드입니다.

02

컬러

가독성을 위한 고대비 어두운 텍스트가 있는 깨끗한 흰색 캔버스를 기본으로 하며, 주요 작업에는 단일 강렬한 블루를, 구조에는 부드러운 그레이를 사용합니다.

03

타이포그래피

humanist-sans · monospace

• display56px · 500
• h148px · 500
• h224px · 600
• body16px · 400
• small12px · 400

표시 헤드라인에는 친근하면서도 전문적인 느낌을 유지하기 위해 font-weight 500을 사용합니다. · 시각적 리듬을 좁히기 위해 더 큰 헤드라인에는 네거티브 letter-spacing(tracking)을 적용합니다. · 본문 텍스트는 가독성을 위해 중립적인 400 weight와 넉넉한 line-height를 유지합니다.

04

여백

내부 padding과 컴포넌트 간격을 위해 일관된 8px 및 16px 간격을 사용하는 기본 4 그리드입니다.

05

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

입력 필드와 카드에 절제된 1px border를 사용합니다.

0px 1px 3px rgba(0,0,0,0.1) · 0px 10px 10px -3.75px rgba(0,0,0,0.06) · 0px 2.28px 2.28px -2.5px rgba(0,0,0,0.16)

06

레이아웃

중앙 정렬된 메인 컨테이너가 있는 표준 12컬럼 그리드입니다.

07

모션과 인터랙션

버튼 및 대화형 요소의 부드러운 hover 전환입니다. · 상호작용 상태를 위한 배경색 및 transform 애니메이션입니다.

미세한 배경색 변화 또는 border색 변경입니다. · Scale 또는 transform 마이크로 애니메이션입니다.

08

컴포넌트

• button 알약 또는 둥근 사각형 모양의 솔리드 블랙 '무료로 시작하기' 및 '자세히 알아보기' 버튼; 영웅 영역의 주요 '무료로 시작하기'는 블루입니다.
• card 헤드라인, 아이콘, 설명 텍스트를 포함하는 둥근 모서리의 밝은 회색 배경 카드입니다.
• chip 사용자 커서 또는 레이블을 위한 작은 알약 모양 요소입니다.
• input 미세한 border가 있는 간단한 둥근 사각형 입력 필드입니다.
• hero 주목할 만한 입력 필드와 CTA 버튼이 있는 중앙 정렬 텍스트 기반 영웅 영역입니다.

09

보이스와 금지 목록

• 톤 강점 부여, 전문적, 그리고 미래 지향적입니다.
• 헤드라인 협업과 AI에 대한 간결하고 강렬하며 혜택 중심적인 문장입니다.
• CTA 직접적이고 행동 중심적입니다(예: '무료로 시작하기', '대시보드로 이동').

• 세리프 서체를 사용하지 않습니다 — 스크린샷은 깨끗한 휴머니스트 산세리프 타이포그래피를 보여줍니다.
• 다크 모드 테마를 사용하지 않습니다 — 스크린샷은 주로 흰색/밝은 회색 배경을 보여줍니다.
• 무거운 장식용 그림자를 사용하지 않습니다 — 스크린샷은 미세하고 부드러운 그림자를 보여줍니다.
• 혼란스러운 다색 팔레트를 사용하지 않습니다 — 스크린샷은 흰색, 블랙, 그레이, 그리고 단일 블루 악센트로 구성된 절제된 팔레트를 보여줍니다.
• 모든 곳에 딱딱하고 날카로운 모서리를 사용하지 않습니다 — 스크린샷은 둥근 사각형(12px, 20px)과 알약 모양의 조합을 보여줍니다.
• 헤드라인에 밀집되고 작은 텍스트를 사용하지 않습니다 — 스크린샷은 넉넉한 letter-spacing이 적용된 크고 여백이 많은 헤드라인을 보여줍니다.
• 피하기: 영웅 영역의 지나치게 기술적이거나 밀도 높은 단락.
• 피하기: 공격적이거나 과장된 영업 언어.
• 피하기: 핵심 메시지에서 주의를 산만하게 하는 복잡한 레이아웃.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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