orionbrowser.com website design: fonts, colors and UI patterns

Overview

Orion Browser's product site presents a privacy-focused browser through a calm, approachable visual system. The design balances technical credibility with playful personality, using soft purple gradients, generous rounded corners, and whimsical line-art mascot illustrations. The overall impression is clean and modern without feeling sterile—warm gradients transition from a subtle lavender-tinted top into pure white, creating an airy, welcoming atmosphere that supports the product's user-centric messaging.

The visual hierarchy relies on scale contrast between bold semibold headings and comfortable body text, with strategic use of purple accents to guide attention toward calls-to-action. Content is organized into clearly defined cards and sections with consistent internal spacing, making complex feature information digestible. The design language communicates trustworthiness through its restraint—limited color palette, ample whitespace, and systematic use of rounded geometry—while the mascot illustrations and friendly typography prevent the security-focused messaging from feeling intimidating.

Colors

The color system is intentionally restrained, built around a near-monochrome foundation with a distinctive purple accent family. This creates high readability while establishing brand recognition through the violet action color.

The page employs a soft gradient background that transitions from surface-warm at the top to canvas at the bottom, creating a gentle lavender glow that sets the emotional tone without competing with content. This gradient appears on the body level and establishes the site's distinctive atmosphere.

Purple serves as the singular accent family, used for primary calls-to-action, promotional highlights, and the Orion Plus section. The gradient linear-gradient(274deg, #7E4DC5 -28.55%, #B17BB1 136.43%) appears on decorative elements, while solid #914FF2 fills primary buttons. The near-black ink family provides strong contrast for readability, with #191919 reserved for the most prominent headings to soften the visual weight of pure black.

Typography

The typographic system uses Lufga as the sole brand typeface, with Applesystem as a system fallback for minor UI elements. Lufga's geometric sans-serif character supports the friendly, modern tone with excellent legibility across weights.

The weight distinction between Regular (400), Medium (500), and Semibold (600) is used precisely: Regular for body and descriptions, Medium for interactive labels and navigation, and Semibold for all headings. This creates clear hierarchy without introducing additional font families. Line heights are generous at 1.5 for body text, tightening to 1.25 for display headings to maintain compact, impactful titles.

Lufga is designed by Adam Ladd. Verify licensing for these families before production use.

Layout

The layout follows a centered, contained model with generous external margins that create a refined, editorial feel. The main content area is constrained by substantial horizontal margins—228px on each side at desktop scale—producing a narrow, focused reading column that keeps attention on the product messaging.

Vertical rhythm is established through consistent section spacing of 100px between major content blocks, with 80px horizontal padding inside the main container. This creates breathing room that reinforces the premium, unhurried character of the site. Feature grids use a two-column layout with 60px gaps between cards, while individual cards maintain 45px internal padding with 25px gaps between internal elements.

The footer extends this contained approach with matching margin and padding values, adding 200px top margin to separate it dramatically from the main content, plus 100px bottom margin for balanced closure. Internal footer columns use 80px gaps for major groupings and 60px for content clusters, with 16px gaps within tight link groups.

Content cards are the primary organizational unit, appearing as rounded rectangles with 30px corner radius. These cards use surface backgrounds to subtly differentiate from the gradient page canvas without introducing harsh boundaries. The card-based architecture allows flexible content arrangement while maintaining visual consistency across feature descriptions, promotional sections, and informational blocks.

Visual language

The visual personality combines technical precision with approachable warmth. Rounded geometry dominates—30px card corners, 12px button corners, and fully pill-shaped badges create a soft, friendly impression that contrasts with typical sharp-edged browser product sites. This roundedness extends to the mascot illustrations, which use simple line art with occasional solid color fills in purple and black.

Illustrations follow a consistent style: black line drawings with minimal detail, occasionally accented with solid purple or black fills. The astronaut mascot in the Orion Plus section and the Kagi mascot in the footer share this vocabulary—playful, slightly retro, humanizing the technical product. These illustrations are positioned to break the rectangular grid, adding visual interest without disrupting readability.

The gradient system is subtle and restrained. The body gradient moves from warm lavender to pure white, creating an atmospheric depth that feels premium without being flashy. A secondary gradient on decorative spans shifts from deep purple to muted mauve at an oblique angle, adding dimensional interest to small accent elements.

Shadow usage is minimal and functional: a soft rgba(0, 0, 0, 0.14) 0px 1px 28px -4px appears on primary action buttons, providing gentle elevation without the aggressive depth of typical material design. This restraint keeps the interface feeling light and airy.

Iconography in the feature cards uses simple line icons in a muted gray, paired with bold titles and descriptive text. The Kagi services card introduces a solid purple square icon with rounded corners, establishing a secondary icon treatment for brand-specific features.

Components

Feature Card

The feature card is the primary content container, appearing in a two-column grid on the main page.

• Anatomy: Rounded rectangle containing an icon or illustration, bold title, and descriptive paragraph. Some variants include a text-link action at the bottom.
• Surface: surface background (#F7F7F7) with no visible border.
• Typography: Title uses section-display at Semibold weight; description uses body in muted color.
• Shape: 30px border radius on all corners.
• Spacing: 45px internal padding, 25px gap between title and description.
• Composition: Icon positioned above or beside title depending on card type; content left-aligned.
• Variants: Standard feature cards have line icons; the Kagi Services variant uses a solid purple rounded-square icon with the Kagi "g" mark.

Primary Action Button

Used for the main call-to-action in promotional sections.

• Anatomy: Text label with optional arrow icon, rendered as a solid filled button.
• Surface: action background (#914FF2) with canvas text.
• Typography: label token at Medium weight.
• Shape: 12px border radius.
• Spacing: 14px vertical padding, 20px horizontal padding, with 8px gap between text and icon.
• Shadow: Soft elevation shadow rgba(0, 0, 0, 0.14) 0px 1px 28px -4px.
• Composition: Icon follows text, typically a right-pointing arrow or external-link indicator.

Secondary Action Button

Used for subtle actions within feature cards and footer areas.

• Anatomy: Text label with arrow icon on canvas background.
• Surface: canvas background with action-secondary text (#7E4DC5).
• Typography: label token at Medium weight.
• Shape: 12px border radius.
• Spacing: 14px vertical padding, 20px horizontal padding, 8px text-icon gap.
• Composition: Appears inline within cards, left-aligned with card content.

Promotional Panel

A full-width highlighted section for Orion Plus and similar offerings.

• Anatomy: Large rounded container with illustration, eyebrow label, heading, description paragraphs, and primary action button.
• Surface: surface background with 30px radius, or full-bleed gradient in promotional contexts.
• Typography: Eyebrow uses body in muted; heading uses hero-display; body uses body-large in muted.
• Shape: 30px border radius.
• Spacing: 70px internal padding, 50px gap between major elements, 35px above action button.
• Composition: Illustration positioned to the left or above content; text block right-aligned or centered depending on layout.

Footer

The site footer organizes links into clear hierarchical columns.

• Anatomy: Brand mark with tagline, multi-column link groups with headings, and copyright line.
• Surface: Transparent over the page gradient, or canvas at the bottom of the gradient.
• Typography: Column headings use section-display at 18px size; links use legal in muted-light; copyright uses legal in ink-secondary.
• Spacing: 80px gap between major footer zones, 60px between content columns, 15px between list items, 25px below column headings.
• Composition: Brand and tagline left-aligned; link columns in a row with 80px gaps; social and download links include small platform icons with 8px text-icon spacing.

Badge/Pill

Used for category labels and status indicators.

• Surface: surface-warm or light tinted background.
• Typography: label at Medium weight with 0.4px positive letter spacing.
• Shape: Fully rounded pill with 9999px radius.
• Spacing: 16px left padding, 56px right padding for asymmetric pill shapes.

Responsive behavior

The design's generous desktop margins (228px side margins, 80px container padding) suggest a strong desktop-first presentation. At narrower viewports, these margins should collapse progressively—first to 80px total side padding, then to 24px or 16px on mobile devices to maintain readable line lengths without excessive whitespace.

The two-column feature grid should stack to single column on tablet and below, maintaining 45px card padding but reducing internal gaps to 20px for tighter mobile composition. Card corner radii may reduce to 20px on small screens to maintain proportional relationships.

Typography scales down modestly: hero-display should reduce to 1.75rem on mobile, section-display to 1.25rem, preserving hierarchy while optimizing screen usage. Body text remains at 1rem for readability.

The footer multi-column layout should reflow to stacked sections on mobile, with 40px gaps between former columns and maintained 16px internal link spacing. Platform icons in download and social links should remain visible at reduced size.

Promotional panels with side illustrations should stack vertically on narrow screens, with illustration above text and centered alignment replacing the desktop side-by-side composition.

Practical implementation guidance

### Preserve - The soft lavender-to-white body gradient as the signature atmospheric element - Lufga's geometric character across all brand typography; the Medium weight for buttons and labels specifically - 30px card corner radius as the defining shape language - The restrained single-accent palette with purple as the only chromatic color - Generous section spacing (100px) and wide content margins for the premium editorial feel - Mascot illustration style: simple line art with selective solid fills

### Avoid - Introducing additional accent colors that compete with the purple family - Sharpening card corners below 20px; the roundedness is central to the friendly tone - Crowding cards with less than 40px internal padding - Using pure black (#000000) for large headings; prefer #191919 for softer impact - Heavy shadows or borders that contradict the airy, minimal aesthetic

### Recommended Build Order 1. Establish the gradient body background and base Lufga typography at 16px/1.5 line height 2. Implement the main content container with 228px side margins and 80px horizontal padding 3. Build the feature card component with 30px radius, surface background, and 45px padding 4. Create the two-column grid with 60px gaps 5. Add the primary action button with action fill, 12px radius, and soft shadow 6. Construct the promotional panel variant with larger 70px padding 7. Implement the footer with columnar link groups and 200px top margin 8. Fine-tune responsive collapse for margins and grid behavior

### Accessibility - Ensure the action purple (#914FF2) on canvas white meets WCAG AA contrast ratios for text; test specifically for the button label size - The muted gray (#525252) on surface backgrounds should be verified for body text contrast - Maintain focus indicators on rounded buttons that respect the 12px radius shape - Preserve semantic heading hierarchy: h2 for section titles, h3 for card titles - When illustrations convey meaning, provide descriptive alt text or adjacent textual equivalents - The gradient background should not interfere with text readability; ensure sufficient contrast across all gradient positions

Scope note

This guide covers the Orion Browser marketing page's landing and promotional surfaces as visible in the supplied images. Navigation header behavior, mobile menu states, form interactions, download flows, and animation or motion design are not represented. Dark mode variants, additional interior pages, and browser extension UI are outside the current scope.

More website design guides

Browse website design guides by pattern and website.