MidnightOps Design System
MidnightOps is a pitch-dark, multi-layered design system engineered for OLED screens and night-shift productivity. Starting from pure black (#000000), it builds elevation through incremental surface layers, creating depth without light. Designed for dark-mode-first productivity tools, it uses blue, green, and amber as functional signal colors against an ink-black canvas. Every pixel of brightness is earned and intentional.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxMidnightOps is a pitch-dark, multi-layered design system engineered for OLED screens and night-shift productivity. Starting from pure black (#000000), it builds elevation through incremental surface layers, creating depth without light. Designed for dark-mode-first productivity tools, it uses blue, green, and amber as functional signal colors against an ink-black canvas. Every pixel of brightness is earned and intentional.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Chips
Elevation & Depth
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here