精选 · 开放 · 免费

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-sans 字体，字距收紧。 · 正文默认使用高可读性 humanist-sans 字体。 · 等宽字体仅用于代码片段和技术标识符。

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

次要元素的透明度淡入淡出。 · 交互状态下的平滑颜色和边框过渡。

交互元素在悬停时微妙的透明度或背景色变化。 · 通过缩放或颜色变化提供即时视觉反馈。

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）和用于主要号召性用语的鲜艳粉色强调色（#fd356e）组成。排版结合了用于标题的粗体 grotesque-sans 字体和用于正文的 humanist-sans 字体，保持了简洁现代的美感。关键设计约束：永不使用浅色背景或粉彩强调色；始终在深色表面上保持高对比度以确保可读性；并严格使用药丸形（999px 圆角）为主要操作按钮，以确保视觉一致性。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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