The bundle keeps the build brief and style notes together.
Inspired by Morpho
Morpho Mutts
A minimal market explorer kit translated into Morpho Mutts, defined by stark white surfaces, electric blue actions, many navigation links, switches, search/input controls, and a primary table/list explorer.
lightminimaldensedashboardweb3-dashboardportfolio
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.
# Morpho Mutts 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 Morpho-inspired Morpho Mutts style kit. A minimal market explorer kit translated into Morpho Mutts, defined by stark white surfaces, electric blue actions, many navigation links, switches, search/input controls, and a primary table/list explorer. Primary silhouette: Use a clean market-explorer interface: top/side navigation density, search and filters, switch toggles, electric-blue actions, white cards, and a dominant table. Avoid decorative hero/stat-card repetition. Composition: Use a desktop explorer silhouette: slim header, left filter/sidebar column, central sortable market table, and right/inline detail drawer. On mobile, stack filters above the list. Above the fold: Start with a concise explorer header and immediate pet-care market list. Do not create a large narrative hero unless used as a tiny page title. Core components: - Compact vault cards: Use cards only for selected market summaries or vault snapshots beside the table. Keep them rectangular, sparse, and blue-accented. - Search and filter controls: Use search, toggle switches, amount inputs, and filter chips; keep transaction forms secondary and exacting. - Primary market table: Make the table the main event: pet plan, collateral/service type, APY/rate, utilization/capacity, risk, and action columns with tight rows and sortable headers. - Tiny table sparklines: Use small inline bars/sparklines inside table rows; avoid large chart dashboards. - Risk/filter badges: Use small blue/gray badges for curated, isolated, open, and risk category states. Image direction: Use sparse vector-like pet-care market abstractions: white space, blue coordinate lines, small geometric pet silhouettes, no logos or readable text. Do not use source logos, trademarks, proprietary assets, readable source text, or copied screenshots. Stay evidence-backed; if evidence is limited, keep the treatment directional and conservative. ## Agent Kit # Morpho Pet Shop Agent Kit A minimal market explorer kit translated into Morpho Mutts, defined by stark white surfaces, electric blue actions, many navigation links, switches, search/input controls, and a primary table/list explorer. ## Evidence-Backed Silhouette ### Minimal market explorer Evidence: Evidence shows Navigation Link (154), Table (1), Input (2), Switch (2), many buttons, white/f5f5f5 backgrounds, electric blue accent, and dark ink text. Prompt guidance: Use a clean market-explorer interface: top/side navigation density, search and filters, switch toggles, electric-blue actions, white cards, and a dominant table. Avoid decorative hero/stat-card repetition. ### Explorer with side filtering Evidence: Component evidence is link-heavy with table, input, and switch controls rather than landing sections. Prompt guidance: Use a desktop explorer silhouette: slim header, left filter/sidebar column, central sortable market table, and right/inline detail drawer. On mobile, stack filters above the list. ### No marketing hero required Evidence: The evidence is app/explorer-oriented; repeated links and table evidence are stronger than hero evidence. Prompt guidance: Start with a concise explorer header and immediate pet-care market list. Do not create a large narrative hero unless used as a tiny page title. ### Compact vault cards Evidence: Button/card-like surfaces are present, but table/list evidence is stronger. Prompt guidance: Use cards only for selected market summaries or vault snapshots beside the table. Keep them rectangular, sparse, and blue-accented. ### Search and filter controls Evidence: Evidence includes Input (2), Switch (2), and many buttons. Prompt guidance: Use search, toggle switches, amount inputs, and filter chips; keep transaction forms secondary and exacting. ### Primary market table Evidence: Evidence includes Table (1), sortable header buttons, nav density, and asset-list product patterns. Prompt guidance: Make the table the main event: pet plan, collateral/service type, APY/rate, utilization/capacity, risk, and action columns with tight rows and sortable headers. ### Tiny table sparklines Evidence: Chart/metric evidence exists but detail is not strong. Prompt guidance: Use small inline bars/sparklines inside table rows; avoid large chart dashboards. ### Risk/filter badges Evidence: Status/risk cues are directionally supported by DeFi evidence and filters. Prompt guidance: Use small blue/gray badges for curated, isolated, open, and risk category states. ### Sparse technical abstraction Evidence: Palette evidence is white, f5f5f5, electric blue, and dark ink. Prompt guidance: Use sparse vector-like pet-care market abstractions: white space, blue coordinate lines, small geometric pet silhouettes, no logos or readable text. ## Image Direction Use sparse vector-like pet-care market abstractions: white space, blue coordinate lines, small geometric pet silhouettes, no logos or readable text. Do not use source logos, trademarks, proprietary assets, or raw source screenshots. Concrete visual decisions must remain tied to the cleaned kit evidence and copied artifacts.