Riso design skill for AI agents

Overview

Riso is a playful, joyful, two-color risograph-inspired design system skill file that instructs AI coding assistants to generate interfaces that feel printed, tactile, bright, and handmade without becoming messy. Its aesthetic is built around a single warm off-white paper surface, a fluorescent pink interaction color, a deep federal-blue heading and shadow color, Space Grotesk typography, and offset print effects that mimic risograph misregistration.

Unlike systems that alternate section backgrounds, use many accent colors, or rely on gradients and shadows for polish, Riso stays intentionally constrained. The entire product sits on one continuous paper-like background. Blue carries text, headings, outlines, and the signature offset print-shadow. Pink is reserved for interaction, selection, active states, and joyful emphasis.

When you feed this skill file to an AI assistant, every generated component — buttons, cards, forms, navigation, modals, alerts, dashboards, onboarding screens, marketing pages, empty states, and illustration blocks — should inherit the Riso visual logic: warm paper canvas, two-color print rhythm, fluorescent pink action cues, federal-blue structure, flat surfaces, slight offset layers, playful typography, and explicit accessible states.

The result is a UI system that feels like a modern digital product printed through a joyful two-color risograph press: bold, imperfect, warm, graphic, and implementation-ready.

Design Tokens

Color Palette

Riso uses a deliberately narrow palette. The core system is built on fluorescent pink, federal blue, and a warm paper surface. Semantic state colors exist for functional feedback only.

The signature relationship is between warm paper, fluorescent pink, and federal blue. Most of the interface should feel complete using only paper and blue. Pink should appear when the user can act, select, focus, continue, or respond.

Warm Paper Surface

The brand requires a single warm off-white paper surface running through every section. Because the provided base token uses surface=#FFFFFF, implementations should add a semantic paper token rather than using pure white as the dominant page background.

Recommended semantic surface roles:

The full app should sit on paper. Do not alternate major sections between white, gray, blue, pink, and cream. Riso’s coherence depends on the feeling of one continuous sheet.

Color Usage Principles

Riso color usage follows five rules:

1. Paper is the world — every major section sits on the same warm off-white surface.
2. Blue is the ink — headings, outlines, dividers, and offset print-shadows use secondary.
3. Pink drives interaction — primary actions, active states, selected states, and focus accents use primary.
4. Two-color logic wins — avoid adding unrelated accent colors for decoration.
5. Semantic colors remain semantic — success, warning, and danger appear only for real state feedback.

Do not use pink as ordinary body text unless contrast has been verified. Fluorescent pink is visually powerful but may not meet contrast requirements for small text on light paper. Use blue or dark text for readable copy and reserve pink for large labels, filled controls, icons, selection markers, and emphasis.

Typography

Riso uses Space Grotesk for primary and display typography. This gives the system a friendly, contemporary, slightly offbeat voice that pairs well with risograph-inspired print texture.

Font Families

Space Grotesk should be used confidently. It has enough personality to feel playful, but enough clarity to support product UI.

Overpass Mono should be reserved for code, metadata, issue numbers, timestamps, technical labels, and compact system values. Do not use monospace as a decorative replacement for the main typography unless the content is technical.

Type Scale

Riso uses a simple, implementation-friendly type scale:

Large type is central to the Riso look. Headings should feel bold and print-like, but the scale should remain disciplined. Do not make every component oversized.

Weight

The available weight range is 100 through 900, but Riso should rely on a practical subset:

• 400 for body copy
• 500 for labels, buttons, and navigation
• 600 for card headings and section labels
• 700 for page headings and hero statements
• 800–900 only for rare poster-like display moments

Avoid very thin weights. Risograph-inspired interfaces need enough typographic density to hold up against bright color and offset effects.

Print-Like Typographic Treatments

Riso can use typographic treatments that feel printed, but they must remain readable.

Recommended treatments:

