Colors
The full color palette. Use CSS variables only — never hardcode hex values.
Typography
Barlow Condensed for headings and navigation. Geist Mono for body, code, and data.
The MelTuc design system uses a deliberate two-font strategy that separates structural hierarchy from data presentation. Barlow Condensed is a narrow sans-serif that commands attention without consuming horizontal space, making it the primary choice for page titles, section headers, navigation labels, and button text. Its condensed letterforms allow longer headings to fit comfortably within sidebars and card titles while maintaining visual weight at sizes ranging from 15px navigation links up to 48px hero headlines. Weights 400, 600, and 700 are loaded from Google Fonts and should be applied consistently: 700 for page-level titles, 600 for section headers and interactive labels, and 400 for secondary navigational elements.
Geist Mono serves as the body and data typeface across every application in the ecosystem. As a monospace font, it provides the technical clarity that developers and power users expect when reading configuration values, database output, API responses, and log entries. At 12px it remains highly legible on dark backgrounds while maintaining the dense information display that data-heavy applications require. Table cells, form inputs, code blocks, status messages, and all general body text render in Geist Mono. For metadata labels, table headers, and category tags, Geist Mono is set at 10-11px with uppercase transforms and 0.1em letter-spacing to create a clear visual distinction from the content it describes.
On public-facing landing pages where visitors may read longer paragraphs of marketing or explanatory copy, Inter is available as a third option. Inter is a variable-weight sans-serif optimized for screen readability at small sizes, and its proportional spacing makes it more comfortable for sustained reading than a monospace alternative. However, Inter should only appear on public landing pages and blog content. Once a user enters an authenticated application shell, all text reverts to Geist Mono to maintain the technical, data-forward aesthetic that defines the MelTuc experience.
Buttons
All interactive elements use Barlow Condensed. Action verbs only — never "Learn More".
Badges & Tags
Status indicators and categorization chips.
Forms
All input controls with states. Labels are uppercase Geist Mono 10px.
Tables
Data tables with sort headers, row hover, checkbox selection, and pagination.
| App Name | Type | Status | Users | Last Deploy | Actions | |
|---|---|---|---|---|---|---|
| EVE Market Scanner | premier | live | 1,247 | 2026-04-07 | ||
| JSON Formatter | webtool | live | 8,302 | 2026-04-05 | ||
| SWIP Auth Service | internal | staging | — | 2026-04-06 | ||
| Wormhole Mapper | eve | down | 342 | 2026-04-01 | ||
| Story Generator | ai | beta | 56 | 2026-04-07 |
Cards & Stats
Content containers with hover borders and stat display cards.
Alerts & Toasts
Inline notifications and transient toast messages.
Modals
Overlay dialogs for confirmations, forms, and details. Close with Esc key.
Slide-Out Panels
Side panels that slide in from either edge of the screen. Use left panels for detail views and record editing. Use right panels for activity feeds, notifications, and contextual help.
Popup Dialogs
Anchored popup dialogs that appear inline near a trigger element. Use for quick actions, confirmations, or mini-forms without a full modal overlay.
Tabs
Horizontal tab navigation for switching between views within a page.
Progress & Loading
Progress bars, spinners, and skeleton loaders.
Charts
Pure CSS/HTML charts for dashboards and reports. No external charting libraries required.
Miscellaneous
Tooltips, keyboard shortcuts, code blocks, empty states, and other utilities.
Create your first item to get started.