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