// AGENT IMPLEMENTATION GUIDE

MelTuc Theme — Complete Reference

This page contains everything a coding agent needs to implement the MelTuc design system. All CSS, HTML patterns, color tokens, typography rules, and component structures are documented below. Copy these values exactly — no interpretation needed.

Self-Contained Machine-Readable Production Ready

1. Quick Start

Every MelTuc page needs these three things in the <head>:

<!-- 1. Font imports (REQUIRED) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">

<!-- 2. Design tokens (CSS variables) -->
<link rel="stylesheet" href="/static/css/design_tokens.css">

<!-- 3. Component library -->
<link rel="stylesheet" href="/static/css/shared.css">

Rule: If you cannot link to the shared CSS files, copy the full CSS below into a <style> block. Every variable and class must be present.

2. Color System (CSS Variables)

All colors are CSS custom properties on :root. Never use raw hex values inline — always reference the variable.

:root {
    /* Surfaces */
    --bg:           #0d1117;   /* Page background */
    --panel:        #1a1f2e;   /* Cards, sidebar, modals, dropdowns */
    --border:       #1e2530;   /* All borders and dividers */

    /* Text */
    --text:         #ffffff;   /* Primary text */
    --muted:        #8892a4;   /* Labels, secondary text, timestamps */

    /* Brand Accents */
    --accent:       #00d4aa;   /* Teal — primary brand, links, CTAs, active states */
    --amber:        #f59e0b;   /* Amber — secondary accent */

    /* Semantic Colors */
    --danger:       #ef4444;   /* Errors, delete, critical */
    --success:      #22c55e;   /* Success, completed */
    --warning:      #fbbf24;   /* Warnings, in-progress */
    --info:         #60a5fa;   /* Info, neutral highlights */

    /* Grays */
    --gray-dark:    #6b7280;   /* Placeholder text, disabled */
    --gray-medium:  #9ca3af;   /* Secondary badges */

    /* Shape */
    --radius:       4px;       /* Border radius — ALL elements, no exceptions */
}

Transparency / Alpha Values

Usage	Value
Accent badge background	`rgba(0, 212, 170, 0.15)`
Accent hover / tint	`rgba(0, 212, 170, 0.10)`
Accent border glow	`rgba(0, 212, 170, 0.20)`
Card hover border	`rgba(0, 212, 170, 0.3)`
Active nav background	`rgba(0, 212, 170, 0.08)`
Table even-row stripe	`rgba(26, 31, 46, 0.30)`
Table row hover	`rgba(30, 37, 48, 0.80)`
Nav link hover bg	`rgba(255, 255, 255, 0.04)`
Modal backdrop	`rgba(0, 0, 0, 0.70)`
Slideout backdrop	`rgba(0, 0, 0, 0.50)`
Sticky nav bg	`rgba(13, 17, 23, 0.95)` + `backdrop-filter: blur(12px)`
Danger badge bg	`rgba(239, 68, 68, 0.15)`
Amber badge bg	`rgba(245, 158, 11, 0.15)`
Success badge bg	`rgba(34, 197, 94, 0.15)`
Info badge bg	`rgba(96, 165, 250, 0.15)`

3. Typography

Two fonts only. No exceptions.

Element	Font Family	Size	Weight	Notes
H1 (page title)	`Barlow Condensed`	28px	700	`letter-spacing: 2px`
H2 (section)	`Barlow Condensed`	22px	700
H3 (subsection)	`Barlow Condensed`	16px	600
H4 (minor)	`Barlow Condensed`	14px	600
Nav links	`Barlow Condensed`	15px	600
Logo	`Barlow Condensed`	20px	700	`letter-spacing: 2px; color: var(--accent)`
Body text	`Geist Mono`	12px	400	`line-height: 1.6`
Table cells	`Geist Mono`	12px	400
Buttons	`Geist Mono`	12px	400
Input text	`Geist Mono`	12px	400
Labels/tags	`Geist Mono`	10-11px	400	`uppercase; letter-spacing: 0.1em`
Stat values	`Barlow Condensed`	28px	700
Card titles	`Barlow Condensed`	14px	600	`uppercase; letter-spacing: 1px`

/* Base CSS Reset — include in every page */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Geist Mono', monospace;
    font-size: 12px;
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.05em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* CRITICAL — breaks toggle/modal functionality without this */
[hidden] { display: none !important; }

4. Layout Patterns

4.1 Sidebar + Main (App Layout)

