큐레이션 · 오픈 · 무료

Storyblok

깨끗하고 기쁨을 주는 미학을 갖춘 현대적 프레임워크를 위해 설계된 엔터프라이즈 Headless CMS

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

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

📦 팩 내용 보기 →

01

디자인 DNA

Headless CMS개발자 중심AI 콘텐츠기쁨

세련되면서도 접근하기 쉬운 느낌을 주는, 개발자 친화적인 콘텐츠 플랫폼

02

컬러

#7530F7Accent
#1F1F1FInk
#44474AInk soft
#FFFFFFBG
#808080Muted
rgba(31,31,31,0.12)Line

단일의 생동감 있는 보라색 강조와 전략적인 파란색 하이라이트를 사용한 고대비 중성색

03

타이포그래피

geometric-sans

제목은 두께 900을 사용하며, 좁은 자간을 적용합니다. · 본문은 가독성을 위해 넉넉한 행간을 유지합니다. · 버튼 텍스트는 16px 크기에 두께 500을 사용합니다. · 강조 색상은 히어로의 핵심 문구에 선택적으로 사용합니다.

04

여백

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

일관된 24px 거터와 48-96px의 넉넉한 섹션 패딩

05

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

sm · 8px
md · 12px
lg · 24px
pill · 999px

카드와 입력 필드에 1-2px의 단색 테두리

0 2px 8px rgba(31,31,31,0.08) · 0 4px 16px rgba(31,31,31,0.12)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

중앙 정렬된 단일 열 히어로와 그 아래의 전체 너비 콘텐츠 섹션

07

모션과 인터랙션

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

버튼과 링크에 부드러운 hover 전환 · 상호작용 요소에 섬세한 색상 전환

버튼의 배경색 변화, 링크의 불투명도 변화 · primary 액션에 대한 스케일 피드백

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

이것은 Headless CMS를 위한 개발자 중심 SaaS 플랫폼입니다. 디자인은 기술적 신뢰성과 친근한 따뜻함 사이의 균형을 맞추고 있습니다. 주요 색상은 흰색 배경, 거의 검은색 텍스트(#1F1F1F), 그리고 보라색 강조(#7530F7)입니다. 파란색 하이라이트(#3B82F6)는 히어로 텍스트에 등장합니다. 타이포그래피는 제목에 두께 900의 기하학적 산세리프체를 사용하며 좁은 자간을 적용합니다. 여러 경쟁 강조 색상을 사용하지 마세요. 무거운 그림자나 그라데이션을 적용하지 마세요. 장식용 세리프체를 사용하지 마세요. 레이아웃은 콘텐츠를 중앙에 정렬하고 넉넉한 간격을 사용합니다. 버튼은 primary 액션을 위해 모서리가 둥근 다크 채우기를 사용합니다. 인터페이스는 차갑지 않으면서도 깨끗하고 현대적인 느낌을 줍니다.

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

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

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

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