← OpenDesign
큐레이션 · 오픈 · 무료
Felt
지도, 앱, 대시보드를 쉽게 만들 수 있는 클라우드 네이티브 GIS 플랫폼입니다.
SaaS Productivity Tooling Clean
01
디자인 DNA
GIS 매핑 공간 협업 플랫폼
지도를 위한 Google Docs
02
컬러
#DC8C46Accent
#333333Ink
#FFFFFFInk soft
#3D521EBG
#64754BBG soft
#EEEBG quiet
rgba(51,51,51,1)Line
기능성과 친근함의 균형을 맞추기 위해, 높은 대비의 어스톤과 따뜻한 액션 컬러를 혼합했습니다.
03
타이포그래피
transitional-serif · grotesque-sans · monospace
display 101px · 300body 16px · 400헤드라인은 좁은 자간의 가벼운 웨이트 트랜지션 세리프를 사용합니다. · UI 요소는 깔끔한 grotesque sans-serif를 사용합니다. · 모노스페이스 요소는 기술 레이블에 사용됩니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
8px 기준 그리드
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid #333333
0px 2px 5px 0px rgba(0,0,0,0.2)
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
여백이 충분한 중앙 정렬 콘텐츠 칼럼
07
모션과 인터랙션
75ms micro
200ms small
400ms medium
cubic-bezier(0.25, 0.1, 0.25, 1) easing
hover 시 배경색 전환 · focus 시 텍스트 색상 전환
배경색 변경 · 배경색을 미묘하게 어둡게
08
컴포넌트
button 액센트 배경 또는 테두리 스타일이 적용된 둥근 사각형 card 인터페이스 스크린샷을 위한 깔끔한 테두리 컨테이너 chip 태그 또는 상태 레이블로 사용 input 미묘한 테두리가 있는 표준 텍스트 입력 필드 hero 제품 쇼케이스가 포함된 단색 블록 위의 대형 타이포그래피
09
보이스와 금지 목록
톤 전문적이면서도 접근 가능하고 현대적인 어조 헤드라인 크고 임팩트 있는 세리프 타이포그래피 CTA 직관적이고 행동 지향적인 표현 (예: '무료로 시작하기') 네온색 또는 과도하게 채워진 합성색을 사용하지 마세요 — 스크린샷은 차분한 어스톤 팔레트를 보여줍니다. 두꺼운 장식 테두리를 사용하지 마세요 — 스크린샷은 깔끔한 1px 테두리 또는 테두리 없는 레이아웃을 보여줍니다. 좁고 빽빽한 레이아웃을 사용하지 마세요 — 스크린샷은 요소 주변의 충분한 여백을 보여줍니다. UI 레이블에 소문자를 전부 사용하지 마세요 — 스크린샷은 내비게이션 및 특정 레이블에 대문자를 사용합니다. 무거운 그림자를 사용하지 마세요 — 스크린샷은 대부분의 요소에 매우 미묘하거나 그림자가 없음을 보여줍니다. 헤드라인에 장난기 있는 sans-serif를 사용하지 마세요 — 스크린샷은 임팩트를 위해 트랜지션 세리프를 사용합니다. 피하기: 기술 용어 피하기: 공격적인 마케팅 언어 피하기: 지나치게 가벼운 어조
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
이것은 클라우드 네이티브 GIS 플랫폼을 위한 현대적인 SaaS 랜딩 페이지입니다. 쉽게 사용할 수 있는 협업형 매핑 도구로 포지셔닝합니다. 주요 색상은 깊은 숲 녹색(#3D521E)과 따뜻한 액센트 오렌지(#DC8C46), 그리고 대비를 위한 오프화이트(#EEE)입니다. 타이포그래피는 디스플레이용 트랜지션 세리프와 본문용 grotesque sans를 페어링합니다. 중요한 금지 사항: 네온색 사용 금지, 빽빽한 레이아웃 사용 금지, 장식 테두리 사용 금지, 소문자 UI 레이블 사용 금지, 무거운 그림자 사용 금지, 디스플레이 타이프로 sans-serif 사용 금지.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 전문적인 어스톤 컬러와 세련된 세리프 중심의 타이포그래피 시스템이 성공적으로 결합되어 있어 도입 가치가 있습니다.