{"id":"f65b0b91-bdd1-458d-8775-2f6fa8a9d4b1","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/f65b0b91-bdd1-458d-8775-2f6fa8a9d4b1","originalSiteUrl":"https://arcade.software","capturedAt":"2026-04-11T18:38:37.517Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Arcade","summary":"Crisp Blueprint on White Canvas. Clean surfaces frame sharp typography and a singular, vibrant blue, like a detailed architectural plan on a clear white sheet, accented by a distinct highlight.","description":"Arcade presents a composed, polished aesthetic, prioritizing clarity and directness. The dominant whites and near-grayscale elements are punctuated by a single, vibrant blue, focusing attention and directing interaction. Subtle shadows build hierarchy and give a tactile quality to elements, making the UI feel grounded and precise. The generous use of rounded corners softens the otherwise direct typography, creating an accessible but authoritative tone.","tags":["clean","professional","minimal","blue-accent","rounded-corners","subtle-shadows","data-driven","clear-hierarchy","inter"],"industry":"design","colorScheme":"light","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card surfaces, button backgrounds, primary text on dark elements.","group":"neutral"},{"name":"Whisper Gray","hex":"#f9fafb","role":"Subtle background for UI elements and slight section differentiation.","group":"neutral"},{"name":"Outline Ash","hex":"#e5e7eb","role":"Primary border color for buttons and input fields, indicating interactive boundaries.","group":"neutral"},{"name":"Graphite Text","hex":"#111827","role":"Primary text color for headings and body, offering high contrast against light backgrounds. Also used as background for dark sections and button text on light buttons.","group":"neutral"},{"name":"Slate Text","hex":"#4b5563","role":"Secondary text color for body copy, subheadings, and muted links. Provides visual hierarchy by being less dominant than Graphite Text.","group":"neutral"},{"name":"Silver Text","hex":"#374151","role":"Decorative text in navigation and links. A slightly lighter nuance than Slate Text.","group":"neutral"},{"name":"Steel Accent","hex":"#70747d","role":"Subtle secondary text, border colors, and subtle button states, providing softer visual cues.","group":"neutral"},{"name":"Arcade Blue","hex":"#2142e7","role":"Primary brand color for calls to action, active states, and focus indicators. Its vivid nature stands out against the muted neutral palette.","group":"brand"},{"name":"Deep Blue Shadow","hex":"#182fa5","role":"Darker shade of Arcade Blue used for button borders and subtle shadows, adding depth to interactive elements.","group":"brand"},{"name":"Dark Gradient Base","hex":"#111827","role":"Base color for complex background gradients, often appearing in hero sections or prominent content blocks. Paired with gradient accents.","group":"brand","gradient":"linear-gradient(92deg, rgb(17, 24, 39) 70%, rgba(30, 43, 72, 0.9) 95%)"},{"name":"Blue Gradient Accent","hex":"#2142e7","role":"Vivd blue accent within gradients, creating dynamic energy within dark sections, used in banners and hero elements.","group":"brand","gradient":"linear-gradient(90deg, rgb(17, 24, 39) 0%, rgb(17, 24, 39) 45%, rgb(33, 66, 231) 50%, rgb(3, 181, 237) 55%, rgb(17, 24, 39) 60%, rgb(17, 24, 39) 100%)"}],"typography":[{"role":"The primary typeface for all text content, from headings to body. Its strong legibility and slightly condensed nature support an efficient, clear communication style. Heavier weights (600, 700) are reserved for key titles, while lighter weights (400, 500) serve body and secondary information.","sizes":"12px, 14px, 16px, 18px, 20px, 24px, 28px, 30px, 36px, 40px, 48px, 64px","family":"Inter","weight":"400, 500, 600, 700","weights":[400,500,600,700],"lineHeight":"1.00, 1.06, 1.07, 1.14, 1.17, 1.22, 1.25, 1.29, 1.30, 1.33, 1.38, 1.40, 1.43, 1.50, 1.56, 1.67, 1.71","substitute":"system-ui, sans-serif","letterSpacing":"-0.0250em at 64px, -0.0200em at 48px, -0.0150em at 40px, -0.0100em at 36px and 30px, -0.0070em at 28px and 24px"},{"role":"A decorative script font used sparingly for unique brand-specific elements or signatures, providing a touch of personalized flair. It contrasts with Inter's utilitarianism to add personality without compromising overall clarity.","sizes":"40px","family":"Balig Script","weight":"400","weights":[400],"lineHeight":"1.00","substitute":"cursive","letterSpacing":"normal"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.5,"letterSpacing":0},{"role":"body-sm","size":14,"lineHeight":1.43,"letterSpacing":0},{"role":"body","size":16,"lineHeight":1.5,"letterSpacing":0},{"role":"subheading","size":18,"lineHeight":1.56,"letterSpacing":0},{"role":"heading-sm","size":24,"lineHeight":1.33,"letterSpacing":-0.48},{"role":"heading","size":36,"lineHeight":1.25,"letterSpacing":-0.36},{"role":"heading-lg","size":48,"lineHeight":1.17,"letterSpacing":-0.96},{"role":"display","size":64,"lineHeight":1.07,"letterSpacing":-1.6}],"spacing":{"radius":{"cards":"16px","inputs":"16px","buttons":"12px","decorative":"24px","large-actions":"72px"},"elementGap":"8px","sectionGap":"96px","cardPadding":"48px","pageMaxWidth":"1304px"},"radius":{"cards":"16px","inputs":"16px","buttons":"12px","decorative":"24px","large-actions":"72px"},"guidelines":{"do":["Prioritize Inter font for all text elements, leveraging weights 400-700. Reserve Balig Script for highly decorative brand elements if necessary, ensuring it never competes with Inter for readability.","Use Arctic White (#ffffff) as the base background for most sections, broken by Whisper Gray (#f9fafb) for subtle differentiation, making content feel spacious and clear.","Apply Arcade Blue (#2142e7) exclusively to primary calls to action and active states, ensuring high visibility and clear user pathways.","Utilize border radii of 12px for buttons and navigation items, and 16px for input fields and general components, creating a soft but not overly rounded aesthetic.","Implement consistent letter spacing: -0.0250em for 64px, -0.0200em for 48px, -0.0150em for 40px, -0.0100em for 36px and 30px, and -0.0070em for 28px and 24px, optimizing legibility for larger text.","Apply subtle elevation provided by rgba(17, 24, 39, 0.04) box shadows to interactive elements and cards, giving a sense of depth and hierarchy without being heavy."],"dont":["Do not introduce new vibrant colors outside of the defined Arcade Blue (#2142e7) palette; maintain the controlled use of color to avoid visual clutter.","Avoid using harsh, abrupt transitions or sharp angles. Leverage the established border radii (12px, 16px, 72px) to maintain the soft, approachable feel.","Do not use dark backgrounds for general body text sections; preserve the light-themed composition for readability and a composed appearance.","Refrain from excessive use of gradient backgrounds. Limit them to hero sections or distinct banners to maintain their impact.","Do not deviate from the specified typography scale and letter spacing values. Inconsistent typography disrupts the visual rhythm and perceived quality.","Avoid arbitrary padding values; stick to the defined spacing scale (4px, 8px, 10px, 12px, 16px, 24px, 32px, 40px, 48px), especially for component internal spacing."]},"components":[{"name":"Hero URL Input with Tab Selector","role":""},{"name":"Team Tab Selector with Feature List","role":""},{"name":"CTA Button Group","role":""},{"name":"Secondary Outlined Button","role":"Secondary Action"},{"name":"Ghost Button","role":"Navigation & Tertiary Action"},{"name":"Action Input Field","role":"User Input with Action"},{"name":"Text Input Field","role":"Standard User Input"},{"name":"Header Navigation Link","role":"Primary Navigation"},{"name":"Status Chip","role":"Informational Badge"},{"name":"Feature Card","role":"Content Grouping"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text (Primary): #111827\n- Text (Secondary): #4b5563\n- Background (Primary): #ffffff\n- Background (Subtle): #f9fafb\n- CTA Button: #2142e7\n- Border (Neutral): #e5e7eb\n\n### 3 Example Component Prompts\n1. Create a primary hero section: full-width background gradient (linear: rgb(17,24,39) to rgba(30,43,72,0.9)). Centered headline 'Your product story, built by AI in minutes.' (Inter, 64px, weight 700, #111827, letter-spacing -1.6px). Below, a subheading 'Create beautiful, on-brand demos...' (Inter, 20px, weight 400, #4b5563). Below that, an 'Action Input Field' component (Canvas White background, Outline Ash border, 72px radius) with placeholder text, and an integrated 'Arcade Blue' submit button.\n2. Design a secondary button: 'Talk to sales', Ghost Button variant, with Steel Text (#70747d) color, Inter font, 16px size, weight 500. Padding 10px vertical, 16px horizontal, 12px radius. No visible border.\n3. Create a feature testimonial card: Whisper Gray (#f9fafb) background. Main text: 'Arcade makes every format effortless.' (Inter, 36px, weight 600, #111827, letter-spacing -0.36px). Apply a subtle UI elevation shadow: rgba(17, 24, 39, 0.12) 0px 0px 0px 1px, rgba(17, 24, 39, 0.03) 0px 2px 2px -2px, rgba(17, 24, 39, 0.03) 0px 4px 4px 0px, rgba(17, 24, 39, 0.03) 0px 8px 8px 0px, rgba(17, 24, 39, 0.03) 0px 16px 16px 0px. Ensure the card has a 16px radius and 48px padding."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775932692576-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775932692576-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/f65b0b91-bdd1-458d-8775-2f6fa8a9d4b1-1777556058465-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/f65b0b91-bdd1-458d-8775-2f6fa8a9d4b1-1777556058465-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/f65b0b91-bdd1-458d-8775-2f6fa8a9d4b1-1777556058465-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/f65b0b91-bdd1-458d-8775-2f6fa8a9d4b1-1777556058465-preview-detail-poster.jpg"},"similarStyleIds":["ca93daf1-daf3-41b7-8248-8f63082761e8","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","12255b63-e506-4bc1-a4cd-d05487de32f3","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","62911254-e6a9-4de8-bba1-accfc1a18da5","d417b42f-824d-45ba-a02e-cbef3b8ea0d8","c14bfde7-6f08-4b54-bd9b-39989d10cfef","f24daf3a-d43f-4dec-85a9-8ac1d5148a03","537641a0-5a24-4203-ae9b-cd29516aa3f8","60b529c2-c0f7-49be-9a77-8d3762838f05","7b083729-e694-4b66-82a3-befb08451722","a76ec6ba-20b3-495c-9d89-1e58281e79e7","0fd67ec5-7e9c-4ca9-b368-5d9c7388477a","62b22816-2d98-4e98-9c17-bf600ddb2fc8","1c1d3939-8d82-4907-aa3c-c9b2fcfbab4f","9342e89b-c2fe-4acf-9993-53b44e0c13b5","1ae4bcfe-c613-42fc-aab7-f9583381e7cc","ba07accb-b2cc-4ad9-a25f-c50b0f90f34e","9cc537fc-97d8-4632-8703-f9aa296c2206","9fecf7d6-b717-49ca-8edc-b10d6110b21c"],"exports":{"designMdUrl":"/references/refero/f65b0b91-bdd1-458d-8775-2f6fa8a9d4b1/design.md","tokensJsonUrl":"/references/refero/f65b0b91-bdd1-458d-8775-2f6fa8a9d4b1/tokens.json","tailwindV4Url":"/references/refero/f65b0b91-bdd1-458d-8775-2f6fa8a9d4b1/tailwind-v4.css","cssVariablesUrl":"/references/refero/f65b0b91-bdd1-458d-8775-2f6fa8a9d4b1/tailwind-v4.css"}}