Primary Brand

Color plays an important role in the WISESIGHT corporate identity. A palette of primary colors comprises the "One Voice" color scheme. Consistent use contributes to the cohesive look of the WISESIGHT brand across all media. Check with your designer or printer to ensure colors stay consistent.

Gradients

Flat, solid fills are the default. Gradients are the exception — only the four approved combinations below are allowed.

Rule: gradients are allowed only as Red→Black or White→Gray, each horizontal (90°) or vertical (180°). No other colors, angles, or stops. Never build a custom blend, and on photos use a solid color overlay, not a gradient scrim.

Surface & Backgrounds

Color Contrast & Accessibility

Text must stay legible against its background. Contrast is measured as a ratio (WCAG 2.1) using the same calculation as the Playground.

Rule: body text must meet AA — 4.5:1; large text (≥ 24px, or ≥ 19px bold) must meet 3:1. Put white text on red fills; never set red text on dark or saturated backgrounds.

Secondary Color System

Sentiment

The fixed diverging sentiment palette — the same three colors on every chart and report, so a color always means the same thing. Negative uses its own red #B22234, kept distinct from Wisesight Red #850219 (a brand/layout accent that never appears inside plotted data). See the Data Viz tab for usage.

Social Channels

Guidelines & Combinations

Component Combinations

Company logotype

Correct logo usage

Rule: the logo sits on White, Surface, Black, or Red without asking anyone. Any other color is possible but not automatic — it must be a solid color, the logo must be the negative (white) version, and you must get the branding team's approval first. Never on a gradient, pattern, or bare photo, and do not box the logo in a white or red block.

Color application — approved backgrounds

These are the only backgrounds the logo may sit on directly. Light background → primary (dark) logo. Dark background → inverted (white) logo.

White

#FFFFFF

Primary logo. The default — documents, slides, UI.

Surface (Gray-100)

#F2F3F6

Primary logo. Standard neutral background.

Wisesight Black

#101820

Inverted logo. Dark decks, dark UI, covers.

Wisesight Red

#850219

Inverted logo. Cover / lockup backdrop only — not content layouts.

Photo + scrim

#101820 @ 70%

Inverted logo over a full dark scrim — never a boxed-off panel.

Color application — other solid colors (branding approval required)

Other brand colors are possible, but only under all three conditions — and the branding team decides case by case:

1. Solid color only — one flat fill. No gradient, pattern, texture, or photo.
2. Negative logo only — always the white version, so the color must be dark enough to carry it.
3. Ask the branding team first — approval is per use, not a standing permission.

Steel Blue

#3A4F7A

Solid + negative logo. Ask branding before using.

Royal Purple

#3B2C5C

Solid + negative logo. Ask branding before using.

Emerald

#004A25

Solid + negative logo. Ask branding before using.

Jewel Emerald

#1F6B5A

Solid + negative logo. Ask branding before using.

Terracotta Red

#C4504B

Solid + negative logo, but it competes with Wisesight Red — expect pushback.

Color application — never, with or without approval

These fail one of the three conditions above, so there is nothing to approve.

Light colors

e.g. Ivory White #EBE6E2

Too light to carry the negative logo. Use White or Surface instead.

Low-contrast colors

e.g. Amber Orange #E8893A

The white mark loses its edges. Not approvable.

Gradients

any gradient

Not a solid color — even an approved brand gradient.

Bare photo

no scrim

A photo needs the full dark scrim above — never the raw image.

White / red box

boxed logo

Never box the logo to force contrast — use the negative logo on the solid color.

Primary logo — Horizontal lockup

The default lockup. Use it wherever width is plentiful — headers, navigation bars, email signatures, document footers, and most standard layouts.

Primary horizontal PNG SVG

Inverted horizontal PNG SVG

Primary logo — Vertical lockup

Use the vertical lockup where the layout gives the logo a roughly square or tall space. Same rules and background options as the horizontal lockup apply.

Primary logo PNG SVG

Inverted logo PNG SVG

Logo elements (reference only — do not use separately)

Do not use the logo symbol and logotype separately. Shown here for reference only.

The logo symbol

The logo symbol (inverted)

Clear space

Always keep a minimum clear space around the logo so nothing crowds it. Use x = the height of the symbol as the minimum margin on all four sides. More space is always fine.

Dashed red = minimum clear space (x on every side). Keep text, edges, and other logos outside it.

Minimum size

Below these sizes the logotype loses legibility. Use the symbol alone if you need to go smaller.

Digital — min 24px height

logotype

Print — min 12mm width

logotype

Symbol — min 16px

for very small uses

Incorrect usage — Don't

The logo is fixed artwork. Never alter its proportions, color, orientation, or legibility.

✗ Don't stretch / distort

✗ Don't rotate / tilt

✗ Don't recolor

✗ Don't put on low-contrast / busy bg

