You want one visual voice for products, web, email, documents and advertising. You also want to ship on time. Custom art for each screen does not scale. Stock photos clash. Ouch solves that gap with style families. Each family is a small visual language that you can adopt in a day and expand on for months. The payout is simple. Screens no longer look connected, but start to read as one product.
What comes in the box
Ouch groups works of art into coherent styles. Within a style, characters, objects, and backgrounds share proportions, line thickness, spacing rhythm, and color logic. Combine pieces without seams. You get hero scenes for landing pages, middle scenes for explainers, little spots for emptiness, mistakes and success, plus neutral backgrounds that keep layouts tidy. Files arrive as SVG if you need control, and as PNG if you need anything. Both hold up on compact screens.
How teams actually use it
Product design. Empty states get a small spot and one clear action. Onboarding turns into three beats: start, progress, success. Feature pages borrow a middle scene that hints at the job at hand. You keep the text close to the art so that the meaning travels as a pair.
Marketing. A single hero anchors the campaign. Crops are ready for square, vertical and horizontal frames. A recurring character or prop ensures recognition through all channels. Email uses PNG with tight compression. Social gets the same idea in different proportions.
Documents and help. Complex steps get a compact scene next to the explanation. No decorative fluff. Visuals deserve their money.
Fit within a design system
Treat an Ouch style as a subsystem alongside type, tokens, icons, and grid. Give it a stable home and a one-page ruleset.
The README explains placement, permitted crops, export sizes and reserved uses. The tokens map associates fills and strokes with brand colors, so theme changes don’t require a new export. Save assets next to your own screens. Name them by owner, not by atmosphere.
Choose with evidence, not taste
Build four real screens with your text and layout. Exchange only the art.
hero on the homepage
price call
onboarding step one
one empty state in the product
Show two candidate styles to five people not working on the project. Ask for three adjectives each. Keep the style that suits your tuning guide. Archive the other set. Decision in one afternoon. No mood boards. No debates.
Starter kit that unblocks delivery
Freeze a small kit for the next release so that each ticket uses the same blocks.
one hero for site or flagship feature
two middle scenes for product and content
three spots for empty, success and error
one background that fills the layout without stealing the focus
Halfway through the project, teammates will ask where to browse and confirm coverage. Park a clean pointer exactly where they will look during the assessment: illustration.
Accessibility that survives code review
Images only help if everyone can use the page. Build checks into pull requests.
Alt decision. If the image has meaning, write a short alt explaining the idea. If it’s decorative, use an empty alt so the assist tech skips it. Inline SVG should include a concise title and, if helpful, a description.
Contrast and state. If artwork contains text or uses color for meaning, follow WCAG 2.2 ratios. Connect fills and strokes to the same tokens used by alerts and buttons, so success and failure are read the same way in art and UI.
Representation. Prefer inclusive characters and daily activities. Avoid clichés. Test with a small group that reflects your audience.
Performance that holds up under traffic
Photos are heavy. Treat them like code with a budget.
prefer SVG if texture is not essential
export PNG only in the format you are rendering
always set the width and height to avoid layout shifting
lazy load below the fold
measures the largest contentful paint on real pages
Responsive grid without frame:
Inline SVG tied to a theme variable:
Role-based playbooks
Web and UX
Use images to make the intention clear. Empty states contain one action and a short copy line. Onboarding reads clearly as start, progress, success with the same cast and setting. Convert SVGs to components in your design tool and link fills to color styles for quick theme changes. For tight layouts, choose a small spot above a busy scene.
Marketing and SMM
Build a social grid with square, vertical and horizontal frames. Crop scenes to those proportions and save the variants next to the assignment. Keep one recurring character or prop in the series to call back. Email uses PNG with thoughtful compression as clients still vary.
Developers
Version artwork in the repository. Store assets near the component that renders them. With Inline SVG you can respond to theme changes with CSS variables instead of exporting new files. Do not place heavy images on the critical path. Animate vectors when motion is required.
Education
Ouch works in the classroom and in LMS. Students learn hierarchy and rhythm by remixing scenes rather than drawing from scratch. Provide a style pack, a fixed palette and three target screens. Keep license slips and attribution notes in the course repository to keep portfolios compliant.
Startups and small businesses
Choose one style and freeze a quart. Apply it to the site, deck, store listing, and top product screens. Cohesion today. Adjusted scenes later for signature features.
Control that prevents drift
Add a checklist to retrieve requests.
alt text present when necessary
decorative images correctly marked
dimensions set to prevent layout shifting
file size below page budget
LCP verified on the target page
Small rules beat big refactorings.
Statistics that prove value
payload share of hero-art before and after the switch to SVG, where possible
LCP trend on main landing page after deployment
number of review flags for inconsistent images across three sprints
hours from assignment to first approved trial for a campaign
Boundaries that you plan around
niche scenarios sometimes require a composition of parts
motion still lives in your animation stack
large catalogs slow down teams without a simple decision rule
Licensing and registration
Icons8 publishes clear licensing conditions. Free plans usually require credit. Paid subscriptions remove attribution and expand usage. Read the current policy on the publisher’s site. Keep receipts in your brand folder. Track where each item is shipped. If the legal department asks, you have the trail.
In short
Use one style. Build a compact kit. Connect it to tokens. Enforce accessibility and performance during assessment. Ouch gives you visual language that ships on time and looks like it was designed on purpose.
References
W3C WAI documentation for WCAG 2.2 on text alternatives and contrast
MDN documentation for SVG accessibility and inclusion
Web.dev tutorials on responsive images and image performance
NN Group research into visual communication and understanding in UX
Illustration guidance in Shopify Polaris and Google Material Design
