Publication design skill for AI agents

Overview

Editorial is a publication-grade design system skill for AI-powered development. It translates the visual language of printed books, magazines, and long-form reports into digital interfaces — typographic contrast between a warm rounded sans-serif and a condensed display face, a purple accent that cuts through a near-black foundation, and layouts that feel like they were art-directed rather than assembled. This is UI designed for reading, for storytelling, and for content that deserves the same care as a printed page.

When you add this skill file to your AI coding tool, every component it generates reflects editorial craft — headlines that command the page, body text that invites sustained reading, and a color system that treats ink-dark backgrounds and purple highlights like a magazine spread.

Design tokens

Color palette

Editorial uses an unconventional pairing — vivid purple as the primary accent and near-black as both the secondary token and text color. The effect is like purple ink on dark paper stock:

The purple + near-black pairing is the most editorial-specific color choice of any typeui.sh skill. Purple (#A855F7) serves the role that a spot color plays in print design — a single vibrant accent used sparingly to draw the eye to headlines, pull quotes, bylines, and interactive elements. The secondary near-black (#0A1829) carries a cool blue undertone that's subtly warmer than pure black, creating the same ink-on-paper feeling that high-quality publications achieve. Using the same token for secondary and text unifies the structural and content layers of the interface.

Typography

Editorial's defining feature is the contrast between two typefaces that represent opposite ends of the sans-serif spectrum:

• Nunito — Primary/body font. A rounded sans-serif with soft terminals and generous proportions that make it exceptionally comfortable for sustained reading. Nunito's warmth is what makes editorial layouts feel inviting rather than austere — readers settle into body text rather than scanning past it.

• Oswald — Display font. A condensed, upright grotesque with strong vertical emphasis and tight letter-spacing. Oswald headlines feel like they were set by a magazine art director: they dominate the top of the page, create visual anchors, and establish hierarchy with pure scale. The condensed proportions allow oversized headings that command attention without consuming excessive horizontal space.

• JetBrains Mono — Monospaced font for code blocks, data tables, and technical content.

The type scale follows a desktop-first expressive approach optimized for long-form reading and dramatic headline presentations. Font weights span 100 (thin) to 900 (black), and the interplay between the two typefaces is where the editorial magic happens: Oswald at 600-800 weight creates headlines that punch forward like a magazine cover, while Nunito at 400 creates body text that flows like a well-typeset book page. The contrast between condensed and rounded, heavy and regular, compressed and open — that's the visual rhythm of editorial design.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. Editorial layouts need two kinds of spacing: tight columnar rhythm within content blocks (paragraph spacing, list gaps, caption margins) and generous separation between major sections (chapter breaks, featured content, article boundaries). The 4px grid gives the AI agent fine-grained control for both — compact 4-8px gaps within reading flow and expansive 24-32px breaks between editorial sections.

Component coverage

The skill file covers 40+ component families grouped by function:

• Inputs and forms — buttons, text inputs, selects, comboboxes, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, chips, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, command palette, tabs
• Overlays — modals, drawers, sheets, tooltips, popovers, menus
• Feedback — alerts, toasts, notifications center, progress indicators, skeletons, empty states
• Page-level — authentication screens, settings pages, documentation layouts, onboarding flows, pricing blocks, search

For each component, the skill defines required interaction states (default, hover, focus-visible, active, disabled, loading, error), keyboard and touch behavior, spacing and typography token usage, and responsive edge cases. The skill additionally requires explicit designs for empty, loading, and error states, and mandates documented accessibility rationale for every component decision.

Design philosophy

Editorial is built on the principles that have guided publication design for centuries, adapted for screens:

• Typographic contrast as the primary design tool — the Nunito-to-Oswald switch is the equivalent of body text vs. headline setting in print. The AI agent uses typeface switching, not just size changes, to establish hierarchy. An Oswald headline at 32px over Nunito body text at 16px creates the same visual impact as a magazine spread
• Purple as spot color — in print, a spot color is a single ink used sparingly for maximum impact. The AI agent uses purple the same way: pull quotes, bylines, category labels, and interactive elements. Never as a background fill, never as body text. Scarcity creates emphasis
• Near-black as ink — the #0A1829 text token has a cool blue undertone that separates it from generic black. It's the digital equivalent of printing with a rich black mix rather than pure K — subtle, but it changes the feel of every line of text on the page
• Single visual metaphor — the skill prohibits mixing editorial design with other visual styles. No glassmorphism cards in a magazine layout. No neon accents in a book-style interface. Consistency is what makes the publication feel edited rather than assembled
• Content-first hierarchy — every layout decision serves readability. Columns are sized for comfortable line lengths. Headings create entry points for scanning. White space separates ideas. The interface is designed to be read, not just seen

This makes Editorial a strong fit for:

• Online magazines and digital publications
• Long-form content platforms and blogs
• News and journalism websites
• Documentation and knowledge bases
• Book and publishing industry tools
• Academic and research portals
• Newsletter and email design platforms
• Any product where reading experience is the core value proposition

Accessibility

Editorial has the most comprehensive accessibility spec of any typeui.sh design skill, enforcing WCAG 2.2 AA plus the full set of additional requirements:

• Keyboard-first interactions for all interactive elements
• Visible focus states on every focusable component — calibrated to be clearly visible against both white reading surfaces and dark near-black structural elements
• Semantic HTML before ARIA — native elements first, ARIA only when semantics aren't natively available. Publication layouts naturally map to semantic HTML (article, section, aside, figure, blockquote)
• Screen-reader tested labels — every interactive element gets a label that communicates meaning when read aloud, critical for content-heavy interfaces where context matters
• Reduced-motion support — all transitions respect prefers-reduced-motion, ensuring that page transitions and scroll effects don't create barriers
• 44px+ touch targets — all interactive elements meet minimum tap size, especially important in reading interfaces where links are often inline within body text
• High-contrast support — the near-black text on white surfaces naturally provides strong contrast, and OS-level high-contrast modes are respected
• Documented accessibility rationale — the skill requires that every component decision includes an explanation of why its accessibility approach was chosen, not just what the requirement is

Every accessibility rule is written to be testable in code review.

How to use with Claude AI

In Cursor IDE

1. Pull the skill file into your project:

npx typeui.sh pull editorial

2. The file is saved to .cursor/skills/editorial/SKILL.md by default. Cursor automatically picks up skill files from this directory and makes them available to Claude.

3. Start prompting — Claude will generate publication-style interfaces with Nunito body text, Oswald display headlines, purple spot-color accents, and editorial-grade typographic hierarchy.

In Claude Desktop or API

1. Copy the skill file content from the typeui.sh page (use the Copy button in the sidebar).

2. Paste it into your system prompt or as a reference document at the start of your conversation.

3. Ask Claude to build components or pages. It will follow the Editorial guidelines — using the Nunito + Oswald type contrast, purple-as-spot-color discipline, cool near-black ink tone, and content-first layout hierarchy throughout.

In other AI tools

The skill file is standard markdown and works with any AI tool that accepts system-level instructions:

• Windsurf — place the file in your project's .windsurf/rules/ directory
• GitHub Copilot — add it to .github/copilot-instructions.md or reference it in your prompt
• OpenAI GPTs — upload it as a knowledge file in the GPT configuration
• Any LLM API — include the file content in the system message

What sets Editorial apart

Editorial is the only typeui.sh design skill built specifically for reading experiences. While other skills optimize for actions, conversions, or visual impact, Editorial optimizes for sustained attention:

• Rounded + condensed type contrast — Nunito's soft warmth for reading and Oswald's compressed authority for headlines create the most dramatically different body/display pairing of any skill. It's magazine art direction encoded as a type system
• Purple spot-color discipline — the AI uses #A855F7 the way a print designer uses a single Pantone ink: sparingly, for pull quotes, bylines, and interactive moments. Never as fills, never as backgrounds
• Cool near-black ink tone — #0A1829 with its blue undertone replaces generic black, giving every line of text the subtle richness of a high-quality print job
• Most comprehensive accessibility spec — eight explicit requirements including documented accessibility rationale, the only skill that mandates explaining why each accessibility decision was made
• Single-metaphor discipline — the skill blocks mixing visual styles, keeping every component feeling like it belongs in the same publication
• Explicit state design — requires dedicated designs for empty, loading, and error states, ensuring editorial quality extends to every UI moment
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the publication aesthetic consistent whether the AI generates a single blockquote or an entire digital magazine