• Large blue headings on warm paper
• Pink underlines for interactive links
• Blue uppercase labels for small print-style metadata
• Offset blue shadow behind large pink or paper-filled display text
• Slightly playful spacing in hero headings
• Short mono labels for print-run metadata or technical details

Avoid distorted type, excessive letter spacing, low-contrast pastel text, or decorative type effects that reduce readability.

Example label style:

.riso-label {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-blue);
}

Spacing

Riso uses a 4px-based spacing scale:

Spacing in Riso should feel generous and rhythmic. Print-inspired effects, offset shadows, bold headings, and color blocks need room to breathe.

Use larger spacing around:

• Hero typography
• Offset shadow cards
• Pink primary CTAs
• Illustrated print blocks
• Empty-state graphics
• Feature grids
• Section headers

A Riso screen should feel joyful and full, but not cluttered.

The Riso Look

Riso has a specific visual identity based on risograph print constraints: limited color, visible layering, offset registration, and warm paper.

One Continuous Paper Canvas

The entire app should live on one warm off-white paper background.

Do:

• Use paper as the page background.
• Keep every major section on the same paper surface.
• Use spacing, type, cards, and print blocks to create section rhythm.
• Let pink and blue provide energy.
• Keep white surfaces limited to foreground objects when needed.

Do not:

• Alternate full-width sections between pink, blue, white, and gray.
• Use pure white as the dominant page background.
• Use cold gray SaaS shells.
• Treat paper as only a hero background.
• Add unrelated background gradients.

The interface should feel like one continuous printed sheet.

Two-Color Print Logic

The system should feel like it was designed for a two-color print run. Pink and blue should be used deliberately, often in layered or offset relationships.

Use blue for:

• Headings
• Body emphasis
• Borders
• Dividers
• Print-shadows
• Large typographic blocks
• Secondary controls
• Structural graphic marks

Use pink for:

• Primary actions
• Links
• Active navigation
• Selected states
• Focus accents
• Small highlight blocks
• Interactive icons
• Completion or progress emphasis when not semantic

Avoid introducing unrelated decorative colors. If the UI needs more variety, use scale, spacing, outlines, texture, offset, and typography instead.

Offset Print-Shadow

The signature Riso effect is an offset blue print-shadow. This should mimic ink misregistration, not a realistic drop shadow.

Recommended shadow tokens:

:root {
  --print-shadow-sm: 3px 3px 0 var(--ink-blue);
  --print-shadow-md: 6px 6px 0 var(--ink-blue);
  --print-shadow-lg: 10px 10px 0 var(--ink-blue);
}

Rules:

• Use blue offset shadows, not black shadows.
• Use no blur.
• Use shadows sparingly on important cards, buttons, stickers, and hero objects.
• Do not create soft elevation.
• Do not layer many shadows in one area.
• Leave enough spacing so shadows do not collide with nearby content.

This is a print-registration effect, not a material elevation system.

Fluorescent Pink Interaction

Pink is the only interaction driver. It should be the color users learn to associate with action.

Use pink for:

• Primary buttons
• Active links
• Focus rings
• Selected tabs
• Toggle active states
• Checkbox/radio selected states
• Hover accents
• Progress markers
• Interactive illustrations

Do not use pink randomly on decorative shapes if it competes with primary actions. Pink should feel like the product’s “touch this” signal.

Federal Blue Structure

Federal blue carries the system’s structure and print identity. It should appear more often than pink, especially in text-heavy interfaces.

Use blue for:

• Headings
• Borders
• Print shadows
• Dividers
• Icons
• Secondary buttons
• Card frames
• Section labels
• Large graphic blocks

Blue provides stability. Pink provides action.

Flat Print Surfaces

Riso should feel flat, printed, and tactile. Avoid polished digital effects.

Avoid:

• Soft drop shadows
• Glassmorphism
• Background blur
• Glossy gradients
• Metallic effects
• 3D cards
• Overly realistic paper textures
• Multi-color illustration palettes
• Neon glow effects

