FIG. DS-01 // VISUAL SPECIFICATION Version 1.0

Editorial Design System

A high-contrast, publication-grade design language combining inspiration from my studies at the Glasgow School of Art with literary editorial aesthetics (New York Magazine, Cooks Country Illustrated).

Canvas Standard #FAF8F5 Warm Paper
Primary Accent Deep Forest Green
Tertiary Accent Deep Raw Ochre
Call-out CTA Vermilion Red

1. COLOR PALETTE & WCAG ACCESSIBILITY SPECS

Click any swatch to copy hex code to clipboard. Hover to inspect contrast ratios against `#FAF8F5` Paper.

WCAG 2.1 AAA Compliant Base
Base Canvas

Paper (Canvas)

#FAF8F5

Background Base

Text / Dark Blocks

Ink Charcoal

#1A1918

17.8:1 (AAA Pass)

Primary Accent

Forest Green

#244B3B

8.1:1 (AAA Pass)

Catalog & Metrics

Raw Ochre

#925E0A

5.0:1 (AA Pass)

Selective CTA

Vermilion Red

#C83E2B

4.9:1 (AA Pass)

Hairline Rules

Editorial Border

#E5E0D8

Grid Divider

Card Fill / Hover

Editorial Subtle

#F2EFE9

Surface Highlight

Captions / Metadata

Editorial Muted

#736E65

4.6:1 (AA Pass)

Live WCAG Contrast Ratio Testing Sandbox 8.1:1 AAA PASS

"Stripping away operational friction to reveal essential narrative truth."

Sample body text demonstrating legibility and high contrast ratios across light and dark publication surfaces.

2. TYPOGRAPHIC HIERARCHY & SPECIMEN SCALE

Newsreader (Headlines) • Inter (Interface/Body) • JetBrains Mono (Cataloging)

DISPLAY & HEADLINES // Newsreader (Serif) Weights: 400 Regular, 500 Medium, Italic

Editorial Strategy 2026

Bridging the gap between enterprise knowledge and human understanding.

Usage: Hero title, section headings, case study titles, pull-quote highlights.

BODY & INTERFACE // Inter (Sans-Serif) Weights: 300 Light, 400 Regular, 500 Medium, 600 SemiBold

Editorial Strategy 2026 — Communications leader with 15+ years of experience building strategies, systems, and content frameworks for global organizations and C-suite networks.

INTERFACE LINKS • CASE STUDY TABS • BUTTON LABELS • NAVIGATION ITEM

Usage: Body copy, navigation links, card descriptive copy, button labels.

METADATA & CATALOGING // JetBrains Mono (Monospace) Weights: 400 Regular, 500 Medium, 600 Bold

FIG. 01 // AI INTEGRATION & KNOWLEDGE ARCHITECTURE

01. CASE STUDIES • CATALOGUE NO. 04 / 04 • WCAG 2.1 AAA PASS

Usage: Section tags (`01 // CASE STUDIES`), figure tags (`FIG. 01`), metric labels, camera specs.

3. EDITORIAL COMPONENTS & CARD STYLING LIBRARY

Rules, badges, buttons, Museum Placard frame, and structured case study card components.

Editorial Rule Standards

DOUBLE TOP RULE (`border-top: 3px double #E5E0D8`)

Section separation rule for high-level metrics and pull quotes.

HAIRLINE DIVIDER (`border-bottom: 1px solid #E5E0D8`)

Card interior structural divider line.

Action Buttons & Micro-Badges

Active Tab Tag Badge FIG. 01 Marker

"The Featured Lens" Museum Placard Frame

Museum Frame Specimen
Featured Lens
CATALOGUE NO. 01 / 04 Shot by Jerrick • Brooklyn, NY

Sample Editorial Case Study Card Component

FIG. 01 // AI INTEGRATION & KNOWLEDGE ARCHITECTURE

"Artie" AI Knowledge Base Chatbot

Page Society

◆ Context

Legacy research archive discovery was difficult for C-suite executive members.

◆ Tactical Contribution

Directed website overhaul, taxonomy rules, content audits, and prompt guardrail testing.

◆ Real-World Result

Deployed AI chatbot indexing enterprise IP & creating new organization revenue streams.

4. DESIGN TOKENS EXPORT (JSON & TAILWIND)

Copy and paste directly into your Astro, React, or CSS configuration file.

{
  "designSystem": "Glasgow Editorial",
  "version": "1.0.0",
  "colors": {
    "paper": "#FAF8F5",
    "ink": "#1A1918",
    "forest": "#244B3B",
    "ochre": "#925E0A",
    "vermilion": "#C83E2B",
    "editorialBorder": "#E5E0D8",
    "editorialSubtle": "#F2EFE9",
    "editorialMuted": "#736E65"
  },
  "fonts": {
    "serif": "Newsreader, Georgia, serif",
    "sans": "Inter, -apple-system, sans-serif",
    "mono": "JetBrains Mono, monospace"
  }
}