skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

publication

Define print-inspired design system rules for editorial UIs with WCAG 2.2 AA accessibility.

2.3k|211|Updated Mar 9, 2026
Search Tags:#accessibility#design system#tokens#component guidelines#editorial typography#publication UI
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill publication-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: publication
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/publication
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill publication-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Publication helps you build book, magazine, and report-style interfaces that stay consistent, accessible, and true to an editorial visual hierarchy instead of drifting into ad-hoc styling.

Core Features & Use Cases

It provides print-inspired typography and spacing foundations (Oswald display, Nunito body, JetBrains Mono labels) plus a defined color system for primary, text, surface, and status messaging. It also gives implementation-ready accessibility rules (WCAG 2.2 AA, keyboard-first interactions, visible focus, semantic-first markup, reduced-motion support, and adequate touch target sizing) that you can apply across components like buttons, inputs, cards, and modals.

Quick Start

Use the publication skill to generate guidelines for a new editor-style UI by specifying tokens and component rules that enforce the accessible focus, spacing, and typography hierarchy.

Frequently Asked Questions about publication

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

FAQPage Schema
How do I create an accessible editorial UI for a digital magazine?▼

To create an accessible editorial UI, apply print-inspired design system guidance using token-driven styling, WCAG 2.2 AA-aligned keyboard-first behavior, semantic-first markup, and visible focus states for content-heavy layouts.

What design tokens are needed for a print-inspired publication interface?▼

A print-inspired publication interface requires typography tokens for Oswald display, Nunito body, and JetBrains Mono labels, plus color tokens for primary, text, surface, and status messaging to maintain editorial visual hierarchy.

How do I implement WCAG 2.2 AA accessibility rules in a report-style interface?▼

Implement WCAG 2.2 AA accessibility rules by enforcing keyboard-first interactions, visible focus states, semantic-first markup, reduced-motion support, and 44px+ touch targets with token-anchored do/don't rules and testable QA criteria.

Can I use this editorial design system for both books and report interfaces?▼

Yes, this editorial design system guidance applies to book, magazine, and report-style interfaces, providing consistent component rules for buttons, inputs, cards, and modals with accessible focus and spacing.

What is the best way to maintain visual consistency in content-heavy layouts?▼

The best way to maintain visual consistency in content-heavy layouts is using token-driven styling with defined do/don't rules, ensuring components like cards and modals follow testable QA criteria and editorial typography hierarchy.

Related Skills

Explore More Design & Creative Skills→
Kevin-Liu-01Kevin-Liu-01
16

minimalist-ui

Builds ultra-minimal editorial interfaces with warm monochrome palettes and restrained accents.

Community
Advanced
superpollo02superpollo02

clean

Generate accessibility-first UI component guidance using Clean tokens and WCAG 2.2 AA rules.

Community
Intermediate
markeriksonmarkerikson
41

web-interface-guidelines

Review web interfaces against accessibility, interaction, layout, and performance standards.

Community
Intermediate
AshesOfTheUndeadAshesOfTheUndead

paper

Standardize UI design with token-based spacing, color palettes, and font scales.

Community
Intermediate