---
name: brand-style
description: "Screenpipe brand style guide. Reference this when designing UI components, writing copy, or making visual decisions."
allowed-tools: Read
---

# Screenpipe Brand Style Guide

## Philosophy

**"Black & White Geometric Minimalism"**

No color. Sharp corners. Clean typography.

---

## Core Values

| Value | Description |
|-------|-------------|
| **Privacy First** | 100% local, data never leaves your machine |
| **Open Source** | Inspect, modify, own |
| **Simplicity** | Clean, minimal interface |
| **Transparency** | "You own your data" |
| **Developer-Focused** | APIs, extensibility, power users |

---

## Typography

### Font Stack

| Purpose | Font | Fallbacks |
|---------|------|-----------|
| **Headings (sans)** | Space Grotesk | system-ui, sans-serif |
| **Body (serif)** | Crimson Text | Baskerville, Times New Roman, serif |
| **Code (mono)** | IBM Plex Mono | monospace |

### Usage Patterns

- **Headings**: Space Grotesk, lowercase preferred
- **Body text**: Crimson Text for readability
- **Code/technical**: IBM Plex Mono
- **Buttons**: UPPERCASE with tracking-wide
- **Labels**: lowercase, medium weight

---

## Colors

### Palette: Grayscale Only

**Light Mode:**
- Background: #FFFFFF (pure white)
- Foreground: #000000 (pure black)
- Muted: #666666 (40% gray)
- Border: #CCCCCC (80% gray)

**Dark Mode:**
- Background: #000000 (pure black)
- Foreground: #FFFFFF (pure white)
- Muted: #999999 (60% gray)
- Border: #333333 (20% gray)

### Text Hierarchy

| Level | Light Mode | Dark Mode |
|-------|------------|-----------|
| Primary | #000000 | #FFFFFF |
| Secondary | #666666 | #999999 |
| Tertiary | #999999 | #666666 |
| Disabled | #B3B3B3 | #4D4D4D |

### Rule: NO COLOR

- No accent colors (no blue, red, green, etc.)
- Status indicators use grayscale only
- Success/warning/error differentiated by icons, not color

---

## Geometry

### Border Radius

```
--radius: 0
```

**All corners are sharp.** No rounded corners anywhere.

### Borders

- Width: 1px solid
- Style: Sharp, binary (on/off)
- No gradients, no shadows

### Shadows

**None.** Flat design throughout. Use borders for separation.

---

## Components

### Buttons

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

### Cards

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

### Inputs

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

### Dialogs

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

---

## Motion & Animation

### Principles

- **Fast**: 150ms standard duration
- **Minimal**: Only essential state changes
- **Binary**: On/off, no elaborate easing

### Timing

| Animation | Duration |
|-----------|----------|
| Button hover | 150ms |
| Dialog open/close | 150ms |
| Accordion | 200ms |
| Page transitions | 150ms |

---

## Brand Voice

### Tone

- Lowercase, casual, direct
- Technical but accessible
- No marketing fluff
- Developer-oriented

### Examples

**Good:**
- "24/7 memory for your desktop"
- "you own your data"
- "100% local"

**Bad:**
- "REVOLUTIONARY AI-POWERED SOLUTION!"
- "Best-in-class enterprise memory platform"

---

## Taglines

- "24/7 memory for your desktop"
- "Rewind but open source. 100% local. You own your data."
- "Memory infrastructure for your computer"

---

## Design Checklist

When creating new UI components:

- [ ] Using Space Grotesk for headings
- [ ] Using Crimson Text for body (or IBM Plex Mono for technical)
- [ ] 1px solid border
- [ ] No box shadows
- [ ] 0px border radius (sharp corners)
- [ ] Black, white, or gray only
- [ ] 150ms transitions
- [ ] UPPERCASE for buttons, lowercase for titles
- [ ] Hover state: color inversion
- [ ] Focus ring: 1px solid with offset

---

## Key Files

| Purpose | Location |
|---------|----------|
| Design tokens | `screenpipe-app-tauri/app/globals.css` |
| Tailwind config | `screenpipe-app-tauri/tailwind.config.ts` |
| Color constants | `screenpipe-app-tauri/lib/constants/colors.ts` |
| UI components | `screenpipe-app-tauri/components/ui/*.tsx` |
| Website reference | `../screen-pipe-website/app/globals.css` |

---

## Website Typography Reference

From `screen-pipe-website/app/layout.tsx`:

```typescript
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",
});
```

Usage in CSS:
```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;
}
```


---
Source attribution: screenpipe
Original project: https://github.com/screenpipe/screenpipe/blob/76be8548f994784af7963b7dbc1b341da2d7237b/.claude/skills/brand-style/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Dave AI.

## Upstream license notice

MIT License

Copyright (c) 2024-2026 louis030195

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

---

The above MIT license applies to all code in this repository, with the
exception of code contained in the `ee/` directory, which is licensed under
the Screenpipe Enterprise License. See [ee/LICENSE](ee/LICENSE) for details.



# Dave AI resource metadata

Creator / publisher: screenpipe
Original project: https://github.com/screenpipe/screenpipe/blob/76be8548f994784af7963b7dbc1b341da2d7237b/.claude/skills/brand-style/SKILL.md
Attribution basis: Recovered original package and original project license at a pinned revision

Fields of work: Content & Media, Design, Marketing
Roles: Brand Strategist, Copywriter, Graphic Designer, Product Designer, UX Designer
Specialties: Cross Platform, Design
Tools: Tool not specified
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: 1fc0abf96f279705164ff782d88a44e43bd106c5e2d8fc567d6d737d293380ea
Metadata reviewed: 2026-10-27
This metadata supersedes earlier Dave AI catalog attribution. Original instruction and supporting files are preserved.