FlowMatrix AI — Brand & Marketing Manual

01Rules

Core Rules

Accent

Signal Blue marks one thing per screen. Never decoration.

Neutral

Monochrome carries the rest. Blue ≤ 10% of any surface.

Type

Inter and Newsreader only. No other fonts.

Ground

Warm off-white or near-black. Never pure #000 or #fff.

Logo

Use the delivered files unaltered. No recolor, distort, or rebuild.

Voice

Plain statements. No hype, no emoji.

02Symbol

The Mark

Inputs → spine → outputs → signal. The logo diagrams the product.

Three inputsThe tools and data already in use.

One spineFlowMatrix. Everything routes through one system.

Two outputsAutomated results.

Signal capThe outcome. The only blue in the mark.

03Variants

Logo Files

Dark logo on light surfaces. Light logo on dark. Use as delivered — these renders come from the shipped @flowmatrix-ai/brand/assets files.

lockup-on-light.svg

lockup-on-dark.svg

mark.svg

on photo → dark chip

Symbol at small sizes

App icon

Avatar

Favicon

04Spacing

Clear Space & Minimum Size

Clear space = symbol height, all sides

Minimum: lockup 120px · symbol 24px

24

36

56

88

05Prohibited

Never Alter The Logo

✕

Old colors

✕

Drop the cap

✕

Stretch

✕

Rotate

✕

Effects

✕

Bare on busy

06Color

Color

One accent. Monochrome carries everything else. Every swatch below renders the live package token; the printed values come from resolvedTheme at build time.

Signal Blue
the only accent

Accent · base--fm-accent-baselight oklch(0.50 0.07 235) · dark #7EB3D3

tint

Accent · soft--fm-accent-soft

pop

Accent · bright--fm-accent-bright

page

Canvas--fm-surface-canvasoff-white · light oklch(0.97 0.003 100) · dark #0F1115

text

Ink--fm-text-primarynear-black · light oklch(0.10 0.01 255) · dark #F7F7F5

support

Secondary--fm-text-secondary

Successsemantic only

Warningsemantic only

Dangersemantic only

Contrast (WCAG)

Pairing	Mode	Ratio	AA	AAA
Signal Blue on white	light	5.9:1	Pass	No
White on Signal Blue	light	5.9:1	Pass	No
Signal Blue on dark canvas	dark	8.3:1	Pass	AAA
Ink on canvas	light	18.9:1	Pass	AAA
Muted text on canvas	light	5.3:1	Pass	No
Muted text on canvas	dark	5.6:1	Pass	No

Logo signal cap is #4F6F8F (read from the shipped SVG at build time). Use the logo as delivered; use Signal Blue tokens for UI.

07Type

Typography

Inter for structure. Newsreader for editorial. Nothing else.

displayInter 500 · −.02em

Automate the busywork.

headingInter 500 · −.02em

Systems that run themselves

bodyInter 400

Data moves between the tools already in use. No copy-paste. Nothing dropped between systems.

serifNewsreader 400 · --fm-font-serif

Warmth lives in the neutrals and the serif — not in loud color.

captionInter · .75rem

Figure 1 — three-tool integration.

Inter: headings, UI, body, data. Newsreader: ledes, pull-quotes, long-form (packaged as --fm-font-serif). Headings are always Inter 500, −0.02em.

08Shape

Shape & Space

Depth from borders and light, not shadow. Fixed radius and spacing steps — rendered from the package's radius and space tokens.

Radius · tokens

sm · 10px

md · 14px

lg · 18px

xl · 24px

Spacing · tokens

xs · 0.5rem

sm · 1rem

md · 1.5rem

lg · 2rem

xl · 3rem

09Imagery

Imagery

Real work. Not robot stock.

✓Do

Real work, real places: sites, field, shop floor.
Product/UI screenshots on a plain ground.
One image per section, space around it.
Line icons, one stroke weight.

✕Don't

Glowing brains, circuit boards, robots.
Busy collages, multiple focal points.
Heavy filters, neon, drop-shadows.
Mixed icon styles.

10Voice

