Aloha Browser

Overview

Aloha Browser is a privacy-first web browser that combines security, speed, and accessibility through a vibrant, optimistic visual language. The design system embraces a "Playful Minimalism" aesthetic—bold primary blues (#0756CC) paired with energetic secondary accents (lime green #CEF976, hot pink #FF7DCC) create an interface that feels modern and trustworthy while remaining approachable and non-intimidating. The brand serves users who demand privacy without sacrificing ease of use, and the UI reflects this through generous spacing (60px padding on hero cards), large readable typography (96px display headlines), and rounded corners (36px on major containers) that soften technical complexity.

The voice is confident, direct, and human. Aloha speaks in active, benefit-driven language: "Get Aloha Browser" (not "Download Now"), "Aloha stands for the freedom of users to be online privately" (not "We provide privacy solutions"). The tone avoids corporate jargon and security theater; instead, it emphasizes liberation and simplicity. Example sentence in brand voice: "Your privacy isn't a feature we bolt on—it's built into every tap."

Colors

The color system is built on a foundation of clean white surfaces (#ffffff) with a vibrant primary blue (#0756CC) as the signature accent. This primary blue appears on all call-to-action buttons, navigation highlights, and interactive focus states. It conveys trust and security while remaining energetic and modern. The secondary palette introduces playful energy: lime green (#CEF976) for success states and positive reinforcement, hot pink (#FF7DCC) for premium/upgrade prompts, and warm orange (#FF8039) for alerts. Surface colors follow a strict hierarchy: the base is pure white (#ffffff), with container variants stepping down through #f7fafc (surface-dim) → #ecf3f8 (surface-container-low) → #cbd5df (surface-container-high), allowing for subtle depth without darkness. Text on white is alway

Typography

The type system is built on PPPangramSans, a geometric sans-serif that conveys modernity and approachability. The hierarchy is steep and intentional: display (96px, 800 weight) for hero headlines creates immediate visual impact; headline-lg (64px, 800 weight) for section titles maintains momentum; headline-md (32px, 700 weight) for subsections; body-lg (32px, 500 weight) for large body copy; body-md (20px, 500 weight) for standard paragraph text; label-md (20px, 700 weight) for buttons and interactive labels; label-sm (16px, 600 weight) for small UI text and metadata. Letter-spacing is tightly controlled: display and headline levels use negative spacing (-2.88px, -1.92px) to create visual density and impact, while body and label text uses positive spacing (0.4px) for legibility. Line-heigh

Layout

The layout system uses a 12-column grid with a fixed max-width of 1410px, centered with auto margins. The page rhythm is built on generous spacing: major sections are separated by lg spacing (40px), while internal card padding uses 60px (matching the hero banner padding), creating a cohesive visual rhythm. The gutter between columns is 16px. Container widths vary by context (1410px for full-width sections, 1158px for content-heavy areas, 970px for narrow columns), but all are centered and never exceed 1410px. White space is treated as a first-class design element: the hero banner has 60px padding on all sides, creating a breathing room that emphasizes the headline. Sections use md spacing (24px) between elements within a card, and lg spacing (40px) between major sections. Mobile breakpoint

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through darkness. The elevation system has three levels: Level 1 (Base) uses no shadow—flat surfaces on white background; Level 2 (Standard Cards) uses box-shadow: 0px 10px 20px 0px rgba(0, 19, 48, 0.10), 0px 1px 6px 0px rgba(0, 19, 48, 0.15), creating a soft, diffused shadow that suggests the card is slightly lifted; Level 3 (Modals and Dropdowns) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a tighter shadow for elements that demand attention. The shadow color is always a dark blue-tinted black (rgba(0, 19, 48, ...)) rather than

Shapes

The shape philosophy is "Rounded Approachability"—curves are used generously to soften the technical nature of a security-focused product, making privacy feel friendly rather than paranoid. The rounded scale progresses from sm (8px) for small UI elements like select dropdowns, to DEFAULT (10px) for standard buttons and inputs, to md (12px) for most interactive elements, to lg (20px) for dropdown menus and secondary containers, to xl (36px) for major card containers and hero banners, and full (9999px) for badges and pill-shaped elements. Buttons use rounded.md (12px) consistently, creating a so

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use backgroundColor: {colors.primary} (#0756CC), textColor: white, padding: 9px 16px 7px, height: 44px, rounded: 12px, fontWeight: 700, fontSize: 20px. On hover, the background shifts to {colors.primary-container} (#1E78FF), maintaining white text. Secondary buttons are transparent with a 1px border in {colors.outline-variant} (#d0d0d0), text in {colors.primary}, and the same padding and height. On hover, the background becomes {colors.surface-container-high} (#cbd5df). Premium buttons ("Get Premium") use backgroundColor: {colors.tertiary} (#FF7DCC), white text, and on hover shift to {colors.tertiary-fixed-dim} (#E240A3). All buttons have a transition: all 0.2s ease applied globally. Focus state adds box-sha

Do's and Don'ts

**Do**

• Do use primary blue (#0756CC) on all primary CTAs and interactive focus states—it's the signature accent that builds brand recognition.
• Do maintain 60px padding on hero cards and major containers; this generous spacing is core to the brand's approachable personality.
• Do apply letter-spacing: -2.88px on display headlines (96px) and -1.92px on headline-lg (64px) to create visual density and impact.
• Do use rounded: 36px on major card containers and rounded: 12px on buttons—this graduated approach softens technical complexity.
• Do pair primary blue with white text on all buttons; never use dark text on blue backgrounds.
• Do apply box-shadow: 0px 10px 20px 0px rgba(0, 19, 48, 0.10), 0px 1px 6px 0px rgba(0, 19, 48, 0.15) on standard cards for consistent elevation.
• Do use PPPangramSans at 800 weight for headlines and 700 weight for buttons—this geometric sans-serif conveys modernity and approachability.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text; always use #001330 (on-surface) for dark text and #ffffff with sufficient contrast on colored backgrounds.
• Don't apply rounded corners smaller than 8px on interactive elements; the brand relies on generous curves to feel approachable.
• Don't use shadows darker than rgba(0, 19, 48, 0.15); the brand avoids harsh shadows that create visual heaviness.
• Don't mix primary blue with secondary green or pink in the same button or interactive element; each color has a distinct role (primary = main action, secondary = success, tertiary = premium).
• Don't reduce padding below 12px on buttons or 16px on cards; white space is essential to the brand's visual rhythm.
• Don't use letter-spacing greater than 0.4px on body text; tight spacing maintains readability and visual cohesion.
• Don't apply focus states without a visible indicator (box-shadow or border change); accessibility requires clear focus indication on all interactive elements.