The complete design token system for Column Five Media. Seven primitives, semantic aliases, governed patterns, generation policy, and compliance rules that keep every asset on-brand.
Section 1
Primitive Colors
Seven raw values. The source of truth for all semantic aliases. Never use primitives directly in content production.
Core
Orange
#f44d37
CTAs, links, logo accent
Core
Dark Grey
#1a171a
Default background
Core
White
#ffffff
Primary text on dark
Core
Light Grey
#f6f6f6
Light-mode surface
Campaign
Light Pink
#fbdbf2
Campaign accent A
Campaign
Acid Green
#b9ec3b
Campaign accent B
Core
Deep Plum
#231226
Alternate dark surface
Dark Theme (default)
surface.default#1a171a
text.primary100% white
text.secondary60% white
text.tertiary40% white
surface.card4% white
Light Theme
surface.default#ffffff
text.primary#1a171a
text.secondary#545759
text.tertiary#a7a7aa
surface.card3% black
Section 1b
Semantic Aliases
Intent-based aliases that reference primitives. These are what generation tools and QA checklists should reference.
Action
action.primary
{color.primitive.orange}
CTAs, primary interactive elements, linked text, one highlighted phrase per section.
Never: background fill, error states, more than one dominant instance per section.
Surface
surface.default
{color.primitive.dark-grey}
Default page/asset background. Dark-first. This is the baseline.
Never: used as text color on dark backgrounds.
Surface
surface.card
rgba(255,255,255,0.04)
Frosted glass card fill on dark surface only.
Never: on light backgrounds. Stacked (glass on glass).
Text
text.primary
rgba(255,255,255,1.0)
Headlines and dominant text on dark backgrounds.
Text
text.secondary
rgba(255,255,255,0.6)
Body text on dark backgrounds.
Text
text.tertiary
rgba(255,255,255,0.4)
Labels, metadata, captions, footer text.
Text
text.accent
{color.primitive.orange}
Linked text, single highlighted phrases in body copy.
Never: full sentences. Used without surrounding text for contrast.
Campaign
campaign.accent-a
{color.primitive.light-pink}
Campaign secondary accent. One campaign at a time.
Never: without active campaign. Simultaneously with accent-b.
Campaign
campaign.accent-b
{color.primitive.acid-green}
Campaign secondary accent. One campaign at a time.
Never: without active campaign. Simultaneously with accent-a.
Section 1c
Campaign Accent Governance
Secondary accents (Light Pink, Acid Green) are campaign-level tokens, not everyday editorial colors. Activation requires protocol.
Protocol
Activation Required
Requires explicit designation: "Campaign X uses Acid Green." Designator: Jason or Creative Director.
Never: deploy without active campaign entry in Client Strategy DB.
Scope
One Campaign at a Time
Active campaign accent is declared per campaign in Client Strategy DB. Retired when the campaign ends.
Never: deploy both Light Pink and Acid Green simultaneously.
Light Pink
#fbdbf2
Surface background fill for campaign hero sections. Illustration emphasis. Currently active: "Best Story Wins" campaign (March 2026).
Never: as text color. Never as border/stroke without creative director approval.
Acid Green
#b9ec3b
Campaign highlight, illustration emphasis. Max 20% of frame area.
Never: as background fill. Never as text color. Never as border/stroke without creative director approval.
Section 2
Typography
Single typeface. Three weights. Tight tracking. Inter is the sole production font for all platforms.
Built for teams that need a system, not more output.
1.5rem / 500 / 1.2
Body
Every piece of content is an investment. A system ensures each piece compounds in value, building authority, driving pipeline, and creating an asset library that works harder over time.
1rem (16px) / 500 / 1.55 / -0.02em
Label / Caption
DTCG-compatible · Figma MCP extracted · March 2026
Radii, dividers, and spacing that define the C5 shape language.
Card
50px
Pill / Button
999px
Input
8px
Small
16px
Section 3b
Signature Patterns
The visual treatments that make C5 recognizable. Named patterns with explicit conditions.
▣
Glass Card
Frosted/translucent card container for secondary content on dark backgrounds.
Fill
rgba(255,255,255,0.04)
Border
rgba(255,255,255,0.12)
Radius
50px
Never
Light backgrounds. Stacked.
This is a live glass card. Frosted. Subtle. On dark only.
◉
Pill Button / Tag
Full-radius button or label element in three variants.
Radius
999px
Variants
Filled, Outlined, Ghost
See how it worksOutlinedGhost
━
Full-Bleed Divider
1px horizontal rule spanning full container width.
Dark
rgba(255,255,255,0.15)
Light
rgba(26,23,26,0.12)
Weight
1px only
Live divider above. Never heavier than 1px.
↻
Rotated Brand Marks
C5 monogram used as decorative element at large scale.
Rotation
45 or 90 only
Scale
Display-scale or larger
Opacity
10-30%
Never
Full opacity. Arbitrary angles. Light backgrounds.
▦
Bento Grid
Two-column CSS grid layout for architecture/feature cards with colored top-border accents.
Grid
grid-template-columns: 1fr 1fr; gap: 24px
Top accent
4px solid in category color
Radius
50px
#
Oversized Stat Callout
Large-scale numeric statistics with a vertical left accent bar for data-forward storytelling.
Stat size
clamp(3rem, 6vw, 4.5rem) / Bold
Accent bar
4px wide, #f44d37
Label
13px, tertiary, uppercase
★
Campaign Hero
Full-width section using Light Pink (#fbdbf2) as background. Requires active campaign. Currently active: "Best Story Wins" campaign.
Background
#fbdbf2
Text
#1a171a (dark on pink)
Badge
"Best Story Wins" rotating circular badge
Layout
Full-width, two-column body copy
Constraint
Max one per page. Light-theme pages only.
Section 3c
Mixed-Media Collage Style
C5 uses a neo-dadaist assemblage technique as its signature illustration language. Not traditional illustration -- layered photography, hand-drawn line art, flat color, digital artifacts, and found objects.
Sophisticated and unapologetic -- a dark, editorial aesthetic that signals creative authority without corporate sterility. A disciplined single typeface (Inter) across three weights creates hierarchy through weight, not decoration. The primary palette restraint (dark + orange accent) is offset by two bold secondary accents deployed campaign-by-campaign. Feels like a premium publication, not a SaaS dashboard.
Social Graphic (1200x628)
Background: surface.default. Headline: Inter Bold 119px, leading 0.91, tracking -2.38px, left-aligned, upper third. One CTA or highlighted phrase in action.primary. Wordmark bottom-right at 38px. Safe zone: inner 70%.
Social Graphic (1200x1200)
Background: surface.default. Headline: Inter Bold 150px, leading 1.0, tracking -3px. Single dominant headline only -- no subheadlines. C5 logomark bottom-right in orange.
Blog Hero Image
Wide format (3:1 preferred, 1.91:1 acceptable). Type-driven composition -- bold headline as primary visual. Accent: optional single phrase in action.primary.
Data Visualization
Background: surface.default. Chart lines/bars: text.primary (white) for primary series, action.primary for highlighted. No pie charts. Prefer bar/line. Axis labels at text.tertiary.
Email Header (3:1)
Light-mode or dark acceptable. If dark: all dark-mode rules apply. If light: surface.light background, text.on-light. Wordmark: white on dark, dark on light.
Illustration Collage
Canvas: 1920x1080 (16:9). Mosaic grid: two rows, mixed aspect ratios, seamless edges. Mixed-media collage panels. No visible gaps, borders, or shadows. See Section 3c for full visual vocabulary.
Universal Constraints
Background
Dark-first
Must use surface.default (#1a171a) or surface.light (#f6f6f6). Light background requires explicit instruction.
Accent
One per section
action.primary (#f44d37) only. One highlighted element per section. Never as background fill.
Typography
Inter only
Max two weights per asset. No decorative fonts. No serif. No mono.
Negative Space
Min 35% dark
Dark background is the design -- do not fill it. Generous negative space is intentional.
Gradients
Glass fills only
No rainbow gradients, no duotones. Glass card fills are the only permitted gradients.
Shadows
Forbidden
Zero drop shadows on any element including logo and type. No exceptions.
Mandatory checks every asset must pass before publication. Violations block publication and route to brand review.
Hard Stops — Block publication
ID
Check
Pass Condition
C1
Background color
#1a171a, #ffffff, #f2f2f2, #faf9f5, or #fbdbf2 (campaign only). Acid Green #b9ec3b never as background.
C2
Typeface
Inter only. No other typefaces visible in asset. AktivGrotesk is deprecated.
C3
Drop shadows
Zero drop shadows on any element.
C4
Accent saturation
#f44d37 covers 15% or less of total frame area.
C5
Campaign activation
Campaign accent requires active campaign entry in Client Strategy DB.
C6
Dual secondary accent
Only one secondary accent active. Never both simultaneously.
C7
Logo background
Wordmark on #1a171a, #ffffff, #fbdbf2, or #231226 only. Logomark on #0B0A1A, #ffffff, #F2C5D3, #f44d37, or #231226 only.
C8
Font weight count
Max two font weights per asset.
C9
Ghost text opacity
Deprecated (v1.9). Ghost text pattern inactive.
C10
Glass card stacking
No glass card on top of another glass card.
C11
Brand mark rotation
45 or 90 degrees only. No arbitrary angles. No wordmark rotation.
C12
Body text size
Body copy 24px or less.
C13
Wordmark contrast
text.primary (nav/header) or text.secondary (footer). Never text.tertiary. Gray/muted wordmarks fail.
C14
Logo SVG-only
All logo marks rendered from official SVG vector files. Never recreate wordmark using fonts. In Figma, clone source vector nodes. In code, use SVG files.
Advisory — Flag for review
ID
Check
Condition
A1
Negative space
Less than 35% dark negative space -- may feel crowded.
A2
Text elements
More than three text blocks -- review for hierarchy clarity.
A3
Ghost-text usage
Deprecated (v1.9). Ghost text pattern inactive.
A4
Orange overuse
Orange in more than two distinct locations -- may feel busy.
A5
Copy register
Uses forbidden vocabulary from Section 4g. Flag for editorial review.
A6
CTA copy
"Learn more" or "Get started" -- suggest "See how it works".
Section 8
Template Catalog
All templates sourced from Figma Brand Refresh file. Platform size matrix and social template system.
Platform Size Matrix
Template
Dimensions
Aspect
Platform
LinkedIn/OG Landscape
1200x628
1.91:1
LinkedIn, Twitter, OG meta
Instagram/LinkedIn Square
1200x1200
1:1
Instagram feed, LinkedIn
IG Story / Reels
1080x1920
9:16
Instagram Stories, Reels
Apple/Spotify Square
1080x1080
1:1
Podcast platforms
Newsletter Banner
2000x1300
~1.54:1
Email newsletter headers
LinkedIn Banner
1584x396
4:1
LinkedIn company/personal
YouTube Banner
2560x1440
16:9
YouTube channel art
Blog Hero
2688x1792
3:2
Blog featured images
Favicon
32/64/128px
1:1
Browser tab
Email Signature
952x322
~3:1
Email signature block
Social Template Specs
Horizontal (1200x628)
Six color variants across dark, pink, orange backgrounds. Heading: Inter Bold 119px, leading 0.91, tracking -2.38px. Left-aligned, upper region. Logo bottom-right at 38px height.
Square (1200x1200)
Seven color variants across dark, pink, orange. Heading: Inter Bold 150px, leading 1.0, tracking -3px. Single dominant headline. Logomark bottom-right.
Podcast ("Best Story Wins")
IG Story (1080x1920), Square (1200x1200), Apple/Spotify (1080x1080), Newsletter (2000x1300). Oversized type: Inter Bold, near-full-width, leading ~0.85, edge-bleed allowed.
Email Signature (952x322)
White background. C5 logomark left-aligned ~120px. Name: Inter Bold ~20px. Title: Inter Regular ~16px. Website in #f44d37. Social icons at 40px circles.
Furry
Holographic
Pixel
Isometric
Grunge
Lava
Chrome
Slime