Voice

Problem, then outcome. Short sentences. One idea each.

✕ Off-brandOur revolutionary AI-powered platform leverages cutting-edge automation to supercharge your workflow and guarantee 10× results! 🚀

✓ On-brandQuotes, invoices and job updates move between your tools automatically. No copy-paste.

Never: emoji · percent guarantees · hype words · jargon walls · fake scarcity. CTAs state the action: "Book a walkthrough," not "Learn more."

11Templates

Templates

Real logo, real color, real type. Built only from this manual.

LinkedInStop chasing spreadsheets at 9pm.See how it works

1200 × 1200

Case study"It just runs now."Read the story

serif pull-quote

Email header

600px · PNG lockup

Share cardOne system.
Every surface.

1200 × 630

12Sizes

Export Sizes

Export at 2×. Keep logo and text inside the safe area.

Surface	Size (px)	Ratio	Note
LinkedIn — post	1200 × 1200	1:1	1200×627 link
LinkedIn — banner	1128 × 191	6:1	clear of avatar
Instagram — feed	1080 × 1350	4:5	portrait
Instagram — story	1080 × 1920	9:16	250px safe
X — image	1600 × 900	16:9	—
Share card	1200 × 630	1.91:1	build-time
Email header	600 wide	—	PNG lockup
Favicon	512 × 512	1:1	symbol only
Slide	1920 × 1080	16:9	—

13Rulings

Rulings

Second accent color?

No. One accent. Use neutrals or status colors. (Ember/Sage exploration: brand#43.)

Green or gold?

No. Retired. Flag any live asset still using them.

Recolor or restyle the logo?

No. Delivered files, unaltered.

Emoji?

No.

Inter not installed?

Install it. Free, and it's the brand font.

Screenshot on pure white?

No. Use the off-white or dark canvas.

Where are the logo files?

mark.svg, lockup-on-light.svg, lockup-on-dark.svg — canonical in @flowmatrix-ai/brand/assets/logos/ (this page renders those exact files); copies are served from the live site at flowmatrixai.com/logos/.

Light or dark canonical?

Both. Product light-first; marketing leads dark (proposal: brand#44).

14Source

Governance

Truth

@flowmatrix-ai/brand v3.4.1 holds every value and logo.

This manual

Generated from the package in the same repo — the values and logos on this page are the package's own. If it disagrees with the package, the build is broken: file an issue.

Changes

Gaps and proposals become GitHub issues on FlowMatrix-AI/brand. Approved changes land in the package first; this page follows automatically.

Version

Documents identity v3. Major identity change → new version.

15Roadmap

Roadmap

Live · v3.4+

Newsreader serif packaged as --fm-font-serif. Site adoption: site#88.

Proposed

Dark-first marketing. Product stays light. brand#44

Proposed

Signature blue moment. One glow or flow-line per hero. brand#45

Proposed

Inter medium ~510 as default UI weight. brand#46

Parked

Softer md/lg shadow ramp. Not adopted; this page renders the package ramp. brand#47

16Exploratory

Color Lab

Not approved — not in the packagePalette extensions under exploration in brand#43. Signal Blue remains the only production accent; nothing in this section may be used on real surfaces.

Proposed complement — Ember

A warm counter-accent to balance the cool blue — the same move Anthropic makes with terracotta over neutrals. Blue stays primary; Ember is used sparingly for a second signal (highlights, warmth, data contrast).

primary

Signal Blue--fm-accent-basethe constant

complement

Ember (proposed)#C2643Coklch(0.62 0.12 47)

soft

Ember · soft#E4C4ACtint / fills

alt

Sage (alt idea)#7C8A5Acalmer complement

Pairings & contrast

blue · ink

blue · ember

ember · ink

blue · canvas

Signal

blue on ink

Warm

ink on ember

Neutral ladder

Duotone — data only

Blue→Ember gradient for charts and data viz only. Never behind the logo or as a surface wash.

In components

Primary action Secondary Blue tag Ember tag

Mini chart: greys as the field, Signal Blue for the focus series, Ember for the single contrast series.