큐레이션 · 오픈 · 무료

Strapi

AI 기반 웹사이트와 앱을 위한 오픈소스 헤드리스 CMS

cmsdev
Strapi 스크린샷
↓ 디자인 시스템 다운로드 (10 MB)OpenDesign 에서 열기

원본 사이트: https://strapi.io

📦 팩 내용 보기 →

01

디자인 DNA

오픈소스헤드리스 CMSAI 기반개발자 중심

기술적 유용성과 프리미엄 완성도의 균형을 이루는 개발자 우선 콘텐츠 플랫폼

02

컬러

#4F46E5Accent
#FFFFFFInk
#3E3E5CInk soft
#0F0F23BG
#F7F8FCBG soft
#E7EDF1BG quiet
#5E709DMuted
rgba(94,112,157,0.2)Line

CTA를 위한 인디고 액센트가 포함된 고대비 니트/라이트 섹션

03

타이포그래피

geometric-sans · humanist-sans · monospace

디스플레이 및 제목에 Poppins 사용 · 본문 텍스트 및 UI 요소에 Inter 사용 · 다크 배경에서의 가독성을 위한 여유로운 행간 유지

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

일관된 수직 리듬을 위한 8px 기본 단위

05

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

sm · 4px
md · 8px
lg · 15px
pill · 999px

1px solid rgba(94,112,157,0.2)

rgba(26,26,67,0.1) 0px 1px 4px 0px · rgba(0,0,0,0.1) 0px 4px 12px 0px · rgba(0,0,0,0.08) 0px 6px 10px 0px

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

여유로운 여백의 중앙 정렬 콘텐츠, 전체 너비의 다크 히어로 섹션

07

모션과 인터랙션

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4,0,0.2,1)easing

hover 시 색상 전환 · 인터랙티브 상태를 위한 불투명도 변화

텍스트 링크의 색상 변화, 카드의 미세한 그림자 높이 변화 · 색상/불투명도를 통한 즉각적인 시각적 피드백

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Strapi — 桌面首屏（hero）
桌面首屏（hero）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Strapi — 移动首屏
移动首屏

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

11

System Prompt

Strapi의 디자인 시스템은 AI 기반 애플리케이션을 구축하는 개발자를 대상으로 하며, 다크/라이트 이중 섹션 접근 방식을 사용합니다. 주요 색상은 히어로 섹션을 위한 다크 네이비(#0F0F23), 콘텐츠 영역을 위한 화이트(#FFFFFF), 그리고 CTA를 위한 인디고(#4F46E5)입니다. 타이포그래피는 디스플레이/제목에 기하학적 Poppins를, 본문 텍스트에 휴머니스트 Inter를 사용하여 명확한 계층을 유지합니다. 핵심 금지 사항: 인터랙티브 요소에 무채색 사용 금지(선명한 인디고가 표준), 긴 본문 중앙 정렬 금지, 코드 스니펫의 여유로운 크기 유지. 시스템은 깔끔한 레이아웃, 미세한 그림자, purposeful 여백을 통해 기술적 신뢰성을 강조합니다. 명확한 가치 제안과 복사 가능한 코드 블록 및 직접적인 CTA와 같은 개발자 친화적 패턴에 집중하세요.

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

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

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

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