System Requirements Document for faeyzan-store

1. Introduction

faeyzan-store is a warm, playful Indonesian online storefront for plush toys, souvenirs, gift items, travel cushions, graduation bears, fashion accessories, perfumes and gift packaging. The product is built with https://www.istana-boneka.com/ as a reference website — the reference supplies the catalogue content, the domain context, the page structure and the visual mood, but it is explicitly not the user's existing site to be rebuilt. faeyzan-store is a new storefront that presents the same kind of plush-toy and gift catalogue to the same kind of audience.

The audience is Indonesian online shoppers buying affection: parents buying for children, students buying gifts, couples, and office gift buyers, browsing mostly on phones in a warm, informal Indonesian retail register. The product intent is to make a dense catalogue of cute objects feel like a toy-box you want to poke — huggable, trustworthy-enough-to-buy, cheerful, and easy to browse without ceremony.

The current delivery is a single anonymous public entry surface, Landing, which presents the reference site's informational and catalogue content to a visitor and supports browsing without sign-in.

2. System Overview

faeyzan-store is delivered as a custom first-party web storefront. The current scope is one anonymous, publicly reachable page — Landing — that carries the whole accepted catalogue experience: branding and trust highlights, trending tags, category navigation with nested sub-categories, the "Produk Terbaru" and "Produk Terlaris" product grids, and a contact footer.

Actors. The only accepted active human persona is the Visitor: a person who opens the storefront to browse plush toys, gifts and souvenirs, learn what the shop offers, and decide what to look at or buy. There are no other accepted human personas in the current scope. The store's own catalogue data, product listings, prices, view counts and contact details are product content, not actors.

Accepted behaviour. The Visitor can read the brand identity and tagline, read the five trust highlights, browse trending tags, expand categories to reveal nested sub-categories, browse the newest and best-selling product grids with thumbnail, name, view count and price, and read the contact details (help line, customer service line, address, email).

Ownership. All accepted behaviour is owned by the single first-party page Landing. No provider-owned or external destination owns any accepted human-facing capability in the current scope.

Narrow exclusions. The reference URL is a reference, not a site to rebuild; faeyzan-store does not reproduce the reference site's own brand identity as its own. No account, sign-in, checkout, payment, order management, inventory administration, or personalised recommendation capability is accepted in the current scope.

2a. Product Interpretation and Delivery Boundary

faeyzan-store is a public, anonymous storefront. A Visitor arrives with no account and no prior relationship, and everything accepted in the current scope is readable and usable in that state. There is no accepted requirement for a Visitor to establish an identity, sign in, or resume private state, and no accepted requirement for a commitment, entitlement or value transfer that must remain bound to a particular participant. Access to Landing is therefore none — open, anonymous, first-party.

The reference website is used in four declared ways and no others:

• content_source — its verified catalogue facts (branding, tagline, trust highlights, contact details, trending tags, category list, sample product listings) supply the storefront's content.
• domain_context — Indonesian e-commerce for plush toys, souvenirs, gifts and travel accessories, aimed at shoppers seeking cute plush items, gift items or personalised products.
• structure_reference — the homepage section order and the secondary product-filtering and category-page feature sets inform how the catalogue is organised.
• visual_inspiration — the hierarchical layout, grid product presentation and separate contact footer inform the visual approach.

The reference is supplemental authority and is explicitly not the user's existing site to be rebuilt. Its brand name, its own site identity and its own page URLs are reference facts, not faeyzan-store's identity.

Current vs future. Current: the anonymous Landing storefront with catalogue browsing and contact information. Future (not in current pages or acceptance): any transactional, account-based, or administrative capability. Nothing in the current scope may be read as accepting those.

2b. Source Content Inventory

The reference directive declares content_source, so the verified factual content is preserved item-by-item below.

Branding (reference identity, used as content reference)

• Title: Istana Boneka
• Tagline: Pabrik Boneka, Toko Boneka, Kado & Hadiah, Souvenir, Bantal Souvenir. Custom Boneka

Key highlights (five trust items)

• Pengiriman gratis — Pengiriman Seluruh Indonesia
• SNI — Standar National Indonesia
• Produk Original — Produk 100% Asli Istana Boneka
• Layanan CS — Dukungan khusus untuk anda
• Layanan Hadiah — Mendukung layanan hadiah

Contact information

