✅ Full stack online: Backend + AI engine + MongoDB connected (~50 user capacity).
Minimal, brutal, professional. No decoration. No friendly shapes. Just clarity and severity.
Surface 950
#0a0a0a
Primary background (dark)
Surface 900
#171717
Secondary background, cards
Surface 800
#262626
Hover states, elevated surfaces
Surface 50
#fafafa
Primary background (light)
Surface 100
#f5f5f5
Secondary background
Text Primary
#fafafa
Main text (dark mode)
Text Secondary
#a3a3a3
Supporting text
Text Tertiary
#525252
Disabled, metadata
Text Primary Light
#0a0a0a
Main text (light mode)
Critical
#ef4444
Bugs, crashes, blockers
Security
#dc2626
Security vulnerabilities
Warning
#f59e0b
Design flaws, bad patterns
Performance
#3b82f6
Performance issues
Info
#6b7280
Style, minor notes
Primary Action
#fafafa
CTA buttons on dark bg
Secondary Action
#171717
CTA buttons on light bg
Display Large
Display Medium
Display Small
The quick brown fox jumps over the lazy dog. This is Body Large.
The quick brown fox jumps over the lazy dog. This is Body Medium.
The quick brown fox jumps over the lazy dog. This is Body Small.
const example = "Code text in Code Large";
const example = "Code text in Code Medium";
const example = "Code text in Code Small";
Standard card for light backgrounds. Clean borders, minimal elevation.
Standard card for dark backgrounds. Subtle contrast, professional.
Used for severe code issues, bugs, security problems. Red accent border.
Used for design flaws, pattern violations. Amber accent border.
Function first. No gradients, no shadows, no friendly shapes. Clarity is the only decoration.
Color is not aesthetic—it's information. Red means critical. Amber means flawed. Blue means slow.
Code deserves monospace. Labels deserve monospace. This is a technical product for technical people.