큐레이션 · 오픈 · 무료

Appwrite

속도와 확장성을 위해 설계된 오픈 소스 백엔드-서비스-플랫폼입니다.

devinfra
Appwrite 스크린샷
↓ 디자인 시스템 다운로드 (11 MB)OpenDesign 에서 열기

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

📦 팩 내용 보기 →

01

디자인 DNA

오픈 소스백엔드인프라개발자 플랫폼

현대적인 애플리케이션 구축을 위한 다크하고 세련된 지휘 센터입니다.

02

컬러

#fd356eAccent
#ffffffInk
#acacafInk soft
#19191cBG
#1d1d21BG soft
#202023BG quiet
#57575cMuted
rgba(172, 172, 175, 0.2)Line

다크 모드를 기반으로 고대비 밝은 텍스트와 주요 작업을 위한 단일, 생생한 핑크 강조색을 사용합니다.

03

타이포그래피

grotesque-sans · humanist-sans · monospace

디스플레이 텍스트는 타이트한 자간을 가진 무거운 고딕체(grotesque) 서체를 사용합니다. · 본문 텍스트는 기본적으로 가독성이 뛰어난 휴머니스트 산세리프체를 사용합니다. · 모노스페이스 폰트는 코드 조각과 기술 식별자에 엄격하게 사용합니다.

04

여백

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

일관된 시각적 밀도를 유지하는 4px 그리드 시스템을 엄격하게 적용합니다.

05

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

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

미묘한 1px 테두리 rgba(172, 172, 175, 0.2)가 다크한 몰입감을 깨뜨리지 않으면서 카드 경계를 정의합니다.

0px 1px 3px 0px rgba(0, 0, 0, 0.05) · 0px 4px 8px 20px rgba(0, 0, 0, 0.2)

06

레이아웃

1200container
12columns
24pxgutter
768 / 1024breakpoints

히어로 섹션을 위한 중앙 정렬 단일 열 레이아웃에서 기능 및 사례 연구 섹션을 위한 다중 열 그리드로 전환합니다.

07

모션과 인터랙션

150msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

보조 요소를 위한 불투명도 페이드. · 인터랙티브 상태에서 부드러운 색상 및 테두리 전환.

인터랙티브 요소에 hover 시 미묘한 불투명도 또는 배경색 변화. · 스케일 또는 색상 변화를 통한 즉각적인 시각적 피드백.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

Appwrite는 개발자를 위한 오픈 소스 백엔드-서비스-플랫폼(BaaS)으로, 다크하고 세련된 UI를 특징으로 합니다. 주요 색상 팔레트는 깊은 다크 배경(#19191c), 고대비 밝은 텍스트(#ffffff), 그리고 주요 호출-to-액션을 위한 생생한 핑크 강조색(#fd356e)으로 구성됩니다. 타이포그래피는 헤드라인용 대담한 고딕체 산세리프와 본문용 휴머니스트 산세리프를 결합하여 깔끔하고 현대적인 미학을 유지합니다. 핵심 디자인 제약 사항: 밝은 배경이나 파스텔 강조색을 절대 사용하지 마십시오; 다크 표면에서의 가독성을 위해 항상 고대비를 유지하십시오; 그리고 주요 액션 버튼에는 시각적 일관성을 위해 엄격히 알약 모양(999px radius) 모서리를 사용하십시오.

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

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

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

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