How Crocus Fields — The Saffron Count Renders SIGNATURE TECHNIQUE With Zero Image Assets

Discovering the Hidden Labor of Saffron

In this AI-crafted digital experience, ‘Crocus Fields — The Saffron Count’ transforms visitors into laborers, immersing them in the meticulous process of saffron harvesting. Its signature move? An interactive, tactile counting game that makes the seemingly invisible effort of saffron production palpably real, all without a single external image—only code-generated visuals and subtle animations.

From Concept to Critique to Certification

The creation began with a clear concept: make saffron harvesting visceral through interactivity. The design was built iteratively, starting with a simple SVG field and draggable elements, then refined through rigorous critique focusing on responsiveness, accessibility, and visual coherence. Final approval came after an art director evaluated the site’s capacity to communicate labor’s subtlety and authenticity—achieving a seamless, code-centric experience that vividly illustrates the conversion of effort into value, guided by the detailed principles in the provided guide.

The full build notes live in the room’s design guide.

Palette, Type, and Interaction Unveiled

The site employs a carefully curated color palette rooted in botanical hues: deep indigo for structure, saffron violet for petals, dawn rose for gentle transitions, and warm gold for weighing and proofing. Typography is split between serif fonts—used for conveying emotion and tradition—and clean, modern sans-serifs that ensure clarity and accessibility. The core interaction hinges on a series of accessible buttons placed over an SVG illustration of crocus furrows, allowing users to simulate picking flowers and plucking stigmas via pointer, keyboard, or touch. CSS and inline SVG craft the visuals—think delicate petal animations, woven basket textures, and a crimson timeline—delivering a tactile feel through code alone. The site’s signature technique? A precise, data-driven conversion ratio visualized through smooth, kinetic movements that communicate value transparently, without relying on external assets or images.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 97 of 175, “saffron”):
CROCUS FIELDS — a saffron harvest cooperative. Aesthetic: dawn purple fields; crimson threads on indigo cloth. Palette: crocus violet #8a6bb5, dawn rose, thread crimson #c22e2e, indigo cloth #26324e, gold scale-pans. Fonts: instrument-serif (display), manrope (body). SIGNATURE: THE COUNT — an interactive gather: PICK crocus blooms (they part with a soft snap into your basket counter) then PLUCK the three stigmas from a bloom macro (delicate drag), a live ledger converting your work at truth-scale (150 flowers → 1 gram; your gram bar fills mercilessly slowly — the point lands itself); IF /assets/gen/saffron/field.jpg exists, open with it as the dawn establishing shot. Grading table (negin/sargol), fraud-detection card (real vs. dyed threads test), recipes measured in threads not grams. Unforgettable: understanding the price by your own thumb-count.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/saffron/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

Experience the Saffron Harvest

Visit the live AI-built exhibition at Crocus Fields and explore all 175 sites in the hub. Witness firsthand how code and design intertwine to reveal the unseen work behind precious commodities.

Visit the live room → · Browse all 175 rooms

Previously in Wing IV

• Room 88: The Lace School — Two Moves, Infinite Pattern
• Room 95: The Bureau of Bureaus | Form 27-B
• Room 92: Taller Calavera — Death, Drawn Dancing

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI