# Wisesight Brand System — Machine-Readable Guidelines

> Canonical, auditable brand rules for Wisesight ("One Voice" identity).
> Source of truth: the interactive brandbook (index.html). This file is the
> AI/agent-readable mirror of it. If a value here conflicts with the rendered
> brandbook, the brandbook wins — re-export this file. Exact importable values
> (every hex, ramp, weight, spacing step) live in tokens.json / tokens.css.

## How to use this file (for AI agents)

You are auditing a design, slide, document, web page, or component against the
Wisesight brand. Do this:

1. Read every rule below. Each has a stable ID (e.g. `COLOR-03`) and a level:
   - **MUST** / **MUST NOT** — hard rule. A violation is a fail.
   - **SHOULD** / **SHOULD NOT** — strong default. Flag deviations; allow if justified.
2. For the artifact under review, go rule by rule and assign: `pass`, `fail`,
   or `n/a` (rule doesn't apply to this artifact).
3. Report as a table: `Rule ID | Level | Verdict | Evidence | Fix`. Quote the
   exact offending value (hex, px, ratio) and the corrected value.
4. End with a one-line verdict: **ON-BRAND** (no MUST failures) or
   **OFF-BRAND** (≥1 MUST failure), plus the count of SHOULD deviations.

Be concrete. "Red is ~40% of the layout (COLOR-03 caps it at 10%)" beats
"too much red".

---

## 1. Identity

- Name: **Wisesight**. Always capitalized as "Wisesight" (not WiseSight / wisesight).
- Tagline: **"Analyze Insights with Ultimate Intelligent Solution"**
- Mission: Turn the conversations people share across social into insight that
  brands, agencies, and the public sector can act on.
- Company facts: founded in **Thailand in 2007** (as social platforms were taking
  off there); collects **15M+ social media messages daily**; serves **300+**
  brands, agencies, and public-sector organizations.
- Voice: clear, confident, evidence-first — never hype. Lead with the insight,
  then the number. Plain language. Be specific and actionable.
- `VOICE-01` (SHOULD NOT): no superlatives/hype without data ("amazing!!",
  "through the roof"). Show the evidence; don't overstate certainty.
- `VOICE-02` (SHOULD): lead with the takeaway, then the number. Use plain
  language and **define each metric once**. Be specific — e.g.
  *"engagement up 12% WoW"*, not *"lots more"*. Don't bury the point under
  jargon or write walls of text. Model line: *"Negative mentions dropped 18%
  this week after the fix. Keep the response template; revisit on Friday."*
- Core characteristics (what the brand embodies): **Masterful Intelligence**
  (deep data/insight expertise — complex numbers into strategy), **Visionary
  Foresight** (spotting trends, risks, and hidden patterns others miss),
  **Confidence** (calm under pressure; clarity in data chaos), **Trusted
  Authority** (the definitive strategic partner/guardian for brands and agencies).
- Brand personality — where Wisesight sits on each spectrum:
  - Casual/Warm ←→ **Formal/Cold**: leans formal (70%).
  - Playful/Humorous ←→ Serious/Earnest: balanced (50%).
  - Humble/Deferential ←→ **Bold/Confident**: leans bold (80%).

## 2. Color — primary system

Primary "One Voice" palette. Print values are authoritative for print work;
confirm with your designer/printer for consistency.

| Token            | Hex       | Print (Pantone · CMYK · RGB)                       | Role                                       |
|------------------|-----------|----------------------------------------------------|--------------------------------------------|
| Wisesight Red    | `#850219` | Pantone 7427 C · C0 M99 Y81 K48 · R133 G2 B25      | Attention/accent. Large fill ONLY as logo backdrop. |
| Wisesight Black  | `#101820` | Pantone Black 6 C · C100 M79 Y44 K93 · R16 G24 B32 | Primary text / artwork / information       |
| Wisesight Gray   | `#CDCFDB` | Pantone 650 C · C6 M5 Y0 K14 · R205 G207 B219      | Sub-information                            |
| Gray-100 surface | `#F2F3F6` | —                                                  | Standard neutral background                |
| White            | `#FFFFFF` | —                                                  | Background                                 |

- `COLOR-01` (MUST): every layout includes Wisesight Red somewhere — a title,
  key accent, button, status, or the red logo. A composition with zero red is off-brand.
- `COLOR-02` (MUST NOT): Wisesight Red is never used as a large fill or full
  background — **except** a logo lockup: a full solid-red field is allowed when
  its only job is to carry the Wisesight logo/mark (cover, title slide, endpage,
  brand lockup), with the reversed/white logo on top and nothing else on the red
  (no body text, data, buttons, or photos). Big red = a brand statement, not an accent.
- `COLOR-03` (MUST): in content layouts red covers **≤ 10%** of the composition
  (9:1 neutral-to-red). Exceptions: a layout may instead carry only the red
  logo/mark, OR be a logo-on-red lockup per COLOR-02 (the 10% cap does not apply there).
- `COLOR-04` (SHOULD): aim for a 60–30–10 distribution (60% neutral surface,
  30% black/primary, 10% red accent).
- `COLOR-05` (MUST NOT): body/reading text is never set in red. Red = emphasis, not reading.
- `COLOR-06` (SHOULD NOT): don't scatter many competing red elements — one focal
  red per layout (the CTA, the key number, or a status).
- `COLOR-07` (MUST): white text on red fills (buttons, tags) for contrast; never
  red text on dark/saturated backgrounds (low contrast).
- `COLOR-11` (MUST): text meets WCAG 2.1 AA contrast — **≥ 4.5:1** for body text,
  **≥ 3:1** for large text (≥ 24px, or ≥ 19px bold) — measured against its
  background. (The brandbook's Colors tab has a live matrix + checker.)
- `COLOR-12` (SHOULD): long-form body copy may use **Neutral D1 `#3C3E47`**
  (a softer near-black) while headers stay Wisesight Black `#101820`. Red may flag
  negative/error/alert states as a small accent (downward trend, error message) —
  but inside plotted chart data, negative uses `#B22234`, not Wisesight Red (see
  DATAVIZ-03).
- Approved backgrounds: White `#FFFFFF`, Gray-100 `#F2F3F6`, Wisesight Black
  `#101820` (neutrals only — Secondary is an accent per §3, not a background).
  Slide-background hierarchy — signal content type by background: **White = main
  slide**, **Gray-100 `#F2F3F6` = data slide**, **Black `#101820` = statement/
  section slide**.
- Component combinations (from the Colors tab): on **white**, a red header/eyebrow
  commands attention, body stays Wisesight Black, borders are Wisesight Gray. On a
  **black** background, all text is white; use red only as a full red button with
  white text. On a **Wisesight Gray** background, white text is for large display
  type only (contrast is low at that value) — keep small body copy in Wisesight Black.

## 3. Color — secondary system (use after primary)

Approved secondary colors — to distinguish data categories, campaign themes, or
sub-brands. The primary system always leads; reach for these only when needed,
and use a limited set per piece.

Steel Blue `#3A4F7A` · Signal Blue `#2677D9` ·
Royal Purple `#3B2C5C` · Royal Indigo `#5B4B8A` · Emerald `#004A25` ·
Jewel Emerald `#1F6B5A` · Rose Pink `#C15A7A` · Terracotta Red `#C4504B` ·
Ivory White `#EBE6E2` · Mint Green `#6FC9A4` · Amber Orange `#E8893A`

- `COLOR-08` (SHOULD): primary (Red/Black/Gray/White) leads; secondary is the
  second layer, chosen sparingly and purposefully per piece — an accent kept
  well under 20% of any page/layout, never a full-page background or large fill.

## 4. Color — additional (accent) system

A vibrant high-chroma hue layer for charts, highlights, tags, icons, data points.
The 11 hues (red, orange, gold, lime, green, teal, cyan, blue, indigo, violet,
magenta) each ship as a 6-tone ramp — 20% / 40% / 60% tint, base (100%), darker
(140%), deepest (160%). Exact values live under `color.additional.*` in
tokens.json. A step is named only where it matches a Primary/Secondary color
(e.g. Wisesight Red, Signal Blue, Emerald); every other step is numbered by tone.
The red ramp is anchored on brand red `#850219`. (Note: the additional **Lime**
base is `#AFD146`; the sentiment **Positive** is a darker Lime `#9AB73D` — distinct.)

- `COLOR-09` (MUST NOT): additional colors are **never** used as backgrounds.
- `COLOR-10` (MUST): additional colors total **≤ 20%** of any page/layout.
  Backgrounds stay neutral (White, Gray-100, Black); Secondary is an accent too,
  kept well under 20% — not a background or large fill.

### Social channel colors

Per-platform brand colors for social/chat channel icons/labels (`color.channel.*`
in tokens.json). The book groups them as **Social channels** (Facebook, X,
Instagram, YouTube, TikTok, Forum, News, Blog) and **Chat channels** (Messenger,
WhatsApp, LINE, Google Business):
Facebook `#0766FF` · X `#000000` · Instagram `#E4405F` ·
Forum `#3C3963` · News `#669900` · Blog `#F37A01` · YouTube `#CD201F` ·
TikTok `#00D6D3` · LINE `#06C755` · Messenger `#0084FF` · WhatsApp `#25D366` ·
Google Business `#4285F4`. (TikTok's channel color is `#00D6D3`, but its icon
renders black like X.)

- `CHANNEL-01` (SHOULD): use each platform's own brand color for its channel
  icon/label (see ICON-04). These are platform colors, not Wisesight brand
  colors — keep them scoped to the channel marker; don't let them lead a layout.

### Sentiment palette

Fixed **diverging sentiment palette** (`color.sentiment.*` in tokens.json) — the
same three colors on every chart, report, and layout, so a color always means the
same thing: Positive `#9AB73D` · Neutral `#E7BB44` · Negative `#B22234`.

- `SENTIMENT-01` (MUST): use these exact three colors for sentiment, everywhere.
  Negative uses `#B22234`, kept distinct from Wisesight Red `#850219` (a
  brand/layout accent). See DATAVIZ-03 for in-chart usage.

## 5. Gradients

- `GRAD-01` (SHOULD): default to flat, solid fills — gradients are the exception.
- `GRAD-02` (MUST): the ONLY allowed gradients are these four:
  - Red→Black at 90° · Red→Black at 180° · White→Gray at 90° · White→Gray at 180°
- `GRAD-03` (MUST NOT): no other colors, angles, or stops; never a custom blend.
- `GRAD-04` (MUST): on photos, use a **solid color overlay**, not a gradient scrim.

## 6. Typography

- Primary system/UI font: **Roboto** (used in the brand-system UI itself).
- Approved additional fonts for slides, reports, and all editable printed/digital
  material (including online documents) — embed the webfont via Google Fonts:
  - **Sarabun** — *formal*; Thai + Latin.
  - **Prompt** — informal; Thai + Latin.
  - **Kanit** — informal; Thai + Latin.
  - **Poppins** — informal; **Latin + Devanagari (not Thai)** — use for headlines
    and UI where Thai is not required.
  - **IBM Plex Sans** — informal; extensive Latin coverage — use for data-heavy
    reports and neutral, readable UI.
- `TYPE-01` (MUST): use only the fonts above. No other typefaces.
- `TYPE-02` (SHOULD): one type family per document; keep a consistent scale.
- Type scale (size / weight / line-height) — `typography.scale.*` in tokens.json:
  Title 28px/700/1.2 · Subtitle 22px/600/1.25 · Heading 18px/700/1.3 ·
  Subheading 16px/600/1.35 · Section-header 15px/600/1.4 · Body 14px/400/1.5 ·
  Caption 12px/400/1.45 · Quote 14px/400/1.5 italic.
- Per-font weight at each scale level (Title · Subtitle · Heading · Subheading ·
  Section-header · Body · Caption · Quote):
  - **Sarabun**: 700 · 600 · 700 · 600 · 600 · 400 · 400 · 400  (recommended: Regular/Light/Bold)
  - **Prompt**: 600 · 500 · 600 · 500 · 500 · 300 · 300 · 300  (recommended: Regular/Light/Bold)
  - **Kanit**: 500 · 400 · 500 · 400 · 400 · 300 · 300 · 300  (recommended: Regular/Light/Bold)
  - **Poppins**: 700 · 600 · 700 · 600 · 600 · 400 · 400 · 400  (recommended: Medium/Light/Bold)
  - **IBM Plex Sans**: 700 · 600 · 700 · 600 · 600 · 400 · 400 · 400  (recommended: Medium/Light/Bold)
- Font provenance (all free / open-license): Roboto (Google) · Sarabun (Suppakit
  Chalermlarp; SIL OFL) · Prompt (Cadson Demak; SIL OFL) · Kanit (Cadson Demak;
  SIL OFL) · Poppins (Indian Type Foundry; SIL OFL) · IBM Plex Sans (Mike Abbink /
  Bold Monday for IBM; SIL OFL).

## 7. Logo

- Concept: **"foresight through data gathered."** The logo = symbol (a sharp mark
  evoking analysis, set on a red circle) + logotype (uppercase black). Fixed
  artwork; both a horizontal and a vertical lockup exist — use the master files (LOGO-06).
  - **Horizontal lockup = the default** — use it wherever width is plentiful:
    headers, navigation bars, email signatures, document footers, and most
    standard layouts.
  - **Vertical lockup** — use where the space is roughly square or tall.
- `LOGO-01` (MUST): the logo may sit directly only on **White, Gray-100 surface,
  Black, or Red**. On any other color (Secondary, Additional, arbitrary) give the
  logo its own **White, Black, or Red panel** — never on the bare color, and
  **never box the logo inside a white or red block** (the branding team does not
  allow a white-box or red-box container). On a **photo**, use the **inverted
  (white) logo on a solid dark overlay** — a full scrim, not a colored box. The
  inverted logo may not sit on any other color. (A full solid-red field carrying
  only the logo — a cover/lockup — is still fine; see COLOR-02.)
- `LOGO-02` (MUST): keep clear space (the **exclusion zone**) of **x = the
  symbol's height** on all four sides — the closest any other element or message
  may sit; more space is always fine.
- `LOGO-03` (MUST): minimum sizes — digital **24px** height, print **12mm** width,
  symbol alone **16px**. Below logotype legibility, use the symbol alone.
- `LOGO-04` (MUST NOT): never stretch/distort, rotate/tilt, recolor, add
  shadow/effects, squash/re-proportion, or place on low-contrast/busy backgrounds.
- `LOGO-07` (MUST NOT): never fade the logo to a low-opacity/ghosted watermark
  (e.g. a faint logo tiled or set behind content). The logo is always full-opacity
  and legible; use a solid corner logo or a logo lockup instead.
- `LOGO-05` (MUST NOT): never use the symbol and logotype separated as a custom lockup.
- `LOGO-06` (MUST): use master logo files; never recreate or screenshot the logo.
- `LOGO-08` (MUST): co-branding — when locking up with a partner, separate the two
  logos with a thin divider and give each **≥ one clear-space unit (x)** from the
  line. Match **optical** sizes, not pixel heights.
- `LOGO-09` (MUST): products do not get their own logo, symbol, icon, monogram, or
  custom wordmark. A product's **only** approved branded form is the lockup of the
  **full Wisesight logo + a thin vertical divider + the product name**
  (e.g. `WISESIGHT | Zocial Eye`). **Two contexts, two rules:**
  - **As a logo/lockup** (cover, header, title slide, badge): use the **exact export**
    from the Product lockup generator (Logo tab, PNG + vector SVG), placed as-is. Do NOT
    rebuild, restyle, recolor, re-space, or re-typeset it by hand; the generator output
    is the only valid artwork. The lockup is **locked to one style**: **Plus Jakarta
    Sans Light**, natural case (never uppercased), thin divider (thickness 4) — neutral
    gray `#6b6e78` on Light, white on Inverted — fixed size/gap. Two versions only —
    **Light** (product name in Wisesight Black `#101820` on white) and **Inverted**
    (product name white on a Wisesight Black field, reversed white logo). In the generator only the
    product name and the light/inverted toggle are editable; font, weight, case, size,
    gap, and divider are fixed.
  - **As plain running text** (a sentence, heading, caption, menu item): do NOT paste
    the lockup — just type the product name (no divider, no `WISESIGHT`). Set it in the
    product typeface, **Plus Jakarta Sans**, not a decorative or arbitrary font, and
    never fake a logo out of typed text.
  Anyone may generate the lockup, but only the generator's output counts as the logo.
  Plus Jakarta Sans has no Thai glyphs, so the generator does not support Thai product
  names. The Wisesight logo itself is never re-typeset (see LOGO-05/06).

## 8. Shape & corner radius

- Approved shapes (prefer these over ad-hoc shapes): rounded rectangle, circle
  badge, pill capsule, angled flag, chevron arrow, bracket frame, diamond badge.
- `SHAPE-01` (MUST): corner radius is **0px (sharp 90°), 5px, or 10px** —
  no other values. Capsules use the full pill radius.

## 9. Shadow

- `SHADOW-01` (MUST): there is exactly ONE approved shadow; no custom/ad-hoc/
  multi-level shadows. Use this value, or no shadow at all:
  - `box-shadow: 0px 4px 12px 0px rgba(16, 24, 32, 0.18)`
- `SHADOW-02` (SHOULD): if an element needs no elevation, use no shadow
  (especially on dark backgrounds); keep the shadow identical (same offset, blur,
  color) everywhere it appears.

## 10. Iconography

- Library: **Font Awesome 7 Free** (fontawesome.com/icons) — Regular, Solid, and
  Brands.
- `ICON-01` (MUST): pick ONE style (Regular OR Solid) and keep it consistent
  across a product. Regular (outline) is the default; reserve Solid for active/selected.
- `ICON-02` (MUST NOT): don't mix Regular and Solid in one set; don't mix Font
  Awesome with other icon packs.
- `ICON-03` (MUST): icon color is Wisesight Black; use **red only** for an active
  or alert state — one icon, not a whole toolbar. Don't recolor every icon red.
- `ICON-04` (SHOULD): equal optical size; align on a 24px grid. Social/chat
  platform icons use Font Awesome **Brands** in each platform's own brand color
  (see CHANNEL-01). For source categories with **no logo** (Forum, News, Blog),
  use a neutral **Solid** icon in that channel's color.

## 11. Photography

- `PHOTO-01` (SHOULD): authentic people/workspaces, natural light, natural color,
  soft contrast, uncluttered (clear focal point, generous negative space),
  data-forward (real dashboards/screens/conversations). No posed, cliché stock.
- `PHOTO-02` (MUST NOT): no heavy filters, duotone floods, or tinting the whole
  image red.
- `PHOTO-03` (MUST): when text sits on a photo, lay a **solid Wisesight Black
  `#101820` overlay** (not a gradient) at **~55–70% opacity (default 62%)** for
  legibility; text on it is white and brand color enters only as a small red
  accent. The inverted (white) logo is the only mark that may sit directly on that
  overlay. Never flood the image with red.
- `PHOTO-04` (SHOULD): sourcing & licensing — prefer free, commercially-licensed
  libraries so any team can use them without legal risk (**Unsplash**, **Pexels** —
  free for commercial use, no attribution required). Always check each photo's
  individual license (some require attribution or restrict editorial vs commercial
  use). Apply the brand treatment (solid overlay + small red accent) **yourself**,
  rather than buying pre-styled imagery.

## 12. Layout & spacing

- `LAYOUT-01` (MUST): build on a **12-column grid**.
- `LAYOUT-02` (MUST): size all spacing (padding, gaps, margins) from an **8px
  base** — use multiples of 8 (8, 16, 24, 32, 48, 64).
- `LAYOUT-03` (SHOULD): keep page/slide margins generous (≥ 48px on desktop).

## 13. Data visualization

Charts carry the "One Voice" rule: a neutral field holds the data, one small
accent points to what matters. Palette tokens live under `color.chart.*` in
tokens.json (`--ws-chart-*` in tokens.css).

- `DATAVIZ-01` (MUST): series/bars/lines default to **neutral** (Wisesight Gray
  `#CDCFDB`) or the Secondary categorical set. Emphasize the **ONE** data point or
  series that matters — with **Wisesight Black `#101820`** (dark contrast) **or a
  single Wisesight Red `#850219` accent** (one bar/point/mark only, the focus). Do
  not color a whole chart red or use red for more than the single focal point. Keep
  red doing exactly one job per chart: if red already marks negative data
  (`#B22234`, DATAVIZ-03), don't also use Wisesight Red for focus in the same chart —
  it becomes ambiguous. The brand's required red accent (COLOR-01) may instead live
  in the surrounding layout (title, CTA, logo).
- `DATAVIZ-02` (MUST): for multiple categories, assign colors in the approved
  order — Steel Blue `#3A4F7A`, Jewel Emerald `#1F6B5A`, Amber Orange `#E8893A`,
  Royal Indigo `#5B4B8A`, Signal Blue `#2677D9`, Rose Pink `#C15A7A` — then group
  the rest as **Other `#B8BCC8`**. Most charts need **≤ 3** series; stop early. No
  arbitrary/rainbow hues; total high-chroma fill respects the COLOR-10 ≤20% cap.
- `DATAVIZ-03` (MUST): sentiment uses the fixed diverging palette — Positive
  `#9AB73D`, Neutral `#E7BB44`, Negative `#B22234` — the same on every chart.
  Negative uses `#B22234`, distinct from Wisesight Red `#850219`.
- `DATAVIZ-04` (MUST): quantitative axes **start at zero**; never truncate the
  baseline to exaggerate a difference.
- `DATAVIZ-05` (SHOULD): minimal chrome — light gridlines `#E6E7EC`, direct data
  labels over legends where possible, flat fills, bar corners 0 or 5px (SHAPE-01).
  No 3D, no drop shadows on data, no heavy borders.
- `DATAVIZ-06` (SHOULD NOT): avoid pies/donuts with many slices (**keep to ≤ 4**)
  and truncated axes; prefer bar for comparison. Keep to ~5 categorical series
  before grouping the rest as Other.
- `DATAVIZ-07` (SHOULD): for one measure by intensity (volume/density heatmap),
  use the single-hue red ramp `#F0D3D6` → `#E0A7AE` → `#D17A85` → `#B23A4E` →
  `#850219`; one hue only, never rainbow. A red ramp reads as magnitude — if higher
  values are genuinely good, prefer a neutral/blue ramp so "dark" isn't misread as bad.
- `DATAVIZ-08` (SHOULD): pick the chart for the job — **bar** for comparison;
  **horizontal bar** for rankings (emphasize the top item); **line/area** for
  change over time with few series (avoid 3D or "stacked spaghetti"); **100%
  stacked bar** for part-to-whole; **diverging stacked bar** for sentiment (fixed
  palette); a single **big number** in Wisesight Black for one KPI — up-delta in
  green `#1F6B5A`, down-delta in red.

## 14. Assets & naming

- `ASSET-01` (SHOULD): file names lowercase, hyphen-separated:
  `wisesight-logo-[primary|symbol]-[color|white]-[format]`
  e.g. `wisesight-logo-primary-color.svg`.
- `ASSET-02` (MUST): vector for anything that scales; no screenshots or re-exports
  of the logo. Pull the latest master files. Approved formats by asset:
  - Logo (digital): **SVG / PNG** — web, app, presentations
  - Symbol / favicon: **SVG / PNG / ICO** — app icons, avatars, browser tabs
  - Logo (print): **SVG / EPS / PDF**
  - Color tokens: **HEX / RGB / CMYK / Pantone**
  - Fonts: **web woff2 / desktop otf**
  - Icons: **Font Awesome (web / SVG)**
  - Imagery: **JPG / PNG / WebP**
  - Templates: **Figma / PPTX / Google Slides** — start here, don't rebuild.
    Master slide deck (Google Slides, Wisesight account required):
    https://docs.google.com/presentation/d/1MCRnFCFIftzsc_AsvVIe-7VMgM8qQQwBaYcdCPo6guc/edit
    Make a copy; never restyle the master or rebuild slides from scratch.
- `ASSET-03` (SHOULD): request master files from the brand team; never copy assets
  between decks; check that the light/dark logo variant matches its background.

---

## Quick audit checklist

- [ ] COLOR-01 Red present somewhere
- [ ] COLOR-02/03 Red ≤ 10%, never a background/large fill (unless a logo-on-red lockup)
- [ ] COLOR-05 No red body text
- [ ] COLOR-11 Text contrast ≥ 4.5:1 (body) / ≥ 3:1 (large)
- [ ] COLOR-12 Body copy Wisesight Black or Neutral D1 #3C3E47; red only flags negative/alert
- [ ] COLOR-08 Secondary is an accent (well under 20%), never a background/large fill
- [ ] COLOR-09/10 Additional colors are accents only (≤20%), never backgrounds
- [ ] SENTIMENT-01 Sentiment uses the fixed palette (Positive #9AB73D · Neutral #E7BB44 · Negative #B22234)
- [ ] GRAD-02 Only the 4 approved gradients (or solid fills)
- [ ] TYPE-01 Only Roboto / Sarabun / Prompt / Kanit / Poppins / IBM Plex Sans (Poppins = no Thai)
- [ ] LOGO-01 Logo only on White/Surface/Black/Red — never boxed in a white or red block; on photos, white logo on a dark overlay
- [ ] LOGO-04 Logo not distorted/recolored/rotated/shadowed
- [ ] LOGO-07 Logo at full opacity — no low-opacity/ghosted watermark
- [ ] LOGO-08 Co-brand lockups: thin divider + ≥1 clear-space unit each, matched optical sizes
- [ ] LOGO-09 Product logo = the generated WISESIGHT | Product lockup used as-is (no custom product mark/icon); product name in running text = plain, Plus Jakarta Sans, no lockup
- [ ] CHANNEL-01 Social/chat channel markers use the platform's own brand color (Forum/News/Blog = Solid icon in channel color)
- [ ] SHAPE-01 Corner radius ∈ {0, 5, 10px} or pill
- [ ] SHADOW-01 The one approved shadow (0px 4px 12px 0px rgba(16,24,32,0.18)) or none
- [ ] ICON-01/03 One Font Awesome 7 style; black, red only for active/alert
- [ ] PHOTO-03 Solid Wisesight Black overlay ~55–70% (no gradient), white text, small red accent
- [ ] PHOTO-04 Imagery is commercially-licensed (Unsplash/Pexels), brand treatment applied in-house
- [ ] LAYOUT-02 8px spacing multiples on a 12-column grid
- [ ] DATAVIZ-01 Charts neutral by default; emphasize ONE point with black or a single red accent
- [ ] DATAVIZ-03 Fixed sentiment palette (Positive/Neutral/Negative)
- [ ] DATAVIZ-04 Value axes start at zero (no truncated baseline)
- [ ] DATAVIZ-06 Pies/donuts ≤ 4 slices; prefer bar