editorial

Name: editorial
Availability: InStock
Author: Bergside

Define magazine-inspired editorial UI with serif typography, 8pt spacing, and tokenized colors.

2.3k|211|Updated Mar 9, 2026

Search Tags:#typography #accessibility #design tokens #editorial #layout grid #UI quality gates

Ready to run

npx skills add https://github.com/bergside/awesome-design-skills --skill editorial-bergside

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: editorial
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/editorial
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill editorial-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Editorial skill guidelines help teams create magazine-inspired UI with consistent typography, spacing rhythm, and clear reading hierarchy.

Core Features & Use Cases

Typography & style foundations: Defines a serif-driven type system (Gelasio + Ubuntu Mono), color tokens, and an 8pt baseline spacing grid for coherent editorial composition.
Accessible interaction & content: Specifies WCAG 2.2 AA expectations, keyboard-first behavior, visible focus states, and content-writing tone so articles and components remain readable and usable.
Quality-gated rule system: Provides do/don’t constraints, testable acceptance criteria, and a QA checklist to prevent inconsistent UI patterns as the product evolves.

Quick Start

Use the editorial skill to generate implementation-ready, accessible editorial design guidance for your magazine-style layouts and components.

Frequently Asked Questions about editorial

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I design magazine-style editorial layouts with consistent typography and spacing?▼

Design magazine-style editorial layouts by applying a serif-driven type system, tokenized color palette, and an 8pt baseline spacing grid to establish coherent visual hierarchy and reading rhythm across components.

What accessibility standards apply to reading-focused editorial UI components?▼

Reading-focused editorial UI components must meet WCAG 2.2 AA standards, enforce keyboard-first behavior, maintain visible focus states, and ensure content remains readable and usable across loading and error states.

How do I set up design tokens for an editorial layout system?▼

Set up editorial design tokens by defining a tokenized color palette alongside serif typography and an 8pt baseline spacing grid, enabling consistent visual hierarchy and responsive composition across the product.

Can I enforce UI quality gates to prevent inconsistent editorial design patterns?▼

You can enforce UI quality gates using do/don't constraints, testable acceptance criteria, and a QA checklist to prevent inconsistent editorial design patterns and ensure reliable engineering adoption as the product evolves.

Does this editorial layout system work for responsive reading-focused interfaces?▼

The editorial layout system applies to designing responsive reading-focused layouts and component families where visual hierarchy, accessibility rules, and writing tone must stay consistent across all interaction states.

Why use a serif typography system for editorial UI design?▼

A serif typography system using fonts like Gelasio and Ubuntu Mono creates a magazine-inspired aesthetic that enhances reading hierarchy and content tone for accessible, text-focused editorial layouts.