Brand Style

1---
2name: brand-style
3description: "Screenpipe brand style guide. Reference this when designing UI components, writing copy, or making visual decisions."
4allowed-tools: Read
5---
6 
7# Screenpipe Brand Style Guide
8 
9## Philosophy
10 
11**"Black & White Geometric Minimalism"**
12 
13No color. Sharp corners. Clean typography.
14 
15---
16 
17## Core Values
18 
19| Value | Description |
20|-------|-------------|
21| **Privacy First** | 100% local, data never leaves your machine |
22| **Open Source** | Inspect, modify, own |
23| **Simplicity** | Clean, minimal interface |
24| **Transparency** | "You own your data" |
25| **Developer-Focused** | APIs, extensibility, power users |
26 
27---
28 
29## Typography
30 
31### Font Stack
32 
33| Purpose | Font | Fallbacks |
34|---------|------|-----------|
35| **Headings (sans)** | Space Grotesk | system-ui, sans-serif |
36| **Body (serif)** | Crimson Text | Baskerville, Times New Roman, serif |
37| **Code (mono)** | IBM Plex Mono | monospace |
38 
39### Usage Patterns
40 
41- **Headings**: Space Grotesk, lowercase preferred
42- **Body text**: Crimson Text for readability
43- **Code/technical**: IBM Plex Mono
44- **Buttons**: UPPERCASE with tracking-wide
45- **Labels**: lowercase, medium weight
46 
47---
48 
49## Colors
50 
51### Palette: Grayscale Only
52 
53**Light Mode:**
54- Background: #FFFFFF (pure white)
55- Foreground: #000000 (pure black)
56- Muted: #666666 (40% gray)
57- Border: #CCCCCC (80% gray)
58 
59**Dark Mode:**
60- Background: #000000 (pure black)
61- Foreground: #FFFFFF (pure white)
62- Muted: #999999 (60% gray)
63- Border: #333333 (20% gray)
64 
65### Text Hierarchy
66 
67| Level | Light Mode | Dark Mode |
68|-------|------------|-----------|
69| Primary | #000000 | #FFFFFF |
70| Secondary | #666666 | #999999 |
71| Tertiary | #999999 | #666666 |
72| Disabled | #B3B3B3 | #4D4D4D |
73 
74### Rule: NO COLOR
75 
76- No accent colors (no blue, red, green, etc.)
77- Status indicators use grayscale only
78- Success/warning/error differentiated by icons, not color
79 
80---
81 
82## Geometry
83 
84### Border Radius
85 
86```
87--radius: 0
88```
89 
90**All corners are sharp.** No rounded corners anywhere.
91 
92### Borders
93 
94- Width: 1px solid
95- Style: Sharp, binary (on/off)
96- No gradients, no shadows
97 
98### Shadows
99 
100**None.** Flat design throughout. Use borders for separation.
101 
102---
103 
104## Components
105 
106### Buttons
107 
108```
109- Font: UPPERCASE, tracking-wide
110- Border: 1px solid
111- Corners: Sharp (0px radius)
112- Transition: 150ms
113- Hover: Color inversion
114```
115 
116### Cards
117 
118```
119- Border: 1px solid
120- Shadow: None
121- Corners: Sharp
122- Padding: 24px (p-6)
123```
124 
125### Inputs
126 
127```
128- Style: Command-line aesthetic
129- Font: Monospace (IBM Plex Mono)
130- Border: 1px solid
131- Height: 40px (h-10)
132- Focus: Border color change
133```
134 
135### Dialogs
136 
137```
138- Border: 1px solid
139- Shadow: None
140- Animation: 150ms fade
141- Title: lowercase
142```
143 
144---
145 
146## Motion & Animation
147 
148### Principles
149 
150- **Fast**: 150ms standard duration
151- **Minimal**: Only essential state changes
152- **Binary**: On/off, no elaborate easing
153 
154### Timing
155 
156| Animation | Duration |
157|-----------|----------|
158| Button hover | 150ms |
159| Dialog open/close | 150ms |
160| Accordion | 200ms |
161| Page transitions | 150ms |
162 
163---
164 
165## Brand Voice
166 
167### Tone
168 
169- Lowercase, casual, direct
170- Technical but accessible
171- No marketing fluff
172- Developer-oriented
173 
174### Examples
175 
176**Good:**
177- "24/7 memory for your desktop"
178- "you own your data"
179- "100% local"
180 
181**Bad:**
182- "REVOLUTIONARY AI-POWERED SOLUTION!"
183- "Best-in-class enterprise memory platform"
184 
185---
186 
187## Taglines
188 
189- "24/7 memory for your desktop"
190- "Rewind but open source. 100% local. You own your data."
191- "Memory infrastructure for your computer"
192 
193---
194 
195## Design Checklist
196 
197When creating new UI components:
198 
199- [ ] Using Space Grotesk for headings
200- [ ] Using Crimson Text for body (or IBM Plex Mono for technical)
201- [ ] 1px solid border
202- [ ] No box shadows
203- [ ] 0px border radius (sharp corners)
204- [ ] Black, white, or gray only
205- [ ] 150ms transitions
206- [ ] UPPERCASE for buttons, lowercase for titles
207- [ ] Hover state: color inversion
208- [ ] Focus ring: 1px solid with offset
209 
210---
211 
212## Key Files
213 
214| Purpose | Location |
215|---------|----------|
216| Design tokens | `screenpipe-app-tauri/app/globals.css` |
217| Tailwind config | `screenpipe-app-tauri/tailwind.config.ts` |
218| Color constants | `screenpipe-app-tauri/lib/constants/colors.ts` |
219| UI components | `screenpipe-app-tauri/components/ui/*.tsx` |
220| Website reference | `../screen-pipe-website/app/globals.css` |
221 
222---
223 
224## Website Typography Reference
225 
226From `screen-pipe-website/app/layout.tsx`:
227 
228```typescript
229const fontMono = IBM_Plex_Mono({
230  subsets: ["latin"],
231  weight: ["400", "500", "600"],
232  variable: "--font-mono",
233});
234 
235const fontSans = Space_Grotesk({
236  subsets: ["latin"],
237  weight: ["400", "500", "700"],
238  variable: "--font-sans",
239});
240 
241const fontSerif = Crimson_Text({
242  subsets: ["latin"],
243  weight: ["400", "600", "700"],
244  variable: "--font-serif",
245});
246```
247 
248Usage in CSS:
249```css
250body {
251  font-family: var(--font-serif), "Crimson Text", serif;
252}
253h1, h2, h3, h4, h5, h6 {
254  font-family: var(--font-sans), "Space Grotesk", sans-serif;
255}
256code, pre, kbd, .font-mono {
257  font-family: var(--font-mono), "IBM Plex Mono", monospace;
258}
259```
260