Arcade

Overview

Arcade embodies a "Clarity-First Minimalism" aesthetic—a design philosophy that prioritizes visual clarity and purposeful simplicity to make complex product storytelling feel effortless. The brand serves product teams, marketers, and sales professionals who need to communicate product value quickly and authentically. The UI evokes confidence and speed: a clean white canvas anchored by a vibrant cobalt-blue primary accent (#2142e7) that signals action and innovation, paired with soft cyan accents (#03b5ed) that suggest fluidity and forward momentum. The emotional response is one of capability without friction—users feel empowered to create professional, on-brand content without technical barriers.

Arcade's voice is direct, energetic, and human-centered. The brand avoids corporate jargon and instead uses concrete, benefit-driven language: "No designers. No agencies. No waiting." Vocabulary patterns emphasize speed ("in minutes"), authenticity ("your actual product"), and empowerment ("you're the storyteller"). The tone is conversational yet authoritative—Arcade knows product, knows brand, and knows how to make both shine. Example sentence in Arcade's voice: "Transform your website into a clickable demo in 90 seconds—no code, no compromise."

Colors

Arcade's color system is built on a foundation of pristine white (#ffffff) and near-black (#111827), creating maximum contrast for readability and focus. The primary accent, cobalt blue (#2142e7), is the signature brand color—used exclusively on primary CTAs, active states, and key interactive elements. This blue is not merely decorative; it signals "click me" and "this matters." Secondary accents include cyan (#03b5ed) for supporting actions and highlights, and gold (#fdbc15) for tertiary emphasis or success states. The surface stack progresses from pure white (surface) through carefully calibrated grays (surface-container-low: #f3f4f6, surface-container: #e5e7eb, surface-container-high: #d1d5db) to enable subtle depth without sacrificing clarity. On-surface text is set to #111827 (near-b

Typography

The type system uses Inter exclusively, a geometric sans-serif that conveys modernity and precision. The hierarchy spans from display (60px, 700 weight, -0.04em tracking) for hero statements down to label-sm (12px, 500 weight, 0.05em tracking) for metadata and badges. Headline-lg (48px, 600 weight, -0.02em tracking) anchors page sections and major content blocks; headline-md (32px, 600 weight, -0.015em tracking) breaks up subsections. Body text is set at 16px (body-md) with 400 weight and 24px line-height, ensuring comfortable reading at typical screen distances. All headings (h1–h5) receive negative letter-spacing (-0.02em to -0.005em) to tighten their appearance and reinforce visual hierarchy. When placing small labels (12–14px) over busy backgrounds or gradients, apply text-shadow: 0 2p

Layout

Arcade uses a 12-column fluid grid with a max-width of 1280px, allowing content to breathe on desktop while adapting gracefully to mobile. The spacing scale is semantic: xs (4px) for micro-adjustments, sm (12px) for compact grouping, md (24px) for standard section gutters, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. Container max-width of 1280px ensures text lines remain readable (typically 65–75 characters) and prevents the eye from traveling too far horizontally. White-space is generous but purposeful—the hero section uses lg spacing above and below to create breathing room, while card grids use md spacing for consistent rhythm. The gutter (24px) is applied consistently to left/right margins on all major sections, creating a unified visual rhyth

Elevation & Depth

Depth in Arcade is conveyed through a restrained shadow and border system that respects the clarity-first philosophy. The base elevation (sm) uses a 1px solid border at rgba(17, 24, 39, 0.10) paired with a soft shadow (0px 1px 1px -0.5px rgba(17, 24, 39, 0.04)), creating subtle separation without visual noise. Mid-level elevation (md) adds a second shadow layer (0px 2px 2px -1px rgba(17, 24, 39, 0.05), 0px 4px 4px -2px rgba(17, 24, 39, 0.05)) for modals and elevated cards. The highest elevation (lg) uses a multi-layer shadow stack (0px 16px 16px 0px rgba(17, 24, 39, 0.03), 0px 8px 8px 0px rgba

Shapes

Arcade employs a "Technical Softness" shape philosophy—rounded corners that feel approachable without sacrificing precision. The rounded scale progresses from sm (4px) for micro-elements like badge corners, DEFAULT (8px) for input fields and small buttons, md (12px) for list items and secondary cards, lg (16px) for primary buttons and standard cards, xl (24px) for modals and hero containers, and full (9999px) for pill-shaped buttons and badges. The most frequent radius is 16px (103 instances), reflecting the brand's preference for gentle, human-scaled curves. Primary CTAs use lg (16px) to sign

Components

Action Elements Primary buttons use cobalt blue (#2142e7) background with white text, 14px label-md typography, 600 weight, 16px border-radius, and 10px vertical / 16px horizontal padding (40px total height). On hover, the background shifts to the inverse-primary (#4460ed) with a 150ms cubic-bezier(0.4, 0, 0.2, 1) transition. Secondary buttons maintain a transparent background with a 1px outline-variant border, primary text color, and identical padding/radius; on hover, they fill with surface-container-high (#d1d5db). Ghost buttons use rgba(255, 255, 255, 0.05) background and primary text; on hover, the background increases to rgba(255, 255, 255, 0.1). All buttons disable the user-select property to prevent accidental text selection during interaction.

Containers & Surfaces Cards

Do's and Don'ts

**Do**

• Do use cobalt blue (#2142e7) exclusively for primary CTAs and active states—it's the brand's signature and should never be diluted or overused on secondary elements.
• Do maintain 24px gutters and lg spacing (40px) between major sections to preserve the clarity-first aesthetic and prevent visual clutter.
• Do apply negative letter-spacing (-0.02em to -0.005em) to all headings to tighten their appearance and reinforce hierarchy.
• Do use the md elevation shadow stack (0px 2px 2px -1px rgba(17, 24, 39, 0.05), 0px 4px 4px -2px rgba(17, 24, 39, 0.05)) for hover states on cards to create a tactile lift without harshness.
• Do set body text to 16px with 24px line-height and 400 weight for optimal readability at typical screen distances.
• Do use 1px borders at rgba(17, 24, 39, 0.10) for card separation—this is the brand's standard divider weight and color.

**Don't**

• Don't use the primary blue (#2142e7) for body text, backgrounds, or non-interactive elements—reserve it for CTAs and active states only.
• Don't apply border-radius larger than 24px (xl) to standard cards or buttons; the brand uses technical softness, not bubbly shapes.
• Don't use shadows darker than rgba(17, 24, 39, 0.03) for standard cards; Arcade's elevation is subtle and respects the clarity-first philosophy.
• Don't mix Inter with other typefaces in body copy; the system is monolithic and any deviation breaks the precision aesthetic.
• Don't use the secondary cyan (#03b5ed) as a primary accent or CTA color—it's a supporting accent for secondary actions and highlights only.
• Don't apply text-shadow to body text; reserve it for small labels (12–14px) over busy backgrounds or gradients only.