From memgraph
Generates UI components, dashboards, diagrams, and visual outputs that match Memgraph's brand (neutral-first, orange accent). Use when building any Memgraph frontend or visual artifact.
How this skill is triggered — by the user, by Claude, or both
Slash command
/memgraph:memgraph-brand-uiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are designing for **Memgraph** - an in-memory graph database. The product surface is workbench-dense, neutral-first, technical. Engineers, not consumers.
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.
Searches MemPalace before answering questions about past work, people, projects, or prior decisions. Returns verbatim stored content instead of guessing from model memory.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Implements vector databases with Pinecone, Weaviate, Qdrant, Milvus, pgvector for semantic search, RAG, recommendations, and similarity systems. Optimizes embeddings, indexing, and hybrid search.
npx claudepluginhub memgraph/skills