The bundle keeps the build brief and style notes together.
Inspired by OpenSea.io
BarkSea
A dark, media-led marketplace kit translated into the fictional pet shop BarkSea. Best for collectible pet profiles, adoption drops, searchable inventory, category filters, wallet-like account flows, and image-heavy product grids; dense tables and full charting are intentionally weak.
darkconsumerphoto-ledglassmarketplaceweb3-dashboard
Implementation bundle
Copy one clean packet, or just the pieces you need.
Copy the full bundle when you want an agent to build in this style. Use the individual files when you only need tokens, CSS, Tailwind, or component prompts.
Use CSS variables, Tailwind values, and JSON tokens when you need exact values.
Component prompts describe reusable patterns. Keep weak areas marked limited or unavailable.
# BarkSea 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 a fictional pet-shop interface using the BarkSea Pet Marketplace style kit. Use BarkSea as the demo brand. Adapt the captured OpenSea.io visual system into pet-care content: adoption, grooming, training, profiles, community, and care services. Do not use source logos, screenshots, trademarked collection names, or readable source text. Prioritize these strong categories: overall-style, color-system, typography, layout, navigation, hero, buttons, cards, badges-status, image-style, interaction-states. Weak or missing categories: forms (limited), tables (limited), charts (limited), menus-modals (limited). ## Agent Kit # BarkSea Pet Marketplace Agent Kit A dark, media-led marketplace kit translated into the fictional pet shop BarkSea. Best for collectible pet profiles, adoption drops, searchable inventory, category filters, wallet-like account flows, and image-heavy product grids; dense tables and full charting are intentionally weak. ## Source Evidence - Source capture: https://opensea.io/ - Snapshot: State of Crypto Design 2026 - Dossier artifacts are preserved in `artifacts/` and concrete values come from the local design-dossier capture. ## Style Rules - Use the extracted colors: #141415, #26272d, #ffffff, #acadae, #0786ff. - Keep all copy, imagery, logo marks, pet names, and product details fictional. - Preserve the captured component grammar where evidence is strong. - Use original pet-shop previews and generated imagery rather than source screenshots. ## Category Limits - forms: limited - tables: limited - charts: limited - menus-modals: limited ## Implementation Notes ### BarkSea overall style Status: available Evidence: DESIGN.md captures an OpenSea marketplace surface with Navigation Link counts over 100, multiple buttons, switches, an input, a Discover heading, category CTAs including All/Gaming/Art/PFPs/More, and fixed full-screen cover media. Prompt: Build a fictional pet-shop surface for BarkSea using the captured visual language, but replace all source assets, logos, and text with original pet-care content. ### Evidence-backed color system Status: available Evidence: DESIGN.md captures an OpenSea marketplace surface with Navigation Link counts over 100, multiple buttons, switches, an input, a Discover heading, category CTAs including All/Gaming/Art/PFPs/More, and fixed full-screen cover media. Prompt: Use the extracted palette and contrast relationships from the dossier, adapting labels and surfaces to BarkSea. ### Captured type scale Status: available Evidence: DESIGN.md captures an OpenSea marketplace surface with Navigation Link counts over 100, multiple buttons, switches, an input, a Discover heading, category CTAs including All/Gaming/Art/PFPs/More, and fixed full-screen cover media. Prompt: Use the captured font mood, size hierarchy, and label density with neutral fallback fonts. ### Page layout grammar Status: available Evidence: DESIGN.md identifies text-then-banner-media and wide-media-above-centered-copy patterns with a long marketplace main area and carousel/product media. Prompt: Follow the captured page grammar and spacing rhythm for a pet-care product or marketplace flow. ### Navigation system Status: available Evidence: DESIGN.md captures an OpenSea marketplace surface with Navigation Link counts over 100, multiple buttons, switches, an input, a Discover heading, category CTAs including All/Gaming/Art/PFPs/More, and fixed full-screen cover media. Prompt: Use the captured navigation density, link grouping, and active states with pet-shop destinations. ### Hero pattern Status: available Evidence: DESIGN.md captures Discover as hero heading evidence plus large full-screen cover imagery and category CTAs. Prompt: Translate the captured hero/media structure into a pet-shop first viewport with original content. ### Buttons and calls to action Status: available Evidence: components.md records blue primary buttons, translucent white buttons, 6px radius controls, 14px labels, and switch/filter treatments. Prompt: Use the captured button radii, label sizes, fills, and contrast for pet-care CTAs. ### Cards and content blocks Status: available Evidence: DESIGN.md captures repeated image marketplace cards with dark gradient overlays and collection/product CTA text. Prompt: Use captured media/card grammar for pets, services, posts, profiles, or resources. ### Forms and inputs Status: limited Evidence: components.md captures one Input and search-like marketplace controls; complete checkout forms are not represented. Prompt: Use only the captured search/input/login-level affordances; avoid unsupported complex form flows. Treat this category as limited because the dossier evidence is thin. ### Tables and row systems Status: limited Evidence: OpenSea evidence is card/grid marketplace-first; no robust table component is captured even though asset rows can be adapted cautiously. Prompt: Use only light row/list adaptations if absolutely needed; prefer captured card/feed/stat patterns. Treat this category as limited because the dossier evidence is thin. ### Charts and metrics Status: limited Evidence: tokens include status colors, but components.md does not capture full chart widgets. Prompt: Use simple counters or indicators based on captured metric evidence, not full analytics dashboards. Treat this category as limited because the dossier evidence is thin. ### Badges and status chips Status: available Evidence: components.md captures switch/category/filter style states and compact bordered chips. Prompt: Use captured chips, domain labels, filters, or social labels as pet status badges. ### Menus and modals Status: limited Evidence: components.md captures many nav links and stateful navigation groups; use compact menus but do not invent deep modal systems. Prompt: Use captured navigation/menu affordances only; keep overlays compact and evidence-backed. Treat this category as limited because the dossier evidence is thin. ### Image and media style Status: available Evidence: DESIGN.md captures an OpenSea marketplace surface with Navigation Link counts over 100, multiple buttons, switches, an input, a Discover heading, category CTAs including All/Gaming/Art/PFPs/More, and fixed full-screen cover media. Prompt: Generate original pet imagery that matches the captured composition, crop, and media treatment without source screenshots. ### Interaction states Status: available Evidence: DESIGN.md captures an OpenSea marketplace surface with Navigation Link counts over 100, multiple buttons, switches, an input, a Discover heading, category CTAs including All/Gaming/Art/PFPs/More, and fixed full-screen cover media. Prompt: Use captured hover, active, selected, muted, disabled, and focus states with restrained motion.