Example Case Study Card
This demonstrates the three-column card layout with metadata sidebar, main content area, and decorative rail. The card responds to hover states and maintains visual hierarchy.
Case study
Visual Design System Reference
Editorial Lab
A warm, archive-style aesthetic with serif typography and metadata-first
design. All tokens prefixed with --ed-* and defined in
editorial-lab.css.
Design Tokens
01
Colour Palette
Warm cream backgrounds, near-black text, terracotta accents. Archive aesthetic.
Primary Colors
--ed-bg
#f3eedf Page background --ed-bg-alt
#ebe5d3 Card hover, sections --ed-text
#24211d Primary text --ed-text-muted
#5c5650 Secondary text Accent Colors
--ed-accent
#c86a57 Links, CTAs (terracotta) --ed-accent-hover
#a85545 Hover state Border Colors
--ed-border
#d4cdb8 Standard dividers --ed-border-light
#e5dfd0 Subtle dividers --ed-border-dark
#b8ad96 Emphasis dividers Typography
02
Type Scale
Serif-led (Cormorant), light weights, generous leading. Sans-serif for labels and meta.
--ed-font-serif
Cormorant — The quick brown fox jumps over the lazy dog
--ed-font-sans
System UI — The quick brown fox jumps over the lazy dog
Typography Classes
.ed-title Page Title
clamp(2.5rem, 2rem + 3vw, 4rem) / 400.ed-section-title Section Title
clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem) / 500.ed-subtitle Subtitle Style
clamp(1.25rem, 1.125rem + 0.75vw, 1.75rem) / 400.ed-item-title Item / Card Title
clamp(1.375rem, 1.25rem + 0.75vw, 1.75rem) / 500.ed-intro Lead paragraph / introduction text style
clamp(1.125rem, 1rem + 0.5vw, 1.375rem) / 400.ed-kicker Kicker / Eyebrow 0.75rem / 600 / uppercase / accent .ed-label Meta Label 0.6875rem / 600 / uppercase / sans .ed-body Body text style for prose content
1.0625rem / line-height 1.7.ed-small Small / caption text for metadata
0.8125rem / sans Spacing
03
Spacing Scale
Consistent spacing tokens for margins, padding, and gaps.
--ed-space-xs 0.25rem (4px) --ed-space-sm 0.5rem (8px) --ed-space-md 1rem (16px) --ed-space-lg 1.5rem (24px) --ed-space-xl 2rem (32px) --ed-space-2xl 3rem (48px) --ed-space-3xl 4rem (64px) Layout
04
Layout Dimensions
Container widths and column dimensions for the three-column card layout.
--ed-max-width 1200px Page container --ed-content-width 65ch Prose content --ed-sidebar-width 220px Meta column --ed-rail-width 180px Decorative rail Card Layout Pattern
Meta 220px
Body 1fr (flexible)
Rail 180px
Collapses to single column at 768px
Images
05
Eames-Inspired Image System
Industrial-modernist photography: technical specimen framing, grayscale processing, archival labeling.
Image Tokens
--ed-frame var(--ed-text) Image frame border --ed-matte var(--ed-bg-alt) Image backing/pedestal --ed-caption-size 0.625rem Technical caption text --ed-caption-tracking 0.15em Wide letter-spacing Image Variants
Detail variant FIG_01
.ed-image--detail 1:1 square, grayscale → colour on hover. Artifacts, specimens.
Action variant FIG_02
.ed-image--action 3:2 ratio, grayscale. Workshop photos.
Service map / journey diagram
Blueprint variant — 21:9 panoramic MAP_01
.ed-image--blueprint 21:9 panoramic. Service maps, journey maps, diagrams.
Tags
06
Tag System
Tags feel like filing markers or archive tabs—quiet, structural, editorial rather than promotional.
Tag Tokens
--ed-tag-height 2.125rem Consistent tag height --ed-tag-pad-x 0.75rem Horizontal padding --ed-tag-gap 0.5rem Gap between tags --ed-tag-radius 0.125rem Subtle corner rounding Tag Variants
Base Tag (.ed-tag)
Service Design CX Strategy Digital Strategy
Filter Chip (.ed-tag--filter)
Spec Label (.ed-tag--spec)
FIG 03 Workshop London 2026
State Tag (.ed-tag--state)
Featured Selected
Taxonomy Model
Discipline
Service design CX strategy Digital strategy
Sector
Public sector Healthcare Government
Method
Research Facilitation Prototyping
Components
07
UI Components
Links
.ed-link .ed-link-arrow Buttons
.ed-button .ed-button--outline Pull Quote
.ed-pullquote This is a pull quote component. It uses the accent border and serif italic styling for emphasis within long-form content.
Example citation
Aside / Field Notes
.ed-aside Field Notes
This is the aside component used for field notes and sidebar content. It has an accent border and muted background.
Dividers
.ed-rule .ed-rule--thick Lists
.ed-list - List items use em-dash markers
- Accent color for visual interest
- Clean, editorial styling
Metadata Display
Year 2024
Sector Financial Services
.ed-year (large)
2024
Cards
08
Card Components
Case study cards with three-column layout: meta, body, rail.
Motion
09
Animation Principles
The Eames understood that experiences unfold over time. Motion in this system is restrained, purposeful—signalling interactivity without demanding attention.
Core Transition
--ed-transition 150ms ease-in-out Universal timing for all interactions Philosophy
- Restrained — Motion should feel archival, not app-like
- Purposeful — Only animate to signal interactivity or state change
- Consistent — Same timing throughout creates rhythm
- Respectful — Honour
prefers-reduced-motion
Transition Examples
Button Background color transition
Card hover
Hover this card area
Subtle background shift Image reveal Grayscale → colour on hover (targets
img) Reduced Motion
Accessibility Note
When prefers-reduced-motion: reduce is set, animations should be
disabled or replaced with instant state changes. The system respects user preferences
for motion sensitivity.
Logos
10
Client Logos Grid
Greyscale treatment subordinates client branding to the archival aesthetic. Colour returns on hover—a quiet reveal rather than a demand for attention.
Logo Tokens
filter grayscale(100%) Default state opacity 0.6 Muted presence max-height 48px Consistent scale grid 4-col → 3 → 2 Responsive columns Logo Grid Demo
Hover logos to see colour reveal. Component: ClientLogosEditorial.astro
Navigation
11
Page Navigation
Bidirectional navigation implies a curated sequence—an exhibition path through content rather than random access. The visitor is guided, not abandoned.
Navigation Variants
Next only (home page pattern)
Bidirectional (most pages)
Component: NextPageNav.astro
Essays
12
Essay Content Patterns
Editorial furniture for long-form writing—callouts, figures, and code blocks that support the reader without interrupting flow.
Assumed Audience Card
.assumed-audience-card Written For
Service designers and design leaders working in complex domains who have felt friction between what their practice actually is and what a portfolio is equipped to show.
Sets reader expectations. Borrowed from Gwern's "assumed audience" pattern.
Key Insight Callout
.key-insight Perhaps I've been designing too many interfaces, and not enough exhibitions.
Highlights a central idea. Accent-tinted background with italic serif.
Prose Code Blocks
Inline code uses accent colour with subtle background. Block code:
/* Editorial design tokens */
.ed-transition: 150ms ease-in-out;
.ed-font-serif: 'Cormorant', Georgia, serif;
.ed-accent: #c86a57;.ed-prose code and .ed-prose pre Wide Image Pattern
.img-wide Image that breaks out of prose column
Negative margin creates bleed effect
Figure with Caption
Image placeholder
.ed-prose figure and .ed-prose figcaption Prose Lists
- Unordered list items in prose context
- Standard bullet styling with proper spacing
- Consistent margin and padding
- Numbered list for sequential content
- Same spacing as unordered lists
- Proper indentation from prose edge
.ed-prose ul and .ed-prose ol Live Page Examples
Explore the different page types in the editorial design system.
Type Archive
Test route
Type Article
Test route
Type Page
Test route
Type Archive
Test route
Ring-Fencing Notice
All styles namespaced under .editorial-lab. No CSS bleed to production.
- Layout:
EditorialLabLayout.astro - Styles:
editorial-lab.css - Components:
src/components/editorial/ - Documentation:
docs/style-guide/EDITORIAL_DESIGN_SYSTEM.md