SYSTEM
Anti-vibe. Pro-data. Quantified-self for the post-Headspace generation. Mono labels everywhere, sharp 2px corners, no purple.
TOKENS_
Surface & accents
base · #F4F4F4
card surface · #FFFFFF
ink · #0D0D0D
analysis panel · #1A1A1A
mint, primary · #6CEFA0
streak · #6CDDEF
milestone · #B06CEF
achievement · #EF9B6C
flag · #FF6B6B
Typography
10:42:01.04 SYSTEM // CYCLE_INIT
[ID: 0x4492] / READ_30_MINS
Radius & shadow
COMPONENTS_
Button.
Sharp 2px corners. JBM CAPS, 1px tracking. Mint variant for commit-style success actions.
Input.
No box. Bottom-border 1px only. Mono micro-label above. Focus pulls border to fg.
Textarea.
Same energy as Input — taller. Mono everywhere, no rounded edges.
Select.
Mono CAPS for the value. Soft shadow on focus. Custom chevron in fg.
Card.
White surface, soft shadow, near-invisible border. Optional code-texture in the corner. Dark variant for analysis panels.
Status: OPERATIONAL
Badge.
Tiny 9px JBM rectangle. Filled = mint bg, fg text — for live/passing state.
Dialog.
White card, sharp corners, soft shadow. Title in Space Grotesk weight 400. Backdrop rgba(13,13,13,0.4).
Tabs.
Segmented nav-items. Active tab fills sort, white text, 0 radius. Arrow keys move you.
Switch.
Sharp 2px square checkbox + mint check. Optional `terminal` prop renders [X]/[ ] LABEL in JBM.
Toast.
White card with 3px mint accent border-left. JBM timestamp top-right. Slide-in from the right.
INSTALL_
One paste, one prompt, your project is wearing System. No npm install, no config files, no purple gradients.
BIG GREEN INSTALL BUTTON →MCP COMING SOON_
Wardrobe MCP server is in the works. Soon you'll just say "install system" to your AI and it'll be done. Sign up for the drop.
SEE IT LIVE_
Sequence — a fictional habit-tracking system using System end-to-end.