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:

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:

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;
}