• Bantuan: 08113164001
• CS: 0822 9884 1618
• Address: Jl. Tenaga Baru 4 No.15-B, Kec. Blimbing, Kota Malang, Jawa Timur 65126
• Email: [email protected]

Trending tags

• #boneka-lucu
• #isbon
• #istana-boneka
• #boneka-viral
• #boneka

Product categories

• Bantal Guling
• Travelling — Bantal Selimut, Neck Rest, Head Rest, T4 Tissue, Nape Cushion, Eye Mask, Carset, Tas bekal
• Hewan — Dog, Giraffe, Cat, Piggy, Hippo, Horse, Duck, Panda, Monkey, Rabbit, Turtle, Penguin
• Karakter — Unicorn, Dinosaurus, Princess
• Makanan & Minuman — Makanan, Minuman
• Wisuda — Boneka Toga, Bucket Wisuda
• Boney-Bonita
• SALE
• Parfum
• Packaging — Kertas Gado, Box (as observed: "Kertas Kado, Box")
• Fashion — Tote Bag, Tas Selempang, Tas Ransel, Slipper, Bando
• Bear
• Gantungan Kunci

"Produk Terbaru" sample entries

• ISTANA BONEKA Kelinci Floopy Claudia T — views: 100 kali — price: Rp 189,000
• ISTANA BONEKA Beruang Floopy Bubu Bear — views: 78 kali — price: Rp 159,000
• ISTANA BONEKA Beruang Jumbo STD Honey — views: 76 kali — price: Rp 1,649,000

"Produk Terlaris" sample entries

• ISTANA BONEKA Parfum Bonita SELENA Min — views: 4,400 kali — price: Rp 59,000
• ISTANA BONEKA Teddy Bear Beruang Pink — views: 10,450 kali — price: Rp 95,000

Secondary page feature facts (structure reference)

• Product filtering page (/produk): Filter Merek, keyword search, price range input, Produk Terlaris listing, pagination or total product count (e.g. 694 products).
• Category page example, Fashion (/produk/kategori/fashion): category-specific listing; product entries with price and availability state (e.g. Habis Terjual).

2c. Page Content and Component Coverage

Landing

Information and state

• Brand wordmark and tagline: "Pabrik Boneka, Toko Boneka, Kado & Hadiah, Souvenir, Bantal Souvenir. Custom Boneka".
• Five trust highlights: Pengiriman gratis (Pengiriman Seluruh Indonesia), SNI (Standar National Indonesia), Produk Original (Produk 100% Asli Istana Boneka), Layanan CS (Dukungan khusus untuk anda), Layanan Hadiah (Mendukung layanan hadiah).
• Trending tag row: #boneka-lucu, #isbon, #istana-boneka, #boneka-viral, #boneka.
• Category rail with primary categories and their nested sub-categories exactly as listed in the Source Content Inventory.
• "Produk Terbaru" grid and "Produk Terlaris" grid, each entry showing thumbnail, name, view count and price.
• Contact block: Bantuan 08113164001, CS 0822 9884 1618, address Jl. Tenaga Baru 4 No.15-B, Kec. Blimbing, Kota Malang, Jawa Timur 65126, email [email protected].
• Access state: anonymous, no sign-in required, no private state.

Primary actions

• Read the brand identity and trust highlights.
• Select a trending tag to narrow the catalogue view.
• Select a primary category to reveal its nested sub-category drawer; select a sub-category to narrow the catalogue view.
• Browse the "Produk Terbaru" and "Produk Terlaris" grids.
• Read the contact details.

Supporting actions

• Scroll the trust-highlight chip row horizontally.
• Expand and collapse a category's nested sub-category panel.
• Move through the product grids as the catalogue continues.

Domain entities

• Product: name, thumbnail, view count, price.
• Category: primary name, nested sub-category names.
• Trending tag: tag label.
• Trust highlight: label, description.
• Contact detail: channel label, value.

Component responsibilities

• Sticky header — wordmark, search affordance, cart affordance.
• Trust strip — five highlight pills as a horizontally scrollable chip row.
• Trending tag row — the five tags as selectable chips.
• Category rail — primary category pills; each opens an expandable nested sub-category panel.
• Product grid — uniform cards: thumbnail, name, view count, price; used for both "Produk Terbaru" and "Produk Terlaris".
• Contact footer — phone, address, email.

States

