Ads & Templates Guidelines

Overview

This category covers all produced marketing collateral at Verdigris: display advertising (Google Display Network, LinkedIn, social media), email templates, sales collateral (one-pagers, case studies, data sheets), and presentation decks. These materials extend the web brand into channels with strict format constraints and limited attention windows. Every piece must feel like it belongs alongside the Verdigris product and website — precise, intelligent, and restrained.

Mood & Style

Verdigris collateral embodies all four brand pillars. We sell energy intelligence to sophisticated buyers — facility managers, sustainability directors, and C-suite executives. The visual tone communicates credibility through restraint, not volume.

• Precise: Clean geometry, aligned grids, intentional whitespace. Every element earns its place.
• Masterful: Confident typography, controlled color palette, no visual clutter. The design demonstrates the same rigor as our product.
• Refined: Subtle use of the brand gradient, professional photography, understated data visualizations.
• Pioneering: OKLch color science, perceptual gradient interpolation, data-driven proof points (8 kHz, sub-cycle) that signal technical leadership no competitor can claim.

This is not salesy, loud, or promotional in the conventional sense. No starbursts, no “ACT NOW” banners, no stock photos of people pointing at screens. If a piece could belong to any B2B SaaS company, it is not Verdigris.

Specifications

Display Ads

Email Templates

Sales Collateral (PDF)

Presentation Decks

Token Usage

Colors

The brand palette is defined in tokens/color/base.json. For print and static ad contexts where CSS custom properties are not available, use the hex equivalents from hex/colors.json in the build output.

Rule: Use a maximum of two accent colors per piece (e.g., color.brand.verdigris + color.brand.midnight-purple). A third accent is permitted only in data visualizations where color-coding demands it.

Typography

Typefaces are defined in tokens/typography/font-family.json. Sizes and weights are in tokens/typography/scale.json.

Note: For email templates, fallback to system fonts. Not all email clients load custom fonts. The fontFamily.sans stack includes -apple-system, 'Roboto', sans-serif as fallbacks.

Spacing

Use the 4 px grid from tokens/spacing/base.json. Key values for collateral:

Do’s

1. Do: Place the Verdigris logo consistently in the top-left or bottom-left corner of every piece. This matches the web header convention and builds spatial recognition across touchpoints.

2. Do: Use fontFamily.display (Lato) for headlines and fontFamily.sans (Inter) for all body copy. This pairing is the same as the marketing website, and collateral should feel like a direct extension of it.

3. Do: Maintain generous whitespace — at least 30% of any ad unit should be negative space. In constrained formats like the 728 x 90 leaderboard, this means limiting content to a headline, logo, and single CTA.

4. Do: Include exactly one clear call-to-action per ad. Multiple CTAs split attention and reduce click-through rate. For longer-form pieces (one-pagers, decks), one primary CTA per page or slide.

5. Do: Use hex values from hex/colors.json when working in print or static-image contexts where CSS tokens are unavailable. These are generated from the canonical OKLch values and stay in sync through the build pipeline.

6. Do: Design the 300 x 250 medium rectangle first. It is the highest-volume format and forces the tightest editorial discipline. Adapt outward to other sizes from this base.

Don’ts

1. Don’t: Use color.brand.verdigris as body text on white or light backgrounds. The brand teal has a contrast ratio below 3:1 against color.neutral.white, which fails WCAG AA for both normal and large text. Use color.neutral.950 for text, and reserve teal for buttons, accents, and decorative elements.

2. Don’t: Use more than two accent colors in a single piece. A one-pager using color.brand.verdigris, color.brand.pastel-red, and color.brand.cyber-yellow simultaneously reads as chaotic, not energetic. Pick a primary accent and one supporting accent.

3. Don’t: Set body text below 14 px in any digital format (ads, email, social). At smaller sizes, Inter loses legibility on non-retina screens and in compressed image formats. For print, the floor is 10 pt.

4. Don’t: Use ALL CAPS for body text or paragraphs. ALL CAPS is permitted only for short labels (2-3 words max, e.g., “CASE STUDY”, “NEW FEATURE”) set in fontWeight.semibold with increased letterSpacing.heading. Full sentences in all caps are unreadable and feel aggressive.

5. Don’t: Use decorative, script, or novelty typefaces anywhere. The type system is fontFamily.display (Lato), fontFamily.sans (Inter), and fontFamily.mono (JetBrains Mono). There are no exceptions for “creative” collateral — the constraint is the brand.

6. Don’t: Hardcode color values. Always reference token names in design specs and handoffs. If a hex value is needed for a production file (e.g., a Photoshop document), pull it from the build output at hex/colors.json, not from memory or a color picker.

Templates & Starting Points

Standard templates are maintained in Figma (access through the Verdigris design team). When Figma links become available, they will be listed here.

Recovered Brand Banner Assets

• verdigris-banner.avif — canonical banner recovered from the legacy marketing-site source repo (used across news, editorial, and press surfaces)

These should be treated as reference assets for on-brand collateral and specimen work. They are useful for understanding composition, cropping, and brand treatment, but they do not replace proper source templates in Figma.

Planned Templates

Template Principles

Until templates are available, follow these structural rules:

• Ads: Logo (top-left), headline (center or left-aligned), single CTA button (bottom), background from neutral scale or brand gradient.
• Emails: Logo header (centered, 120 px wide max), single-column body at 600 px, CTA button using color.brand.verdigris background with color.neutral.white text, footer with unsubscribe and address.
• One-pagers: Logo top-left, headline and subhead in top third, two-column body with supporting data/charts, CTA or contact block at bottom.
• Decks: Title slide with brand gradient background, content slides with color.neutral.white background, section dividers using color.brand.midnight-purple, closing slide with CTA and contact info.

Related

• Color foundations — Full palette rationale and WCAG contrast guidance
• Typography foundations — Font selection, scale, and pairing logic
• Accessibility foundations — Contrast requirements and inclusive design
• Spacing foundations — Grid system and spacing scale
• Dark mode foundations — Inverted color strategy for dark backgrounds
• tokens/color/base.json — Canonical OKLch color tokens
• tokens/typography/font-family.json — Font family tokens
• tokens/typography/scale.json — Size, weight, and line-height tokens