brand-style

Screenpipe ブランドスタイルガイド

哲学

「白黒の幾何学的ミニマリズム」

色は使いません。角は鋭く。タイポグラフィはすっきりと。

---

コアバリュー

価値	説明
プライバシー第一	100% ローカルで、データがマシンから外部に送信されることはありません
オープンソース	調査、変更、所有が可能です
シンプルさ	すっきりとしたミニマルなインターフェース
透明性	「データは自分のものです」
開発者重視	API、拡張性、パワーユーザー

---

タイポグラフィ

フォントスタック

用途	フォント	フォールバック
見出し（サンセリフ）	Space Grotesk	system-ui, sans-serif
本文（セリフ）	Crimson Text	Baskerville, Times New Roman, serif
コード（モノスペース）	IBM Plex Mono	monospace

使用パターン

• 見出し：Space Grotesk、小文字を推奨
• 本文：読みやすさを重視して Crimson Text を使用
• コード／技術情報：IBM Plex Mono
• ボタン：大文字で、文字間隔を広く
• ラベル：小文字、中程度のウェイト

---

色

パレット：グレースケールのみ

ライトモード：

• 背景：#FFFFFF（純白）
• 前景：#000000（純黒）
• ミュート：#666666（40% グレー）
• ボーダー：#CCCCCC（80% グレー）

ダークモード：

• 背景：#000000（純黒）
• 前景：#FFFFFF（純白）
• ミュート：#999999（60% グレー）
• ボーダー：#333333（20% グレー）

テキストの階層

レベル	ライトモード	ダークモード
プライマリ	#000000	#FFFFFF
セカンダリ	#666666	#999999
ターシャリ	#999999	#666666
無効	#B3B3B3	#4D4D4D

ルール：色は使わない

• アクセントカラーは使いません（青、赤、緑などは不可）
• ステータス表示にはグレースケールのみを使います
• 成功／警告／エラーは色ではなく、アイコンで区別します

---

形状

角丸

--radius: 0

すべての角は鋭角です。 角丸は一切使いません。

ボーダー

• 幅：1px solid
• スタイル：鋭く、二値（オン／オフ）
• グラデーションやシャドウは使いません

シャドウ

使いません。 全体をフラットデザインにします。区切りにはボーダーを使います。

---

コンポーネント

ボタン

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

カード

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

入力欄

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

ダイアログ

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

---

モーションとアニメーション

原則

• 高速：標準の時間は150ms
• 最小限：必要な状態変化のみ
• 二値：オン／オフ。複雑なイージングは使いません

タイミング

アニメーション	時間
ボタンのホバー	150ms
ダイアログの開閉	150ms
アコーディオン	200ms
ページ遷移	150ms

---

ブランドボイス

トーン

• 小文字、カジュアル、率直
• 技術的でありながら、わかりやすい
• マーケティング的な誇張はしない
• 開発者向け

例

良い例：

• 「デスクトップのための24時間365日のメモリー」
• 「データは自分のものです」
• 「100% ローカル」

悪い例：

• 「革新的なAI搭載ソリューション！」
• 「業界最高水準のエンタープライズ向けメモリープラットフォーム」

---

タグライン

• 「デスクトップのための24時間365日のメモリー」
• 「Rewindをオープンソースに。100% ローカル。データは自分のものです。」
• 「コンピューターのためのメモリーインフラストラクチャ」

---

デザインチェックリスト

新しいUIコンポーネントを作成する際：

• 見出しに Space Grotesk を使用している
• 本文に Crimson Text（または技術情報に IBM Plex Mono）を使用している
• 1px solid のボーダー
• ボックスシャドウなし
• border radius は0px（鋭角）
• 黒、白、グレーのみ
• トランジションは150ms
• ボタンは大文字、タイトルは小文字
• ホバー状態：色を反転
• フォーカスリング：offset 付きの1px solid

---

主要ファイル

用途	場所
デザイントークン	screenpipe-app-tauri/app/globals.css
Tailwind の設定	screenpipe-app-tauri/tailwind.config.ts
色定数	screenpipe-app-tauri/lib/constants/colors.ts
UIコンポーネント	screenpipe-app-tauri/components/ui/*.tsx
Webサイトの参照	../screen-pipe-website/app/globals.css

---

Webサイトのタイポグラフィ参照

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

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