riso

Generate risograph-inspired design system guidance for UI components with WCAG 2.2 AA keyboard-first rules.

Updated May 13, 2026
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill riso-superpollo02
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: riso
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/riso
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill riso-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps teams implement a cohesive risograph-inspired design system so AI-generated UI stays consistent, on-brand, and accessible instead of drifting into ad-hoc styling.

Core Features & Use Cases

  • Tokenized risograph style: Defines a warm off-white surface, vivid fluorescent pink for primary interactions, and deep federal-blue structure with explicit typography, spacing, and radii foundations.
  • Implementation-ready interaction guidance: Provides accessibility requirements (WCAG 2.2 AA, keyboard-first, visible focus) and mandates explicit interaction states and focus-visible behavior.
  • Do/Don’t quality gates: Enforces semantic tokens, preserves visual hierarchy, and includes a QA checklist to make review outcomes testable and predictable.

Quick Start

Use the riso skill when generating UI components to enforce the risograph brand tokens, typography and spacing scales, and WCAG 2.2 AA keyboard-first interaction rules across buttons, inputs, cards, and other component families.

Frequently Asked Questions about riso

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

FAQPage Schema
How do I build a risograph-inspired UI design system that stays accessible?

To build an accessible risograph-inspired UI design system, apply explicit brand tokens, WCAG 2.2 AA keyboard-first focus-visible requirements, and do/don't constraints for high-contrast components like buttons and forms.

Can I use design tokens to keep AI-generated UI components consistent?

Yes, you can use semantic design tokens to define typography, spacing, and radii foundations, ensuring AI-generated UI components remain visually consistent and on-brand instead of drifting into ad-hoc styling.

What are the WCAG 2.2 AA requirements for risograph UI interaction states?

WCAG 2.2 AA requirements for risograph UI mandate keyboard-first navigation, explicit interaction states, and visible focus behavior to ensure high-contrast interfaces are fully accessible.

How do I test UI component accessibility against a risograph design system?

Test UI component accessibility by applying a QA checklist with testable acceptance criteria tied to semantic tokens, visual hierarchy preservation, and concrete component examples for predictable review outcomes.

Does generating risograph UI components require explicit brand foundations?

Yes, generating risograph UI components requires explicit brand foundations, including a warm off-white surface, vivid fluorescent pink for primary interactions, and deep federal-blue structure to enforce visual consistency.

What is the best way to enforce visual hierarchy in a risograph design system?

The best way to enforce visual hierarchy in a risograph design system is by applying do/don't quality gates that mandate semantic tokens and testable QA acceptance criteria across all generated component families.