Direction 4 — Editorial Premium

Cross-platform consistent. Material-honest surfaces. Restrained brass accent. Multi-profile detection baked into the top of the window. The opposite of an AI gradient deck. A tool that feels made, not generated.

SuperMCP
S
supermcp.pro
Running · :48211
B
Chrome Profile
Default · Bishwas
3 sources
⌄
Sources3 connected · 1 inactive
Reddit u/bishwasdotpy
X / Twitter @bishwas
LinkedIn Bishwas B.
BlackHatWorld sign in
4 AI clients connected v0.1.0
macOS

Traffic lights · vibrancy backdrop · menu-bar tray

Centered title in Mac convention. Translucent backdrop respects Mac aesthetic. Tray icon lives in the top menu bar.

SuperMCP
—
▢
✕
S
supermcp.pro
Running · :48211
B
Chrome Profile
Default · Bishwas
3 sources
⌃
B
Default · Bishwas 3 sources ✓
W
Work 2 sources
T
Testing no logins
Windows 11

Min / max / close · Mica backdrop · system tray

Left-aligned brand. Mica acrylic respects W11 aesthetic. Tray lives in the system tray. Profile dropdown shown open (same on Mac).

Design tokens · the standard

What this direction means in practice

What we use
  • Deep ink base #0a0c10, warm cream text #ece9e2
  • One brass accent #c89b3c, used sparingly
  • Inter (UI), Geist Mono (data/ports/IDs only)
  • 1px hairline borders, no shadows on inline elements
  • 10 to 12px radius (Mac-friendly without alienating Windows)
  • Tabular numerals for counts, IDs, ports
  • Material-honest surfaces: backgrounds look like flat surfaces
What we don't
  • Purple / blue / pink gradients (the AI-deck palette)
  • Sage green (Anthropic-coded, reads as derivative)
  • Glowing orbs, sparkle icons, neon accents
  • Generated-art illustrations or AI-stylized mascots
  • Cyberpunk monochrome with hot accents
  • Heavy drop shadows or pillowy "glass" surfaces
  • Mixing more than one accent color in primary UI
References
  • Stripe Press: editorial restraint, warm whites
  • Plain.com: calm dark, clear hierarchy
  • Teenage Engineering: material honesty, brass and ink
  • Things 3: premium cross-platform polish
  • Cron / Notion Calendar: focused dark surfaces
  • 1Password: trustworthy cross-platform feel
  • NYT Cooking: editorial typography for a utility
✓

Lock in Direction 4

Bake these tokens into the design doc, finalize the spec.

☀

Show light-mode variant first

Editorial warm-cream surface with ink type, before committing.

↻

Iterate on the accent

Try a different earth tone (oxblood, slate, deep teal) instead of brass.