# DESIGN.md · Storyset (AV-009)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Illustration Library · Category: J. Avatars and Illustrations
- Platforms: Web
- Color theme: Bold color accent · Layout pattern: Card grid · Mood: Corporate, illustrative
- License / terms: Storyset (Freepik) terms: free use requires visible attribution to Storyset with a link; no attribution with a Flaticon Premium subscription; no redistribution
- Industry: Free design assets
- Patterns: Search-first gallery, Filter sidebar

Customizable and animatable illustrations in several styles, editable in the browser.

### Analysis (ours)
storyset.com (our capture) is a search-first marketplace: a deep navy hero band with faint stars (#064183, ESTIMATED), a centered headline (‘Awesome free customizable illustrations for your next project’), a subline and a large white search field, with category links (Business, Education, Medical, Technology, People, Multi-purpose) in the nav. Below, a left filter sidebar offers Styles (Rafiki, Bro, Amico, Pana, Cuate, each with a thumbnail), a Change color control and Background options, beside a grid of square white cards and a Recent / Popular toggle. Lesson: naming styles and showing a thumbnail for each lets users stay within one consistent style. Pitfall: free use requires a visible credit line with a link to Storyset; teams that forget it break the license.

### Best practices (ours)
- Pick one Storyset style (e.g. Rafiki or Bro) and stay with it across the product.
- Add the credit ‘Illustrations by Storyset’ with a link wherever the illustrations appear, unless you have a Flaticon Premium subscription.
- Use the color control to match your primary color before export.
- Don’t redistribute the files; download each illustration from the source.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Yes with credit (or Flaticon Premium)
- Attribution: Required: visible ‘Storyset’ credit with link
- Redistribution: Not allowed
- How you get it: Web editor, SVG/PNG/animated export, Figma plugin

### Mockups
No Storyset mockups. Storyset’s Terms of Use (storyset.com/terms, February 2022) forbid getting content by robots, programs or any non-ordinary method (s.2), and forbid including Storyset content or derivatives in a library or collection for distribution (s.6.3). This site is a design library with downloadable zips, and our builds are scripted, so we don’t include Storyset art. Using it in your own product is fine with the credit ‘Illustrations by Storyset’ linking to https://storyset.com.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~23%
- `#064183` ~13%
- `#0B315B` ~9%
- `#E0E2DB` ~6%
- `#57647D` ~4%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Card grid** (from our captures).

## Usage
```
Credit line: “Illustrations by Storyset” linking to https://storyset.com
```

## Do’s and don’ts
- Do: Let one strong brand color dominate key surfaces.
- Don’t: Don’t dilute it with competing accent colors.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://storyset.com/
- Library entry: https://design-library-byt.pages.dev/entry/AV-009