Opera DESIGN.md

Browser design with red brand energy, polished product families, and expressive but controlled browsing surfaces.

1. Visual Theme & Atmosphere

Opera should feel innovative, fast, and visually expressive. The brand spans Opera Browser, Opera GX, Mini, and other browser products, so the system needs a core red browser identity with room for product-family variation.

• Mood: fast, expressive, polished, browser-native, product-rich
• Density: medium, with feature modules and browser mockups
• Character: red identity, rounded browser frames, dark and light mode support, product assets

2. Color Palette & Roles

Use red for core Opera browser identity. Use purple/cyan only when referencing product-family variation such as GX.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;

4. Component Stylings

css.button-primary {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #FF1B2D;
  border-radius: 999px;
  background: #FF1B2D;
  color: #FFFFFF;
  font: 600 14px/1 Inter, sans-serif;
}

.browser-card {
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  background: #FFFFFF;
  padding: 20px;
}

.dark-browser-frame {
  border-radius: 22px;
  background: #111111;
  color: #FFFFFF;
  padding: 24px;
}

.input {
  min-height: 44px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 0 14px;
}

5. Layout Principles

Use product screenshots, browser frames, and feature cards to explain VPN, AI, sidebar, messenger, and product-family capabilities.

6. Depth & Elevation

css.shadow-card { box-shadow: 0 8px 20px rgba(17, 17, 17, 0.08); }
.shadow-browser { box-shadow: 0 22px 56px rgba(17, 17, 17, 0.18); }

Use stronger depth for browser mockups and lighter depth for feature cards.

7. Do's and Don'ts

Do use red as the primary identity cue. Do distinguish product variants clearly. Do not make every browser surface red. Do not mix GX-style accents into normal Opera pages without purpose.

8. Responsive Behavior

Keep browser mockups responsive and preserve aspect ratios.

9. Agent Prompt Guide

Design like Opera: polished red browser identity, rounded browser frames, clean product cards, dark and light browser surfaces, and expressive product-family accents only where relevant.