• Loading: grids and category rail show placeholder cards and pill skeletons in the cream/white surface palette.
• Empty: when a selected tag or category yields no products, the grid area shows a modular vector spot illustration (bear, rabbit, duck, or hand holding a gift) with a short warm message and a way back to the full catalogue.
• Success: grids render with thumbnail, name, view count and price fully readable; the selected tag or category chip shows its active state.
• Error: if catalogue content cannot be retrieved, the affected section shows a short message and a retry control; the rest of the page (branding, trust strip, contact) remains readable.
• Recovery: retry re-requests the affected section only; the Visitor's selected tag or category is preserved so the view returns to where it was.

3. Functional Requirements

FR-1 — Read the storefront brand identity As a Visitor, I should see the storefront's wordmark and tagline so that I immediately understand what kind of shop this is.

• Provenance: explicit (reference content_source branding, used as content reference).
• Lifecycle: trigger — the Visitor opens Landing. Observable result — the wordmark and the tagline "Pabrik Boneka, Toko Boneka, Kado & Hadiah, Souvenir, Bantal Souvenir. Custom Boneka" are readable.
• Access: anonymous, no sign-in.
• Failure/recovery: if the identity block fails to render, the rest of the page remains usable and the block is retried on reload.
• Continuation: the Visitor continues into the trust strip and catalogue.

FR-2 — Read the five trust highlights As a Visitor, I should see the five trust highlights — Pengiriman gratis (Pengiriman Seluruh Indonesia), SNI (Standar National Indonesia), Produk Original (Produk 100% Asli Istana Boneka), Layanan CS (Dukungan khusus untuk anda), and Layanan Hadiah (Mendukung layanan hadiah) — so that I can judge whether the shop is trustworthy before browsing.

• Provenance: explicit.
• Lifecycle: trigger — the Visitor views the trust strip. Observable result — all five highlights are readable with their full descriptions.
• Access: anonymous.
• Failure/recovery: if the strip cannot render, the catalogue and contact block remain usable.
• Continuation: the Visitor proceeds to trending tags or categories.

FR-3 — Browse trending tags As a Visitor, I should see the trending tags #boneka-lucu, #isbon, #istana-boneka, #boneka-viral and #boneka so that I can start from what is currently popular.

• Provenance: explicit.
• Lifecycle: trigger — the Visitor views the trending tag row. Observable result — all five tags are readable as selectable chips.
• Access: anonymous.
• Failure/recovery: if tags cannot be retrieved, the row is omitted and the category rail remains the entry point.
• Continuation: selecting a tag narrows the catalogue view (FR-4).

FR-4 — Narrow the catalogue by trending tag As a Visitor, I should be able to select a trending tag so that the product grids show only the products associated with that tag.

• Provenance: required_inference (the tags are presented as navigation in the reference structure; selection is the indispensable mechanic that makes them usable).
• Lifecycle: trigger — the Visitor selects a tag chip. Observable result — the chip shows an active state and the product grids reflect the selection.
• Access: anonymous.
• Failure/recovery: if the filtered result is empty, the empty state (2c) explains it and offers a way back to the full catalogue; the previous selection is restorable.
• Continuation: the Visitor browses the narrowed grid or clears the selection.

FR-5 — Browse the primary category rail As a Visitor, I should see the primary categories — Bantal Guling, Travelling, Hewan, Karakter, Makanan & Minuman, Wisuda, Boney-Bonita, SALE, Parfum, Packaging, Fashion, Bear and Gantungan Kunci — so that I can find the kind of product I want.

• Provenance: explicit.
• Lifecycle: trigger — the Visitor views the category rail. Observable result — all thirteen primary categories are readable.
• Access: anonymous.
• Failure/recovery: if the rail cannot render, the trending tag row and product grids remain usable.
• Continuation: the Visitor expands a category (FR-6) or browses the grids.

FR-6 — Expand a category to reveal its nested sub-categories As a Visitor, I should be able to open a primary category and see its nested sub-categories so that I can narrow down precisely.

