arcade.la — Design System

1. Visual Theme & Atmosphere

Arcade.la is a creative studio site built in Framer that wears its tool choice openly — and turns it into an advantage. The design vocabulary is minimal to the point of austerity: near-black canvas, white typography, a single typeface, no decorative elements. What makes it distinctive is what’s absent — no color palette, no gradient, no component library complexity. The atmosphere is confident void: a dark room where the work is the only light source. The few interactive moments (link hover adding rgba(255,255,255,0.15) tint) are quiet, barely perceptible gestures.

2. Color Palette & Roles

Backgrounds

• Page/body: rgb(15, 15, 15) — near-absolute black, not quite pure
• Raised surface: rgb(36, 36, 36) — the only visible elevation step
• Frosted/glass element: rgba(255, 255, 255, 0.1) — a single translucent element

Text / Interactive

• Primary text: expected white/near-white (based on dark bg convention; base color was rgb(0,0,0) on body — likely overridden by Framer-generated classes)
• Links: rgb(0, 0, 238) — browser-default blue used intentionally on a dark canvas, a deliberate retro-web gesture

Hover state

• Link hover background: rgba(255, 255, 255, 0.15) — subtle white tint, no color shift

The palette has two effective tones: near-black and near-white. The browser-default link blue is a provocation — not laziness.

3. Typography Rules

Manrope — the sole named typeface. A geometric humanist sans-serif with strong personality across weights. Used for paragraphs and primary content at 14px.

The base body selector falls back to generic sans-serif at 12px — this is Framer’s generated base, not the designed type setting. Manrope at 14px is the actual type system.

• Paragraphs: 14px / 400 / 19.6px line-height (1.4× ratio — comfortable)
• No heading selector extractions — Framer likely uses custom class names for display text
• No mono font — this is a purely prose typographic system
• No letter-spacing adjustments — type is set neutrally

The restraint in the type system matches the visual restraint. Weight variation, if any, would be achieved through Manrope’s full weight range (200–800) but only regular is confirmed.

4. Component Stylings

Links: Browser-default link blue (rgb(0,0,238)) on a dark background creates maximum contrast with an intentionally anti-design feel — referencing early web aesthetics. Hover adds a white tint background without changing text color.

Pill/circular elements: 100px border-radius — full pill, used for buttons or tags.

Structural elements: 2px border-radius — almost square, for cards or frames.

No shadows: Empty shadows array confirms zero drop-shadow usage across all components.

Framer-specific: Component selectors use Framer’s generated class names (.framer-KukGW, .framer-1m8a7i8) — the design is tightly coupled to Framer’s runtime.

5. Layout Principles

Three breakpoints: 799.98px, 800px, and 1399.98px — a Framer convention where pairs of values prevent overlap at exact pixel boundaries. This suggests three layout states: mobile, tablet, desktop.

The body padding: 0px, margin: 0px with footer at 0px gap indicates a layout that allows Framer components to breathe through their own internal spacing rather than a global rhythm system.

No max-width container extracted — likely full-bleed sections with Framer’s internal column constraints.

6. Depth & Elevation

One raised surface at rgb(36,36,36) — 21 luminance points above the canvas. No shadows whatsoever. The rgba(255,255,255,0.1) element (likely a glass card or modal surface) is the only depth gesture. This is an extremely flat design, using darkness itself as the spatial medium.

7. Do’s and Don’ts

Do

• Use the intentional browser-default blue (rgb(0,0,238)) for links — it’s a design choice
• Keep surfaces near-black with minimal differentiation
• Use Manrope for all text; let its humanist character provide warmth
• Apply rgba(255,255,255,0.15) for hover states — never change color or add shadows

Don’t

• Introduce color accents beyond the blue link convention
• Add shadows or gradients — the void aesthetic requires restraint
• Use more than two surface tones
• Fight the Framer-generated structure; work with its spacing system

8. Responsive Behavior

Three breakpoints at ~800px and ~1400px. Framer’s layout engine handles column reflow. At mobile, single-column with full-bleed sections. The minimal design scales cleanly — no complex component recomposition needed. Typography stays at 14px across breakpoints.

9. Agent Prompt Guide

Recreate arcade.la’s design: near-black canvas rgb(15,15,15), single Manrope typeface at 14px regular, no shadows, no color accents except intentional browser-default blue rgb(0,0,238) for links. Two surface tones only. Hover states add rgba(255,255,255,0.15) background — nothing else changes. Full-pill buttons (100px radius) versus near-square structural elements (2px). The design philosophy is confident minimalism: the absence of decisions IS the decision.

Generated by Sparkbites — extracted from live CSS analysis