Use the attached image as the primary visual reference.

Transform it autonomously into a coherent, production-oriented design system for:

[PROJECT NAME / SHORT PROJECT DESCRIPTION]

Operate in AUTO MODE.

Do not turn the process into an interview.
Infer every reasonable design decision from the reference and the project context.
Ask a question only when missing information makes meaningful progress impossible.

GOAL

REFERENCE → DESIGN SYSTEM → SEPARATE ASSETS → UI DEMO

The final result must be usable in a real responsive web product, not merely visually similar to the reference.

━━━━━━━━━━━━━━━━━━
1. EXTRACT THE VISUAL LANGUAGE
━━━━━━━━━━━━━━━━━━

Analyze the reference for:

- color palette;
- contrast;
- typography direction;
- geometry;
- shape language;
- composition;
- spacing and density;
- borders and radii;
- texture and material qualities;
- illustration style;
- icon language;
- visual hierarchy;
- motion potential;
- distinctive visual signatures.

Separate:

A. elements worth translating into UI;
B. elements useful only as decorative inspiration;
C. elements that would damage usability if copied directly.

Do not imitate the image literally.

Convert its visual DNA into a reusable digital system.

━━━━━━━━━━━━━━━━━━
2. DEFINE THE DESIGN SYSTEM
━━━━━━━━━━━━━━━━━━

Create the smallest coherent system needed for the product.

Define:

COLORS
- primary;
- accent;
- backgrounds;
- surfaces;
- text;
- muted text;
- borders;
- interactive states.

TYPE
- display direction;
- UI/body direction;
- hierarchy;
- scale;
- weights;
- line-height principles.

LAYOUT
- spacing rhythm;
- content width;
- responsive behavior;
- grid logic.

COMPONENTS
- primary button;
- secondary button;
- icon button;
- input/search;
- cards;
- navigation;
- modal/drawer;
- chips/filters when useful;
- feedback/loading/empty states when useful.

VISUAL RULES
- radii;
- borders;
- shadows;
- textures;
- decorative elements.

MOTION
- entrance;
- hover/press;
- reveal;
- loading;
- transitions;
- reduced-motion behavior.

Priority:

USABILITY → CLARITY → RECOGNIZABILITY → CONSISTENCY → AESTHETICS

━━━━━━━━━━━━━━━━━━
3. DECIDE THE ASSET PACK
━━━━━━━━━━━━━━━━━━

Determine which assets the project genuinely needs.

Do not generate assets merely to fill a quota.

Consider:

- brand mark;
- favicon;
- app/PWA icon;
- UI icons;
- hero artwork;
- backgrounds;
- textures;
- patterns;
- decorative graphics;
- card artwork;
- empty-state artwork;
- loading artwork;
- social/share image.

Prefer a small, reusable asset system over a large inconsistent collection.

━━━━━━━━━━━━━━━━━━
4. GENERATE PRODUCTION ASSETS
━━━━━━━━━━━━━━━━━━

Generate the assets directly.

CRITICAL RULE:

EVERY REUSABLE ASSET MUST BE GENERATED AS A SEPARATE IMAGE.

Never replace individual assets with:

- contact sheets;
- moodboards;
- icon grids;
- sprite sheets;
- presentation boards;
- mockups containing several assets.

Generate one reusable asset per output.

If several assets are required, generate them sequentially while preserving the same visual system.

━━━━━━━━━━━━━━━━━━
5. ICON SYSTEM
━━━━━━━━━━━━━━━━━━

Determine the UI icons required by the product.

Typical examples:

search
menu
close
back
forward
share
download
copy
settings
grid
info
bookmark

Generate each icon separately.

DEFAULT ICON OUTPUT

- PNG;
- true transparent background;
- no tile;
- no container;
- no scenery;
- no mockup;
- no embedded text;
- consistent canvas;
- consistent padding;
- consistent optical weight;
- consistent stroke/form language;
- readable at small sizes.

Example filenames:

icon-search.png
icon-share.png
icon-download.png
icon-close.png

If true transparency cannot be produced reliably, do not pretend that it was.
State the limitation.

━━━━━━━━━━━━━━━━━━
6. BRAND + APP ICONS
━━━━━━━━━━━━━━━━━━

Create one canonical visual mark first:

brand-mark.png

Prefer transparent background when appropriate.

Use the SAME identity to derive:

favicon-16.png
favicon-32.png
apple-touch-icon-180.png
pwa-icon-192.png
pwa-icon-512.png

When useful:

pwa-icon-maskable-512.png

Do not independently redesign each icon.

The identity must remain recognizable at very small sizes.