• Provenance: explicit (nested sub-categories are stated for Travelling, Hewan, Karakter, Makanan & Minuman, Wisuda, Packaging and Fashion).
• Lifecycle: trigger — the Visitor selects a primary category. Observable result — the nested sub-category panel opens showing that category's exact sub-categories: Travelling → Bantal Selimut, Neck Rest, Head Rest, T4 Tissue, Nape Cushion, Eye Mask, Carset, Tas bekal; Hewan → Dog, Giraffe, Cat, Piggy, Hippo, Horse, Duck, Panda, Monkey, Rabbit, Turtle, Penguin; Karakter → Unicorn, Dinosaurus, Princess; Makanan & Minuman → Makanan, Minuman; Wisuda → Boneka Toga, Bucket Wisuda; Packaging → Kertas Kado, Box; Fashion → Tote Bag, Tas Selempang, Tas Ransel, Slipper, Bando.
• Access: anonymous.
• Failure/recovery: if the panel fails to open, the primary category remains selectable as a whole; the Visitor can retry the expansion.
• Continuation: the Visitor selects a sub-category (FR-7) or collapses the panel.

FR-7 — Narrow the catalogue by category or sub-category As a Visitor, I should be able to select a category or sub-category so that the product grids show only products in that category.

• Provenance: required_inference (the reference structure presents category-specific listings; selection is the indispensable mechanic).
• Lifecycle: trigger — the Visitor selects a category or sub-category. Observable result — the selection shows an active state and the product grids reflect it.
• Access: anonymous.
• Failure/recovery: if the result is empty, the empty state explains it and offers a way back; the previous selection is restorable.
• Continuation: the Visitor browses the narrowed grid or clears the selection.

FR-8 — Browse the "Produk Terbaru" grid As a Visitor, I should see the newest products with their thumbnail, name, view count and price so that I can see what has just arrived.

• Provenance: explicit.
• Lifecycle: trigger — the Visitor views the "Produk Terbaru" section. Observable result — each card shows thumbnail, name, view count (e.g. "100 kali") and price (e.g. "Rp 189,000") fully readable.
• Access: anonymous.
• Failure/recovery: if the grid cannot load, the section shows a short message and a retry control; other sections remain usable.
• Continuation: the Visitor continues into "Produk Terlaris" or the category rail.

FR-9 — Browse the "Produk Terlaris" grid As a Visitor, I should see the best-selling products with their thumbnail, name, view count and price so that I can see what other shoppers choose.

• Provenance: explicit.
• Lifecycle: trigger — the Visitor views the "Produk Terlaris" section. Observable result — each card shows thumbnail, name, view count (e.g. "10,450 kali") and price (e.g. "Rp 95,000") fully readable.
• Access: anonymous.
• Failure/recovery: if the grid cannot load, the section shows a short message and a retry control; other sections remain usable.
• Continuation: the Visitor continues to the contact footer or back into the catalogue.

FR-10 — Read product availability state As a Visitor, I should be able to see when a product is unavailable (e.g. "Habis Terjual") so that I do not expect to buy something that is gone.

• Provenance: explicit (observed as an availability state on the reference category page).
• Lifecycle: trigger — the Visitor views a product card whose product is unavailable. Observable result — the card shows the availability state alongside name, view count and price.
• Access: anonymous.
• Failure/recovery: if the availability state cannot be retrieved, the card renders without it rather than blocking the grid.
• Continuation: the Visitor continues browsing.

FR-11 — Read the contact details As a Visitor, I should see the shop's contact details — Bantuan 08113164001, CS 0822 9884 1618, address Jl. Tenaga Baru 4 No.15-B, Kec. Blimbing, Kota Malang, Jawa Timur 65126, and email [email protected] — so that I can reach the shop.

• Provenance: explicit.
• Lifecycle: trigger — the Visitor reaches the contact footer. Observable result — all four contact facts are readable.
• Access: anonymous.
• Failure/recovery: if the contact block cannot render, the rest of the page remains usable.
• Continuation: the Visitor ends the session or returns to the catalogue.

FR-12 — Reach the catalogue from the header As a Visitor, I should have a sticky header with the wordmark, a search affordance and a cart affordance so that the storefront's main entry points stay reachable while I browse.

• Provenance: explicit (header with wordmark, search and cart is stated in the layout direction).
• Lifecycle: trigger — the Visitor scrolls the page. Observable result — the header remains visible with wordmark, search and cart affordances readable.
• Access: anonymous.
• Failure/recovery: if the sticky behaviour fails, the header remains at the top of the page and all its affordances stay usable.
• Continuation: the Visitor continues browsing.

4. User Personas

Visitor

Product context. The Visitor is an Indonesian online shopper who has landed on faeyzan-store, most often on a phone. They are looking for plush toys, souvenirs, gift items, travel cushions, graduation bears, fashion accessories, perfumes or gift packaging — either for themselves or as a gift for someone else. They arrive with no account and no prior relationship with the shop, and they expect to browse immediately without ceremony.

