// Generate apps, demos, dashboards, diagrams, landing pages, and any visual output that looks like it belongs in the Memgraph product family. Use whenever producing UI, visual artifacts (Mermaid, SVGs, charts), Lab-style admin tools, internal dashboards, feature splash pages, or embeddable widgets for Memgraph engineers.
| name | memgraph-brand-ui |
| description | Generate apps, demos, dashboards, diagrams, landing pages, and any visual output that looks like it belongs in the Memgraph product family. Use whenever producing UI, visual artifacts (Mermaid, SVGs, charts), Lab-style admin tools, internal dashboards, feature splash pages, or embeddable widgets for Memgraph engineers. |
| compatibility | Any frontend framework (React, Vue, Svelte, plain HTML/CSS, Tailwind, etc.) |
| metadata | {"author":"memgraph","version":"0.0.1"} |
You are designing for Memgraph - an in-memory graph database. The product surface is workbench-dense, neutral-first, technical. Engineers, not consumers.
If a choice fights either rule, it's wrong.
--brand-black: #231F20 /* primary text, strong borders, dark surfaces */
--brand-orange: #FB6E00 /* accent only - primary buttons, active states, links */
--orange-tint: #FFF4EB /* soft orange badge bg */
--gray-1: #646265 /* secondary text */
--gray-2: #857F87 /* muted text */
--gray-3: #BAB8BB /* placeholder, disabled */
--gray-4: #E6E6E6 /* hairline borders, dividers */
--gray-5: #F9F9F9 /* canvas/zebra/hover bg - NEVER on cards */
--white: #FFFFFF /* default surface, including all cards */
--success: #19AF66
--error: #DC2223
--warning: #FFC500 /* brand yellow, used semantically */
--purple: #720096 /* marketing accent only - not in product chrome */
Color usage:
#FFFFFF (default surface, all cards), #F9F9F9 (canvas / page bg / hover state). Never anything else.#231F20 primary, #646265 secondary, #857F87 muted. Three steps total.#E6E6E6 hairlines, #231F20 for emphasized outline buttons. Never use #FB6E00 as a border color.A #FFC500 → #DC2223 → #720096 gradient exists in the brand kit. It is never a background fill on a UI surface. Acceptable uses, max one per page:
If you find yourself painting a card, button, header, or section bg with the gradient, stop. Use orange or neutral instead.
Inter Tight. Headings, body, buttons, labels, nav, tables - all Inter Tight.Ubuntu Mono. Cypher queries, code blocks, inline code, monospace numbers in dense tables.Weight scale (use these - do not freestyle):
Body / paragraph: 400
UI labels, nav: 500
Buttons, H4–H6: 600
H1–H3: 700 (800 only for marketing display)
Size scale (px / line-height):
Display H1: 48 / 56 or 64 / 72 for marketing hero
H2: 32 / 40
H3: 24 / 32
H4: 20 / 28
H5 / strong: 16 / 20
Body: 16 / 24
Small: 13 / 20 (default for dense UI: chips, tags, table cells)
Micro: 11 / 12 (eyebrow labels, table column heads - uppercase, +0.06em tracking)
Code: 13 / 20 Ubuntu Mono
Letter-spacing: -0.01em on display headings, +0.04em on uppercase button labels and eyebrows, default elsewhere.
0, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80. Nothing in between. Component padding is usually 8/12/16. Card padding 16/24. Section gaps 40/64.
2px tiny tags, swatches, micro-badges
4px default - buttons, inputs, cards, dropdowns, modals
8px large containers, marketing cards, hero tiles
999px ONLY avatars, status dots, loading spinners
Never 12, 16, 24. Never border-radius: 9999px on buttons or chips.
--shadow-card: 0 2px 10px 0 rgba(0,0,0,0.10); /* card lift */
--shadow-button: 2px 2px 8px 0 rgba(0,0,0,0.24); /* primary button - note: asymmetric */
--shadow-elev: 0 0 4px 0 rgba(0,0,0,0.25); /* outlined button */
--shadow-drop: 0 4px 12px 0 rgba(35,31,32,0.16);/* popovers, dropdowns */
--shadow-focus: 0 0 0 3px rgba(251,110,0,0.24); /* keyboard focus */
No inner shadows. No glow. Stack at most one shadow per element.
<!-- Primary: orange fill, white text, asymmetric shadow -->
<button style="background:#FB6E00;color:#fff;border:0;border-radius:4px;
padding:8px 16px;font:600 16px/20px 'Inter Tight';letter-spacing:.04em;
box-shadow:2px 2px 8px 0 rgba(0,0,0,.24);cursor:pointer">Run query</button>
<!-- Secondary: white fill, black border. NEVER orange border. -->
<button style="background:#fff;color:#231F20;border:1px solid #231F20;
border-radius:4px;padding:8px 16px;font:600 16px/20px 'Inter Tight';
letter-spacing:.04em">Disconnect</button>
<!-- Ghost: transparent, hover paints #F9F9F9 -->
<button style="background:transparent;color:#231F20;border:0;
border-radius:4px;padding:8px 16px;font:600 16px/20px 'Inter Tight'">Cancel</button>
Hover: primary darkens to #E36300, secondary fills to #F9F9F9. Press: subtle scale 0.98 or shadow flatten - never color shrink.
White background. Either a 1px #E6E6E6 border or the card shadow - rarely both. 4px radius. 16/24 inner padding.
<div style="background:#fff;border:1px solid #E6E6E6;border-radius:4px;
padding:16px 20px;font-family:'Inter Tight'">
<div style="font:600 16px/20px 'Inter Tight';color:#231F20">Schema overview</div>
<p style="font:400 13px/20px 'Inter Tight';color:#646265;margin:4px 0 0">
12 node labels · 28 edge types · 3 indexes
</p>
</div>
1px #E6E6E6 border, 4px radius, 8/12 padding, 16/20 Inter Tight 400, placeholder #BAB8BB. Focus: border #231F20 + 3px orange focus shadow.
<span style="display:inline-block;padding:3px 8px;border-radius:2px;
background:#FFF4EB;color:#FB6E00;
font:600 11px/12px 'Inter Tight';letter-spacing:.06em;text-transform:uppercase">
TRANSACTIONAL
</span>
#231F20, 196px wide) + top status bar (40–64px) + main canvas. Active nav item: 3px left orange bar + slightly lighter row bg.#F9F9F9 zebra at most. Hairline #E6E6E6 rows. Numeric columns in Ubuntu Mono.#646265, one primary orange CTA, one ghost link. White or #F9F9F9 background. The gradient (if any) is a 4px top-of-page rule or a small mark - not the bg.2,128), units adjacent (517.08 MB).| Do | Don't |
|---|---|
White cards on #F9F9F9 page bg | Light-gray cards on white |
| Orange for primary CTA only | Orange section backgrounds, orange borders, orange dividers |
| Inter Tight everywhere; Ubuntu Mono for code | System UI, Inter, Roboto, "modern sans" |
| 4px radius default | 12px, 16px, fully-rounded buttons |
| One shadow per element | Layered shadows + glow |
| Three text colors: #231F20, #646265, #857F87 | New gray tones, blue-tinted grays |
| Gradient: thin decorative bar or single mark, max once per page | Gradient backgrounds, gradient buttons, gradient cards |
Hairline #E6E6E6 borders | Thick borders, double borders, colored left-stripe cards |
| Custom Memgraph icons (24×24, filled silhouette) | Lucide / Material / Heroicons / emoji as icons |
Always begin with these tokens loaded. Inter Tight from Google Fonts is acceptable when the brand variable font isn't available.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Memgraph - …</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=Ubuntu+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--brand-black:#231F20; --brand-orange:#FB6E00; --orange-tint:#FFF4EB;
--gray-1:#646265; --gray-2:#857F87; --gray-3:#BAB8BB;
--gray-4:#E6E6E6; --gray-5:#F9F9F9; --white:#FFFFFF;
--success:#19AF66; --error:#DC2223; --warning:#FFC500;
--r-sm:2px; --r-md:4px; --r-lg:8px;
--shadow-card:0 2px 10px 0 rgba(0,0,0,.10);
--shadow-button:2px 2px 8px 0 rgba(0,0,0,.24);
--shadow-elev:0 0 4px 0 rgba(0,0,0,.25);
--shadow-focus:0 0 0 3px rgba(251,110,0,.24);
}
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; background:var(--gray-5); color:var(--brand-black);
font:400 16px/24px 'Inter Tight', system-ui, sans-serif; }
code, pre, .mono { font-family:'Ubuntu Mono', Consolas, monospace; }
h1,h2,h3,h4,h5,h6 { font-family:'Inter Tight'; color:var(--brand-black);
margin:0; letter-spacing:-0.01em; }
h1 { font-size:48px; line-height:56px; font-weight:700; }
h2 { font-size:32px; line-height:40px; font-weight:700; }
h3 { font-size:24px; line-height:32px; font-weight:700; }
h4 { font-size:20px; line-height:28px; font-weight:600; }
h5 { font-size:16px; line-height:20px; font-weight:600; }
h6 { font-size:13px; line-height:16px; font-weight:600;
text-transform:uppercase; letter-spacing:.06em; color:var(--gray-1); }
::selection { background:var(--orange-tint); color:var(--brand-black); }
</style>
</head>
<body>
<!-- design here, on a #F9F9F9 canvas, with #FFFFFF cards -->
</body>
</html>
When in doubt: more white space, fewer colors, smaller radii, smaller orange.
Develop custom query modules in C++ for Memgraph graph database. Use when creating high-performance graph algorithms, procedures (ProcedureType::Read/Write), or functions using the mgp.hpp C++ API. Covers compilation, memory management, graph traversal, and module deployment.
Write Cypher queries for Memgraph, including Memgraph-specific extensions like deep path traversals (BFS, DFS, WSP, ASP, KSP with filter/weight lambdas), text and vector search, parallel execution, and CALL subqueries. Use when the user asks to write, fix, or optimize a Cypher query for Memgraph, or asks about Cypher syntax differences between Memgraph and Neo4j.
Configure Memgraph triggers, transactions, storage modes, data durability, and memory settings. Use when the user asks about triggers, transaction isolation levels, storage modes (transactional vs analytical), snapshots, WAL, memory limits, data types, or database runtime configuration.
Language-agnostic blueprint for building GraphRAG systems with Memgraph and agent tooling. Covers end-to-end architecture, schema design, ingestion, hybrid retrieval, tool contracts, and evaluation. Use when designing GraphRAG platforms that must work across multiple programming languages.
Create and manage Memgraph indexes, constraints, and enums. Use when the user asks about indexing strategy, creating or dropping indexes, schema enforcement, uniqueness or existence constraints, data type constraints, enums, or ANALYZE GRAPH.
Write and edit Graph Style Script (GSS) code for Memgraph Lab graph visualization. Use when the user asks to style graphs, change node or edge colors, add labels, set images, configure graph layouts, or write any GSS / Graph Style Script code for Memgraph Lab.