# Design Reference - Arcade
> 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.

## Source
- Original site: https://arcade.software
- Captured: 2026-04-11T18:38:37.517Z

## Tags
- clean
- professional
- minimal
- blue-accent
- rounded-corners
- subtle-shadows
- data-driven
- clear-hierarchy
- inter

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Canvas White | `#ffffff` | neutral | Page backgrounds, card surfaces, button backgrounds, primary text on dark elements. |
| Whisper Gray | `#f9fafb` | neutral | Subtle background for UI elements and slight section differentiation. |
| Outline Ash | `#e5e7eb` | neutral | Primary border color for buttons and input fields, indicating interactive boundaries. |
| Graphite Text | `#111827` | neutral | 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. |
| Slate Text | `#4b5563` | neutral | Secondary text color for body copy, subheadings, and muted links. Provides visual hierarchy by being less dominant than Graphite Text. |
| Silver Text | `#374151` | neutral | Decorative text in navigation and links. A slightly lighter nuance than Slate Text. |
| Steel Accent | `#70747d` | neutral | Subtle secondary text, border colors, and subtle button states, providing softer visual cues. |
| Arcade Blue | `#2142e7` | brand | Primary brand color for calls to action, active states, and focus indicators. Its vivid nature stands out against the muted neutral palette. |
| Deep Blue Shadow | `#182fa5` | brand | Darker shade of Arcade Blue used for button borders and subtle shadows, adding depth to interactive elements. |
| Dark Gradient Base | `#111827` | brand | Base color for complex background gradients, often appearing in hero sections or prominent content blocks. Paired with gradient accents. |
| Blue Gradient Accent | `#2142e7` | brand | Vivd blue accent within gradients, creating dynamic energy within dark sections, used in banners and hero elements. |

## 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

## Spacing And Radius
```json
{
  "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"
  }
}
```

## Component Patterns
- name: Hero URL Input with Tab Selector
- name: Team Tab Selector with Feature List
- name: CTA Button Group
- 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

## 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.

## Don't
- 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.