Primary goal. To find the plush toy or gift item they want, understand what the shop offers and what it stands for, and know how to reach the shop — all without signing in.

Distinct accepted responsibilities.

• Reading the storefront's brand identity and tagline to understand what kind of shop this is.
• Reading the five trust highlights to decide whether the shop is trustworthy enough to buy from.
• Browsing trending tags to start from what is currently popular.
• Browsing the primary category rail and expanding categories to reveal their nested sub-categories.
• Narrowing the catalogue by tag, category or sub-category.
• Browsing the "Produk Terbaru" and "Produk Terlaris" grids, reading each card's thumbnail, name, view count and price.
• Noticing when a product is unavailable.
• Reading the contact details to reach the shop.

Relevant inputs and decisions. The Visitor's inputs are selections: a trending tag, a primary category, a nested sub-category, or clearing a selection. Their decisions are which category or tag matches what they want, and whether the trust highlights and product presentation make the shop credible enough to contact.

Interactions with other accepted participants. There are no other accepted human personas in the current scope. The Visitor's only counterparty is the shop itself, reached through the contact details (Bantuan 08113164001, CS 0822 9884 1618, email [email protected]) — a contact channel, not an in-product participant.

Observable success. The Visitor can read the brand identity, all five trust highlights, all five trending tags, all thirteen primary categories with their exact nested sub-categories, both product grids with fully readable thumbnail, name, view count and price, availability states where applicable, and all four contact facts — at 375px, 768px and 1280px, with no readable text or control cropped, covered or run off an edge.

What makes this role distinct. The Visitor is the only accepted human actor, and their work is entirely non-transactional and non-authenticated: they read, select and narrow. There is no account, no commitment, no value transfer and no private state in the current scope, so the Visitor's success is measured purely by whether they can find and read what they came for.

5. Core User Flows

Flow 1 — First arrival and orientation

1. The Visitor opens faeyzan-store on a phone. Landing loads anonymously; no sign-in is requested.
2. The Visitor reads the wordmark and the tagline "Pabrik Boneka, Toko Boneka, Kado & Hadiah, Souvenir, Bantal Souvenir. Custom Boneka".
3. The Visitor reads the trust strip: Pengiriman gratis (Pengiriman Seluruh Indonesia), SNI (Standar National Indonesia), Produk Original (Produk 100% Asli Istana Boneka), Layanan CS (Dukungan khusus untuk anda), Layanan Hadiah (Mendukung layanan hadiah). On a narrow viewport the strip scrolls horizontally; every highlight becomes fully readable as it passes.
4. Observable result: the Visitor knows what the shop sells and what it claims about itself.
5. Next step: the Visitor continues to the trending tags or the category rail.

Flow 2 — Browsing by trending tag

1. From Landing, the Visitor reads the trending tag row: #boneka-lucu, #isbon, #istana-boneka, #boneka-viral, #boneka.
2. The Visitor selects a tag, for example #boneka-viral.
3. Observable result: the selected chip shows its active state and the product grids reflect the selection.
4. If the selection yields no products, the grid area shows a modular vector spot illustration with a short warm message and a way back to the full catalogue; the Visitor's previous selection is restorable.
5. Next step: the Visitor browses the narrowed grid, or clears the selection and returns to the full catalogue.

Flow 3 — Browsing by category and nested sub-category

1. From Landing, the Visitor reads the category rail: Bantal Guling, Travelling, Hewan, Karakter, Makanan & Minuman, Wisuda, Boney-Bonita, SALE, Parfum, Packaging, Fashion, Bear, Gantungan Kunci.
2. The Visitor selects Travelling. The nested sub-category panel opens with a staggered reveal, showing Bantal Selimut, Neck Rest, Head Rest, T4 Tissue, Nape Cushion, Eye Mask, Carset, Tas bekal.
3. The Visitor selects Neck Rest.
4. Observable result: the selection shows an active state and the product grids show only products in that sub-category.
5. If the panel fails to open, the Visitor can still select Travelling as a whole and retry the expansion.
6. Next step: the Visitor browses the narrowed grid, or collapses the panel and picks another category.

Flow 4 — Browsing the newest and best-selling products

