Usage

Socials & decks

Social posts, sales slides and delivery slides — with original artwork and reference imagery.

Touchpoint	Job	Backgrounds	Type	Use	Avoid
Website	Explain and convince, one scroll	hero-bg, story-bg, quote-bg, page-frame	Anek Latin · Kode Mono eyebrows	SiteHeader, Hero, StorySection, UseCases, UseCaseTemplate, CustomerQuote, SiteFooter	Aura backgrounds, Doto numbers in body copy, slide chrome
App	Get work done, calm and dense	PlatformShell ambient / flat, glass panels, lavender nav — light & dark	Anek Latin · Kode Mono small labels	PlatformShell, PlatformNavItem, AppHeader, Card (glass), DataChip, Button (sm)	Marketing gradients, auras, photos, gem visual, marketing headlines
Socials	Stop the scroll, one message per post	light (dot grid), aura, magenta, blend, night, photo	Anek Latin · Kode Mono tags · Doto numbers	SocialPost, LinkedInBanner, Tag, StatCard, HexPortrait, IMAGERY	More than one aura colour per post, long paragraphs, magenta for data topics
Sales slides	Persuade a prospect, big and visual	aura / night title, light content, blend for the one focal slide	slide-title-lg, slide-subtitle · Doto stats	Slide deck="sales", StatCard size="canvas", Tag, IMAGERY.gemCrystal, story diagram visuals	Dense tables, client names on every slide, more than 3 bullets
Delivery slides	Report to a customer, clear and traceable	light (page-frame) content, story title slide	slide-title, slide-body, slide-kicker	Slide deck="delivery" with context + SlideFooter, SlideKicker, tables, timelines	Aura, gem, photos, Doto numbers, marketing claims

Social sizing & safe areas

From Social Graphics Template. LinkedIn crop and overlap guides are approximate; validate each upload on its destination.

LinkedIn portrait post

1080 × 1350 px

SOCIAL_FORMAT_GUIDES.linkedinPost · essential band x 80–1000

4:5 feed post. Source layout uses 80px side/bottom margins and 72px top margin; designer chrome uses its own insets.

LinkedIn personal banner

1584 × 396 px

SOCIAL_FORMAT_GUIDES.linkedinProfile · essential band x 568–1307

Approximate — LinkedIn publishes no official overlap specification. Keep essential content in x 568–1307 and validate in the destination profile.

Approximate mobile crop: x 0, y 0, 277 × 396
Approximate mobile crop: x 1307, y 0, 277 × 396
Profile photo & name overlap: x 0, y 132, 568 × 264

LinkedIn company banner

1128 × 191 px

SOCIAL_FORMAT_GUIDES.linkedinCompany · essential band x 336–1008

Approximate — logo overlap and crop vary by device. Source composition keeps essential content in x 336–1008 and omits the repeated wordmark.

Company logo overlap: x 30, y 80, 270 × 111
Approximate mobile crop: x 0, y 0, 120 × 191
Approximate mobile crop: x 1008, y 0, 120 × 191

WebinarGeek banner

1940 × 388 px

SOCIAL_FORMAT_GUIDES.webinarGeek · essential band x 582–1358

Source crop model: tablet centre 1164px (x 388–1552), mobile centre 776px (x 582–1358). Title/date belong in the mobile band; speakers in the tablet bands; edge artwork is optional.

Hidden on tablet & mobile: x 0, y 0, 388 × 388
Hidden on tablet & mobile: x 1552, y 0, 388 × 388
Hidden on mobile: x 388, y 0, 194 × 388
Hidden on mobile: x 1358, y 0, 194 × 388

Portrait hierarchy

Brand → headline → proof → speakers → when + action. Source post margins: 80px sides/bottom, 72px top; readable post text ≥18px native. Keep Metagem's three-level hierarchy.

Native PNG export

Export at 1× or optional 2×, never from the scaled preview. Wait for images and fonts; embed bundled fonts where needed. Crop overlays and controls stay outside the artwork.

Personal ≠ company

The existing LinkedInBanner is a legacy personal cover; its layout is not mobile-safe. Company covers use 1128 × 191 and omit the repeated wordmark. This source adds no carousel or PDF rules.

Code

import { SOCIAL_FORMAT_GUIDES, ScaledCanvas } from "@/design-system/metagem/components/metagem/creative";
const format = SOCIAL_FORMAT_GUIDES.linkedinCompany;
// Native canvas: format.width × format.height.
// Use format.content and format.safeZones when composing; guides stay outside export nodes.

Designer brand elements

Original artwork from the new brand kit. The faceted gemstone identity is available alongside the existing shield; existing pages keep their current logo.

Metagem — Logo edition="designer" tone="light" — black lockup

Gemstone · violet
Sales titles · structured-data stories

Gemstone · magenta
Document stories · people announcements

Hexagonal grid
Light social and sales backgrounds

Shield · violet · flat
Social and sales illustrations

Shield · violet · shadow
One focal illustration on a sales title

Shield · magenta · flat
Document and people posts

Shield · magenta · shadow
One focal illustration on a document post

Background · violet
Social statements · sales title slides

Background · magenta
Document and people posts

Sales title · original violet background + violet gemstone

Document social · original magenta background + magenta shield

Code

<Logo edition="designer" variant="full" tone="auto" />
<Logo edition="designer" variant="mark" tone="magenta" />
<Logo variant="wordmark" tone="dark" />
<img src={BRAND_ARTWORK.gemstones.violet} alt="" />

