큐레이션 · 오픈 · 무료

Onroadmap

팀을 정렬하고 우선순위를 시각화하는 미니멀리스트 로드맵 도구입니다.

01

디자인 DNA

팀 우선순위를 위한 깔끔한 화이트보드

02

컬러

로드맵 트랙을 나타내는 밝고 다채로운 강조 색상이 있는 중성 캔버스.

03

타이포그래피

geometric-sans · humanist-sans

• display40px · 700
• h232px · 700
• h321px · 500
• body16px · 400
• caption14px · 400

헤드라인은 좁은 자간의 굵은 굵기를 사용합니다 · 본문 텍스트는 가독성을 위해 넉넉한 행간을 유지합니다 · 보조 텍스트는 은은한 잉크 색상을 사용합니다

04

여백

섹션 간 넉넉한 수직 리듬과, 카드 및 버튼 내부의 좁은 패딩을 사용합니다.

05

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

활성 상태에는 미묘한 2px solid 테두리를 사용하고, 그 외에는 테두리 없이 box-shadow를 사용하여 깊이감을 만듭니다.

0 8px 16px rgba(0, 0, 0, 0.16) · 0 4px 16px rgba(0, 0, 0, 0.32) · 0 0 0 3px rgb(243, 243, 243)

06

레이아웃

중앙 정렬된 콘텐츠 블록으로 흐르는 단일 열 수직 흐름.

07

모션과 인터랙션

버튼과 카드의 미묘한 hover 상태 · 인터랙티브 요소의 focus 트랜지션

버튼은 약간 어두워지거나, 카드는 그림자가 생기며 떠오를 수 있습니다. · 약간의 크기 또는 불투명도 변화가 있을 수 있는 즉각적인 피드백.

08

컴포넌트

• button 흰색 텍스트와 둥근 알약 모양의 고대비 검정색.
• card 미묘한 테두리 또는 상승감을 위한 box-shadow가 있는 흰색 또는 부드러운 회색 배경.
• chip 알약 모양과 색상 box-shadow가 있는 다채로운 레이블(녹색, 분홍색, 보라색).
• input 완전히 보이지는 않지만, 미묘한 테두리가 있는 미니멀한 스타일일 가능성이 높습니다.
• hero 큰 그라데이션 구형 로고, 굵은 이중 톤 헤드라인, 주요 CTA가 있는 중앙 정렬 레이아웃.

09

보이스와 금지 목록

• 톤 직설적이고, 명확하며, 전문적입니다.
• 헤드라인 굵은 고딕체의 짧고 선언적인 문장.
• CTA 화살표 기호를 사용한 단순하고 행동 지향적인 문구.

• 장식적이거나 세리프 서체를 사용하지 마세요 — 스크린샷은 깔끔한 기하학적 고딕체 헤드라인을 보여줍니다.
• 복잡한 그림자를 추가하지 마세요 — 스크린샷은 미묘하고 부드러운 box-shadow를 보여줍니다.
• 지저분하거나 어두운 배경을 사용하지 마세요 — 스크린샷은 주로 흰색 캔버스를 보여줍니다.
• 히어로 섹션을 혼잡하게 하지 마세요 — 스크린샷은 중앙 요소 주위의 넉넉한 여백을 보여줍니다.
• 배지에 둥근 사각형을 사용하지 마세요 — 스크린샷은 알약 모양의 레이블을 보여줍니다.
• 카드에 두꺼운 테두리를 사용하지 마세요 — 스크린샷은 미묘한 그림자 또는 배경 변경으로 분리된 카드를 보여줍니다.
• 피하기: 전문 용어가 많은 언어
• 피하기: 복잡한 문장 구조
• 피하기: 시각적 혼잡 또는 지저분한 배경

10

팩 안의 실제 스크린샷

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

11

System Prompt

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