--- version: alpha name: Opera description: A bright white canvas washed in warm-amber and vivid-violet radial glows, Be Vietnam Pro at weight-900 for all display work, and a saturated electric-violet primary that handles every CTA — a browser brand that reads equal parts tech-forward and warmly approachable. colors: # Surface / canvas background: "#ffffff" surface: "#ffffff" surface-muted: "#f2f5f8" # footer and section band fill surface-hover: "#e7edf1" # nav link hover fill # Ink / text ink: "#000000" # dominant headings + heavy interface text (674 hits) ink-secondary: "#252836" # body copy + secondary links — deep navy-black (--text-secondary) ink-muted: "#666f88" # meta, captions, footer links — slate-cool mid-gray (146 hits) on-primary: "#ffffff" # white text on violet CTA on-dark: "#ffffff" # white text on dark surfaces # Brand accent — electric violet primary: "#5021ff" # the CTA download button; link hover; focus states primary-hover: "#6028ff" # lightened violet on button hover primary-deep: "#3d18cc" # pressed / active variant — darkened violet /* estimated */ primary-container: "#ede8ff" # tinted violet surface for badges, selection /* estimated */ # Gradient glow colors (hero atmosphere — flattened from radial rgba stops) glow-amber: "#ef8d4b" # was rgba(239,141,75,0.23) radial stop — warm amber orb glow-violet: "#5021ff" # was rgba(80,33,255,0.22) radial stop — violet orb glow-magenta: "#f803fd" # was rgba(248,3,253,0.23) CSS var stop — magenta fringe # Borders border: "#d0dbe3" # card edges, divider lines (208,219,227) border-accent: "#666f88" # accent outline border on secondary links/buttons # Shadow tints shadow-soft: "#000000" # was rgba(0,0,0,0.1) — Google format requires hex shadow-deep: "#000000" # was rgba(0,0,0,0.15) — Google format requires hex typography: display-hero: fontFamily: "'Be Vietnam Pro', 'Be Vietnam Pro Fallback', Roboto, sans-serif" fontSize: 79px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.28px display: fontFamily: "'Be Vietnam Pro', 'Be Vietnam Pro Fallback', Roboto, sans-serif" fontSize: 67px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.28px heading-section: fontFamily: "'Be Vietnam Pro', 'Be Vietnam Pro Fallback', Roboto, sans-serif" fontSize: 45px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.28px heading-sub: fontFamily: "'Be Vietnam Pro', 'Be Vietnam Pro Fallback', Roboto, sans-serif" fontSize: 28px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0px heading-label: fontFamily: "'Space Mono', 'Roboto Mono', 'Courier New', monospace" fontSize: 25px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.28px body-large: fontFamily: "'Be Vietnam Pro', 'Be Vietnam Pro Fallback', Roboto, sans-serif" fontSize: 34px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.28px body: fontFamily: "'Be Vietnam Pro', 'Be Vietnam Pro Fallback', Roboto, sans-serif" fontSize: 22px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.42px body-small: fontFamily: "'Be Vietnam Pro', 'Be Vietnam Pro Fallback', Roboto, sans-serif" fontSize: 17px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.28px nav-link: fontFamily: "'Be Vietnam Pro', 'Be Vietnam Pro Fallback', Roboto, sans-serif" fontSize: 17px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.42px button-ui: fontFamily: "'Be Vietnam Pro', 'Be Vietnam Pro Fallback', Roboto, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.42px button-mono: fontFamily: "'Space Mono', 'Roboto Mono', 'Courier New', monospace" fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.42px caption: fontFamily: "'Be Vietnam Pro', 'Be Vietnam Pro Fallback', Roboto, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.28px spacing: xs: 4px sm: 8px md: 14px lg: 22px xl: 34px 2xl: 45px 3xl: 67px 4xl: 107px 5xl: 135px rounded: none: 0px sm: 6px md: 14px lg: 17px xl: 22px 2xl: 45px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.xl}" padding: 17px 34px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.xl}" padding: 17px 34px button-primary-active: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.xl}" padding: 17px 34px button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink-secondary}" typography: "{typography.button-ui}" rounded: "{rounded.xl}" padding: 14px 28px button-secondary-hover: backgroundColor: "{colors.surface-hover}" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.xl}" padding: 14px 28px button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.xl}" padding: 14px 28px button-ghost-hover: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary-deep}" typography: "{typography.button-ui}" rounded: "{rounded.xl}" padding: 14px 28px button-mono: backgroundColor: "{colors.background}" textColor: "{colors.ink-secondary}" typography: "{typography.button-mono}" rounded: "{rounded.xl}" padding: 14px 28px nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 14px 22px nav-link: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.lg}" padding: 8px 14px nav-link-hover: backgroundColor: "{colors.surface-hover}" textColor: "{colors.primary}" typography: "{typography.nav-link}" rounded: "{rounded.lg}" padding: 8px 14px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink-secondary}" rounded: "{rounded.2xl}" padding: 34px card-muted: backgroundColor: "{colors.surface-muted}" textColor: "{colors.ink-secondary}" rounded: "{rounded.2xl}" padding: 34px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body-small}" rounded: "{rounded.xl}" padding: 14px 28px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body-small}" rounded: "{rounded.xl}" padding: 14px 28px badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: 4px 10px badge-dark: backgroundColor: "{colors.ink-secondary}" textColor: "{colors.on-dark}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: 4px 10px --- # Opera Design System ## Overview Opera's homepage opens on pure white (`{colors.background}`) and immediately breaks the browser-brand mold with a hero unlike its competitors: instead of product screenshots centered in blue light, a warm, atmospheric radial glow fills the canvas — a soft amber orb (`{colors.glow-amber}`) and an electric violet bloom (`{colors.glow-violet}`) overlaid at low opacity behind the headline "Your personal browser." The palette effect is cinematic and surprisingly warm for a tech product — more sunrise than screengrab — and it casts the floating browser product mockup in a genuinely flattering light. The typography is the system's other defining commitment: **Be Vietnam Pro** at weight 900 carries every headline from 79px down to 28px. The result is a voice that reads bold but not aggressive — weight-900 on a round, humanist letterform (which Be Vietnam Pro is) creates confident density without the coldness of a compressed grotesque. Titles like "Your personal browser" or "Browsing the way it should be" read punchy and human at the same time. For a rare accent, **Space Mono** appears in UI labels and comparison chips — all-caps, monospaced, uppercase — lending a technical counterpoint that whispers "browser product" without dominating. The combination is unusual in browser marketing and distinctly Opera. Color is restrained to a single electric accent: `{colors.primary}`, a saturated blue-violet (`#5021ff`), handles all CTAs, interactive link hover states, and focus signals. The "Download now" CTA is an amply padded rounded button at `{rounded.xl}` radius — not pill-shaped, but softly rounded — delivering the primary action with substance. Everything else is the near-black ink family (`{colors.ink}`, `{colors.ink-secondary}`) or the muted cool-gray tertiary (`{colors.ink-muted}`). The system is disciplined: the violet only appears where action is required. **Key Characteristics:** - White canvas (`{colors.background}`) with an atmospheric hero: two overlapping radial glows (warm amber `{colors.glow-amber}` + vivid violet `{colors.glow-violet}`) at low opacity - **Be Vietnam Pro** weight 900 for all headings — round humanist sans that reads bold and friendly, not severe - **Space Mono** as a technical accent — uppercase monospace for comparison labels, feature chips, and UI callouts - Single electric-violet accent (`{colors.primary}`) handling all download CTAs, link hovers, and focus rings - `{rounded.xl}` (22px) on primary CTAs — substantial rounded corners, not pill-shaped; image cards use extra-large `{rounded.2xl}` (45px) - Deep navy-black ink (`{colors.ink-secondary}`) for body copy — warmer than pure black, rooted in `#252836` - Footer and section bands in cool-tinted surface (`{colors.surface-muted}`) — separating zones without hard borders - Soft, diffuse drop shadows at low opacity (`0 14px 42px rgba(0,0,0,0.1)`) — elevation without drama - Self-hosted font delivery — Be Vietnam Pro woff2 files, no Google Fonts CDN dependency - 1px `{colors.border}` (cool-gray) borders for card edges and divider lines ## Colors ### Surface & Canvas - **White** (`{colors.background}`): The dominant canvas. Nearly every section sits on bright white — clean, open, modern. - **Cool Tint** (`{colors.surface-muted}`): The footer and select section bands use a faint blue-gray fill to segment content without a hard line. - **Hover Fill** (`{colors.surface-hover}`): Nav link hover backgrounds and secondary interactive surface — a step darker than the surface tint. ### Ink / Text - **Near-Black** (`{colors.ink}`): Pure `#000000` for display headlines and the heaviest weight interface elements (674 extracted hits). - **Deep Navy-Black** (`{colors.ink-secondary}`): Body copy and secondary text at `#252836` — a desaturated navy that reads warmer and less stark than pure black. - **Slate-Cool Gray** (`{colors.ink-muted}`): Tertiary text, meta, footer links — sits between mid-gray and blue-slate. ### Brand Accent - **Electric Violet** (`{colors.primary}`): Opera's single brand accent. Every download CTA, every hover link, every focus signal. `#5021ff` is a vivid, high-saturation blue-violet — distinct from the blurpier purples of competitors. - **Violet Hover** (`{colors.primary-hover}`): Button hover state — slightly lighter, reading as responsive feedback. - **Violet Deep** (`{colors.primary-deep}`): Active / pressed state — darkened for physical click impression. - **Violet Container** (`{colors.primary-container}`): Tinted background for badges, ghost button fills, and selection surfaces. ### Gradient Glow Colors (hero atmosphere) The hero uses two overlapping radial gradients fading to transparent — atmospheric, not structural: - `{colors.glow-amber}`: Warm amber orb (flattened from `rgba(239,141,75,0.23)`) — seats in the left-center - `{colors.glow-violet}`: Electric violet orb (flattened from `rgba(80,33,255,0.22)`) — bleeds from the right - `{colors.glow-magenta}`: Magenta fringe (CSS var `--hero-glow-1-color-1`, flattened from `rgba(248,3,253,0.23)`) — peripheral atmospheric tint ### Borders & Shadows - **Border** (`{colors.border}`): The cool-gray `#d0dbe3` hairline used on card edges and horizontal dividers. - **Accent Border** (`{colors.border-accent}`): The `#666f88` slate used for outline secondary buttons. - **Shadow Tints** (`{colors.shadow-soft}`, `{colors.shadow-deep}`): Black-based, converted from low-opacity rgba originals. ## Typography ### Font Family - **Primary Display & UI**: `Be Vietnam Pro` — a rounded humanist sans with a wide weight range (400–900). Self-hosted (4 woff2 files, no Google Fonts CDN). Fallbacks: `Be Vietnam Pro Fallback, Roboto, sans-serif`. Weight 900 is the signature display weight; weight 400 for body. - **Technical Accent**: `Space Mono` — a monospaced slab with geometric character, used in uppercase for comparison labels and feature callouts. Fallbacks: `Roboto Mono, Courier New`. ### Hierarchy The complete type scale lives in the `typography:` token block above. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | 79px / 900 — main hero headline ("Your personal browser") | | `display` | 67px / 900 — large section headlines | | `heading-section` | 45px / 900 — feature section titles | | `heading-sub` | 28px / 900 — card headings, feature titles, sub-section openers | | `heading-label` | 25px / 700 Space Mono uppercase — comparison labels, technical callouts | | `body-large` | 34px / 400 — prominent intro paragraphs, lead copy | | `body` | 22px / 400 — standard body paragraphs | | `body-small` | 17px / 400 — supporting body, nav item labels | | `nav-link` | 17px / 700 — primary navigation links | | `button-ui` | 20px / 700 — primary download CTA | | `button-mono` | 17px / 700 Space Mono uppercase — secondary technical CTAs | | `caption` | 14px / 400 — meta labels, footnotes, badge text | ### Principles - **Weight 900 is the singular display voice**: Be Vietnam Pro at 900 across all headlines creates unified typographic authority from hero to card heading without needing a separate display typeface. - **Space Mono as editorial counterpoint**: when the system needs to say "technical" or "product," the monospace uppercase takes over — a deliberate contrast to the humanist warmth of Be Vietnam Pro. - **No intermediate weights for headings**: it's weight 900 for headings, 700 for navigation and UI labels, 400 for body. No 300 or 500 in the headline stack. - **Letter-spacing stays tight**: 0.28px at large display sizes, 0.42px at smaller body sizes — barely-there tracking, never wide-spaced. - **Body copy at generous line-height**: 1.5 across body sizes keeps extended reading comfortable. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: ~14px (the most-counted computed spacing value in extraction, mapped to `{spacing.md}`). Opera's spacing rhythm is generous and content-forward. `{spacing.lg}` (22px) governs component-level gaps; `{spacing.xl}` (34px) is the standard section internal padding; `{spacing.4xl}` and `{spacing.5xl}` (107–135px) provide the deep breathing room between major hero sections. ### Grid & Container - Max content width: approximately 1224–1366px (the densest breakpoint cluster) - Desktop: centered hero column, multi-column feature grid below - Navigation: fixed white bar, logo-left, categories center, download CTA right - Full-width hero: browser product mockup floats at 45px radius on an atmospheric gradient background ### Whitespace Philosophy - **Canvas-first openness**: the white ground plus the large radii on image containers (`{rounded.2xl}`) give every feature section room to breathe without visual crowding. - **Section bands over hard borders**: color transitions from white to `{colors.surface-muted}` separate zones with a gentle tonal shift, not a divider line. - **Generous button padding**: the primary CTA uses 17px × 34px — substantial, not compact — matching the weight of the Be Vietnam Pro 900 label inside it. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Page text, nav bar, section bands | | Subtle (Level 1) | `0 4px 4px 0 rgba(0,0,0,0.1)` | Small hover surfaces, lightweight cards | | Card (Level 2) | `0 14px 42px 0 rgba(0,0,0,0.1)` | Main feature cards, floating panels | | Elevated (Level 3) | `0 21px 70px 0 rgba(0,0,0,0.15)` | Hero product mockup, modal-adjacent surfaces | | Focus Ring | `0 0 0 2px {colors.primary}` | Keyboard focus — electric violet outline | **Shadow Philosophy**: Opera's shadows are soft, diffuse, and restrained. The signature is a `0 14–21px` offset with a large spread at low opacity (10–15%) — more atmospheric halo than structural edge. The hero mockup floats on the atmospheric gradient glow rather than a hard shadow. Nothing in the system draws attention to depth itself; elevation is implied, not announced. ## Shapes The complete radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Full-bleed hero backgrounds, nav bar edges | | `sm` | 6px | Small badges, tight chips | | `md` | 14px | Secondary interactive elements, small cards | | `lg` | 17px | Cards, dropdown menus | | `xl` | 22px | Primary CTA buttons, select inputs — the signature action radius | | `2xl` | 45px | Image containers, large feature cards — generous large-form rounding | | `pill` | 9999px | Avatar thumbnails, round status indicators | Opera uses a **two-tier radius system**: `{rounded.xl}` (22px) is the standard action-element radius for CTAs and controls, while `{rounded.2xl}` (45px) applies to image and card containers for a distinctly modern, expansive feel. The contrast between these two tiers — crisp but rounded buttons inside generously curved image frames — is one of Opera's most recognizable visual signatures. ## Components The complete component spec lives in the `components:` token block above. ### Button Variants - **`button-primary`** — Electric violet (`{colors.primary}`) fill, white text, `{rounded.xl}` (22px) radius, Be Vietnam Pro 20px/700. Opera's "Download now" CTA. Hover shifts to `{colors.primary-hover}`; active darkens to `{colors.primary-deep}`. - **`button-secondary`** — White fill, navy-black text, same `{rounded.xl}` radius. Hover fills with `{colors.surface-hover}` and text turns violet. Used for "See more" and lower-priority actions. - **`button-ghost`** — White/transparent fill, electric violet text and border. For in-context CTAs within content sections. - **`button-mono`** — Be Vietnam Pro replaced by Space Mono, uppercase. Used for technical survey or comparison CTAs — "Take Survey" style. ### Cards - **`card`** — White surface, `{rounded.2xl}` (45px) radius, soft drop shadow. Feature content cards use this large radius prominently. - **`card-muted`** — Cool-tint `{colors.surface-muted}` fill. Used for footer areas and alternating section bands. ### Inputs - **`input`** — White fill, no visible border at rest, `{rounded.xl}` radius, light placeholder text. Gains violet focus ring on **`input-focus`**. ### Badges - **`badge`** — Violet container tint (`{colors.primary-container}`) with violet text — feature flags, "New" markers. - **`badge-dark`** — Deep navy-black fill with white text — inverted badges for dark section contexts. ### Navigation - **`nav-bar`** — Fixed white bar, no radius; Be Vietnam Pro 17px/700 nav links in near-black. Each link uses `{rounded.lg}` radius on hover fill (`{colors.surface-hover}`) and shifts text to violet (`{colors.primary}`). The CTA button on the right is full-weight electric violet. ## Do's and Don'ts ### Do - Use `{colors.primary}` (`#5021ff`) exclusively for interactive signals — CTAs, hover states, focus rings; its visual weight means one appearance per CTA row is sufficient - Set all display headlines in Be Vietnam Pro weight 900 — the rounded 900-weight is the brand's primary visual voice - Use `{rounded.xl}` (22px) for buttons and form controls; reserve `{rounded.2xl}` (45px) for image containers and large cards - Layer hero atmosphere with two overlapping low-opacity radial gradients: warm amber (`{colors.glow-amber}`) center-left, electric violet (`{colors.glow-violet}`) right — both below 25% opacity - Use Space Mono uppercase for technical callouts, comparison labels, and product-feature chips where precision matters more than warmth - Keep body copy at Be Vietnam Pro 400 / 1.5 line-height for readable, comfortable paragraphs - Use `{colors.ink-secondary}` (`#252836`) for body text — never pure black for running copy; the navy-tinted ink reads warmer - Give primary CTAs substantial padding (`17px 34px`) — undersized padding collapses the authority of the button ### Don't - Don't introduce a second accent color alongside `{colors.primary}` — the single violet is the entire interactive language - Don't use pill-shaped buttons (`{rounded.pill}`) — Opera's system is specifically `{rounded.xl}` for actions, not fully round - Don't apply Be Vietnam Pro weight 900 to body copy — reserve extreme weight for display headings only - Don't use hard drop shadows — Opera's elevation is soft, wide, and diffuse; tight box-shadows read out of character - Don't replace Space Mono with another monospace face — the distinctive geometric slab character of Space Mono is intentional - Don't overuse the gradient glows — the hero's atmospheric effect requires low opacity and targeting specific radial positions; filling entire sections turns cinematic into muddy - Don't add mid-range radii (8–12px) between `{rounded.sm}` and `{rounded.xl}` — the system's radius language is tiered, not graduated - Don't omit the `{colors.ink-secondary}` step — running body copy in pure `{colors.ink}` (black) loses the warmth that distinguishes Opera's reading experience --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <640px | Single column; hero display scales 79px → ~36px; nav collapses to hamburger; CTA full-width | | Mobile | 640–768px | Stacked single column; feature grid is 1-column; atmospheric glows simplify | | Tablet | 769–1024px | 2-column feature grid; horizontal nav returns; hero mockup at reduced scale | | Desktop | 1024–1224px | Full centered layout; full hero composition with floating mockup | | Large Desktop | >1366px | Content centered with generous white margins; spacing opens toward `{spacing.5xl}` | ### Touch Targets - Primary CTA ("Download now") at 17px × 34px padding runs comfortably over 44px tall — easy thumb target - Nav links carry generous 8px × 14px padding with readable 17px type - Cards have 34px internal padding providing clear tap regions ### Collapsing Strategy - **Navigation**: horizontal fixed bar collapses to hamburger; violet download CTA persists - **Hero**: Be Vietnam Pro 900 headline reflows and scales down; atmospheric gradient simplifies to single orb; CTA stacks beneath headline - **Display type**: 79px hero scales to ~36px on mobile while maintaining weight-900 for brand continuity - **Spacing**: section gaps compress from `{spacing.5xl}` (135px) toward `{spacing.3xl}` (67px) at tablet - **Feature grids**: 3-column collapses to 2 at tablet, then 1 at mobile ### Image Behavior - Browser product mockup keeps `{rounded.2xl}` radius at all sizes - On mobile, the desktop-viewport screenshot shrinks proportionally; horizontal scroll avoided - Feature images reflow as flex/grid children with consistent radius treatment --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (#ffffff) — pure white - Text / headlines: `{colors.ink}` (#000000) — near-black for display; `{colors.ink-secondary}` (#252836) for body - Secondary text: `{colors.ink-muted}` (#666f88) — slate-cool gray - Brand accent / CTA: `{colors.primary}` (#5021ff) — electric violet - CTA hover: `{colors.primary-hover}` (#6028ff) - Surface band: `{colors.surface-muted}` (#f2f5f8) - Border: `{colors.border}` (#d0dbe3) — cool-gray hairline - Focus ring: `{colors.primary}` (#5021ff), 2px ### Example Component Prompts - "Create an Opera hero section: pure white background (`{colors.background}`). Layer two low-opacity radial gradients at ~23%: warm amber (`{colors.glow-amber}`) centered left, electric violet (`{colors.glow-violet}`) bleeding from the right. Headline: Be Vietnam Pro 79px weight 900, near-black (`{colors.ink}`), line-height 1.0. Below: secondary body in Be Vietnam Pro 22px weight 400, `{colors.ink-secondary}`, line-height 1.5. Primary CTA: electric violet fill (`{colors.primary}`), white text (`{colors.on-primary}`), `{rounded.xl}` (22px) radius, 17px 34px padding, Be Vietnam Pro 20px/700." - "Build an Opera feature card: white surface (`{colors.surface}`), `{rounded.2xl}` (45px) border-radius, soft drop shadow `0 14px 42px rgba(0,0,0,0.1)`, 34px padding. Heading: Be Vietnam Pro 28px weight 900, `{colors.ink}`. Body: Be Vietnam Pro 17px weight 400, `{colors.ink-secondary}`, line-height 1.5. No visible border at rest." - "Design an Opera navigation bar: fixed white background (`{colors.background}`), no border-radius. Logo left. Nav links center: Be Vietnam Pro 17px/700 (`{typography.nav-link}`), `{colors.ink}` at rest; hover fills `{colors.surface-hover}` with `{rounded.lg}` (17px) corner, text shifts to `{colors.primary}`. Right: violet CTA button (`{colors.primary}` fill, white text, `{rounded.xl}`, Be Vietnam Pro 17px/700)." - "Create an Opera comparison label using Space Mono: uppercase `{typography.heading-label}` (Space Mono 25px/700 uppercase), `{colors.ink-secondary}` text on `{colors.surface-muted}` background, `{rounded.sm}` (6px) radius, 4px 10px padding — technical monospace badge against the humanist main type." - "Render an Opera feature section: alternating bands — white (`{colors.background}`) and cool-tint (`{colors.surface-muted}`). Within each band: Be Vietnam Pro 45px/900 section heading (`{colors.ink}`), then a 3-column grid of cards (`{rounded.2xl}`, white fill, soft `0 14px 42px` shadow, 34px padding). Card CTAs in electric violet ghost style: `{colors.primary}` text, no fill, `{rounded.xl}` radius." ### Iteration Guide 1. **Start on pure white** (`{colors.background}`). The canvas is a blank stage; the atmospheric gradient glow belongs only in the hero — not repeated in feature sections. 2. **Hero gradient: two orbs at low opacity.** Warm amber (`{colors.glow-amber}`) left, electric violet (`{colors.glow-violet}`) right, both at ~22–23% opacity fading to transparent. Any more saturation and the cinematic quality collapses into noise. 3. **All headings: Be Vietnam Pro weight 900.** From 79px hero to 28px card heading, weight 900 is non-negotiable. Body and UI labels drop to 700 or 400 — never 900 below heading level. 4. **One accent color.** `{colors.primary}` (#5021ff) is the only interactive signal. Every CTA, every hover, every focus indicator uses this violet and nothing else. 5. **Action radius = `{rounded.xl}` (22px). Image radius = `{rounded.2xl}` (45px).** These two tiers define the system's shape vocabulary — don't introduce values between them. 6. **Shadows stay soft and diffuse**: `0 14–21px` offset, large spread, 10–15% black. Hard or close shadows read out of character. 7. **Space Mono is the technical voice**: deploy it for monospace labels, comparison chips, and "product-spec" callouts — sparingly, always uppercase. It contrasts Be Vietnam Pro's humanist warmth with precision. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Opera. Brand names and trademarks belong to their respective owners.