Print masters · PDF and EPS

metagem-icon-black.eps metagem-icon-magenta.eps metagem-icon-white.eps metagem-lockup-black.eps metagem-lockup-magenta.eps metagem-lockup-white.eps metagem-wordmark-black.eps metagem-wordmark-white.eps metagem-icon-black.pdf metagem-icon-magenta.pdf metagem-icon-white.pdf metagem-lockup-black.pdf metagem-lockup-magenta.pdf metagem-lockup-white.pdf metagem-wordmark-black.pdf metagem-wordmark-white.pdf

Socials

Portrait 1080×1350 posts and carousels. Light for explaining, aura for statements, night for events and jobs, magenta for people and documents, blend for the closing call to action.

Use Case

Context matters.
We help you shape it.

Agents only cite the right numbers when they know your house rules.

SocialPost surface="light" page={1} total={4}

No one told AI your
enterprise's house rules.

Faster than manual8x

Agent-driven mapping turns months of work into weeks

SocialPost surface="aura" + StatCard size="canvas"

SocialPost surface="night" (events, jobs)

SocialPost surface="blend" (one closing CTA)

SocialPost surface="photo" image={IMAGERY.portraits.sara}

Meet our new
colleague, Emma

SocialPost surface="magenta" + HexPortrait

Quote

"Manually, this would be a multi-year program. With Metagem we fix the quality conflicts that actually matter."

Marc Dubois

Chief Data Officer

SocialPost surface="light" — quote

No one told AI your
enterprise's house rules.

LinkedInBanner — legacy personal cover; use the safe-area guide above for new layouts

Sales slides

Prospect-facing. Designer frame chrome, big statements, aura titles, Doto proof numbers. One idea per slide.

Proof from the first six weeks

Business outcomes13

Findings tied to business KPIs

Faster than manual8x

Agent-driven mapping

Data quality issues445

Auto-derived from sources

Slide deck="sales" surface="night" + StatCard

Why it hurts

To reach shared goals, we need a shared vocabulary.

Agentic context

Active governance

Slide deck="sales" surface="light"

Delivery slides

Customer project decks. Quiet, readable, traceable: kicker, title, content, and a footer with client, date and page number.

Metagem R&D

Proving customers are real and well documented

External data sources for customer master data, country by country

Slide deck="delivery" surface="story" — title

The question

Why customer identity matters now

E-invoicing makes the legal identity a hard requirement.
A wrong tax ID now means a rejected or misrouted invoice.
France and Germany are done; this covers every other country.

Slide deck="delivery" surface="light" — content

Code

<Slide deck="delivery" page={2} total={11} context="Client · Project · 21/10/2026">
  <SlideKicker>The question</SlideKicker>
  <h2 className="slide-title mt-6">Why customer identity matters now</h2>
</Slide>

Brand imagery

From the designers' kit. Portraits are illustrative brand photography — never present them as real customers or staff.

Mockups

Reference examples from the designers: how the brand looks on a screen and on event roll-up banners.

Website hero on a monitor — MOCKUPS.screen

Event roll-up banners, night and light — MOCKUPS.banners

Photo prompt

The Midjourney prompt behind the brand portraits. Keep the style words, change only the person and setting.

candid editorial portrait of a young man with tousled curly brown hair and light stubble, warm genuine half-smile, looking off camera to the right, wearing a purple knit polo shirt, seated on a soft blush pink banquette in a modern creative office, blurred background of white walls, warm pendant lights and a pink and purple column, natural diffused window light, shallow depth of field, 85mm f/1.8, visible skin texture, muted warm colour grade, unposed documentary feel --ar 1:1 --style raw --profile tv3vr69

Code

import { PHOTO_PROMPT } from "@/design-system/metagem";

Socials & decks

Designer brand elements

Trusted data.
Confident decisions.

Your policies.
Your AI's context.

Socials

Context matters.
We help you shape it.

No one told AI your
enterprise's house rules.

Meet us

Let's see
your mess

Meet our new
colleague, Sara

Meet our new
colleague, Emma

Sales slides

The Future of AI for Data Teams

Proof from the first six weeks

To reach shared goals, we need a shared vocabulary.

Delivery slides

Proving customers are real and well documented

Why customer identity matters now

Brand imagery

Mockups

Photo prompt

Socials & decks

Social sizing & safe areas

LinkedIn portrait post

LinkedIn personal banner

LinkedIn company banner

WebinarGeek banner

Portrait hierarchy

Native PNG export

Personal ≠ company

Designer brand elements

Trusted data.Confident decisions.

Your policies.Your AI's context.

Socials

Context matters.We help you shape it.

No one told AI yourenterprise's house rules.

Meet us

Let's seeyour mess

Meet our newcolleague, Sara

Meet our newcolleague, Emma

Sales slides

The Future of AI for Data Teams

Proof from the first six weeks

To reach shared goals, we need a shared vocabulary.

Delivery slides

Proving customers are real and well documented

Why customer identity matters now

Brand imagery

Mockups

Photo prompt

Trusted data.
Confident decisions.

Your policies.
Your AI's context.

Context matters.
We help you shape it.

No one told AI your
enterprise's house rules.

Let's see
your mess

Meet our new
colleague, Sara

Meet our new
colleague, Emma