큐레이션 · 오픈 · 무료

Penpot

확장 가능한 협업이 필요한 팀을 위한 오픈소스 디자인 플랫폼입니다.

01

디자인 DNA

팀 협업과 확장 가능한 디자인 시스템에 중점을 둔 오픈소스 Figma 대안입니다.

02

컬러

주요 액션을 위한 단일 선명한 틸 악센트가 포함된 고대비 다크 테마입니다.

03

타이포그래피

humanist-sans · monospace

• display72px · 500
• heading52px · 500
• body18px · 400
• small16px · 400
• tiny12px · 500

04

여백

모든 간격, padding 및 크기에 일관된 4px 그리드 시스템이 사용됩니다.

05

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

구조적 분리를 위해 rgba(255, 255, 255, 0.15) 또는 일치하는 배경색의 미세한 1px 테두리가 사용됩니다.

elevation-1: none · elevation-2: none

06

레이아웃

콘텐츠를 위한 최대 너비 컨테이너를 갖춘 중앙 정렬 단일 열 레이아웃입니다.

07

모션과 인터랙션

배경 및 transform 속성에 대한 부드러운 전환. · 인터랙티브 상태를 위한 미세한 불투명도 변화.

배경색이 약간 변하고, 상호작용을 나타내기 위해 텍스트 색상이 변경될 수 있습니다. · 색상 변화 또는 미세한 transform을 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 고대비의 둥근 모서리(-pill) 버튼입니다(틸 배경에 어두운 텍스트, 또는 어두운 배경에 화이트 텍스트/테두리).
• card 미세한 테두리가 있는 어두운 컨테이너로, 일반적으로 둥근 모서리와 내부 padding을 특징으로 합니다.
• chip 상태 또는 카테고리를 위한 작은 둥근 모서리(-pill) 태그 또는 배지입니다.
• input 미세한 테두리와 밝은 텍스트를 갖춘 다크 테마 입력 필드입니다.
• hero 크고 굵은 제목, 설명 텍스트, 그리고 두드러진 call-to-action 버튼을 특징으로 하는 풀宽 다크 배경 섹션입니다.

09

보이스와 금지 목록

• 톤 전문적이고 자신감 있으며 협업적입니다.
• 헤드라인 _empowerment_과 팀워크를 강조하는 굵고 직접적인 진술.
• CTA 'Sign up, it's free' 또는 'Self-host install'과 같은 명확하고 행동 지향적인 문구.

• 라이트 테마를 사용하지 마세요 — 스크린샷은 일관된 어두운 배경(#151035)을 보여줍니다.
• 헤드라인에 세리프 폰트를 사용하지 마세요 — 스크린샷은 전체적으로 humanist sans-serif(Work Sans)를 보여줍니다.
• 경쟁하는 다수의 악센트 색상을 사용하지 마세요 — 스크린샷은 강조를 위한 단일 주요 틸(#14CECA)을 보여줍니다.
• 버튼이나 카드에 날카롭고 직사각형 모서리를 사용하지 마세요 — 스크린샷은 둥근 모서리(8px-12px) 또는 둥근 모서리(-pill) 모양을 보여줍니다.
• 배경에 복잡하고 다색 그래디언트를 사용하지 마세요 — 스크린샷은 특정 UI 목업에서만 미세한 그래디언트가 포함된 단색 다크 배경을 보여줍니다.
• 무겁고 장식적인 타이포그래피를 사용하지 마세요 — 스크린샷은 깔끔하고 가독성이 높은 humanist sans-serif 폰트를 보여줍니다.
• 피하기: 맥락 없는 모호하거나 지나치게 기술적인 전문 용어.
• 피하기: 공격적이거나 영업적인 언어.
• 피하기: 수동태.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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