RawDigs Font Map — Summary for Agent Setup

Typography

A. Identity / Logo Fonts

• Space Grotesk — main identity (closest free to PX Grotesk).
• Syne — experimental alt for titles or posters.
• (optional) Instrument Sans — heavier display use.

B. Body / Interface Fonts

• Inter Tight — UI & paragraphs.
• Satoshi — warm geometric fallback.

C. Pixel / CRT Layer

• VT323 — monospaced pixel (terminal/data look).
• DotGothic16 — dot-matrix futurism.
• Space Mono — smooth console variant.

D. Experimental / Accent

• Syne Tactile — handmade / street-art texture.
• Chakra Petch — techno-kubik for UI labels.
• Press Start 2P — pure 8-bit nostalgia.

---

Color Palette — Black, White & Deep Blood Red

Light Mode

Token	Hex	Usage
Primary	#000000	Pure black - headings, strong text
Accent	#830000	Deep blood red - CTAs, highlights
Accent Hover	#5A0000	Darker blood red on hover
Foreground	#1A1A1A	Near-black body text
Muted	#737373	Gray metadata, secondary text
Border	#E5E5E5	Subtle borders
Surface	#FAFAFA	Off-white cards
Background	#FFFFFF	Pure white background
Highlight	#F5F5F0	Warm neutral highlight

Dark Mode

Token	Hex	Usage
Primary	#FFFFFF	Pure white - headings, strong text
Accent	#CC0000	Bright blood red - CTAs, highlights
Accent Hover	#FF1A1A	Lighter red on hover
Foreground	#E5E5E5	Light gray body text
Muted	#A3A3A3	Mid-gray metadata
Border	#2A2A2A	Dark borders
Surface	#1A1A1A	Near-black cards
Background	#000000	Pure black background
Highlight	#1A0000	Deep red-black highlight

Accent philosophy: - Deep blood red (#830000 / #CC0000) — raw, underground, visceral - Pure black/white foundation for maximum contrast - Mondrian/De Stijl inspired grid aesthetic - Works with dark mode light switching

Implementation:

:root {
  --color-primary: #000000;
  --color-accent: #2C5F8D;
  --color-accent-hover: #1E4764;
  --color-foreground: #1A1A1A;
  --color-muted: #737373;
  --color-border: #E5E5E5;
  --color-surface: #FAFAFA;
  --color-background: #FFFFFF;
  --color-highlight: #FFF4E6;
}

.dark {
  --color-primary: #FFFFFF;
  --color-accent: #4A7BA7;
  --color-accent-hover: #6B9FD6;
  --color-foreground: #E5E5E5;
  --color-muted: #A3A3A3;
  --color-border: #2A2A2A;
  --color-surface: #1A1A1A;
  --color-background: #000000;
  --color-highlight: #1A2A3A;
}

/* Alternative: Deep Earthy Dark Red */
/* Uncomment in app.css to switch to red accent:
:root {
  --rawdigs-accent: #6B2E2E;
  --rawdigs-accent-hover: #4A1F1F;
}
.dark {
  --rawdigs-accent: #A84848;
  --rawdigs-accent-hover: #C96060;
}
*/

---

Usage Notes

• Use Inter for all UI text, headings, and navigation.
• Use Roboto Mono for code snippets, numbers, and technical details.
• Maintain sufficient contrast between text and backgrounds.
• Use the primary color for branding elements and key actions.
• Use the secondary color sparingly for highlights and calls to action.