Arcades are super easy to create. Build interactive product tours to embed within websites, blogs, and social media.
Screenshot of the arcade.software homepage.
Three ways to ship a Arcade-style UI.
Use in your AI builder, no-code tool, or CMS
Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.
Not affiliated with Arcade. All trademarks belong to their respective owners.
About Arcade
Home page hero
The home page is white with a neo-brutalist touch: buttons have thick black outlines and a hard offset shadow, and the type is a geometric sans-serif in heavy weight. A slim nav has a round, layered-button logo and the wordmark in capitals at the left, links for use cases, about and blog, then a plain underlined sign-in link and an outlined join-waitlist button at the right. The headline, "Show, don't tell," sits at the left of the hero, followed by a short line about adding interactive snippets of a product to a website, blog or social media so customers can try before they buy, and an outlined check-it-out button. On the right, an isometric grid holds 3D controls: a stack of browser windows, a start button, a large yellow push button with a cursor on it, a toggle, a slider and a play button, joined by thin lines.
Build interactive experiences
A large, saturated blue rounded panel has a centered white heading, "Build interactive experiences," and a line about stitching together videos and tooltips to make demos that turn leads into customers. Three pill tabs with 3D icons sit below it, create in minutes (selected), easily publish and learn what works. A browser screenshot inside the panel shows a sample dashboard with four colored stat tiles for weekly sales, new users, item orders and bug reports, a line chart and a pie chart, and a red tooltip bubble that says to see how to create a first Arcade.
Use cases
A heading, "Use Arcades here, there and everywhere," says they can elevate a homepage, social feeds and beyond. The first use case is a large white card with a circled number, a heading, "Build a better homepage demo," and a short line that suggests embedding an Arcade instead of a demo video to learn what customers want. Four colored cards follow in a two-by-two grid, each with a circled number, a heading, a short line and a wireframe browser that shows where the demo would sit: green for adding to changelogs or blog posts, blue for tweeting an Arcade, red for embedding on a solutions page and yellow for creating Arcades on the fly in response to a customer's one-off question.
Play with the demo and social proof
A second blue panel, "Play with our demo," says to get a taste of what the product can do and shows a browser with an admin dashboard and a yellow tooltip pointing to the extension button, with a 3D target icon beside it. A pale-yellow panel has a read-our-case-studies button and four white logo cards for a cap table tool, a scheduling tool, a software company and an error tracker. A line, "Trusted by 750+ companies," sits above two more rows of logos. A final call to action, "Ready to create quick, interactive product demos?," has an outlined join-waitlist button and a large 3D yellow button below. The footer is black with the wordmark, social links and legal links.
Based on a single full-page screenshot of arcade.software, the only capture available for this entry. The site was in a waitlist phase at the capture date, and the customer count is the site's own claim. Check the live site for current pricing and availability.
Related designs
