// EXAMPLE BLUEPRINT — REFERENCE IMPLEMENTATION

Build. Preview. Reference.

This is the living reference for how every MelTuc application landing page should look. Every section, every component, every pattern — demonstrated here as a template for all future blueprints in the ecosystem.

// landing page · component showcase · design reference · style guide

Launch App Explore Features

Color Tokens

Font Families

20+

Components

100%

Standards Compliant

// WHERE DO YOU WANT TO GO

Color System

All 13 design tokens, transparency values, and semantic color usage demonstrated live.

View Colors →

Typography

Barlow Condensed headings, Geist Mono body text, every size and weight in the system.

View Fonts →

Components

Buttons, badges, cards, tables, forms, modals, toasts — every UI element.

View Components →

Charts & Data

Data visualization patterns, stat tiles, progress bars, and data grids.

View Charts →

// WHAT THIS DEMONSTRATES

Complete Design System Reference

Every component, pattern, and standard from the MelTuc Theme & UI Standards — rendered live so you can see exactly how your blueprint should look.

🎨

Color Palette

All 13 CSS variable tokens with live swatches. Background, panel, border, text, accent, semantic, and disabled colors.

🔠

Typography Scale

Barlow Condensed for headings, Geist Mono for data. Every size, weight, and spacing value in the system.

📊

Data Visualization

Stat tiles, progress bars, data grids with striped rows and hover states. All the patterns for displaying data.

🗂

Form Controls

Text inputs, textareas, selects, toggles, search inputs, labels — all form elements with focus states.

📦

Layout Patterns

Sidebar + main shell, full-width sections, card grids, stat grids, KV detail panels, and responsive breakpoints.

⚡

Interactive Elements

Buttons (6 variants, 3 sizes), badges (8 variants), modals, toasts, tabs, pagination, and bulk actions.

// SCREENSHOTS

Application Views

Preview the main screens of the Example Blueprint. Every blueprint landing page must include screenshots like these — minimum 3 per app.

[ Dashboard View — 1280 x 800 ]

Main dashboard showing stat tiles, navigation sidebar, and data grid with sample records.

[ Component Library — 1280 x 800 ]

Full component showcase with buttons, badges, form controls, and color swatches.

[ Form & Modal View — 1280 x 800 ]

Form inputs with labels, validation states, and a modal dialog overlaying the main content.

[ Data Table View — 1280 x 800 ]

Paginated data grid with sortable columns, row hover states, CSV export, and bulk selection.

// HOW IT WORKS

Blueprint Structure

Every blueprint follows the same structure. This example is built exactly the same way every production app is built.

TypePremier

Slugexample

AuthSWIP (disabled for reference)

DatabaseNone (static reference only)

MCP ToolsNone

FrameworkFlask Blueprint, Jinja2 Templates

Design SystemMelTuc Theme Standards v2.0