Midnight Inventory Theme
The comprehensive visual language for InveNet, a next-generation inventory management platform built on a deep midnight navy foundation with amber-gold accents.
A dark-first palette anchored by deep midnight navy, with amber-gold as the signature accent color. Each color is designed for readability and contrast on dark surfaces.
Plus Jakarta Sans is the sole typeface, providing warmth and geometric clarity. Each level is precisely defined for consistent hierarchy.
The InveNet logo is a geometric isometric cube symbolizing structured inventory. It uses an amber-to-blue gradient representing the transition from data capture to insight.
Dark-surface inputs with subtle borders and amber focus rings. All interactive form elements share consistent sizing and transition behavior.
Elevated surface containers that organize content into scannable groups. Cards gain a subtle glow on hover to indicate interactivity.
Compact status indicators that use color and a dot indicator for quick scanning. Spanish labels reflect the inventory domain.
Dark tables with subtle row hover states and uppercase caption headers. Designed for dense inventory data with clear visual rhythm.
| ID | Item Name | Tag | Zone | Status | Last Scan |
|---|---|---|---|---|---|
| 001482 | Laptop Dell XPS 15 | TAG-00482 | Zone A — Warehouse North | Activo | 2 min ago |
| 001621 | Monitor Samsung 27" | TAG-00621 | Zone B — Warehouse South | Pendiente | 1 hour ago |
| 001198 | Silla Ergonómica Herman Miller | TAG-00198 | Zone C — Office Floor | Inactivo | 3 days ago |
| 001955 | Impresora HP LaserJet Pro | TAG-00955 | Zone A — Warehouse North | En Progreso | 15 min ago |
| 002311 | Proyector Epson PowerLite | TAG-01311 | Zone D — Conference Room | Activo | Just now |
InveNet uses simple geometric outlined SVG icons at 24px default size, 2px stroke width, with round line caps and joins. Icons inherit the current text color.
A 4px base unit ensures consistent rhythm across all layouts. Each step doubles or increments by the base to maintain visual harmony.
Consistent corner rounding from subtle to fully rounded. Larger radii are used for cards and modals; smaller for inputs and buttons.
Elevation is communicated through shadow intensity. Glow effects in amber and blue add accent-colored depth on interactive hover states.
A keyboard-driven navigation modal for power users. Open with ⌘K, navigate with arrow keys, select with Enter, close with Escape.
Non-blocking feedback messages that slide in from the right. Four variants communicate success, error, warning, and informational states.
Placeholder views that guide users when no data is available, search returns nothing, or an error occurs loading content.
Animated placeholders that occupy the same space as real content, giving users a sense of structure while data loads.