Subtle paper grain is acceptable when it is decorative, non-essential, and does not reduce contrast. It should be implemented as a low-opacity texture layer, not as noisy content.

Joyful Imperfection

Riso may include slight misregistration, offset blocks, ink-like texture, playful shapes, and graphic asymmetry. These elements should make the interface feel human and printed.

Use imperfection through:

• Offset blue shadows
• Slightly shifted duplicate shapes
• Halftone or grain textures
• Simple two-color illustrations
• Irregular sticker-like blocks
• Bold print-poster layouts

Do not use imperfection in ways that harm alignment, readability, keyboard focus, or layout predictability.

Component Coverage

The Riso skill file should guide full interface generation across product UI, marketing pages, education tools, creative apps, onboarding flows, dashboards, and editorial layouts.

Buttons

Buttons should feel like printed stickers or inked action blocks. Primary buttons should use fluorescent pink and must clearly signal interactivity.

Button variants:

Primary button rules:

• Use primary pink as the main interaction color.
• Use dark text on pink when required for contrast.
• Use Space Grotesk at 14px or 16px.
• Use 500 or 700 weight depending on emphasis.
• Use blue outline or blue offset print-shadow when appropriate.
• Avoid soft shadows.
• Avoid gradients.
• Preserve clear hover, focus-visible, active, disabled, loading, and error states.

Recommended button state behavior:

Good button labels:

Avoid vague labels like Submit, Click here, or Go.

Links

Links should use pink as the interaction cue and should be distinguishable beyond color.

Link rules:

• Use pink for link emphasis.
• Add underline for inline links.
• Use visible focus-visible outlines or underline changes.
• Avoid using blue-only links if blue is also used for headings.
• Do not rely on color alone.
• Keep labels specific.

Good examples:

Cards

Cards should feel like printed paper objects on the same paper canvas. They may use blue outlines, pink accents, and blue offset print-shadows.

Card rules:

• Keep the page background as warm paper.
• Use white or slightly lighter paper only when a foreground object needs separation.
• Use blue borders or dividers.
• Use blue offset print-shadow for featured cards.
• Avoid soft shadows.
• Avoid gray card backgrounds.
• Keep padding on the spacing scale.
• Use clear heading hierarchy.
• Ensure long content wraps cleanly.
• Interactive cards must have proper button or link semantics.

Card variants:

Featured cards should not all use the largest shadow. Reserve strong offset treatment for content that needs emphasis.

Forms

Forms should feel friendly, printed, and easy to complete. The risograph style should not make forms harder to scan.

Form rules:

• Labels must always be visible.
• Placeholder text must not replace labels.
• Inputs should use paper or white fill with blue border.
• Input text should use 16px.
• Focus-visible states should use pink and must be obvious.
• Error messages must be linked to fields programmatically.
• Required fields must be indicated accessibly.
• Disabled fields must remain understandable.
• Long labels and helper text must wrap cleanly.
• Validation must not rely on color alone.

Recommended input styling:

.input {
  background: var(--object-surface);
  color: var(--text);
  border: 2px solid var(--ink-blue);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: var(--font-primary);
  font-size: 16px;
}

.input:focus-visible {
  outline: 3px solid var(--ink-pink);
  outline-offset: 3px;
}

Use pink for focus and selected controls. Use danger red only for real validation errors.

Navigation

Navigation should feel like print-shop wayfinding: clear, bold, and color-constrained.

Navigation rules:

• Use Space Grotesk at 14px or 16px.
• Use blue for base nav labels.
• Use pink for active or interactive emphasis.
• Reinforce active state with underline, marker, border, or filled block.
• Keep the nav on the same paper surface.
• Avoid dark nav bars unless the product specifically needs a high-impact poster moment.
• Preserve keyboard navigation.
• Provide visible focus-visible states.

Navigation patterns may include:

• Simple top nav on paper
• Pink active underline
• Blue outlined tabs
• Sticker-like selected pills
• Sidebar with blue section labels
• Breadcrumbs as typographic print marks

