01 — Identity
Brand Identity Overview
The Insights channel represents a sophisticated, editorial approach to systems thinking. The visual language is defined by a warm, paper-like background, stark black typography, and precise architectural color accents.
Color Palette
Typography Hierarchy
Display — Playfair Display Black · 48–88px · #000000
Section Header — Playfair Display Bold · 24–32px · #000000
Body Copy — Lora Regular · 18–20px · #1A1A1A · Line-height 1.7
Category Label — Lato Bold · Uppercase · 12–14px · Coral
Metadata — Lato Regular · 13px · #666666
02 — Article Headers
Article Header Templates
Consistent headers anchor every article in the Insights visual system. Two variants are defined — the standard article header and the contextual sidebar box.
A) Standard Article Header
Building The Ecosystem
.article-header {
background-color: #F5F3F0; /* Cream */
padding: 60px 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.category-tags {
color: #FF6B6B; /* Coral — tags only */
font-family: 'Lato', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
}
h1 {
color: #000000; /* True black */
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: 48px;
line-height: 1.1;
}
.meta {
color: #666666; /* Gray — metadata only */
font-family: 'Lato', sans-serif;
font-size: 14px;
}
B) Sidebar Box (Contextual)
Used within article layouts for "Current Status" or "Key Takeaways". Text must always be black — even on the light blue background.
.sidebar-box {
background-color: #A8DADC; /* Light Blue */
color: #000000; /* FORCE BLACK TEXT — critical */
padding: 32px;
border-radius: 2px;
}
04 — Newsletter
Newsletter Components
Email components follow the same visual hierarchy as the web channel. The Coral button is the only full-color element in email layouts.
Article Preview Card
The Architecture of Strategy
We often confuse tactics for strategy. Here is how I map the ecosystem before building a single component.
Read Full Story.button {
background-color: #FF6B6B; /* Coral */
color: #ffffff !important;
padding: 12px 24px;
font-weight: bold;
font-family: sans-serif;
text-decoration: none;
display: inline-block;
}
05 — Content Cards
Content Cards & Thumbnails
Index page cards are the primary discovery surface. They follow a strict typographic hierarchy: category tag → headline → excerpt → link. No deviation.
Index Page Card
06 — Technical Specs
Technical Specifications
All values are absolute. When in doubt, refer to this table.
| Category | Value | Usage |
|---|---|---|
| Background | #F5F3F0 | Page body, social backgrounds |
| Body Text | #1A1A1A / #000000 | Paragraphs, lists, all body content |
| Metadata | #666666 | Dates, bylines, captions only |
| Accent — Tags | #FF6B6B | Category labels, small UI accents, buttons |
| Accent — Links | #4ECDC4 | Interactive text links ONLY |
| Box Background | #A8DADC | Sidebar / contextual boxes — black text required |
| Display Font | Playfair Display 900 | All headlines h1–h3 |
| Body Font | Lora 400 | All paragraph and list text |
| UI Font | Lato 700 | Tags, labels, metadata, buttons |
| Spacing Grid | 8px base | All margins and padding in multiples of 8 |
| Line Height | 1.7 (body) | Generous leading for editorial readability |
| Border Radius | 2px | Cards, boxes — nearly square corners |
07 — Do's & Don'ts
Do's and Don'ts
These rules protect the integrity of the channel. They are not suggestions.
Keep text black. Even on the light blue sidebar box, text must remain #000000 for maximum legibility and brand consistency.
Never use teal for body text. #4ECDC4 is reserved for interactive hyperlinks only — it is the only use of blue in this system.
Use Coral sparingly. Small UI elements only — tags, category labels, button backgrounds, timeline markers.
No gradients on typography. All type is flat, solid color — either true black, coral, or gray. No gradient fills, no shadows, no outlines.
Illustrations at center. All editorial illustrations are isometric, hand-crafted in style, placed as the visual focal point of any layout.
No photography for hero images. The Insights channel uses commissioned illustrations, not stock photography, for all primary article visuals.
08 — Quick Reference
Quick Reference
Copy-paste this into any new Insights asset to start from a compliant baseline.
CSS Variable Stack
:root {
/* Colors */
--bg-cream: #F5F3F0;
--text-black: #1A1A1A;
--text-gray: #666666;
--accent-coral: #FF6B6B;
--accent-teal: #4ECDC4;
--box-blue: #A8DADC;
/* Fonts */
--font-display: 'Playfair Display', serif;
--font-body: 'Lora', serif;
--font-ui: 'Lato', sans-serif;
}
body {
background-color: var(--bg-cream);
color: var(--text-black);
font-family: var(--font-body);
line-height: 1.7;
}
h1, h2, h3 {
color: #000000;
font-family: var(--font-display);
font-weight: 900;
}
/* Links — teal is the ONLY non-black text */
a { color: var(--accent-teal); }
/* Tags and UI labels */
.tag {
color: var(--accent-coral);
font-family: var(--font-ui);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 12px;
}
03 — Social Media
Social Media Templates
Every social touchpoint should feel like a cropped page from the channel itself. Bold typography, cream space, illustrations at center.
A) Instagram Post (1080×1080)
Rules for 1:1 format: Cream background only · Text in true black · Coral for category eyebrow · Center illustration in lower 50% · URL in Lato 9pt at bottom
B) Instagram Story (1080×1920)