Used for dashboard/app pages. Sidebar is 220px fixed, main content scrolls.

<div class="page-shell">
    <aside class="sidebar">
        <div class="sidebar-header">
            <a href="/" class="sidebar-logo">MELTUC</a>
        </div>
        <nav>
            <div class="nav-section">
                <div class="nav-label">Section Name</div>
                <a href="#" class="nav-link active">Active Item</a>
                <a href="#" class="nav-link">Other Item</a>
            </div>
        </nav>
    </aside>
    <div class="main-content">
        <div class="page-header">
            <div class="header-left">
                <div class="icon-square teal">Icon</div>
                <div>
                    <div class="page-title">Page Title</div>
                    <div class="page-subtitle">Description text</div>
                </div>
            </div>
        </div>
        <div class="page-body">
            <!-- Content here -->
        </div>
    </div>
</div>

4.2 Top Nav + Full Width (Public/Landing Layout)

<nav class="top-nav">
    <a href="/" class="top-nav-logo">MELTUC</a>
    <div class="top-nav-links">
        <a href="#" class="top-nav-link">Link</a>
    </div>
</nav>
<div class="section">
    <!-- Full-width content -->
</div>

5. Component CSS (Complete)

Copy this entire block to get every component. This is the full shared.css.

5.1 Cards

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}
.card:hover { border-color: rgba(0, 212, 170, 0.3); }

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.card-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

5.2 Buttons

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius);
    font-family: 'Geist Mono', monospace;
    font-size: 12px;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}
.btn:hover { opacity: 0.85; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Variants */
.btn-teal    { background: var(--accent);  color: var(--bg); }
.btn-amber   { background: var(--amber);   color: var(--bg); }
.btn-danger  { background: var(--danger);  color: var(--text); }
.btn-success { background: var(--success); color: var(--bg); }
.btn-info    { background: var(--info);    color: var(--bg); }
.btn-muted   { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.btn-ghost   { background: transparent; color: var(--muted); }

/* Sizes */
.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-lg { padding: 12px 24px; font-size: 14px; }

5.3 Badges

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 400;
    white-space: nowrap;
}

.badge-teal    { background: rgba(0, 212, 170, 0.15); color: var(--accent); }
.badge-amber   { background: rgba(245, 158, 11, 0.15); color: var(--amber); }
.badge-red     { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.badge-green   { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.badge-gray    { background: rgba(107, 114, 128, 0.15); color: var(--gray-medium); }
.badge-blue    { background: rgba(96, 165, 250, 0.15); color: var(--info); }

/* Priority badges */
.badge-p0 { background: rgba(239, 68, 68, 0.2);  color: var(--danger); }
.badge-p1 { background: rgba(245, 158, 11, 0.2); color: var(--amber); }
.badge-p2 { background: rgba(234, 179, 8, 0.2);  color: #eab308; }
.badge-p3 { background: rgba(107, 114, 128, 0.2); color: var(--gray-medium); }

5.4 Form Inputs

.input {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    color: var(--text);
    font-family: 'Geist Mono', monospace;
    font-size: 12px;
    width: 100%;
    outline: none;
    transition: border-color 0.15s ease;
}
.input:focus { border-color: var(--accent); }
.input::placeholder { color: var(--gray-dark); }

textarea.input { resize: vertical; min-height: 80px; }

select.input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238892a4' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.input-label {
    display: block;
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}
.input-group { margin-bottom: 16px; }

5.5 Data Tables

.data-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.data-grid th {
    padding: 12px 10px;
    text-align: left;
    font-size: 10px;
    font-weight: 400;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data-grid td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}

.data-grid tr:nth-child(even) td { background: rgba(26, 31, 46, 0.30); }
.data-grid tr:hover td { background: rgba(30, 37, 48, 0.80); cursor: pointer; }

.data-grid td.muted { color: var(--muted); }
.data-grid td.teal  { color: var(--accent); }
.data-grid td.amber { color: var(--amber); }
.data-grid td.red   { color: var(--danger); }

5.6 Stat Tiles

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.stat-tile {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

.stat-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.stat-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
}
.stat-value.teal  { color: var(--accent); }
.stat-value.amber { color: var(--amber); }
.stat-value.red   { color: var(--danger); }

5.7 Key-Value Detail Panel

.detail-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

.kv-row {
    display: flex;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.kv-row:last-child { border-bottom: none; }

.kv-key {
    width: 160px;
    flex-shrink: 0;
    color: var(--muted);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
}

.kv-val {
    flex: 1;
    color: var(--text);
    word-break: break-all;
}

5.8 Modals

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.70);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    width: 480px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.modal-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

.modal-close {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
}
.modal-close:hover { color: var(--text); }

/* Usage: add hidden attribute, remove to show */
/* <div class="modal-backdrop" hidden>...</div> */

5.9 Slide-Out Panels

.slideout-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.50);
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.slideout-backdrop.open { opacity: 1; visibility: visible; }

.slideout-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 480px;
    max-width: 90vw;
    background: var(--panel);
    border-left: 1px solid var(--border);
    z-index: 901;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease;
}
.slideout-panel.right { right: 0; transform: translateX(100%); }
.slideout-panel.left  { left: 0; border-left: none; border-right: 1px solid var(--border); transform: translateX(-100%); }
.slideout-backdrop.open .slideout-panel { transform: translateX(0); }

.slideout-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slideout-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

.slideout-body { padding: 24px; overflow-y: auto; flex: 1; }
.slideout-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* JS: add/remove .open class on .slideout-backdrop */

5.10 Toasts

.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: 12px;
    color: var(--text);
    min-width: 280px;
    max-width: 400px;
    animation: toast-in 0.2s ease;
}