Active states must use more than color alone.

Hero Sections

Hero sections are the strongest expression of the Riso system. They should feel like a joyful two-color poster printed on warm paper.

Hero rules:

• Use the continuous paper background.
• Use large blue Space Grotesk headings.
• Use pink for the primary CTA.
• Use blue offset print-shadow on major text or hero artwork.
• Include simple two-color graphic blocks when helpful.
• Avoid multi-color illustrations.
• Keep supporting copy short.
• Ensure all text contrast passes.

Hero compositions may include:

• Large left-aligned blue heading with pink CTA
• Centered poster-style statement with offset shadow
• Two-color illustration beside text
• Print-card hero object with blue shadow
• Sticker-like pink action block

Do not use a full-width pink or blue hero background that breaks the continuous paper canvas unless it is a contained poster object.

Illustration and Graphic Blocks

Illustrations should feel risograph-like: simple, joyful, and limited to pink and blue on paper.

Illustration rules:

• Use only pink, blue, and paper unless semantic meaning requires another color.
• Use offset registration intentionally.
• Use simple geometric or hand-cut shapes.
• Use grain or halftone subtly.
• Keep illustrations decorative unless they communicate content.
• Hide decorative illustrations from assistive technologies.
• Do not let illustrations cover text, focus outlines, or controls.
• Avoid full multi-color vector art.

Good illustration motifs:

• Stars
• Dots
• Waves
• Arrows
• Stamps
• Abstract blobs
• Print-registration marks
• Halftone circles
• Folded-paper cards
• Poster frames
• Simple characters rendered in two colors

Badges and Tags

Badges should feel like small printed labels or stamps.

Badge rules:

• Use blue outline or blue text for neutral badges.
• Use pink for selected, active, or interactive badges.
• Use semantic colors only for real state.
• Keep labels short.
• Use Space Grotesk at 12px or 14px.
• Ensure contrast passes.
• Do not create a rainbow tag system.

Good badge labels:

Tables and Data

Riso can support data displays, but dense data should stay clear and not become overly decorative.

Table rules:

• Keep tables on the paper surface.
• Use blue text, blue headers, or blue dividers.
• Use Overpass Mono for technical values where useful.
• Avoid excessive pink in rows.
• Use pink only for active selection or interactive controls.
• Use semantic colors for real state feedback.
• Preserve readable row height.
• Support horizontal scroll or responsive card transformation on small screens.
• Do not add print shadows to dense tables unless used sparingly around the table container.

Tables should feel like printed ledgers, not spreadsheets decorated with random color.

Modals and Overlays

Modals should feel like printed cards placed on the paper canvas.

Modal rules:

• Use white or paper foreground surface.
• Use blue border.
• Use optional blue offset print-shadow.
• Use clear title text.
• Use pink for the primary action.
• Use danger styling for destructive confirmations.
• Trap focus inside the modal.
• Close on Escape unless the flow requires explicit confirmation.
• Return focus to the triggering element after close.
• Avoid heavy overlays that make the interface feel less paper-like.

Because Riso avoids soft shadows, modal separation should come from backdrop contrast, blue border, spacing, and print-shadow.

Alerts and Feedback

Alerts should be clear, semantic, and still visually consistent with the two-color system.

Alert rules:

• Use semantic colors only for actual feedback.
• Include text labels and recovery guidance.
• Do not rely on color alone.
• Use blue structure where possible.
• Use pink only if the alert includes an action.
• Keep alert copy concise.
• Make dismiss controls keyboard accessible.

Example feedback copy:

Loading States

Loading states should feel printed and playful without delaying the user.

Loading patterns may include:

• Pink progress line
• Blue outlined skeleton blocks
• Two-color spinner
• Print-dot loading pattern
• Short loading text

Loading rules:

• Preserve layout dimensions.
• Include accessible loading text.
• Respect reduced-motion preferences.
• Avoid flashing animation.
• Avoid decorative loading loops that obscure progress.
• Do not rely on animation alone.

