The short version
You want consistent artwork across product, site, email, docs, and ads. Budgets are real. Sprints keep coming. Commissioned art every week is not realistic. Random pictures look cheap and break trust. Ouch fixes this by giving you style based artwork that behaves like a compact visual system. Pick a style, assemble a small kit, wire it to your tokens, and your screens start to read as one product.
What Ouch actually ships
Ouch is a catalog of vector scenes and large PNG exports grouped by coherent styles. Inside a style, characters, objects, and backgrounds share proportions, line weight, and color logic. That means you can lift a person from one scene and place them next to a chart from another without visual friction. You get full scenes for hero areas, medium scenes for explainers, tiny spots for empty and error states, and neutral backdrops for padding layouts.
Vectors arrive as SVG for control. Raster exports arrive as large PNGs for channels that limit SVG. SVG scales cleanly and can be recolored in design tools or in code. PNG drops in fast for email and social. Files are clean and predictable, which matters when the team is moving quickly.
A system that sits next to type and color
Treat a chosen Ouch style like a subsystem in your design system. Give it a home in the repo and write rules so people stop bikeshedding crops and sizes.
Suggested folder structure
/brand/visuals/
/ouch-style-alpha/
README.md
tokens.json
hero/
scenes/
spots/
backgrounds/
The README lists allowed crops, export sizes, and examples of good usage. The tokens file maps fills and strokes to brand variables. Designers and developers then speak the same language when recoloring or theming.
Select styles with evidence, not taste
Mood boards lie. Real screens tell the truth. Build four fixed layouts with your actual copy. Keep layout and type the same. Swap only the art.
- Homepage hero
- Feature explainer panel
- First onboarding step
- One empty state inside the app
Show two candidate styles to five people who are not on the team. Ask each for three adjectives. Keep the style that matches your brand voice. Archive the other. Thirty minutes, decision done.
The starter kit that unblocks releases
Begin with a small set that covers common moments and freeze it for a release cycle.
- One hero for site or a major feature
- Two medium scenes for explainers and blog
- Three spots for empty, success, and error
- One subtle background that pads layouts without stealing attention
Store the kit next to the screens that use it. Name files by owning page or component. Add a one page guide with do and do not rules. This prevents design reviews from turning into debates about crops and sizes.
Accessibility and representation
Art helps only when everyone can consume the page and see themselves in it.
Alt decisions. If an image conveys information, write clear alt text that states the same idea. If it is decorative, use empty alt so assistive tech skips it. Inline SVG should have a short <title> and, when helpful, a <desc>.
<svg role=”img” aria-labelledby=”t d” width=”512″ height=”256″>
<title id=”t”>Team setting analytics goals</title>
<desc id=”d”>Two colleagues arrange charts and notes while a third reviews results</desc>
<!– vector shapes here –>
</svg>
Contrast and state. When artwork contains essential text or uses color to signal meaning, follow WCAG 2.2 ratios. Tie fills and strokes to the same tokens your components use so success and error read the same way in art and UI.
Representation. Choose inclusive characters and neutral activities. Avoid clichés. When unsure, test with a small group that reflects your audience.
Performance that holds up in production
Images often dominate the payload. Give them a budget and enforce it in reviews.
- Prefer SVG when texture is not required
- Export PNG only at the size you render
- Set width and height to avoid layout shifts
- Lazy load below the fold
- Measure Largest Contentful Paint on the pages that will ship
Minimal Next.js usage for a marketing PNG
import Image from “next/image”;
export default function Hero() {
return (
<Image
src=”/assets/ouch-hero.png”
alt=”Colleagues reviewing analytics”
width={1280}
height={720}
priority
/>
);
}
Inline SVG with theme variables
<style>
:root { –accent: #2563eb; }
@media (prefers-color-scheme: dark) { :root { –accent: #7c3aed; } }
svg [data-accent] { fill: var(–accent); }
</style>
<svg role=”img” aria-labelledby=”a b”>
<title id=”a”>Growth chart</title>
<desc id=”b”>Line rising across a grid with simple confetti</desc>
<path data-accent d=”M…” />
</svg>
Role based playbooks
Web and UX
Use imagery to clarify intent. Empty states carry one action and a short line. Onboarding reads best as start, progress, success with the same cast. Convert SVGs into components in your design tool and map fills to color styles for quick theme flips. In tight layouts, use a small spot instead of a busy scene.
Marketing and SMM
Plan for speed. Prepare square, vertical, and horizontal crops for each scene. Keep a recurring character or prop across a campaign to build recall. For email, stick with PNG and compress well. Many clients still limit SVG features.
Developers
Version artwork in the repo. Keep assets near the component that renders them. Inline SVG lets you respond to theme toggles without new exports. Do not put heavy images on the critical path. If motion is needed, animate vectors instead of shipping a large video.
Educators and institutions
Ouch works in coursework. Students learn hierarchy and rhythm by remixing scenes rather than drawing from scratch. Provide a style pack, a fixed palette, and three screens to design. Keep license receipts and attribution notes in the repo so portfolios stay clean.
Startups and small businesses
Pick one style and freeze it for a quarter. Apply it to site, deck, product, and store listing. That single choice gives cohesion while you move fast. Commission custom scenes later for signature features.
Midpoint reference for reviewers
While you shortlist styles and build the first kit, give teammates one link to the catalog so reviews are simple and fast. Keep this reference in the middle of the document where people will actually see it: clipart.
Governance that prevents drift
Add a compact checklist to your pull requests.
- Alt text present when needed
- Decorative images marked correctly
- Dimensions set to prevent layout shifts
- File size under the page budget
- LCP verified on target pages
This turns accessibility and performance into habits rather than heroic efforts.
Common mistakes and quick fixes
- Too many styles at once. Choose one, finish the release, then expand.
- Over illustrated layouts. Replace a busy scene with a small spot and give copy room.
- Color only signals. Pair color with an icon or short label.
- Email surprises. Test PNG sizes in your ESP before the full send.
Metrics that prove value
- Page weight assigned to hero art before and after switching to SVG where possible
- LCP trend on the top landing page after rollout
- Consistency flags in design review over three sprints
- Production time between brief and first approved mock for a campaign
Licensing and record keeping
Icons8 publishes clear license terms. Free plans usually require credit. Paid plans remove attribution and expand use. Read the current policy on the publisher’s site, save receipts in your brand folder, and track where each asset ships. When a legal review lands, you will have the trail.
Final take
Ouch is built for teams that want a real visual system without slowing delivery. Pick a style, assemble a kit, connect it to tokens, and hold the line on accessibility and performance. Your product will look like it was designed on purpose.
Sources worth bookmarking
- W3C WAI guidance for WCAG 2.2 on text alternatives and contrast
- MDN documentation for SVG accessibility and embedding
- dev on responsive images and image performance
- NN Group research on imagery and comprehension in UX
- Design system guidance from Shopify Polaris and Google Material Design