.toast-success { border-left: 3px solid var(--success); }
.toast-error   { border-left: 3px solid var(--danger); }
.toast-warning { border-left: 3px solid var(--warning); }
.toast-info    { border-left: 3px solid var(--info); }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

5.11 Tabs

.tab-bar {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.tab {
    padding: 10px 20px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    background: none;
    border-top: none; border-left: none; border-right: none;
    transition: all 0.15s ease;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

5.12 Pagination

.pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
}

.pagination-btn {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted);
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    cursor: pointer;
}
.pagination-btn:hover { border-color: var(--accent); color: var(--text); }
.pagination-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.pagination-btn:disabled { opacity: 0.3; cursor: not-allowed; }

5.13 Progress Bars

.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.progress-fill.teal  { background: var(--accent); }
.progress-fill.amber { background: var(--amber); }
.progress-fill.red   { background: var(--danger); }

5.14 Toggle Switch

.toggle { position: relative; width: 36px; height: 20px; display: inline-block; }
.toggle input { display: none; }
.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--text);
    top: 2px; left: 2px;
    transition: transform 0.15s ease;
}
.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider::before { transform: translateX(16px); }

/* Usage: <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label> */

5.15 Charts & Data Visualization (CSS/SVG Only)

All charts are pure CSS + inline SVG. No JavaScript charting libraries. See each pattern below.

Horizontal Bar Chart

<!-- CSS -->
.chart-bar-container { display: flex; flex-direction: column; gap: 8px; }
.chart-bar-row { display: flex; align-items: center; gap: 12px; }
.chart-bar-label { width: 80px; font-size: 11px; color: var(--muted); text-align: right; }
.chart-bar {
    height: 24px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    padding-left: 8px;
    font-size: 10px;
    color: var(--bg);
    font-weight: 500;
}

<!-- HTML -->
<div class="chart-bar-container">
    <div class="chart-bar-row">
        <div class="chart-bar-label">Label</div>
        <div class="chart-bar" style="width: 85%; background: var(--accent);">489</div>
    </div>
</div>

Vertical Bar Chart