━━━━━━━━━━━━━━━━━━
7. BACKGROUNDS
━━━━━━━━━━━━━━━━━━

Generate backgrounds as independent assets.

They must:

- work behind real interface content;
- preserve sufficient quiet space;
- support responsive cropping;
- maintain contrast;
- contain no essential text;
- avoid unnecessary focal clutter.

Suggested output:

background-primary.webp
background-secondary.webp

Use PNG/JPG/WebP according to the visual content.

━━━━━━━━━━━━━━━━━━
8. TEXTURE
━━━━━━━━━━━━━━━━━━

Create textures as reusable surface/overlay assets.

They should not behave like illustrations.

Prefer:

- subtle detail;
- seamless or crop-safe composition;
- low interference with text;
- efficient web use.

Example:

texture-surface.webp

━━━━━━━━━━━━━━━━━━
9. PATTERN
━━━━━━━━━━━━━━━━━━

When the visual language supports it, create a reusable pattern.

Prefer:

- square format;
- seamless or convincingly repeatable structure;
- no text;
- no single dominant focal point;
- suitability for CSS background repetition.

Example:

pattern-primary.png

━━━━━━━━━━━━━━━━━━
10. HERO ARTWORK
━━━━━━━━━━━━━━━━━━

Generate one primary hero artwork.

It must:

- strongly express the visual identity;
- work with responsive crops;
- preserve negative space where UI may overlap;
- avoid embedded interface text;
- remain stylistically consistent with the rest of the system.

Example:

hero-primary.webp

━━━━━━━━━━━━━━━━━━
11. FORMAT POLICY
━━━━━━━━━━━━━━━━━━

Default:

UI icons → transparent PNG
Brand mark → transparent PNG
Favicons → PNG
App/PWA icons → PNG
Backgrounds → WebP / PNG / JPG
Textures → WebP / PNG
Patterns → PNG / WebP
Hero artwork → WebP / PNG / JPG
Social preview → PNG / JPG

Choose the most practical web format for each asset.

Do not claim an asset is SVG/vector unless an actual vector file is produced.

Do not embed fonts inside generated images when the text belongs to the interface.

━━━━━━━━━━━━━━━━━━
12. UI DEMO
━━━━━━━━━━━━━━━━━━

After the system and assets are established, create one responsive UI concept demonstrating the system.

Use the SAME assets and visual rules already created.

Show only the components relevant to the product, typically:

- hero;
- navigation;
- primary CTA;
- search/input;
- cards/content;
- icon actions;
- one secondary state such as a modal, detail view, or drawer.

The demo validates the design system.

It must NOT become the source from which assets need to be manually cropped.

━━━━━━━━━━━━━━━━━━
13. RESPONSIVE + ACCESSIBILITY RULES
━━━━━━━━━━━━━━━━━━

Default to:

- mobile-first;
- responsive layout;
- readable typography;
- strong contrast;
- clear hierarchy;
- large touch targets;
- visible focus states;
- keyboard-compatible controls;
- no reliance on color alone;
- reduced-motion support;
- no emoji as interface icons.

Visual personality must never make basic operation harder.

━━━━━━━━━━━━━━━━━━
14. QUALITY GATE
━━━━━━━━━━━━━━━━━━

Before finishing, inspect the whole system.

Verify that:

- all assets clearly belong to one visual family;
- icons are actually separate;
- transparent assets contain no unwanted background;
- icon scale and padding are consistent;
- small icons remain recognizable;
- backgrounds support readable UI;
- patterns behave as patterns;
- textures behave as textures;
- artwork is crop-safe;
- unnecessary assets have been removed;
- the UI demo uses the generated system consistently;
- nothing looks like a generic template;
- nothing has been added merely for decoration;
- assets are suitable for direct web use.

If an asset fails, correct or regenerate it automatically before delivery.

━━━━━━━━━━━━━━━━━━
15. DELIVERY
━━━━━━━━━━━━━━━━━━

Deliver the individual assets first.

Then provide a compact manifest:

COLORS
TYPE
UI
ICONS
SURFACES
ARTWORK
MOTION

For assets, use only:

filename → purpose

Example:

brand-mark.png → primary identity mark
icon-search.png → search action
pattern-primary.png → repeatable decorative surface
hero-primary.webp → primary hero artwork

Keep explanations minimal.

DEFAULT BEHAVIOR

Unless the project explicitly requires otherwise:

- responsive web app;
- mobile-first;
- high contrast;
- minimal text;
- strong visual identity;
- no unnecessary assets;
- no generic template styling;
- no decorative UI clutter;
- maximum reuse;
- minimum viable asset set;
- separate production-ready files.