1. From Landing, the Visitor scrolls to "Produk Terbaru".
2. The Visitor reads each card: thumbnail, name, view count and price — for example ISTANA BONEKA Kelinci Floopy Claudia T, 100 kali, Rp 189,000; ISTANA BONEKA Beruang Floopy Bubu Bear, 78 kali, Rp 159,000; ISTANA BONEKA Beruang Jumbo STD Honey, 76 kali, Rp 1,649,000.
3. The Visitor continues to "Produk Terlaris" and reads ISTANA BONEKA Parfum Bonita SELENA Min, 4,400 kali, Rp 59,000 and ISTANA BONEKA Teddy Bear Beruang Pink, 10,450 kali, Rp 95,000.
4. Observable result: every card's name, view count and price is fully readable at 375px, 768px and 1280px.
5. If a grid cannot load, that section shows a short message and a retry control while the rest of the page stays usable; retry re-requests only that section.
6. Next step: the Visitor continues to the contact footer or returns to the category rail.

Flow 5 — Noticing an unavailable product

1. While browsing a category's products on Landing, the Visitor reaches a card whose product is unavailable.
2. Observable result: the card shows the availability state (e.g. "Habis Terjual") alongside the product's name, view count and price.
3. If the availability state cannot be retrieved, the card renders without it rather than blocking the grid.
4. Next step: the Visitor continues browsing the remaining products.

Flow 6 — Reaching the shop

1. From Landing, the Visitor scrolls to the contact footer.
2. The Visitor reads Bantuan 08113164001, CS 0822 9884 1618, the address Jl. Tenaga Baru 4 No.15-B, Kec. Blimbing, Kota Malang, Jawa Timur 65126, and the email [email protected].
3. Observable result: all four contact facts are fully readable.
4. Next step: the Visitor contacts the shop outside the product, or returns to the catalogue.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. Muse: Pablo Stanley. Headline idea: Warm modular joy for a plush-toy gift shop — rounded characters, generous colour, big pill shapes, copy that talks to you, so a plain product grid becomes a toy-box you want to poke.

Colour tokens — light mode

Support tints are used only as flat colour blocks, never as gradients. Ratio target: ~60% cream, 25% white surfaces, 10% colour blocks, 5% hot accent.

Typography

• Headings: Baloo 2, weights 700/800, tight tracking -0.01em, sentence case for section titles; ALL-CAPS only for tiny chips and badges at 11–12px with 0.12em tracking.
• Body: DM Sans.
• Scale: 1.333 modular — 56 / 42 / 32 / 24 / 18 / 16 / 14.
• Hero display: clamp(40px, 7vw, 88px). Section titles: clamp(28px, 3.2vw, 42px). Card titles: 16px / 1.35. Metadata: 13px. Chip labels: 11px uppercase, 0.12em. Body: 16px / 1.6.

Shape language. Everything is rounded and huggable. Cards: 24px radius with a 4px-offset solid shadow in #2B2118 at 8% opacity — a "lifted sticker" shadow, not a blur. Buttons: full pills (999px). Category chips: 999px pills in flat colour with a 1.5px ink outline. Section dividers are wavy SVG edges or a row of soft scallops, never a straight hairline. Icons are 2.5px-stroke rounded vectors with round caps. Blob and sticker shapes are allowed as background decoration behind product photography only, never behind text.

Layout. Mobile-first single column at 375px, 2-up product grid at 768px, 3-up at 1280px, on a 12-column 24px-gutter grid with 1240px max content width. Homepage order mirrors the reference structure: (1) sticky header with wordmark, search and cart; (2) trust strip of five highlight pills as a horizontally scrollable chip row; (3) trending tag row; (4) category rail with nested sub-categories in an expandable panel; (5) "Produk Terbaru" grid; (6) "Produk Terlaris" grid; (7) contact footer with phone, address, email. Product cards are uniform in structure — thumbnail, name, view count, price — but never hover-lift; they tilt and colour-flip instead.

Imagery. Product photography on flat colour grounds — each plush shot on a single support tint (mint, sky, lilac, tomato) with a soft contact shadow, cropped tight and square. No white-background cut-outs; the colour block is part of the identity. A small set of Pablo-Stanley-style modular vector characters (a bear, a rabbit, a duck, a hand holding a gift) is used as spot illustrations on empty states, category headers and the footer. No stock people, no lifestyle photography, no gradient blobs.