<!-- CSS -->
.vbar-chart {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 180px;
    padding-top: 8px;
    border-bottom: 1px solid var(--border);
}
.vbar-group { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.vbar { border-radius: var(--radius) var(--radius) 0 0; width: 100%; max-width: 48px; }
.vbar-val { font-size: 10px; color: var(--muted); font-weight: 500; }
.vbar-label { font-size: 10px; color: var(--muted); margin-top: 8px; }

<!-- HTML -->
<div class="vbar-chart">
    <div class="vbar-group">
        <div class="vbar-val">$4.2k</div>
        <div class="vbar" style="height: 42%; background: var(--accent);"></div>
        <div class="vbar-label">Jan</div>
    </div>
    <!-- repeat for each bar -->
</div>

Donut Chart (SVG)

<!-- Uses stroke-dasharray on circles. circumference = 2 * PI * r = 314 for r=50 -->
<!-- Each segment: stroke-dasharray="segmentLength 314" stroke-dashoffset="-previousTotal" -->

.donut-container { display: flex; gap: 32px; align-items: center; }
.donut-legend { display: flex; flex-direction: column; gap: 6px; }
.donut-legend-item { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.donut-legend-dot { width: 10px; height: 10px; border-radius: 50%; }

<svg width="120" height="120" viewBox="0 0 120 120">
    <circle cx="60" cy="60" r="50" fill="none" stroke="var(--border)" stroke-width="16"/>
    <circle cx="60" cy="60" r="50" fill="none" stroke="var(--accent)" stroke-width="16"
        stroke-dasharray="188 314" stroke-dashoffset="0" transform="rotate(-90 60 60)"/>
    <circle cx="60" cy="60" r="50" fill="none" stroke="var(--amber)" stroke-width="16"
        stroke-dasharray="78 314" stroke-dashoffset="-188" transform="rotate(-90 60 60)"/>
    <text x="60" y="60" text-anchor="middle" dy=".3em" fill="var(--text)"
        font-family="'Barlow Condensed'" font-size="20" font-weight="700">532</text>
</svg>

Pie Chart (SVG)

<!-- Same as donut but with stroke-width = diameter (2*r = 112 for r=56) -->
<!-- circumference = 2 * PI * 56 = 352 -->

<svg width="120" height="120" viewBox="0 0 120 120">
    <circle cx="60" cy="60" r="56" fill="var(--border)"/>
    <circle cx="60" cy="60" r="56" fill="none" stroke="var(--accent)" stroke-width="112"
        stroke-dasharray="127 352" stroke-dashoffset="0" transform="rotate(-90 60 60)"/>
    <circle cx="60" cy="60" r="56" fill="none" stroke="var(--amber)" stroke-width="112"
        stroke-dasharray="88 352" stroke-dashoffset="-127" transform="rotate(-90 60 60)"/>
    <circle cx="60" cy="60" r="56" fill="none" stroke="var(--danger)" stroke-width="112"
        stroke-dasharray="53 352" stroke-dashoffset="-215" transform="rotate(-90 60 60)"/>
</svg>

Line Chart / Area Chart (SVG)

<!-- Line: use <polyline> with points. Area: add <polygon> closing to baseline. -->
<!-- Grid: horizontal <line> elements. Labels: <text> elements. -->

<svg width="100%" height="200" viewBox="0 0 600 200" preserveAspectRatio="none">
    <!-- Grid lines -->
    <line x1="0" y1="50" x2="600" y2="50" stroke="var(--border)" stroke-width="1"/>
    <line x1="0" y1="100" x2="600" y2="100" stroke="var(--border)" stroke-width="1"/>

    <!-- Area fill (optional — same points as line, closed to bottom) -->
    <polygon points="25,140 125,90 225,60 325,40 425,30 525,35 525,190 25,190"
        fill="rgba(0, 212, 170, 0.10)"/>

    <!-- Line -->
    <polyline points="25,140 125,90 225,60 325,40 425,30 525,35"
        fill="none" stroke="var(--accent)" stroke-width="2"
        stroke-linejoin="round" stroke-linecap="round"/>

    <!-- Data points -->
    <circle cx="25" cy="140" r="3" fill="var(--accent)"/>

    <!-- Dashed second line (e.g. errors) -->
    <polyline points="25,185 125,182 225,175 325,178 425,172 525,170"
        fill="none" stroke="var(--danger)" stroke-width="1.5"
        stroke-dasharray="4 3" stroke-linejoin="round"/>

    <!-- X-axis labels -->
    <text x="25" y="198" fill="var(--muted)" font-size="9"
        font-family="'Geist Mono'" text-anchor="middle">00</text>
</svg>

Stacked Bar Chart

<!-- CSS -->
.stacked-bar-container { display: flex; flex-direction: column; gap: 12px; }
.stacked-bar-row-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.stacked-bar { display: flex; height: 24px; border-radius: var(--radius); overflow: hidden; }
.stacked-bar-seg {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--bg);
    font-weight: 500;
}

<!-- HTML -->
<div class="stacked-bar-container">
    <div>
        <div class="stacked-bar-row-label">Production</div>
        <div class="stacked-bar">
            <div class="stacked-bar-seg" style="width: 45%; background: var(--accent);">45%</div>
            <div class="stacked-bar-seg" style="width: 30%; background: var(--amber);">30%</div>
            <div class="stacked-bar-seg" style="width: 25%; background: var(--info);">25%</div>
        </div>
    </div>
</div>

Sparklines (Inline Mini Charts)

<!-- CSS -->
.sparkline-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.sparkline-row:last-child { border-bottom: none; }
.sparkline-label { width: 100px; font-size: 11px; color: var(--muted); }
.sparkline-value { width: 60px; font-size: 12px; font-weight: 500; text-align: right; }

<!-- HTML -->
<div class="sparkline-row">
    <div class="sparkline-label">API Gateway</div>
    <svg width="120" height="24" viewBox="0 0 120 24">
        <polyline points="0,18 15,14 30,16 45,8 60,10 75,6 90,4 105,8 120,2"
            fill="none" stroke="var(--accent)" stroke-width="1.5" stroke-linejoin="round"/>
    </svg>
    <div class="sparkline-value text-accent">99.9%</div>
    <span class="badge badge-green">Healthy</span>
</div>

Chart Legend (shared)

.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.chart-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.chart-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

<div class="chart-legend">
    <div class="chart-legend-item">
        <div class="chart-legend-dot" style="background: var(--accent);"></div>Requests
    </div>
    <div class="chart-legend-item">
        <div class="chart-legend-dot" style="background: var(--danger);"></div>Errors
    </div>
</div>

Chart rules: No JS charting libraries (Chart.js, D3, etc). All charts are pure CSS + inline SVG. Use theme colors only (var(--accent), var(--amber), etc). Font: Geist Mono for labels, Barlow Condensed for center values. Background fills use rgba with 0.10-0.15 opacity.

6. Required JavaScript

6.1 Toast Helper

function showToast(message, type, duration) {
    type = type || 'info';
    duration = duration || 4000;
    var container = document.querySelector('.toast-container');
    if (!container) {
        container = document.createElement('div');
        container.className = 'toast-container';
        document.body.appendChild(container);
    }
    var toast = document.createElement('div');
    toast.className = 'toast toast-' + type;
    toast.textContent = message;
    container.appendChild(toast);
    setTimeout(function() { toast.remove(); }, duration);
}

6.2 Slide-Out Panel Control

function openSlideout(id) {
    document.getElementById(id).classList.add('open');
    document.body.style.overflow = 'hidden';
}
function closeSlideout(id) {
    document.getElementById(id).classList.remove('open');
    document.body.style.overflow = '';
}

6.3 Keyboard Shortcuts (Required)

document.addEventListener('keydown', function(e) {
    if (e.target.matches('input, textarea, select, [contenteditable]')) return;

    if (e.key === '/') {
        e.preventDefault();
        var search = document.getElementById('search-input');
        if (search) { search.focus(); search.select(); }
    }

    if (e.key === '?') {
        e.preventDefault();
        document.getElementById('shortcuts-modal').removeAttribute('hidden');
    }

    if (e.key === 'Escape') {
        document.querySelectorAll('.modal-backdrop').forEach(function(m) { m.setAttribute('hidden', ''); });
        document.querySelectorAll('.slideout-backdrop.open').forEach(function(s) { s.classList.remove('open'); });
        document.body.style.overflow = '';
    }
});

6.4 API Call Pattern

async function apiCall(url, method, body) {
    method = method || 'GET';
    var opts = {
        method: method,
        headers: { 'Content-Type': 'application/json' },
    };
    if (body) opts.body = JSON.stringify(body);
    var res = await fetch(url, opts);
    var data = await res.json();
    if (!res.ok) throw new Error(data.error || 'HTTP ' + res.status);
    return data;
}

7. Transition Rules

Property	Duration	Easing	Usage
border-color	0.15s	ease	Card hover, input focus
color	0.15s	ease	Nav link hover
opacity	0.15s	ease	Button hover
margin-left	0.2s	ease	Sidebar collapse
transform	0.2s	ease	Slide-out panels
all	0.15s	ease	Nav link state changes

Max animation: 0.2s for layout transitions, 0.15s for color/opacity. Simple ease only. No bounce, spring, or custom curves.

8. Responsive Breakpoints

/* Tablet */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .page-body { padding: 16px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .route-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
    .hero-headline { font-size: 36px; }
}

/* Mobile */
@media (max-width: 480px) {
    .stat-grid { grid-template-columns: 1fr; }
    .route-grid { grid-template-columns: 1fr; }
    .stats-strip { grid-template-columns: 1fr; }
    .hero-headline { font-size: 28px; }
    .data-grid { font-size: 11px; }
    .data-grid th, .data-grid td { padding: 8px 6px; }
}

9. Anti-Patterns (Never Do These)

Anti-Pattern	Reason
White/light backgrounds	Breaks dark theme consistency
Bootstrap, Tailwind, or any CSS framework	Conflicts with design system
jQuery	Vanilla JS + fetch only
`border-radius > 4px` on data elements	Use `var(--radius)` always
More than 2 font families	Barlow Condensed + Geist Mono only
Inline hex colors (e.g. `color: #00d4aa`)	Use CSS variables
Missing `[hidden]` CSS rule	Breaks modal/toggle functionality
Animations longer than 0.2s	Feels sluggish
Custom scrollbar styles	Let OS handle scrollbars
Icon fonts (FontAwesome, etc.)	Use emoji or inline SVG
Multiple gray shades not from system	Only `--muted`, `--gray-dark`, `--gray-medium`

10. Copy-Paste HTML Templates

10.1 Minimal App Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App Name</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/design_tokens.css">
    <link rel="stylesheet" href="/static/css/shared.css">
</head>
<body>
<div class="page-shell">
    <aside class="sidebar">
        <div class="sidebar-header">
            <a href="/" class="sidebar-logo">MELTUC</a>
        </div>
        <nav>
            <div class="nav-section">
                <div class="nav-label">Navigation</div>
                <a href="#" class="nav-link active">Dashboard</a>
                <a href="#" class="nav-link">Settings</a>
            </div>
        </nav>
    </aside>
    <div class="main-content">
        <div class="page-header">
            <div class="header-left">
                <div class="page-title">Dashboard</div>
            </div>
        </div>
        <div class="page-body">
            <div class="stat-grid mb-20">
                <div class="stat-tile">
                    <div class="stat-label">Metric</div>
                    <div class="stat-value teal">42</div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <span class="card-title">Content</span>
                </div>
                <p>Your content here.</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

10.2 Modal Template

<div id="my-modal" class="modal-backdrop" hidden>
    <div class="modal">
        <div class="modal-header">
            <span class="modal-title">Modal Title</span>
            <button class="modal-close" onclick="this.closest('.modal-backdrop').setAttribute('hidden', '')">&times;</button>
        </div>
        <div class="input-group">
            <label class="input-label">Field</label>
            <input type="text" class="input" placeholder="...">
        </div>
        <div style="display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px;">
            <button class="btn btn-muted" onclick="this.closest('.modal-backdrop').setAttribute('hidden', '')">Cancel</button>
            <button class="btn btn-teal">Save</button>
        </div>
    </div>
</div>

<!-- Open with: document.getElementById('my-modal').removeAttribute('hidden') -->
<!-- Close with: element.closest('.modal-backdrop').setAttribute('hidden', '') -->

10.3 Slide-Out Panel Template

<div id="my-slideout" class="slideout-backdrop" onclick="if(event.target===this)closeSlideout('my-slideout')">
    <div class="slideout-panel right">
        <div class="slideout-header">
            <span class="slideout-title">Panel Title</span>
            <button class="slideout-close" onclick="closeSlideout('my-slideout')">&times;</button>
        </div>
        <div class="slideout-body">
            <!-- Panel content -->
        </div>
        <div class="slideout-footer">
            <button class="btn btn-muted" onclick="closeSlideout('my-slideout')">Cancel</button>
            <button class="btn btn-teal">Save</button>
        </div>
    </div>
</div>

<!-- Open: openSlideout('my-slideout') -->
<!-- Close: closeSlideout('my-slideout') -->
<!-- Direction: use class "right" or "left" on .slideout-panel -->

10.4 Data Table Template

<div class="card">
    <div class="card-header">
        <span class="card-title">Table Title</span>
        <button class="btn btn-teal btn-sm">Add New</button>
    </div>
    <table class="data-grid">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Status</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="muted">001</td>
                <td>Item Name</td>
                <td><span class="badge badge-green">Active</span></td>
                <td class="teal">$100.00</td>
            </tr>
        </tbody>
    </table>
    <div class="pagination">
        <button class="pagination-btn" disabled>&laquo;</button>
        <button class="pagination-btn active">1</button>
        <button class="pagination-btn">2</button>
        <button class="pagination-btn">&raquo;</button>
    </div>
</div>

11. Utility Classes

/* Spacing */
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-32 { margin-bottom: 32px; }
.mt-20 { margin-top: 20px; }

/* Layout */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.gap-12 { gap: 12px; }

/* Text Colors */
.text-muted   { color: var(--muted); }
.text-accent  { color: var(--accent); }
.text-amber   { color: var(--amber); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }

MelTuc Design System — Agent Implementation Guide

See it live: Component Showcase · Landing Page