Good loading copy:

Empty States

Empty states are a strong opportunity for the Riso style. They should be cheerful, simple, and action-oriented.

Empty state rules:

• Use the warm paper background.
• Include a blue heading.
• Use a two-color illustration or print mark when helpful.
• Explain what is missing.
• Provide one clear pink primary action.
• Avoid vague copy.
• Avoid multi-color illustrations.

Examples:

Accessibility

Riso enforces WCAG 2.2 AA as a baseline. The bright, print-inspired palette is joyful, but it requires careful contrast handling.

Core Accessibility Requirements

• Text must meet WCAG 2.2 AA contrast against its background.
• Every interactive element must be reachable and operable by keyboard.
• Every interactive element must have a visible focus-visible state.
• Color must never be the only indicator of state.
• Form errors must be visually and programmatically associated with fields.
• Semantic HTML must be used before ARIA.
• Touch targets should be large enough for comfortable interaction.
• Motion must respect reduced-motion preferences.
• Decorative print textures must not reduce readability.
• Decorative illustrations must not disrupt reading order.

Contrast Requirements

Pink and blue behave differently on paper. Blue is suitable for headings and text. Pink is better as an interaction marker, fill, underline, or large decorative accent.

Rules:

• Use blue or dark text for normal body copy.
• Do not use pink for small body text on paper unless contrast passes.
• Text on pink buttons should be contrast-tested; dark text is often safer than white text.
• Blue text on paper is preferred for headings.
• Semantic state colors must be tested against paper and card surfaces.
• Paper texture must not reduce text contrast.
• Offset shadows must not make text harder to read.

Do not assume fluorescent color is automatically accessible. Brightness and contrast are different.

Focus States

Focus states should feel like print marks but remain unmistakable.

Preferred focus treatments:

• 3px pink outline with offset
• Pink underline plus outline for links
• Blue border plus pink outer ring for inputs
• Pink selected marker plus text label
• High-contrast focus treatment on pink controls

Avoid faint focus rings, low-contrast pink-on-paper indicators, or focus styles hidden behind offset shadows.

Keyboard Interaction

Keyboard behavior must be explicit across all components.

Rules:

• Buttons activate with Enter and Space.
• Links activate with Enter.
• Tabs support expected keyboard navigation.
• Modals trap focus and return focus after close.
• Interactive cards use button or link semantics.
• Form controls use native inputs where possible.
• Menus and popovers support keyboard navigation.
• Focus order matches visual order.

Do not create print-like decorative objects that appear clickable but cannot be reached by keyboard.

Motion Accessibility

Riso may use small, joyful motion, but it should feel like a printed object shifting slightly rather than a complex animation system.

Acceptable motion:

• Offset shadow shift on hover
• Tiny button press effect
• Gentle print-dot loading animation
• Small selected-state pop
• Simple card reveal

Motion rules:

• Respect prefers-reduced-motion.
• Avoid flashing pink elements.
• Avoid rapid repeated animations.
• Do not animate essential text away.
• Do not use motion as the only feedback.
• Keep transitions short and functional.

Recommended durations:

Content and Tone

Riso uses concise, confident, helpful copy with a joyful, friendly edge. The writing should match the visual style: bright, direct, warm, and easy to understand.

Voice Principles

Riso copy should be:

• Clear
• Friendly
• Confident
• Short
• Helpful
• Action-oriented
• Lightly playful

Avoid copy that is overly silly, vague, or too marketing-heavy. The visual system already carries joy; the writing should preserve clarity.

Good Examples

Avoid

Riso copy can be warm and playful, but every label must still explain the action or state clearly.

Print-Inspired Copy Standards

When using print metaphors, keep them useful.

Good uses:

• Create print
• Prepare preview
• Export artwork
• Print shelf
• Draft saved
• Artwork uploaded

Avoid metaphors that obscure meaning:

