The bundle keeps the build brief and style notes together.
Inspired by Circle USDC
Orbit Collar
A polished institutional stablecoin product page translated into a fictional pet shop. Best for global service landing pages, reserve-backed trust sections, partner case-study pages, developer-ready explainers, and subscription/resource footers built from white fields, deep licorice ink, purple actions, gradient stat numerals, photo-led cards, rounded forms, and broad enterprise navigation.
lightinstitutionaltechnicalgradientlanding-pagedeveloper-tool
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.
# Orbit Collar 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 Circle USDC-inspired Orbit Collar style kit. Use a polished institutional pet-shop product system: `rgb(255, 255, 255)` canvas, `rgb(41, 35, 59)` licorice ink, `rgb(134, 86, 239)` purple links/actions, `rgb(31, 26, 48)` deep panels, `rgb(167, 163, 181)` muted copy, purple-to-blue gradient stats, large Circular-style display type, 20px photo cards, 8px CTAs and forms, and broad enterprise navigation. Concrete defaults from the capture: body/navigation at 16px, support copy around 18-20px, hero display up to 82px, section padding often `96px 0px`, dark primary CTAs with `12.5px 20px` or `12.5px 16px` padding and 8px radius, footer email input with `10.25px 12px` padding and 8px radius, and case-study photo cards with 30px padding and 20px radius. Use strongly for: institutional landing pages, hero sections, enterprise navigation, partner case-study cards, trust/reserve explainers, developer/resource panels, floating search affordances, and photo-led image direction. Use with care for: footer subscribe forms, structured reserve/resource lists, gradient proof metrics, compliance labels, dropdowns, accordions, and cookie dialogs. Do not invent wallet-connect flows, dense dashboards, trading charts, order books, admin tables, checkout forms, KYC flows, or dashboard filters from this kit. Do not use Circle logos, USDC marks, trademarks, raw source assets, readable source copy, or source screenshots. Image generation prompt: original photo-led pet-care business scene for a fictional global service, office or storefront context, subtle app alert overlays, white/licorice interface surfaces, purple and blue gradient accents, enterprise trust mood, no logos, no readable text, no source screenshots, no signage, no watermark. ## Agent Kit # Circle USDC Pet Shop Agent Kit This cleaned kit translates the captured Circle USDC page into a fictional pet shop called Orbit Collar. Use it for polished institutional product pages: global pet-service landing pages, reserve-backed trust sections, partner case-study stories, developer-ready resource pages, and newsletter/resource footers. Evidence comes from `design-dossier/design-dossiers/circle-usdc/evidence.json`, `tokens.json`, `DESIGN.md`, `components.md`, and desktop/mobile screenshots captured from `https://www.circle.com/usdc`, which resolved to the same URL. ## Visual Direction - White canvas with licorice text: `rgb(255, 255, 255)` and `rgb(41, 35, 59)`. - Purple actions and links: `rgb(134, 86, 239)` and `rgb(159, 114, 255)`. - Deep panels: `rgb(31, 26, 48)` and `rgb(41, 35, 59)`. - Muted text: `rgb(167, 163, 181)` and `rgb(225, 223, 232)`. - Gradient emphasis: `rgb(159, 114, 255)` to `rgb(24, 148, 232)`. - Typography: Circular-style sans with 16px body, 18-20px support copy, and 82px display type. - Shape: 20px cards, 8px CTAs/forms, 16px floating search, and occasional very round pills. ## Component Grammar - Navigation: enterprise grouped triggers for platform, solutions, partners, developer, company, and transparency/resource links. - Hero: large trust headline, two CTAs, photo/UI alert stack, and a calm global-finance tone. - Cards: 20px photo case-study cards with dark gradient overlays; pale resource cards for guides and partner paths. - Buttons: 8px dark filled CTAs, purple utility buttons, and purple text links. - Forms: footer subscribe form only; no checkout, KYC, onboarding, or payment form is evidenced. - Metrics: large gradient stat numerals and short proof metrics, not a chart suite. - Menus/modals: dropdown triggers, FAQ accordions, and cookie dialog evidence only. - Search: floating `Ask us anything` search affordance is captured. ## Best Use Cases - Enterprise product landing pages - Trust and reserve explainers - Partner case-study pages - Developer/resource hubs - Newsletter/footer subscribe surfaces - Mobile web product pages ## Evidence Limits Strong: overall style, color system, typography, layout, navigation, hero, buttons, cards, image style, footer, search, and case-study/resource patterns. Limited: footer form, tables, charts, status badges, menus/modals, and interaction states. Unavailable or not supported: wallet-connect flows, dense dashboards, trading charts, order books, admin grids, checkout flows, KYC flows, and dashboard filtering.