brand-style（品牌风格）

Screenpipe Brand Style Guide

Philosophy

"Black & White Geometric Minimalism"

No color. Sharp corners. Clean typography.

Core Values

Typography

Font Stack

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

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

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

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