What Ouch is in simple terms
Ouch is a curated library of vectors and high resolution rasters arranged into consistent visual styles. Each style is a self contained visual language. Proportions match. Line thickness is stable. Color logic is predictable. Scenes, characters, props, and abstract backdrops are built to mix without seams. You work faster because pieces cooperate instead of fighting your layout.
The catalog covers the things teams ship every week. Hero artwork for landing pages and features. Explainer scenes for product pages and blog posts. Small spots for empty, error, success, and loading states. Neutral backgrounds that add rhythm without stealing attention. Files arrive as SVG for full control or PNG for places where raster is safer. Both render cleanly on dense screens.
What problem it actually solves
Teams need one visual voice across product, site, email, ads, documentation, and slide decks. Hiring an illustrator for every sprint does not scale. Stock images drift off brand and create a patchwork. Ouch offers a middle path. You adopt a style family, assemble a minimal kit, and your surfaces start to read like parts of one system.
Where Ouch sits inside a design system
Treat a selected style as a subsystem next to typography, tokens, grid, and icons. Give it a home in the repository and write a short usage note so no one argues about crops and sizes during review.
/brand/visuals/
/ouch-style-01/
README.md
tokens.json
hero/
scenes/
spots/
backgrounds/
The README defines where each piece belongs, which crops are allowed, and which sizes ship. The tokens file maps fills and strokes to brand variables so recolors are consistent. Store assets next to the screens that use them. Name files by owning page or component. People will find them without a scavenger hunt.
A selection method that does not waste a week
Skip mood boards. Test on real screens. Build four static layouts with your actual copy and typography. Swap only the images.
- homepage hero
- pricing callout
- onboarding first step
- one empty state in product
Invite five reviewers who do not work on the project. Ask each for three adjectives per candidate style. Keep the style that matches your voice guide. Archive the other set. Decision made in an afternoon.
The minimal kit that carries a release
Start with a kit that touches every part of the journey and freeze it for a sprint or two.
- one hero for site or flagship feature
- two medium scenes for product and content
- three spots for empty, success, and error
- one background that pads layout without drawing attention
Drop this kit into a shared folder with a two page guide. Show good and bad crops. Document color overrides. Write where to use a spot instead of a large scene. This tiny guide prevents a long thread later.
Accessibility that ships in pull requests
Images help only when everyone can consume the page. Build the checks into your review habits.
Alt decisions
- informative image: write a short alt that communicates the same idea
- decorative image: use empty alt so assistive tech skips it
- inline SVG: include a concise title and a longer description when it adds clarity
<svg role=”img” aria-labelledby=”t d” width=”512″ height=”256″>
<title id=”t”>Team defining analytics goals</title>
<desc id=”d”>Colleagues move charts and sticky notes while another checks results</desc>
</svg>
Contrast and state
When artwork contains essential text or uses color to signal success, warning, or error, follow WCAG 2.2 ratios. Bind fills and strokes to the same tokens your components use so meaning stays aligned across art and UI. W3C WAI resources explain how to decide if an image is informative or decorative and how contrast applies.
Representation
Pick inclusive characters and neutral activities. Avoid clichés. When unsure, test with a small group that reflects your audience.
Performance that survives production traffic
Images often dominate payload. Give them a number and treat it as a budget.
- prefer SVG when texture is not essential
- export PNG at the size you actually render
- always set width and height to prevent layout shift
- lazy load anything below the fold
- measure Largest Contentful Paint on live pages
Responsive raster without a framework:
<picture>
<source type=”image/avif” srcset=”/hero-ouch.avif 1x, /hero-ouch@2x.avif 2x”>
<source type=”image/webp” srcset=”/hero-ouch.webp 1x, /hero-ouch@2x.webp 2x”>
<img src=”/hero-ouch.png” srcset=”/hero-ouch@2x.png 2x” alt=”Colleagues reviewing analytics” width=”1280″ height=”720″ loading=”eager”>
</picture>
Inline SVG that responds to a theme variable:
<style>
:root { –accent: #2563eb }
@media (prefers-color-scheme: dark) { :root { –accent: #7c3aed } }
.hero [data-accent] { fill: var(–accent) }
</style>
<svg class=”hero” role=”img” aria-labelledby=”a b” width=”480″ height=”240″>
<title id=”a”>Growth chart trending upward</title>
<desc id=”b”>Line rising across a simple grid</desc>
<path data-accent=”” d=”M10 200 L120 140 L220 160 L360 80″ fill=”none” stroke=”var(–accent)” stroke-width=”6″/>
</svg>
Role based guidance
Web designers and UX specialists
Use imagery to clarify intent. Empty states carry one action and a short line of copy. Onboarding flows read well as start, progress, success with the same cast and background. Convert SVGs into components in your design tool and map fills to color styles so a theme flip does not require a new export.
Marketers and SMM managers
Plan for speed. Prepare square, vertical, and horizontal crops for each scene. Keep a recurring character or prop across the campaign to improve recall. For email, prefer PNG and compress carefully since client support for SVG still varies.
Developers
Version artwork like code. Keep assets near the component that renders them. Inline SVG lets you connect color to tokens and react to theme changes without new files. Do not place heavy images on the critical path. If you need motion, animate vectors instead of shipping a large video.
Educational institutions and educators
Ouch works well for coursework and LMS material. Students can learn hierarchy and pacing by remixing scenes rather than starting from a blank page. Provide a style pack, a fixed palette, and three target screens. Store license receipts and attribution notes in the repo so portfolios stay compliant.
Startups and small businesses
Pick one style and freeze it for a quarter. Apply it to the site, deck, store listing, and the top product screens. You get cohesion now. As budget grows, commission custom scenes that extend the same style.
Evaluation help
While teammates are shortlisting and building the first kit, keep a clear mid document pointer to the full catalog for fast review: illustration.
Governance that prevents drift
Add a checklist to pull requests and enforce it.
- alt text present when needed
- decorative images marked correctly
- dimensions set to avoid layout shift
- file size under the page budget
- LCP verified on the target page
Small rules create better habits than heroic cleanups.
Mistakes to avoid and quick fixes
- choosing multiple styles at once: lock one and finish the release before expanding
- stuffing busy scenes into tight spaces: use a small spot and give copy room
- relying on color alone for meaning: pair color with a word or a simple icon
- skipping email tests: check sizes and compression in your ESP before a full send
Metrics that show value
- payload share from hero art before and after switching to SVG where possible
- LCP trend on the main landing page after rollout
- rate of design review flags for inconsistent imagery across three sprints
- hours from brief to 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 allow broader use. Read the current policy. Save receipts in your brand folder and track where each asset ships. When legal asks for proof, you have the trail.
Bottom line
Ouch delivers a real visual system without slowing delivery. Choose a style, build a compact kit, connect it to tokens, and hold the line on accessibility and performance. The product will look intentional. The process will stay fast.
References and resources
- W3C WAI documentation for WCAG 2.2 on text alternatives and contrast
- MDN documentation for SVG accessibility and embedding
- Web.dev guides on responsive images and image performance
- NN Group research on visual communication and comprehension in UX
- Illustration guidance in Shopify Polaris and Google Material Design
