Whyz Media | Brand Book 2026 | Internal & Partner Use
The logo
Logo Anatomy
Scaling Rule
Minimum Size
Not Whyz to use
Clear Space
The Monogram
Monogram Breaking out
Monogram in Photo
Not Whyz to use
The Question Mark
Colors
Lantern is built on Deep Ink + Paper as the trust and reading system, with Quince acting as the signal marker. To introduce more vibrancy for a younger, mobile-first audience, we’re curating secondary accents that perform in real platform conditions: small UI elements, subtitles, tags, and motion-safe highlights. This adds energy where it counts, while keeping the overall tone serious, calm, and credible.
Deep Ink
primary base
#1a2131
Quince
accent / human spark
#f3d948
Parchment
secondary neutral
#F8F3EC
Porcelain
canvas
#FBFCF8
Magenta Bloom
ATTENTION MARKER
#EC1763
Persian Blue
CREDIBILITY DEPTH
#0038BC
Slate Blue
INTERACTION CUE
#7678ED
Teal
digital clarity accent
#028090
Emerald
Positive signal
#32de8a
Golden Orange
HUMAN WARMTH
#EFA119
Color USage
Usage Rules
Deep Ink dominates (60–70%). It’s the credibility anchor and the quiet authority base across all directions.
Porcelain and Parchment carry the reading experience (20–30%). Use them to reduce fatigue and maintain warmth. Porcelain is the primary canvas; Parchment is the secondary surface, slightly warmer and more textured in feel.
Quince stays punctuation (5–10%). It behaves like a highlighter — a marker, not a background. When it appears, it should signal something: a key line, an active state, a moment worth noticing.
Secondary colors are deployed with intent (combined under 10–15%). Each one has a specific job. None of them should appear for decoration.
Secondary roles
Teal is functional clarity — links, active states, and informational modules when you want something more neutral than Quince.
Persian Blue is credibility depth — use it for serious editorial framing, data anchors, and contexts where authority needs to feel grounded rather than energetic.
Slate Blue is interaction — hover states, selected states, interactive chips, and secondary UI elements that need to feel responsive without competing with Quince.
Golden Orange is human warmth — callouts, highlight accents, and moments of energy that need to feel optimistic rather than urgent.
Emerald is positive signal — progress indicators, resolved states, affirmative tags, and anything that needs to communicate forward motion.
Magenta Bloom is attention — use it sparingly and only when something genuinely demands notice. It has high interrupt value; that value disappears fast if overused.
Functional UI mapping
Headlines / nav / primary text on light: Deep Ink #171F30
Body text on dark: Porcelain #FBFCF8 (never pure white)
Links + key indicators: Quince #F3D948, or Teal #028090 for a less high-contrast option
Primary canvas: Porcelain #FBFCF8 with Parchment #F8F3EC for secondary surfaces and card backgrounds
Interactive states / selected UI: Slate Blue #7678ED (secondary), Teal #028090 (primary functional)
Credibility anchors / serious editorial modules: Persian Blue #0038BC (used like structure, not color)
Energy highlights / warmth accents: Golden Orange #EFA119 (small surfaces, never dominant)
Positive / resolved tags: Emerald #32DE8A (functional, not decorative)
Attention / critical interrupts: Magenta Bloom #EC1763 (maximum restraint — one moment per screen)
Avoid
Turning Quince into large backgrounds. It reads as loud immediately.
Using Magenta Bloom more than once per view. It burns through its interrupt value fast.
Running Persian Blue and Slate Blue together at scale — they create visual competition without hierarchy.
Pure black (Deep Ink is the correct dark) and cold white (use Porcelain or Parchment).
Treating Emerald or Golden Orange as brand colors. They are functional signals, not identity colors.
Deploying more than two secondary colors in a single layout without a clear structural reason.
Typography Direction
Lantern typography here is designed for screen-first consumption and a younger, mobile-led audience. The priority is effortless readability and clean hierarchy so subtitles, tags, and UI elements stay clear across formats.
By keeping the type light and minimalist, we create more room for visual cues like highlights, markers, and source chips to do their job without clutter.
WHYZ Typeface: Readex Pro
Role: Signature headline accent (fusion element), high personality.
Strong display character for hero moments and identity “edge”
Works well as a controlled headline layer without turning into calligraphy-first branding
Can deliver a memorable voice quickly
Can be used for: Hero titles, key series branding, poster moments, episodic headers, body
Typography Rules
Principles
One type family, one clear system. Structure is the style: weight, spacing, alignment. Made to guide the eye through complexity. Features are for better flow, not flair.
Typeface Pairing
Arabic headlines: Readex Pro Bold Arabic body and UI: Readex Pro Light
Readex Pro is a bilingual typeface built for screens. It balances digital clarity with visual warmth, supporting Arabic and Latin in a single integrated design. Its range of weights carries the full typographic hierarchy — from hero headlines to fine metadata — in one consistent voice.
Typographic Behaviours
Headlines: concise, firm, low exclamation energy. Use weight, not noise. Subheads: carry context in one to two lines and help the reader orient quickly.
Body: generous line height and comfortable measure for anti-fatigue reading. UI labels and chips: consistent casing, spacing, and rhythm to reinforce navigation logic.
Weights & Flexibility
Readex Pro supports 6 weights working on variable axes, allowing precise hierarchy from quiet metadata to strong headlines. Arabic and Latin are designed together as one integrated system.
Avoid
Mixing unrelated Arabic fonts. This system needs one voice. Condensed breaking-news fonts, futuristic grotesks, or anything that reads like a tech dashboard. Heavy weights in body text. Light is reserved for long-form reading comfort.
The golden ratio (φ = 1.618) produces a type scale where each step feels naturally proportional to the next. Start from a base of 16px — each heading level multiplies by φ, giving a scale that feels balanced without arbitrary guesswork.
| Base | 16px | Body / H6 |
| × φ | 16 × 1.618 = 26px | H5 |
| × φ² | 16 × 2.618 = 42px | H4 |
| × φ³ | 16 × 4.236 = 68px | H3 |
| × φ⁴ | 16 × 6.854 = 110px | H2 |
| × φ⁵ | 16 × 11.09 = 177px | H1 |
Motion & On-Screen Graphics
- Slow-in, slow-out; minimal bounce
- Transitions: wipes, fades, gentle parallax
- Lower thirds: single line + optional source chip
- Use Quince as cursor/highlighter energy, not strobe accent
- breaking-news animations, fast tickers, aggressive swooshes, constant movement.
- “Explained” pieces with source-led structure
- Interviews that feel like a civil conversation
- Mini-docs with archival texture + modern clarity
- Opinion that reads like a letter with evidence, not a rant
- Context chip (e.g., “Background”, “Voices”, “Timeline”, “Glossary”)
- Receipts module (sources + links, elegantly formatted)
- Key lines pull-quotes in Quince highlight
- Timeline using Stone/Ink with Quince markers
- Feel warm, intimate, editorial
- Prioritise reading comfort
- Use texture as identity
- Let sources and structure be the authority
- Shout visually
- Use sterile “newsroom template” layouts
- Overuse Quince
- Look like a finance app, activism poster, or TV channel
Sound Logo
A sound logo is a short audio signature that represents a brand through sound the way a visual logo represents it through form. It is compressed, intentional, and instantly recognizable.
For Whyz, a sound logo is a functional identity element, the audible expression of the same values that govern every visual decision: clarity over noise, depth over stimulation, human over broadcast.
Why it matters:
We process sound faster than visuals. Auditory recognition triggers memory and emotion before conscious thought kicks in.
Attention is fragmenting. Audiences listen across screens, speakers, and spaces where the visual brand is absent. A sound logo keeps the brand present when it cannot be seen.
It carries emotional tone. Warm or authoritative, playful or precise — a sound logo communicates brand character in a fraction of a second, without a word.
It deepens the identity system. When aligned with the visual brand, it reinforces recognition. When missing, something feels incomplete.
Social Media Playbook
Reel Covers
Reel Inserts
Static posts
