큐레이션 · 오픈 · 무료

Framer

통합 디자인 도구로 아름다운 웹사이트를 구축하는 세련된 다크 모드 SaaS 플랫폼.

Design ToolsExpressiveMotionPlayful

Framer 스크린샷

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

원본 사이트: https://framer.com

📦 팩 내용 보기 →

01

디자인 DNA

creativevisual builderhigh-performancestartup-focused

고객사의 창의적 스튜디오처럼 느껴지는 프리미엄 디자인 도구.

02

컬러

#0099FFAccent

#FFFFFFInk

rgba(255,255,255,0.6)Ink soft

#000000BG

#242424BG quiet

#999999Muted

rgba(255,255,255,0.1)Line

단일 비비드 블루 악센트가 있는 고대비 다크 모드.

03

타이포그래피

geometric-sans · humanist-sans · geometric-mono

display96px · 500
display-sm32px · 500
body18px · 400
caption12px · 400

큰 디스플레이 텍스트에는 좁은 자간을 사용합니다 · 다크 배경에서 본문 텍스트의 높은 대비를 유지합니다 · 헤더 및 UI에는 기하학적 고딕 계열을 우선시합니다

04

여백

4px

8px

12px

16px

20px

24px

32px

48px

64px

96px

프리미엄 느낌을 위한 넉넉한 여백의 일관된 4px 그리드.

05

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

sm · 6px

md · 8px

lg · 15px

pill · 100px

최소화하며, 깊이를 정의하기 위해 미묘한 흰색 테두리나 그림자를 자주 사용합니다.

0px 1px 2px rgba(0,0,0,0.25) · 0px 10px 30px rgba(0,0,0,0.25) · 0px 0px 0px 2px #090909

06

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

큰 마진과 명확한 수직 리듬으로 중앙 정렬된 콘텐츠.

07

모션과 인터랙션

200msmicro

300mssmall

800msmedium

cubic-bezier(0.44, 0, 0.56, 1)easing

부드러운 페이드인과 미묘한 hover 트랜지션

버튼과 링크에 미묘한 색상 변화 또는 불투명도 변경. · 약간의 크기 변화나 색상 변경으로 즉각적인 시각적 피드백.

08

컴포넌트

button 강한 대비의 알약 형태 버튼. 검정 바탕에 흰색 또는 흰색 바탕에 검정 텍스트.
card 미묘한 테두리와 둥근 모서리의 다크 카드. 이미지나 데이터를 포함하는 경우가 많습니다.
chip 작고 둥근 라벨 또는 태그.
input 미묘한 테두리가 있는 깔끔한 다크 입력 필드.
hero 다크 배경에 중앙 정렬된 대담하고 굵은 타이포그래피. 명확한 행동 유도(CTA) 포함.

09

보이스와 금지 목록

톤 자신감 있고 현대적이며 전문적.
헤드라인 대담하고 직접적이며 혜택 중심.
CTA 명확하고 행동 지향적.

밝은 배경을 사용하지 마세요 — 스크린샷에서 기본 #000000 배경을 보여줍니다.
세리프 서체를 사용하지 마세요 — 스크린샷에서 고딕 계열의 디스플레이 및 본문 서체를 보여줍니다.
둥근 사각형을 사용하지 마세요 — 스크린샷에서 100px 알약 버튼을 보여줍니다.
여러 밝은 색상을 사용하지 마세요 — 스크린샷에서 지배적인 블루 악센트를 보여줍니다.
얇고 가벼운 타이포그래피를 사용하지 마세요 — 스크린샷에서 굵고 고대비의 제목을 보여줍니다.
복잡한 레이아웃을 사용하지 마세요 — 스크린샷에서 넉넉한 여백과 명확한 계층 구조를 보여줍니다.
피하기: 지나치게 기술적인 전문 용어
피하기: 수동적인 어조
피하기: 복잡한 레이아웃

10

팩 안의 실제 스크린샷

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Framer — 移动首屏 — 移动首屏

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

11

System Prompt

This is a high-performance SaaS website for a design tool. The design DNA is a dark, premium, and clean aesthetic. Key colors are #000000 (bg), #FFFFFF (ink), and #0099FF (accent). Fonts are primarily geometric and humanist sans-serifs. Critical donts: don't use light backgrounds, don't use serif fonts, don't use multiple competing accent colors, don't use thin typography for headlines, don't use cluttered layouts, don't use non-pill buttons. The tone is confident and modern, focusing on speed and creative power.

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

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

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

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