✗ Don't add shadow / effects

✗ Don't squash / re-proportion

✗ Don't fade to a low-opacity watermark

Co-branding

When locking up with a partner, separate the two logos with a thin divider and give each at least one clear-space unit (x) from the line. Match optical sizes, not pixel heights.

Partner logo

Product logo

Shape & Shadow

Approved shapes

Rounded rectangle SVG

Circle badge SVG

Pill capsule SVG

Angled flag SVG

Chevron arrow SVG

Bracket frame SVG

Diamond badge SVG

Shadow — the only approved value

There is one approved shadow. Use exactly this value, or no shadow at all — never a custom or ad-hoc shadow.

Corner Radius

The corner radius may be 0px (sharp 90°), 5px, or 10px; capsules use the full pill radius. No other values.

Color Playground

Compose with brand colors and see every example update live — composition card, title slide, chart, stat/KPI, quote, and an image-background slide. Choose a background (approved surfaces only), then style the header, body, and button and toggle a small red accent. Contrast is checked for every text element against the background.

Small Red

Wisesight Red must appear in every layout, but in content layouts only as a small accent — never as a large fill. "Small red" means red covers roughly 10% or less of the composition: a button, a key figure, a tag, a short underline, a single icon. The other 90% stays neutral (black, gray, white, imagery). The one exception is a logo lockup — see below.

Exception — big red is allowed only to hold the logo

A large solid-red field is fine when its only job is to carry the Wisesight logo — a cover, a title slide, an endpage, or a brand lockup. The logo (or its white/reversed mark) sits on the red and nothing else competes: no paragraphs, no data, no buttons, no photos on the red. The 10% cap does not apply here because the red is the brand statement, not an accent. Outside of a logo lockup, a full red background is still off-brand.

Examples — red as a small accent

CTA button

Most of the card is neutral; the red button is the only colored element — the click target.

View report

Key figure

82% ▲ 12%

Black carries the number; red flags only the change worth noticing.

Status tag

Crisis Monitor ALERT

A tiny red pill marks state without coloring the whole row.

Title accent

Social intelligence

One red underline emphasizes a single word, not the whole headline.

Chart highlight

One red bar directs attention to the data point that matters.

Wisesight logo

When a layout has no accent need, the red Wisesight logo alone satisfies the rule.

Left bar

Key takeaway

A thin red rail marks the section.

A slim left rail accents a block without flooding it.

Top bar

Report header

Red strip caps the top edge.

A top strip brands a slide or card header.

Bottom bar

Footer accent

Red underline closes the block.

A bottom strip anchors footers or dividers.

Text highlight

Brand sentiment hit a record high this quarter.

A red marker highlights one key phrase, not the whole sentence.

Do & Don't

Photography

Imagery should feel real and evidence-driven — authentic people, genuine screens and data, natural light. Photos set the neutral 90%; brand color enters only through a small red accent (per the Small Red rule), never a heavy filter.

Style principles

Photography in use

Examples that fit the principles above — authentic people, natural light, genuine screens and data. All six are royalty-free from Unsplash (free for commercial use, no attribution required).

Photo as background

When text sits on a photo, lay a solid Wisesight Black overlay over the image so type stays readable (no gradients). Brand color still enters only as a small red accent. Never flood the whole image with red.

Frame & Ribbon — artwork made outside the office templates

Always start from an official office asset (master deck, Docs/Sheets template, Figma file). When a piece can't come from one — a poster, a KV, an event banner, an AI-generated or agency-supplied visual, a screenshot — it may not go out bare. It must be wrapped in the approved Wisesight frame, or carry the Wisesight ribbon along the bottom.

What it looks like

The same artwork in both treatments and both versions, exported from the generator at 1080 × 1080. Read them together: the logo, the URL, and the red rule sit in the same place and at the same weight every time — only the artwork's edge and the field behind the branding change.

Iconography

Icons use the Font Awesome library (fontawesome.com/icons) for consistency and coverage. Default to one style across a product — Regular (outline) for a light, on-brand weight; reserve Solid for active/selected states. Color is Wisesight Black; use red only to mark an active or alert state — one icon, not a whole toolbar.

Mentions · Audience · Messages · Saved (Font Awesome Regular) · Alert (Solid, red = active/alert state only)

Social channel icons

Use Font Awesome Brands for platforms, in each platform's own brand color. For source categories that have no logo (Forum, News, Blog), use a neutral Solid icon in the channel color.

Chat channel icons

Browse the full set at fontawesome.com/icons. Keep one style; red only for active/alert state.

Layout & Grid

A consistent grid and spacing scale keep every slide, page, and screen on-brand. Build on a 12-column grid with generous margins, and size all spacing from an 8px base unit.

12-column grid

Spacing scale (8px base)

Use multiples of 8 for padding, gaps, and margins. Keep page/slide margins generous (≥ 48px desktop) so content breathes — the neutral space is part of the brand.

