Biscuit Exchange

# Biscuit Exchange Implementation Bundle

Use this as the build brief for an AI coding agent. The base remix prompt tells the agent what to make; the style kit adds evidence, component behavior, and known limits.

## Base Remix Prompt

Build an interface using the Binance.com-inspired Biscuit Exchange style kit.

Use a dark high-density exchange system backed by the local `www-binance-com` design dossier: `#181a20` shell, `#202630`/`#29313d`/`#333b47` panels, `#eaecf0` text, muted `#929aa5`/`#707a8a` labels, `#fcd535` primary actions, `#f0b90b` yellow accents, `#2ebd85` positive status, and `#f6465d` negative/warning status.

Use the kit strongly for: overall style, color system, typography, layout, navigation, hero, buttons, cards, tabbed asset lists, badges/status, menus/modals, and interaction states.

Preserve the extracted grammar: 64px header; compact 14px nav labels; a trust-metric hero; account-start/search inputs; yellow signup actions; 40px tablists with selected/unselected states; 16px asset rows with symbols, names, prices, and deltas; right-aligned figures; compact news/status cards; checked switches; cookie/dialog-style confirmation actions; and dense footer groupings.

For the fictional pet shop translation, turn exchange assets into pet-care inventory assets such as Biscuit, Kibble, Leash, Toybox, VetPass, and Grooming. Use market rows for price, reorder, availability, adoption, or care-plan movement. Use trust modules for verified suppliers, recall alerts, insured delivery, and account protection.

This kit has limited evidence for complete form systems, full trading charts, wallet transactions, loading/empty/error states, and long approval flows. For forms, borrow only account-start and search treatments unless another selected kit owns complete forms. For charts, use compact metric blocks and market deltas rather than inventing a full analytics suite.

Image generation prompt: dark fictional pet marketplace product scene, charcoal panels, trading-yellow highlights, abstract market grid, compact device mockups, small pet-care inventory icons, cool-gray surfaces, secure premium finance mood, no logos, no readable source text, no source screenshots, no watermark.


## Agent Kit

# Binance.com Pet Shop Agent Kit

This kit translates the Binance.com homepage capture into a fictional pet shop marketplace called Biscuit Exchange. It is evidence-backed by the local dossier at `design-dossier/design-dossiers/www-binance-com`, captured from `https://www.binance.com/` on `2026-05-02T16:05:29.837Z`.

Use it when you want a dark, secure, high-density exchange interface: charcoal surfaces, trading-yellow primary actions, compact navigation, tabbed asset lists, market deltas, trust/status modules, account-start flows, cookie/dialog controls, switches, and dense footer systems.

## Evidence Anchors

- Source dossier: `DESIGN.md`, `components.md`, `product-patterns.md`, `tokens.json`, `evidence.json`.
- Viewports: desktop `1440x1100`, mobile `390x844`.
- Colors: `#181a20` shell, `#202630`/`#29313d`/`#333b47` panels, `#eaecf0` primary text, `#929aa5` and `#707a8a` muted text, `#fcd535` and `#f0b90b` yellow actions/accents, `#2ebd85` positive states, `#f6465d` negative states.
- Typography: `BinanceNova, Arial, sans-serif` dominates the capture; `BinancePlex, Arial, sans-serif` appears in dialog/button contexts. Repeated sizes include `72px`, `40px`, `24px`, `20px`, `16px`, `14px`, and `12px`.
- Layout: desktop hero starts around `x=120`; right-side market/news rows start around `x=864` and are `432px` wide. Mobile uses `16px` gutters and `358px` content width.
- Components: 64px global header, 14px/500 nav labels, 32px small header buttons, 48-56px large signup buttons, 40px tablists with 24px gaps, repeated asset rows, status deltas, consent dialog buttons, checked switches, FAQ rows, and a 67-link footer inventory.

## Visual Direction

- Build a near-black app shell instead of a marketing page.
- Use yellow only for important actions, selected states, and small trust/brand accents.
- Keep surfaces mostly flat: panel separation comes from `#2b3139` borders, muted fills, and sparse shadows.
- Pair a large trust-metric hero with a compact operational console.
- Use right-aligned numbers, small deltas, and terse status labels.
- Let mobile stack the same modules with tight gutters and a strong top signup action.

## Component Grammar

- Navigation: dense global header with product groups, search, account actions, utility icons, dropdown affordances, and dense footer links.
- Hero: trust metric, short marketplace promise, account-start input, yellow CTA, and market/news companion module.
- Tables: tabbed asset lists with identity icon, symbol/name, price, movement delta, muted dividers, and right-aligned figures.
- Cards: dark market, news, trust, app/device, FAQ, and account modules. Prefer 4-10px control radii and 8px card radii unless copying a captured 20-24px panel treatment.
- Forms: account-start and search fields only. This kit does not prove long checkout or profile forms.
- Badges: market deltas, verification, risk, availability, and account status.
- Menus: compact dark dropdowns, tab menus, switches, and consent-style dialogs.
- Charts: limited. Use metrics, deltas, and small trend cues rather than full trading charts.

## Fictional Pet Shop Translation

Replace crypto assets with pet-market inventory assets while preserving the evidence-backed structure:

- Coins become products or care assets: `BSC Biscuit`, `KBL Kibble`, `LTH Leash`, `TOY Toybox`, `VET VetPass`.
- Market prices become basket price, reorder value, stock movement, or adoption velocity.
- Trust/security modules become verified supplier care, recall alerts, cold-chain status, insured delivery, or account protection.
- News modules become care-market updates, supplier notices, or adoption program announcements.
- Footer links become shop, care, business, learning, and support inventories.

## Image Direction

Use generated fictional product imagery only: dark device mockups, abstract market grids, simple pet-care inventory icons, yellow highlights, and cool-gray panels. Do not use source screenshots, Binance logos, readable source text, trademarks, or proprietary brand marks.

## Best Use Cases

- Exchange-like pet inventory marketplaces
- Dense dashboards and portfolio/watchlist surfaces
- Secure account onboarding
- Status-heavy operations panels
- Mobile-first finance-style product tools