Avoid. White-first pages; blue or indigo primary buttons (#0057FF, #2563EB, #6366F1 family) anywhere; Inter, Roboto, Arial, Helvetica, Poppins or system-ui as heading or body font; gradient-blob hero backgrounds and soft multicolour gradient washes; a grid of identical hover-lift cards with blur shadows; photorealistic stock people or lifestyle photography; sharp 0px corners, hairline 1px grey borders, and flat neutral grey surfaces; centred headline + subtext + button hero composition. The generic indigo/blue-on-white SaaS template is forbidden for this project.

7. Signature Design Concept

The lopsided toy-box hero. The public entry is not a centred headline over a button. It is a full-width cream #FFF6E9 field where a single giant plush bear photograph — shot on a hot-pink #FF5C8A colour block — bleeds off the right edge at 375px and occupies the right 55% at 1280px. The left side is a stacked type column: a small handwritten-feel eyebrow "Pabrik Boneka · Malang", then a three-line Baloo 2 headline at clamp(40px, 7vw, 88px) reading "Boneka yang bikin / orang tersenyum" with the middle line set in #FF5C8A, then a pill CTA "Lihat Semua Boneka" in ink on sunflower #FFB703, and beneath it a row of three small sticker badges (SNI, 100% Original, Gratis Ongkir) rotated −3deg, 2deg, −1deg like slapped-on labels. On mobile the bear image sits below the type, cropped to a 4:5 block, with the badges overlapping its top edge. Nothing is centred; the composition is deliberately lopsided.

The concept recomposes only accepted content — the brand identity, the trust highlights, the category rail and the product grids — and introduces no new behaviour, page or destination. The headline, eyebrow and CTA are presentation of the accepted catalogue entry, not a new capability.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject. The giant plush bear photograph on its hot-pink #FF5C8A colour block, bleeding off the right edge at 375px and occupying the right 55% at 1280px, with the three sticker badges (SNI, 100% Original, Gratis Ongkir) overlapping its top edge on mobile.
• Input → transformation → outcome thesis. As the Visitor scrolls into the hero, the type column settles into place while the bear's colour block holds flat and the three sticker badges rotate into their −3deg / 2deg / −1deg resting angles — the page reads as a shop sign with labels physically stuck onto it, and the Visitor's eye lands on the "Lihat Semua Boneka" pill CTA. No accepted behaviour is added: the CTA leads into the accepted catalogue.
• Motion vocabulary. Springy and small. Cards rotate −1.5deg and scale 1.02 on hover with a 180ms cubic-bezier(.34,1.56,.64,1) spring; the thumbnail's background colour block swaps from cream to one of the support tints. Category chips pop in with a 40ms stagger on scroll into view. The "Produk Terlaris" ticker of trending tags loops horizontally at 24s and pauses on hover. Trust-strip icons do a single wave/nod on first view.
• Composed first frame. Cream field, lopsided split: type column left with eyebrow, three-line headline (middle line #FF5C8A), sunflower pill CTA, and three tilted sticker badges; bear photograph on its hot-pink block bleeding off the right edge. Nothing centred.
• Reduced-motion state. All transforms resolve to opacity-only fades, the ticker becomes a wrapping row of chips, and stagger disappears. The hero's composition is unchanged; only the motion is removed.

9. Non-Functional Requirements

NFR-1 — Readable text and controls stay whole at every viewport. Headlines, wordmarks, labels, numbers, cards' text and controls stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Imagery, decoration and motion may be cropped, bled off an edge, rotated, overlapped or cut exactly as the creative direction asks, as long as they cover no readable text or control. Provenance: explicit (user design constraint). Rationale: the catalogue's value is its readable price and view-count metadata.

NFR-2 — Moving and scrollable content remains fully readable. Marquees, tickers, carousels and horizontally scrollable rows may cross the viewport or container edge by design; they are judged by whether they actually move or scroll and whether every item becomes fully readable as it passes, never by the item cut at the edge in a still frame. Provenance: explicit. Rationale: the trust strip and trending-tag ticker are horizontally moving by design.

NFR-3 — Reduced-motion behaviour. With prefers-reduced-motion, moving content stops and shows whole items: they wrap into rows, or sit in a horizontally scrollable row (overflow-x: auto) whose further items are reached by scrolling. Provenance: explicit. Rationale: accessibility of the ticker and staggered reveals.

NFR-4 — Anonymous access. Landing is reachable without an account, and no accepted capability requires sign-in. Provenance: explicit (Planning Scope access requirement none). Rationale: no accepted journey requires identity continuity or private state.

NFR-5 — Mobile-first responsive catalogue. The catalogue is usable at 375px, 768px and 1280px with the grid stepping 1-up, 2-up and 3-up respectively. Provenance: explicit (layout direction). Rationale: the audience browses mostly on phones.

NFR-6 — Content fidelity. Product names, view counts, prices, category names, nested sub-category names, trending tags, trust-highlight text and contact details are presented exactly as recorded in the Source Content Inventory. Provenance: explicit (content_source directive). Rationale: these are verified reference facts, not placeholders.

NFR-7 — Section-level resilience. A failure in one section (grid, category rail, trust strip, contact block) does not block the rest of Landing; the affected section shows a short message and a retry control. Provenance: required_inference. Rationale: the accepted page is a single surface carrying several independent content sections.

10. Tech Stack

• Frontend: React, delivered as a responsive web storefront. [Default — not specified by user]
• Backend: Python with FastAPI, serving the catalogue content (products, categories, sub-categories, tags, trust highlights, contact details). [Default — not specified by user]
• Storage: a relational database for products, categories, sub-categories and tags. [Default — not specified by user]
• Containerisation: Docker with docker-compose for local and single-host deployment. [Default — not specified by user]
• Kubernetes: not required for the current single-page anonymous storefront scope. [Default — not specified by user]

No source-specified technology choice exists in the authoritative thread; the above are labeled defaults and do not create product behaviour.

11. Assumptions and Constraints

Constraints (binding)

• The provided URL https://www.istana-boneka.com/ is a reference website, not the user's existing site to be rebuilt. faeyzan-store is a new storefront that uses the reference for content, domain context, structure and visual inspiration only.
• The reference directive's authority is supplemental; it supplies content and structure but does not override the user's own product intent.
• The reference's own brand identity (title "Istana Boneka") is reference content, not faeyzan-store's identity.
• The generic indigo/blue-on-white SaaS template is forbidden for this project.
• The palette, fonts, surfaces, tone, layout and product context stated in the creative direction are preserved as given.

Assumptions (narrow, labeled)

• [Assumption] The catalogue content shown on Landing is served from faeyzan-store's own backend, populated with the verified reference facts recorded in the Source Content Inventory.
• [Assumption] The search and cart affordances in the sticky header are present as stated in the layout direction; no search-results or cart behaviour is accepted in the current scope beyond their presence as affordances.
• [Assumption] The reference's secondary-page feature facts (Filter Merek, keyword search, price range input, pagination or total product count, category-specific listing) are structure-reference material informing how the catalogue is organised on Landing; they do not create additional pages in the current scope.
• [Assumption] The email value observed as [email protected] is preserved as recorded; the actual address is supplied by the shop at content-entry time.

Future (not current)

• Any transactional capability (checkout, payment, order management).
• Any account, sign-in or personalised-state capability.
• Any administrative or inventory-management capability.
• Any additional page beyond the single accepted Landing surface.

12. Glossary

• Visitor — the single accepted active human persona: an anonymous Indonesian online shopper browsing faeyzan-store for plush toys, gifts, souvenirs and related items.
• Landing — the single accepted first-party page; the anonymous public entry surface carrying the whole current catalogue experience.
• Trust highlight — one of the five reference trust items: Pengiriman gratis, SNI, Produk Original, Layanan CS, Layanan Hadiah.
• Trending tag — one of the five reference tags: #boneka-lucu, #isbon, #istana-boneka, #boneka-viral, #boneka.
• Primary category — one of the thirteen top-level catalogue categories (Bantal Guling, Travelling, Hewan, Karakter, Makanan & Minuman, Wisuda, Boney-Bonita, SALE, Parfum, Packaging, Fashion, Bear, Gantungan Kunci).
• Nested sub-category — a category revealed inside a primary category's expandable panel (for example Travelling → Neck Rest).
• Produk Terbaru — the newest-products grid.
• Produk Terlaris — the best-selling-products grid.
• Habis Terjual — the observed product availability state meaning the item is sold out.
• Support tint — one of the flat colour blocks behind product photography: mint #7ED9C3, sky #8FC7FF, lilac #C9A7FF, tomato #FF7A59.
• Sticker badge — a tilted label with a solid 4px-offset ink shadow, used for trust highlights and product badges.
• Reference website — https://www.istana-boneka.com/, used as content source, domain context, structure reference and visual inspiration; explicitly not the user's existing site to be rebuilt.