The bundle keeps the build brief and style notes together.
Inspired by Pendle
Pendle Paws
A dense yield-market kit translated into Pendle Paws, led by dark blue trading surfaces, teal/yellow accents, horizontal market rails, chip filters, and asset-list tables instead of generic stat cards.
darkdensedashboardtechnicalweb3-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.
# Pendle Paws 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 Pendle-inspired Pendle Paws style kit. A dense yield-market kit translated into Pendle Paws, led by dark blue trading surfaces, teal/yellow accents, horizontal market rails, chip filters, and asset-list tables instead of generic stat cards. Primary silhouette: Use a compact dark yield-market workspace for pet-care terms: stacked chip filters, horizontal product rails, dense asset rows, small mono labels, teal water highlights, amber reward cues, and blue-gray glass panels. Avoid generic planning consoles or isolated stat-card grids. Composition: Favor an app shell with a slim top nav, filter toolbar, horizontally scrolling maturity/category cards, then a data-table body. Keep modules tight, aligned, and row-first. Above the fold: Treat the top as an app market header: concise pet-yield headline, connected-wallet action, network selector, and first visible market rail/table. Do not create a large marketing hero. Core components: - Horizontal market cards: Use compact cards as market tiles with token-pair style pet plans, maturity chips, small deltas, and teal/amber accents. Keep them nested in rails, not decorative standalone cards. - Trade ticket inputs: Use small input/ticket surfaces for deposit amount, term selector, and review rows. Use chip percentages and compact validation copy only where a transaction flow needs them. - Asset-list market table: Use a primary asset-list table with compact columns for plan, liquidity, term, rate, and status; emphasize row hover, tiny sort controls, and sticky-like header density. - Inline yield indicators: Use sparing inline sparklines or tiny trend bars inside market rows; avoid a large dashboard chart wall. - Term and risk chips: Use rounded teal, blue-gray, and amber chips for fixed term, live rate, reviewed, and limited-capacity states. Image direction: Use abstract generated pet-care yield imagery: layered blue glass cards, teal paths, amber reward beads, and small pet silhouettes without logos, letters, readable text, photorealism, or copied source UI. 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 # Pendle Pet Shop Agent Kit A dense yield-market kit translated into Pendle Paws, led by dark blue trading surfaces, teal/yellow accents, horizontal market rails, chip filters, and asset-list tables instead of generic stat cards. ## Evidence-Backed Silhouette ### Yield market rail system Evidence: Evidence shows repeated Button groups (20/18/16), navigation links, table evidence, 40 chart/metric captures, Inter/mono type, translucent water/grass/blue token colors, and 8/10/16px spacing/radii. Prompt guidance: Use a compact dark yield-market workspace for pet-care terms: stacked chip filters, horizontal product rails, dense asset rows, small mono labels, teal water highlights, amber reward cues, and blue-gray glass panels. Avoid generic planning consoles or isolated stat-card grids. ### Dense rail and table rhythm Evidence: Evidence includes no conventional landing sections, repeated 8/4/20/16px spacing, 10/16/4/6px radii, and wide market rows/buttons rather than editorial sections. Prompt guidance: Favor an app shell with a slim top nav, filter toolbar, horizontally scrolling maturity/category cards, then a data-table body. Keep modules tight, aligned, and row-first. ### Above-fold market state Evidence: Hero evidence is weakly classified as wide-media-above-centered-copy, but the captured heading/CTA are market/table content such as USDG yield and sUSDe market rows. Prompt guidance: Treat the top as an app market header: concise pet-yield headline, connected-wallet action, network selector, and first visible market rail/table. Do not create a large marketing hero. ### Horizontal market cards Evidence: Card-like evidence appears in pp-card selectors, water/grass tinting, and mobile card links. Prompt guidance: Use compact cards as market tiles with token-pair style pet plans, maturity chips, small deltas, and teal/amber accents. Keep them nested in rails, not decorative standalone cards. ### Trade ticket inputs Evidence: DeFi form evidence is directional with many button and chip controls. Prompt guidance: Use small input/ticket surfaces for deposit amount, term selector, and review rows. Use chip percentages and compact validation copy only where a transaction flow needs them. ### Asset-list market table Evidence: Evidence includes table count 1 and repeated button rows inside pp-grid table selectors. Prompt guidance: Use a primary asset-list table with compact columns for plan, liquidity, term, rate, and status; emphasize row hover, tiny sort controls, and sticky-like header density. ### Inline yield indicators Evidence: Evidence reports chart/metric pattern count 40 but detailed chart styling is limited. Prompt guidance: Use sparing inline sparklines or tiny trend bars inside market rows; avoid a large dashboard chart wall. ### Term and risk chips Evidence: Status/risk cues are inferred from DeFi decision points and observed compact chips/buttons. Prompt guidance: Use rounded teal, blue-gray, and amber chips for fixed term, live rate, reviewed, and limited-capacity states. ### Abstract yield illustration Evidence: Image prompt colors include water/grass teal, blue-gray, amber, and translucent surfaces. Prompt guidance: Use abstract generated pet-care yield imagery: layered blue glass cards, teal paths, amber reward beads, and small pet silhouettes without logos, letters, readable text, photorealism, or copied source UI. ## Image Direction Use abstract generated pet-care yield imagery: layered blue glass cards, teal paths, amber reward beads, and small pet silhouettes without logos, letters, readable text, photorealism, or copied source UI. 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.