Presentation template

Start every deck from a master template — layouts, colors, and type are already on-brand. Take your own copy; don't rebuild slides from scratch or restyle the master. Google Slides for anything shared over Drive, Canva for the brand-kit decks — same deck either way.

Title, section, content, chart, and closing layouts, all following the One Voice restraint: a neutral field with Wisesight Red used sparingly as an accent. Three background treatments — pick one and keep it for the whole deck; don't mix them slide to slide. Google Slides opens a copy prompt (Wisesight account required); in Canva, hit Use this Brand Template for your own copy (Wisesight Canva account required).

Letterhead

Anything written that leaves Wisesight on paper or as a PDF — a letter, a memo, a quotation, a formal notice — goes on the letterhead. Header, footer, margins, and type are already set; make a copy and write into it. Don't rebuild the header in a blank document.

Assets & Files

Use the master files; never recreate or screenshot brand assets. Keep to the formats and naming below.

Data Visualization

Charts are where Wisesight is at its most itself — evidence, made legible. The One Voice restraint still applies: a neutral field carries the data and emphasis is used sparingly. But charts have one rule the rest of the brand doesn't: inside a chart, red means "bad." So the plotted data never uses Wisesight Red as a generic highlight — you emphasize the key series with dark contrast, and keep red for values that are genuinely negative. The brand's red accent (COLOR-01) lives around the chart — the title, a CTA, the logo — not in the bars.

Emphasis — with black, not red

To point at the one bar, line, or point that matters, keep the series neutral gray and turn that one Wisesight Black. It stands out through contrast, without telling the reader the value is bad. Save red for data that genuinely is (see below).

Categorical palette — series order

When you must show several categories at once, assign colors in this order and stop early — most charts need three or fewer. Everything past the set collapses into Other. To draw attention to one series, switch it to Emphasis (Wisesight Black) — red is never a series color, because in a chart it reads as "negative".

Sentiment palette (Positive · Neutral · Negative)

Sentiment is core to social listening, so it gets a fixed diverging palette — always the same three colors, so a green bar means the same thing on every chart. Negative uses its own red #B22234 — distinct from Wisesight Red #850219, which stays a brand/layout accent and never appears inside plotted data.

Sequential ramp — intensity & heatmaps

For one measure that varies by intensity (volume heatmap, density), use a single-hue red ramp — light for low, Wisesight Red for high. One hue only; never rainbow a heatmap. A red ramp signals magnitude; if higher is genuinely good news, prefer a neutral or blue ramp so “dark” isn’t misread as bad.

Low  #F0D3D6#E0A7AE#D17A85#B23A4E#850219  High

Choosing a chart

Chart types in use

The same rules on every type: neutral gray by default, Wisesight Black to emphasize one value, the fixed sentiment palette for sentiment, and red only for negatives.

Type the product name, choose Light or Inverted, and export the lockup as PNG or vector SVG — e.g. WISESIGHT | Zocial Eye.

The lockup style is locked to the approved standard so every product reads consistently: Plus Jakarta Sans Light, thin divider, fixed size/gap. Two versions — Light (black on white) and Inverted (white on Wisesight Black). Only the product name and the light/inverted toggle are editable.

Apply this treatment yourself below — drop or paste a photo, set how strong the solid Wisesight Black overlay sits, then download a ready-to-use PNG. The overlay is locked to the approved Wisesight Black; only the opacity is yours to tune.

Image Overlay Lab on-brand photo treatment

Image

Drop, click, or paste an image

JPG / PNG / WEBP · stays on your device

Load sample Clear

---

Overlay

Solid Wisesight Black #101820

Opacity 62%

---

Place Wisesight logo

Bottom right Bottom left Top right Top left Center

No image yet — drop one on the left, paste, or Load sample.

Export

Download PNG

Brand rule: on photos use a solid Wisesight Black overlay (never a gradient scrim or a colored tint) — around ~55–70% keeps type readable. The inverted (white) logo is the only mark that may sit directly on that dark overlay; brand color otherwise enters only as a small red accent, never a color flood.

Drop in your artwork, pick Frame or Ribbon, Light or Inverted, and the output size — then export the finished PNG. Every size is supported: pick a preset or type any width × height.

The proportions come from the approved A4 master and scale with the canvas, so a story, a square post, and an A3 poster all carry the branding at the same visual weight. Everything is drawn as vector and rasterised at export, so the logo and the red rule stay crisp at any size.

Search any icon, recolor it with an approved brand, sentiment, or channel color, and download it as a PNG or scalable SVG. Only those palettes are offered — icons stay on-brand by default (Wisesight Black; red for active/alert only).

Icons are rendered by the page's Font Awesome 7 Free kit — the same set the rest of the book uses (Regular, Solid, and Brands). Needs an internet connection.