BirdsEye ROI, Marketing Visual System

Design authority for every marketing graphic in this kit. Every infographic in infographic-specs.md draws its colors, type, spacing, and radii from this file. Nothing in the kit hardcodes a hex value outside this system.

Brand metaphor: an eagle eye view over noisy ground. The product sits above the call log the way a bird of prey sits above terrain, altitude, distance, and precision instead of decoration. The visual register is a financial terminal: Bloomberg panel, flight instrument, radar scope, not a SaaS landing page. Dense, exact, dark by default, numbers treated as the hero, not the illustration around them.

1. Color tokens

Two-tier system: a dark terminal surface (primary, marketing default) and a light surface (secondary, for print/embed contexts that require white backgrounds). Every token below ships both values. Base hue is a deep sky/navy blue (the altitude the eagle flies at), accent is a hot signal amber (the one ring that paid), and a spam-red is reserved exclusively for noise/spam data, never for anything else.

Color has a job, per Principle 5:

• Amber = money. Revenue, attributed calls, ROI, the paid ring. It is the only warm accent in the system and it always means "this is the number that matters."
• Sky blue = structure. Providers, pipeline stages, categories, containers, the scaffolding the data sits inside.
• Red = noise. Spam only. Never used for errors, warnings, or anything else, so the eye learns one meaning for it across the whole kit.
• Green = a positive delta or a close/conversion outcome, used sparingly, never as a background fill.

Accessible contrast pairs (WCAG AA, dark surface, primary usage)

Accessible contrast pairs (WCAG AA, light surface)

Rule: --ink-tertiary is reserved for text 14px and above (captions, units, footnotes). Never drop --ink-tertiary below 14px, and never use it for a data value, only for a label of a data value.

2. Type scale

Font stack: IBM Plex Sans (headlines, UI labels, named as the Google Font of record) paired with IBM Plex Mono (all numerals, data values, axis ticks, timestamps). This is the terminal-instrument pairing: a humanist grotesque for words, a true monospace for anything that is a number, so figures always align in a column and never wiggle in width as they update. System fallback stack:

--font-display: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "IBM Plex Mono", "SF Mono", "Cascadia Code", Consolas, monospace;

Scale ratio is roughly 1.25 to 1.4 between adjacent display steps, per the hierarchy-first principle. Every data figure, with no exception, is set in Plex Mono. Every word of description is set in Plex Sans. This is the load-bearing rule of the whole kit: mono means "this is measured," sans means "this is explained."

3. Spacing scale

Base unit 4px. Off-by-4px is wrong, per Principle 4.

--space-1: 4px;    --space-2: 8px;    --space-3: 12px;   --space-4: 16px;
--space-5: 20px;   --space-6: 24px;   --space-8: 32px;   --space-10: 40px;
--space-12: 48px;  --space-16: 64px;  --space-20: 80px;  --space-24: 96px;

• Panel padding at 1200px canvas: --space-8 (32px) outer, --space-6 (24px) between internal blocks, --space-4 (16px) between a label and its value.
• Panel padding at 380px canvas: --space-4 (16px) outer, --space-3 (12px) between internal blocks.
• Minimum gap between two independent data marks (bars, nodes, cards): --space-4.
• Never place a caption closer than --space-2 (8px) to the value it describes.

4. Radius scale

--radius-sm: 4px;   /* chips, tags, badge pills */
--radius-md: 8px;   /* cards, panels, chart containers */
--radius-lg: 12px;  /* the outer infographic frame at 1200px */
--radius-full: 999px; /* circular marks, avatar-style nodes, pill badges only */

Cards never exceed --radius-lg. No card, panel, or chart container is ever fully rounded; full radius is reserved for true circular marks and small pills.

5. Elevation

Elevation is used sparingly, this is a flat instrument-panel surface, not a stack of floating cards.

No elevation-2 plus a visible border on the same element. Pick one lift mechanism per surface, never stack border and heavy shadow (see impeccable ban on the "ghost-card" pattern).

6. How a data figure is displayed (the core rule of this kit)

Every number that appears on any infographic must follow this exact structure, top to bottom:

1. The value, in Plex Mono, at Data XL, Data L, or Data M depending on hierarchy weight. Value color is --signal-amber if it is a revenue or conversion figure, --brand-sky if it is a volume/structural figure, --noise-red if it is a spam/excluded figure, --ink-primary for a neutral count.
2. The unit or context label, in Plex Sans Caption, --ink-tertiary, directly beneath the value at --space-1 to --space-2 gap. Example: value 103,000+ with label TOTAL CALLS LOGGED in uppercase, letter-spacing 0.08em.
3. No sparklines, ever. A trend, split, or comparison is always rendered as one of: a labeled delta ("+12% vs. last period" as static text, never a line), a full-size bar or donut with numeric labels on every segment, or a progress/proportion bar with the percentage printed inline. If a value needs a comparison, draw the comparison at full chart size with axis labels, never as a compressed inline trend line.
4. Every chart mark is directly labeled with its number. No mark exists without a visible numeral attached, legends alone are not sufficient. A bar has its value printed at its end or inside it. A donut segment has its percentage printed on or beside the segment.
5. Real counts stay real counts. 103,000+ is written as 103,000+, never rounded to "100K+" or "over 100 thousand." $46,000+ is written as $46,000+. 42.3% is written as 42.3%, not "42%." Precision is part of the financial terminal feel: exact numbers signal exact tracking.
6. Units in the caption, never appended to the number. $46,000+ not $46,000+ dollars; 42.3% not 42.3% percent.

7. Iconography and mark language

No stock photography, no dark scrims over photos, no flat color-slab hero blocks (hard bans, see below). All marks are geometric and hand-authored in SVG: circles, rects, paths, straight or gently curved connective lines. Recurring motifs:

• The eye/scope mark: a simple concentric-circle or crosshair glyph used as a section marker, never as decoration filling empty space. Constructed from two circles and a plus, all stroke, no fill, in --brand-sky or --signal-amber.
• The altitude line: a single thin horizontal rule (--grid-line, 1px) used to separate a "noise" layer from a "signal" layer in split diagrams, always labeled at each end.
• Nodes and connectors: pipeline and flow diagrams use rounded-rect nodes (--radius-md) connected by 1.5px stroke paths in --brand-sky-dim, with arrowheads as simple triangles, never chevron icon fonts.

8. Hard constraints (binding on every graphic in this kit)

• No stock photography, ever.
• No flat color-slab hero backgrounds, no dark scrims dumped over photography.
• No sparklines, anywhere, in any form. Full-size charts, labeled deltas, or progress bars only.
• Every graphic is hand-authored inline SVG or CSS. No image files, no chart library dependency, nothing that cannot be pasted directly into an HTML file and render.
• Every data point traces back to FACTS.md. No invented numbers.