brand-style

Name: brand-style
Author: screenpipe

github.com/screenpipe设计与 UI22.2k58 次安装今天更新

代码仓库

关于 brand-style

brand-style 是面向开发者的 Screenpipe 设计指南，适用于创建或更新界面。它规定灰阶配色、字体、几何样式、组件外观和动效规则。

主要功能

01仅使用灰阶的调色板
02字体与字族使用指南
03锐利边角与扁平边框
04组件样式规范
05动效与品牌语气指南

适用场景

01设计 Screenpipe 界面
02设置按钮、卡片、输入框和对话框样式
03按 Screenpipe 规范检查界面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/screenpipe/screenpipe --skill brand-style

安装后在 Claude Code 中输入/brand-style确认已加载。

详细介绍

Screenpipe 品牌风格指南

理念

“黑白几何极简主义”

无色彩。锐利的直角。简洁的字体。

核心价值

价值	描述
隐私至上	100% 本地运行，数据绝不离开你的设备
开源	查看、修改、拥有
简洁	清爽、极简的界面
透明	“你的数据由你掌控”
面向开发者	API、可扩展性、高级用户

字体排版

字体栈

用途	字体	备用字体
标题（无衬线）	Space Grotesk	system-ui, sans-serif
正文（衬线）	Crimson Text	Baskerville, Times New Roman, serif
代码（等宽）	IBM Plex Mono	monospace

使用方式

标题：使用 Space Grotesk，优先采用小写形式
正文：使用 Crimson Text，提升可读性
代码/技术内容：使用 IBM Plex Mono
按钮：使用全大写，并增加字间距
标签：使用小写、中等字重

颜色

调色板：仅使用灰度

浅色模式：

背景：#FFFFFF（纯白）
前景：#000000（纯黑）
弱化色：#666666（40% 灰）
边框：#CCCCCC（80% 灰）

深色模式：

背景：#000000（纯黑）
前景：#FFFFFF（纯白）
弱化色：#999999（60% 灰）
边框：#333333（20% 灰）

文本层级

级别	浅色模式	深色模式
主要	#000000	#FFFFFF
次要	#666666	#999999
第三级	#999999	#666666
禁用	#B3B3B3	#4D4D4D

规则：禁止使用彩色

不使用强调色（蓝色、红色、绿色等）
状态指示仅使用灰度
成功/警告/错误状态通过图标区分，而非颜色

几何样式

边框圆角

--radius: 0

所有边角均为直角。 任何地方都不使用圆角。

边框

宽度：1px 实线
样式：锐利、二元（开/关）
不使用渐变或阴影

阴影

不使用阴影。 全程采用扁平化设计。使用边框进行分隔。

组件

按钮

- Font: UPPERCASE, tracking-wide
- Border: 1px solid
- Corners: Sharp (0px radius)
- Transition: 150ms
- Hover: Color inversion

卡片

- Border: 1px solid
- Shadow: None
- Corners: Sharp
- Padding: 24px (p-6)

输入框

- Style: Command-line aesthetic
- Font: Monospace (IBM Plex Mono)
- Border: 1px solid
- Height: 40px (h-10)
- Focus: Border color change

对话框

- Border: 1px solid
- Shadow: None
- Animation: 150ms fade
- Title: lowercase

动效与动画

原则

快速：标准时长为 150ms
简约：仅呈现必要的状态变化
二元：开/关，不使用复杂的缓动效果

时长

动画	时长
按钮悬停	150ms
对话框打开/关闭	150ms
折叠面板	200ms
页面切换	150ms

品牌语调

语气

使用小写、随意、直接
具有技术感，但易于理解
不使用空洞的营销话术
面向开发者

示例

推荐：

“为你的桌面提供 24/7 记忆”
“你的数据由你掌控”
“100% 本地运行”

不推荐：

“革命性的 AI 驱动解决方案！”
“业界领先的企业级记忆平台”

标语

“为你的桌面提供 24/7 记忆”
“开源版 Rewind。100% 本地运行。你的数据由你掌控。”
“为你的电脑提供记忆基础设施”

设计检查清单

创建新的 UI 组件时：

关键文件

用途	位置
设计令牌	`screenpipe-app-tauri/app/globals.css`
Tailwind 配置	`screenpipe-app-tauri/tailwind.config.ts`
颜色常量	`screenpipe-app-tauri/lib/constants/colors.ts`
UI 组件	`screenpipe-app-tauri/components/ui/*.tsx`
网站参考	`../screen-pipe-website/app/globals.css`

网站字体排版参考

来自 screen-pipe-website/app/layout.tsx：

const fontMono = IBM_Plex_Mono({
  subsets: ["latin"],
  weight: ["400", "500", "600"],
  variable: "--font-mono",
});

const fontSans = Space_Grotesk({
  subsets: ["latin"],
  weight: ["400", "500", "700"],
  variable: "--font-sans",
});

const fontSerif = Crimson_Text({
  subsets: ["latin"],
  weight: ["400", "600", "700"],
  variable: "--font-serif",
});

CSS 中的用法：

body {
  font-family: var(--font-serif), "Crimson Text", serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans), "Space Grotesk", sans-serif;
}
code, pre, kbd, .font-mono {
  font-family: var(--font-mono), "IBM Plex Mono", monospace;
}

支持 Markdown

登录后评论