• Ink it up
• Blast the press
• Make magic
• Do the thing

The tone should be joyful, not confusing.

How to Use with AI Tools

Cursor and Claude Code

Add the Riso skill file to your project so the assistant can use it as design-system context while generating UI code.

npx typeui.sh riso

The skill file should be saved as SKILL.md or another project-level instruction file. Once present, ask the assistant to generate pages, components, flows, or refactors using the Riso design system.

Example prompts:

Create a joyful landing page using the Riso design system.

Build accessible button, card, input, and modal components with pink interaction states and blue offset print-shadows.

Refactor this dashboard into a two-color risograph interface on a continuous warm paper canvas.

Create an empty state with a two-color print illustration and one clear primary action.

Claude

Use the design skill directly in Claude by adding the markdown file as project knowledge or pasting it into the beginning of a conversation.

Then ask for implementation-specific output:

Generate React components for Riso buttons, cards, inputs, tabs, and alerts.

Create component rules for print cards, hero sections, forms, and empty states using this skill.

Audit this UI against the Riso design rules and list required changes.

ChatGPT, Windsurf, Copilot, v0, and Other AI Tools

The file is standard markdown, so it can be used with any AI assistant that accepts context, prompt instructions, or project-level rules.

Useful workflows include:

• Paste the skill into the chat before requesting UI code.
• Add it to a repository-level instruction file.
• Use it as context for playful product pages and creative tools.
• Use it to define component variants and interaction states.
• Use it as a QA checklist during code review.
• Ask the assistant to migrate an existing neutral UI into the Riso two-color print system.

The best results come from prompting for concrete implementation details: continuous paper canvas, pink interaction rules, blue typography and print-shadows, two-color illustration constraints, accessibility requirements, responsive behavior, and anti-patterns.

Design Philosophy

Riso is governed by a few core principles.

1. The Paper Never Changes

The warm off-white paper surface is the environment. Every section belongs to the same sheet. Layout, typography, and print objects create rhythm instead of alternating background colors.

2. Two Colors Create the World

Pink and blue are not just accents. They are the print system. Blue structures the page. Pink invites interaction. Together, they create energy without needing a large palette.

3. Offset Is Personality

The blue offset print-shadow gives the interface its risograph character. It should feel like ink misregistration, not like digital elevation.

4. Playful Still Means Precise

Riso can be joyful, but components must remain consistent. Tokens, spacing, states, focus behavior, and typography should be predictable.

5. Texture Supports, Never Obscures

Paper grain, halftone, and print texture may add warmth, but they must never reduce contrast or interfere with reading.

6. Accessibility Protects the Joy

A joyful interface must be usable. Contrast, keyboard support, visible focus states, semantic markup, and clear copy are non-negotiable.

Anti-Patterns

Avoid these implementations when generating Riso-style interfaces:

• Alternating major sections between multiple background colors
• Pure white full-page backgrounds instead of warm paper
• Using pink as normal small body text without contrast testing
• Using pink randomly on every decorative object
• Replacing the two-color system with a rainbow palette
• Soft drop shadows instead of blue offset print-shadows
• Blurred shadows, glassmorphism, glossy gradients, or 3D effects
• Heavy paper texture that reduces readability
• Multi-color illustrations that break the two-color print logic
• Low-contrast text on pink or paper
• Placeholder-only form labels
• Focus states hidden behind print-shadows
• Decorative print marks that appear interactive but are not
• Vague labels like Submit, Click here, or Go
• Color-only selected, success, warning, or error states
• One-off spacing values outside the defined scale
• Components missing hover, focus-visible, active, disabled, loading, or error states

Riso should feel joyful and handmade, but never random, inaccessible, or visually overloaded.

Migration Notes

When adapting an existing interface to Riso, migrate in this order:

