큐레이션 · 오픈 · 무료

Felt

지도, 앱, 대시보드를 쉽게 만들 수 있는 클라우드 네이티브 GIS 플랫폼입니다.

SaaSProductivityToolingClean

Felt 스크린샷

↓ 디자인 시스템 다운로드 (46 MB)OpenDesign 에서 열기

원본 사이트: https://www.felt.com

📦 팩 내용 보기 →

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

display101px · 300
body16px · 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

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

여백이 충분한 중앙 정렬 콘텐츠 칼럼

07

모션과 인터랙션

75msmicro

200mssmall

400msmedium

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

팩 안의 실제 스크린샷

Felt — 桌面首屏（hero） — 桌面首屏（hero）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 移动首屏 — 移动首屏

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

11

System Prompt

이것은 클라우드 네이티브 GIS 플랫폼을 위한 현대적인 SaaS 랜딩 페이지입니다. 쉽게 사용할 수 있는 협업형 매핑 도구로 포지셔닝합니다. 주요 색상은 깊은 숲 녹색(#3D521E)과 따뜻한 액센트 오렌지(#DC8C46), 그리고 대비를 위한 오프화이트(#EEE)입니다. 타이포그래피는 디스플레이용 트랜지션 세리프와 본문용 grotesque sans를 페어링합니다. 중요한 금지 사항: 네온색 사용 금지, 빽빽한 레이아웃 사용 금지, 장식 테두리 사용 금지, 소문자 UI 레이블 사용 금지, 무거운 그림자 사용 금지, 디스플레이 타이프로 sans-serif 사용 금지.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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