# Arc Browser

비비드 블루-퍼플 그래디언트와 프로스티드 글래스 패널이 만드는 미래적 브라우저 UI — 투명도와 블러가 깊이감을 연출한다.

- taxonomy: glassmorphism · glass-panel, blue-gradient, frosted-blur, browser-ui, futuristic, vibrant-hero, transparency · complexity=high
- page types: landing, marketing, app
- best for: 소프트웨어 제품 랜딩, 미래적 기술 마케팅, 글래스 효과 UI 앱, 비비드 히어로 섹션
- avoid for: 전통적 기업 사이트, 텍스트 중심 문서, 레트로·빈티지 브랜드, 저사양 기기 대상 서비스
- provenance: website (Arc from The Browser Company) — confidence: colors=computed-css, typography=computed-css, radius=computed-css, color_roles=vision-inferred, taxonomy=vision-inferred, dark=vision-inferred, light=computed-css

## Design rules

# Arc Browser — Design Specification

## Overview
Arc's landing page is a masterclass in modern glassmorphism. A vivid blue-purple gradient (#3139fb → #2702c2) dominates the hero, while frosted glass panels (backdrop-filter: blur) create depth. The warm creamy canvas (#fffcec) provides contrast in non-gradient sections.

## Color Architecture
- **Gradient**: Vivid blue oklch(0.499 0.274 269) → deep purple oklch(0.382 0.246 271)
- **Glass**: Semi-transparent white (rgba 255,255,255,0.7) with 20px blur
- **Canvas**: Warm cream oklch(0.989 0.021 98.1) for light sections
- **CTA**: Dark (near-black) pill buttons for contrast

## Signature Elements
- Large radius everywhere (12-20px)
- Frosted glass cards with backdrop-filter: blur(20px)
- Vivid gradient hero backgrounds
- Dark pill CTA buttons
- Generous whitespace

## Agent Prompt Guide
> Vivid blue-purple gradient hero, glass panels with blur, large radius, cream canvas, dark pill CTAs. Airy, premium, futuristic.

## Known Gaps
- Glass effects require modern browser support
- Dark mode is synthesized
- Gradient colors approximate due to dynamic CSS


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Arc Browser — theme.css (generated, do not edit) */
:root {
  --radius: 20px;
  --radius-selector: 12px;
  --radius-field: 12px;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: SF Mono, monospace;
  --spacing: 8px;
  --shadow: 0px 1px 40px 0px color-mix(in oklab, oklch(0.3 0.1 270) 20%, transparent);
  --ks-display-weight: 700;
  --ks-display-tracking: -0.02em;
  --background: oklch(0.989 0.021 98.1);
  --foreground: oklch(0.000 0.000 0);
  --card: oklch(1.000 0.000 0 / 0.7);
  --card-foreground: oklch(0.000 0.000 0);
  --popover: oklch(1.000 0.000 0 / 0.8);
  --popover-foreground: oklch(0.000 0.000 0);
  --primary: oklch(0.200 0.010 260);
  --primary-foreground: oklch(1.000 0.000 0);
  --secondary: oklch(0.950 0.015 98);
  --secondary-foreground: oklch(0.300 0.010 260);
  --muted: oklch(0.940 0.010 260);
  --muted-foreground: oklch(0.500 0.010 260);
  --accent: oklch(0.499 0.274 269.3);
  --accent-foreground: oklch(1.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.900 0.010 260 / 0.5);
  --input: oklch(1.000 0.000 0 / 0.6);
  --ring: oklch(0.499 0.274 269.3);
}

.dark {
  --background: oklch(0.150 0.020 270);
  --foreground: oklch(0.989 0.021 98.1);
  --card: oklch(0.200 0.020 270 / 0.7);
  --card-foreground: oklch(0.989 0.021 98.1);
  --popover: oklch(0.200 0.020 270 / 0.8);
  --popover-foreground: oklch(0.989 0.021 98.1);
  --primary: oklch(0.989 0.021 98.1);
  --primary-foreground: oklch(0.150 0.020 270);
  --secondary: oklch(0.250 0.020 270);
  --secondary-foreground: oklch(0.800 0.010 260);
  --muted: oklch(0.250 0.015 270);
  --muted-foreground: oklch(0.600 0.010 270);
  --accent: oklch(0.499 0.274 269.3);
  --accent-foreground: oklch(1.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.350 0.015 270 / 0.5);
  --input: oklch(0.250 0.015 270 / 0.6);
  --ring: oklch(0.499 0.274 269.3);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<section style="background: linear-gradient(135deg, var(--accent), oklch(0.382 0.246 271.5)); color: white; padding: 6rem 2rem; text-align: center;">
  <h1 style="font-size: 3.5rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.75rem;">Meet Dia, the next<br>evolution of Arc</h1>
  <p style="font-size: 1.125rem; opacity: 0.85; margin-bottom: 2rem;">Weekly security updates, SOC 2 certification, and the Arc DNA you know.</p>
  <a href="#" style="display: inline-flex; align-items: center; gap: 0.75rem; background: var(--primary); color: var(--primary-foreground); padding: 1rem 2rem; border-radius: 16px; font-weight: 600; font-size: 1.125rem; text-decoration: none;">Try Dia →</a>
</section>
<section style="background: var(--background); padding: 4rem 2rem;">
  <div style="max-width: 800px; margin: 0 auto; background: rgba(255,255,255,0.7); backdrop-filter: blur(20px); border-radius: 20px; padding: 2rem; border: 1px solid rgba(255,255,255,0.3);">
    <h2 style="color: var(--foreground); font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem;">Your browser, reimagined</h2>
    <p style="color: var(--muted-foreground); font-size: 1rem; line-height: 1.6;">A browser built for the way you use the internet in 2026. Spaces, profiles, and an AI assistant that knows your tabs.</p>
  </div>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/arc.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.