1. Replace the page background with a continuous warm paper token.
2. Remove alternating full-width section backgrounds.
3. Replace unrelated accent colors with the two-color pink and blue system.
4. Assign blue to headings, borders, dividers, and print-shadows.
5. Assign pink to primary interactions, active states, focus accents, and selected states.
6. Replace soft shadows with blur-free blue offset print-shadows.
7. Remove gradients, glass effects, and glossy treatments.
8. Convert illustrations to two-color pink and blue artwork where possible.
9. Apply Space Grotesk consistently across primary and display typography.
10. Use Overpass Mono only for code, metadata, and technical values.
11. Normalize type sizes to the 12 / 14 / 16 / 20 / 24 / 32px scale.
12. Normalize spacing to the 4 / 8 / 12 / 16 / 24 / 32px scale.
13. Add explicit hover, focus-visible, active, disabled, loading, and error states.
14. Replace vague labels with clear, friendly action copy.
15. Test contrast across paper, white cards, pink controls, blue headings, and semantic states.
16. Verify keyboard navigation and screen reader behavior.
17. Run the QA checklist before shipping.

Do not migrate by simply making buttons pink and headings blue. Riso depends on the full system: continuous paper, two-color discipline, offset print effects, playful typography, flat surfaces, visible states, and accessibility-first implementation.

QA Checklist

Use this checklist when reviewing generated UI against the Riso design skill.

Visual System

• The entire app sits on one continuous warm off-white paper surface.
• Major sections do not alternate between unrelated background colors.
• Pink #F237A1 is reserved for interaction, selection, focus, and emphasis.
• Blue #2C40A7 carries headings, borders, dividers, and offset print-shadows.
• The interface follows a two-color risograph logic.
• Blue offset print-shadows are blur-free and used intentionally.
• Soft shadows, glassmorphism, glossy gradients, and 3D effects are avoided.
• Paper grain or texture does not reduce readability.
• Illustrations are constrained to the Riso palette where possible.
• The interface feels joyful and printed, not random or overdecorated.

Typography

• Space Grotesk is used for primary and display typography.
• Overpass Mono is reserved for code, metadata, and technical values.
• Type sizes come from the 12 / 14 / 16 / 20 / 24 / 32px scale.
• Blue headings create strong hierarchy.
• Body text remains readable.
• Pink is not used for small text unless contrast passes.
• Long headings and labels wrap cleanly.
• Print-style labels remain short and legible.

Components

• Buttons include default, hover, focus-visible, active, disabled, loading, and error states.
• Primary actions use pink intentionally.
• Links are distinguishable with underline or structural treatment, not color alone.
• Cards use paper or white surfaces with blue structure.
• Featured cards use blue offset print-shadows sparingly.
• Forms use visible labels and accessible error messaging.
• Navigation has clear active and focus states.
• Modals trap focus and return focus after closing.
• Alerts use semantic colors plus text or structural cues.
• Empty states include clear copy and one primary action.
• Tables preserve readability and responsive behavior.

Accessibility

• Text contrast meets WCAG 2.2 AA.
• Pink on paper, pink on white, and text on pink controls have been tested.
• Blue text and borders remain readable on paper.
• Keyboard navigation works across all interactive elements.
• Focus-visible states are obvious.
• Color is never the only indicator of state.
• Form errors are linked to fields programmatically.
• Semantic HTML is used before ARIA.
• Touch targets are comfortable.
• Motion respects reduced-motion preferences.
• Decorative illustrations and textures do not disrupt assistive technologies.

Content

• CTA labels are specific and action-oriented.
• Error messages explain what happened and how to recover.
• Empty states explain what is missing and what to do next.
• Destructive actions clearly state consequences.
• Copy feels friendly and joyful without becoming vague.
• Print metaphors clarify rather than obscure meaning.
• Vague labels like Submit, Click here, and Go are avoided.

Riso is a disciplined design system for interfaces that should feel playful, joyful, printed, and tactile. Its strength comes from one continuous paper canvas, a strict two-color palette, fluorescent pink interaction cues, federal-blue structure, offset print-shadows, and accessibility-first implementation rules.