Brand System
Turn the conversations people share across social into insight that brands, agencies, and the public sector can act on.
Wisesight was founded in 2007, at the same time that social media platforms were becoming popular in Thailand. This shift presented a challenge for marketers, who needed to quickly understand and adapt to the changing digital landscape.
Where Wisesight sits on each spectrum — the bar fills from the left anchor toward where the brand sits; the bold label marks that side.
How Wisesight sounds in writing: clear, confident, and grounded in evidence — never hype. We explain what the data means, then what to do about it.
✓ "Negative mentions dropped 18% this week after the fix. Keep the response template; revisit on Friday."
✗ "Amazing news!! Sentiment is through the roof and everyone loves us now!"
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.
| Color | Usage | Pantone | CMYK | RGB | Web |
|---|---|---|---|---|---|
| Wisesight Red | To call attention / not for background | 7427 C | C 0 M 99 Y 81 K 48 | R 133 G 2 B 25 | #850219 |
| Wisesight Black | For artwork design — information | Black 6 C | C 100 M 79 Y 44 K 93 | R 16 G 24 B 32 | #101820 |
| Wisesight Gray | For artwork design — sub information | 650 C | C 6 M 5 Y 0 K 14 | R 205 G 207 B 219 | #CDCFDB |
Rule: every layout must include Wisesight Red. At least a touch — a title, key accent, or button. A composition with no red is off-brand.
Maintain a 9:1 ratio between neutral backgrounds/imagery and the brand's red accent. Use red sparingly for titles, key emphasis, or status indicators. Color or images: 90% · Red: max. 10% (or logo only). One exception: a full solid-red field is allowed when it exists only to hold the logo (a cover or brand lockup) — see the Small Red tab.
Examples (10% red · 90% background) — adjust to match:
Suggested 60–30–10 distribution for balanced brand application.
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.
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.
These are the approved secondary colors, used to distinguish data categories, campaign themes, or sub-brands. The primary system (Red · Black · Gray · White) always leads; reach for these when a communication context needs them.
Because the range is wide, choose a limited set per piece and apply each color purposefully — too much variety dilutes the brand's identity.
A vibrant accent layer for charts, highlights, and campaign work — a full hue wheel at high chroma. Hues marked with a red ring overlap a Secondary color: prefer the Secondary there. A swatch carries a brand-color name only where it exactly matches a Primary or Secondary color (e.g. Signal Blue, Emerald, Wisesight Red); every other step is numbered by tone level — 20% / 40% / 60% tints, 100% base, then 140% / 160% deeper shades. The red ramp is anchored on the brand red (Wisesight Red #850219) for tonal consistency — reserve it for highlights and campaign work; inside plotted chart data, "negative" still uses the distinct chart red #B22234.
Rule: Additional colors must NOT be used as backgrounds, and must not exceed 20% of any page or layout in total. Use them only as accents — chart series, highlights, tags, icons, data points. Backgrounds stay neutral (White, Gray-100, Black); Secondary colors are accents too — used sparingly, kept well under 20%, never a full-page background or large fill.
= hue overlaps Secondary — prefer the Secondary color
On a neutral slide, let the Secondary colors carry the first categories; reach into the Additional accents only when you need more. Both are accents — combined they stay well under 20% of the layout, and neither fills the background.
Two Secondary colors lead; Additional accents extend the series on a neutral slide.
Body copy stays Wisesight Black on white. Color rides in on small tags only.
One Secondary tag anchors the category; Additional tints label the rest — all small.
A Secondary rule (Royal Purple) marks the section; an Additional highlight lifts one keyword.
Everything else is Wisesight Black on white — the color is a small share of the block.
Structure accented with Secondary; a single Additional highlight; background stays white.
A Secondary color is an accent, not a background — this blows past 20% and buries the content.
Backgrounds stay neutral — White, Gray-100, or Black.
Additional colors are never backgrounds — they're accents only: chart series, highlights, tags, icons, data points.
Move the color onto small elements and put this on white.
No hierarchy and colored ink balloons past 20% — pick a limited set and let Secondary lead.
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.
Signal content type through background choice.
Body text uses Neutral D1 (#3C3E47) for softness, while headers stay Wisesight Black for authority.
Wisesight Red for headers to command attention. Body text remains Wisesight Black.
Body text is white for readability. Headers in white, highlighted for maximum contrast on dark.
All text on black background is white and highlighted for readability. Use red only for full red buttons with white font.
White text on a Wisesight Gray surface. Use for large display type only — at this size contrast is low, so keep small body copy in Wisesight Black.
The additional fonts are used for content that needs legibility and readability. They are available free of charge and support most languages. Each comes with multiple weights (including normal and italic where applicable). The additional fonts should be used in all printed and digital materials that are editable, including online documents, using embed webfont via Google Fonts.
Primary system font: Roboto (used in this brand system UI). The fonts below are additional fonts for slides, reports, and branded content.
Type scale and font weights are shown per font below. Each font displays Title, Subtitle, Heading, and other styles in its own typeface.
ข้อมูลเชิงลึกที่นำไปใช้ได้จริง — Track sentiment, trends, and conversations across social and news in Thai and English.
ข้อมูลเชิงลึกที่นำไปใช้ได้จริง — Track sentiment, trends, and conversations across social and news in Thai and English.
ข้อมูลเชิงลึกที่นำไปใช้ได้จริง — Track sentiment, trends, and conversations across social and news in Thai and English.
Track sentiment, trends, and conversations across social and news. Use for headlines and UI where Thai is not required.
Track sentiment, trends, and conversations across social and news. Use for data-heavy reports and neutral, readable UI.
The primary logo — The main logo is the dark version, used on white or light-colored backgrounds. For darker backgrounds, use the inverted logo.
The full master brand logo comprises two elements: (1) The logo symbol — a sharp element evoking the process of analysis and a red circle background. (2) The logotype — elegant, refined, highly legible style in uppercase corporate black. The concept is "foresight through data gathered."
Definition — Clear space: Whenever you use the logo, it should be surrounded with clear space to ensure visibility and impact. No graphic elements of any kind should invade this zone. An exclusion zone has been established around the corporate mark; this indicates the closest any other graphic element or message can be positioned. The symbol and company name have a fixed relationship that should never be changed in any way.
On a photo, use the inverted (white) logo over a solid dark overlay — a full scrim, not a boxed-off panel. Never box the logo inside a white or red block. Try the Image option above.
Rule: the logo may sit directly only on White, Surface, Black, or Red. On any other color (Secondary, Additional, or arbitrary), give the logo its own White, Black, or Red panel — do not box the logo in a white or red block, and never put it straight on the color.
The default lockup. Use it wherever width is plentiful — headers, navigation bars, email signatures, document footers, and most standard layouts.
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.
Do not use the logo symbol and logotype separately. Shown here for reference only.
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.
Below these sizes the logotype loses legibility. Use the symbol alone if you need to go smaller.
The logo is fixed artwork. Never alter its proportions, color, orientation, or legibility.
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
A product never gets its own logo, symbol, icon, monogram, or custom wordmark. Its single approved branded form is the WISESIGHT | Product lockup produced by the generator below. Anyone can generate it — and the exported PNG/SVG is the only artwork you may use, exactly as it comes out.
Two contexts, two rules: use the lockup when you need a product "logo"; when the product name is just running text, type it plainly (no lockup, no divider, no WISESIGHT) — but always in the product typeface, Plus Jakarta Sans.
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.
Fixed style: Plus Jakarta Sans Light, as typed. Light = black on white; Inverted = white on Wisesight Black. Only the name and this toggle change.
SVG export outlines the product name to vectors, so the file needs no fonts installed — just like the logo masters.
Use consistent shapes and subtle shadows to keep the Wisesight brand cohesive across slides, UI, and marketing materials.
Priority guideline: Always give priority to using the approved shapes below. They are part of the brand system and ensure visual consistency. Prefer these over creating new or ad-hoc shapes in designs.
There is one approved shadow. Use exactly this value, or no shadow at all — never a custom or ad-hoc shadow.
0px 4px 12px 0px rgba(16, 24, 32, 0.18). No custom, ad-hoc, or multi-level shadows.The corner radius may be 0px (sharp 90°), 5px, or 10px; capsules use the full pill radius. No other values.
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.
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.
A touch that draws the eye to ONE thing: the call-to-action, the most important number, or a status. If red is the first thing you see everywhere, it is too much. If you removed the red and the layout lost its focal point, it was used right.
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.
Most of the card is neutral; the red button is the only colored element — the click target.
View reportBlack carries the number; red flags only the change worth noticing.
Crisis Monitor ALERT
A tiny red pill marks state without coloring the whole row.
One red underline emphasizes a single word, not the whole headline.
One red bar directs attention to the data point that matters.
When a layout has no accent need, the red Wisesight logo alone satisfies the rule.
A slim left rail accents a block without flooding it.
A top strip brands a slide or card header.
A bottom strip anchors footers or dividers.
Brand sentiment hit a record high this quarter.
A red marker highlights one key phrase, not the whole sentence.
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.
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).
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.
Do — solid dark overlay, white text, one small red accent.
Don't — red flood over the whole image breaks the small-red rule.
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.
#101820Brand 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.
Prefer free, commercially-licensed libraries so any team can use them without legal risk:
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)
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.
Browse the full set at fontawesome.com/icons. Keep one style; red only for active/alert state.
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.
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.
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.
Start every deck from the master Google Slides template — layouts, colors, and type are already on-brand. Make a copy into your own Drive; don't rebuild slides from scratch or restyle the master.
Use the master files; never recreate or screenshot brand assets. Keep to the formats and naming below.
| Asset | Format | Use |
|---|---|---|
| Logo (print) | SVG / EPS / PDF | Vector, scalable — print & large format |
| Logo (digital) | SVG / PNG | Web, app, presentations |
| Symbol / favicon | SVG / PNG / ICO | App icons, avatars, browser tabs |
| Color tokens | HEX / RGB / CMYK / Pantone | From the Colors tab |
| Fonts | Web (woff2) / desktop (otf) | From the Typography tab |
| Icons | Font Awesome (web / SVG) | From the Icons tab |
| Imagery | JPG / PNG / WebP | Approved photography & backgrounds |
| Templates | Figma / PPTX / Google Slides | Decks, social, docs — start here, don't rebuild |
Keep file names predictable and lowercase, hyphen-separated:
wisesight-logo-[primary|symbol]-[color|white]-[format]
e.g. wisesight-logo-primary-color.svg
Request master files from the brand team — link your DAM / shared drive here. Always pull the latest version; never copy assets between decks.
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.
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).
Do — emphasize Jul with Wisesight Black. It reads first, with no “bad” signal.
Don't — red on Jul’s growth reads as a problem. Red = negative, not “important”.
Use red only when the value it marks is genuinely negative — negative sentiment, a decline against target, a churn or complaint spike, a breached threshold/alert. Then red’s “bad” meaning is doing real work. For a neutral or positive highlight, use Wisesight Black.
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".
#3A4F7A#1F6B5A#E8893A#5B4B8A#2677D9#C15A7A#B8BCC8#101820Sentiment 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.
#9AB73D#E7BB44#B22234For 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
| You want to show… | Use | Avoid |
|---|---|---|
| Compare values across categories | Bar / column | Pie with many slices |
| Change over time | Line or area (few series) | 3D / stacked spaghetti |
| Part-to-whole | 100% stacked bar | Donut with > 4 parts |
| Sentiment breakdown | Diverging stacked bar (fixed palette) | Red for a positive/neutral value |
| Intensity / density | Single-hue heatmap | Rainbow heatmap |
| Emphasize one value | Big number / bar in Wisesight Black | Red on a neutral or good value |
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.