Navbar Digital

Overview

Navbar Digital embodies a design philosophy rooted in **Technical Minimalism with Neon Accent**—a high-contrast aesthetic that channels the precision of engineering and the boldness of creative disruption. The brand serves ambitious New Zealand businesses seeking to scale through digital innovation, and the UI communicates this through an intentional tension: a deep, near-black canvas (#0a0b0a) paired with an electric lime accent (#c8f02d) that demands attention without apology. The emotional response is one of clarity and forward momentum—the interface feels like a command center for growth, where every interaction is purposeful and every color choice is deliberate. The brand personality is direct, technical, and unapologetically modern. Voice patterns favor active construction ("We build," "We deliver") over passive hedging, and vocabulary leans into concrete outcomes: "rank higher," "convert more," "measurable results." The tone avoids corporate softness; instead, it speaks with the confidence of a team that has shipped products and knows what works. Example sentence in brand voice: "Your website isn't just live—it's engineered to convert."

Colors

The color system operates on a principle of **maximum contrast with strategic accent hierarchy**. Primary (#c8f02d, a vibrant lime-green) is the signature accent reserved exclusively for call-to-action buttons, interactive focus states, and brand-critical UI elements. It appears infrequently but unmistakably, ensuring every primary action stands out against the deep surface (#0a0b0a). Secondary (#36d6e7, a bright cyan) and tertiary (#ff6b5c, a warm coral-red) provide supporting accent colors for data visualization, status indicators, and secondary interactive states—these are used sparingly to maintain visual hierarchy. The surface stack is anchored in near-black: surface (#0a0b0a) is the dominant background, surface-container (#171818) lifts cards and panels slightly, and surface-containe

Typography

The type system pairs **Bricolage Grotesque** (a geometric, high-contrast display font) with **Hanken Grotesk** (a humanist sans-serif for body text), creating a visual hierarchy that separates brand-forward moments from functional content. Bricolage Grotesque is deployed at large sizes (display: 140px, headline-lg: 56px) where its distinctive letterforms command attention—particularly effective for hero headlines and section titles. Hanken Grotesk handles all body copy, labels, and navigation at smaller sizes (body-md: 16px, label-md: 14px), where its open counters and generous spacing ensure legibility on the dark background. The weight distribution is intentional: display and headline levels use 700–800 weight to create visual impact, while body text stays at 400 to maintain readability

Layout

The page grid follows a **12-column fluid layout** with a max-width of 1280px, ensuring the design scales gracefully from mobile (16px gutter on each side) to desktop (24px gutter). Sections are separated using the lg spacing token (40px) vertically, creating a rhythm that feels deliberate without excessive whitespace. The container-max-width of 1280px is enforced on all major content blocks (hero, service cards, testimonials) to prevent text lines from becoming uncomfortably long on ultra-wide displays. Horizontal padding uses the gutter token (24px) consistently, while vertical spacing between sections alternates between md (24px) for tight groupings and lg (40px) for major section breaks. The hero section occupies the full viewport height with a fixed header (16px top padding, 4px horiz

Elevation & Depth

Depth is conveyed through **subtle shadow layering and border definition** rather than dramatic drop-shadows. The elevation system uses three levels: Level 1 (base surface, #0a0b0a) has no shadow; Level 2 (cards and panels, surface-container #171818) applies a soft shadow of 0 4px 12px rgba(0, 0, 0, 0.15) with a 1px solid border at outline-variant (#5f655d) to define edges; Level 3 (modals and overlays, surface-container-high #242525) uses 0 16px 40px rgba(0, 0, 0, 0.2) with a 1px border at outline (#8a8f86). The shadow blur radius increases with elevation (4px for Level 2, 16px for Level 3) t

Shapes

The shape philosophy is **Geometric Precision with Approachable Softness**—a balance between technical sharpness and human-friendly curves. Buttons use full border-radius (9999px) to create pill-shaped forms that feel modern and clickable, signaling interactivity through their distinctive silhouette. Cards and containers use lg radius (16px) to soften corners without appearing overly rounded, maintaining a professional appearance. Input fields and smaller UI elements use DEFAULT radius (8px) for a subtle curve that prevents harsh 90-degree angles. The logo icon uses a combination of radii (0.5

Components

Action Elements Buttons are the primary interaction pattern and come in two main variants. **Button-primary** uses the signature lime accent (#c8f02d) with on-primary text (#0a0b0a), full border-radius (9999px), and padding of 8px 16px for a 44px total height. The label-md typography (14px, 500 weight) ensures text is crisp and legible. On hover, the background shifts to primary-container (#d6ff3a) with a smooth 300ms transition (transition: background-color 300ms ease-in-out), creating a subtle brightening effect. Active state darkens to #b8dd1a to provide tactile feedback. **Button-secondary** uses a transparent background with a 1px border at outline-variant (#5f655d), maintaining the same dimensions and typography as primary. On hover, the background fills with surface-container-hi

Do's and Don'ts

**Do**

• Do use primary (#c8f02d) exclusively for CTAs, focus states, and brand-critical interactive elements—never for body text or passive backgrounds.
• Do maintain the dark surface (#0a0b0a) as the dominant background; use surface-container (#171818) for cards and surface-container-high (#242525) for modals to create clear visual hierarchy.
• Do apply full border-radius (9999px) to all buttons to create instantly recognizable, clickable forms that stand out from other UI elements.
• Do pair Bricolage Grotesque at large sizes (56px+) for headlines and Hanken Grotesk at body sizes (16px and below) to maintain the type hierarchy and ensure legibility.
• Do use the shadow system consistently: Level 2 cards at 0 4px 12px rgba(0, 0, 0, 0.15), Level 3 modals at 0 16px 40px rgba(0, 0, 0, 0.2)—never use drop-shadows on interactive elements like buttons.
• Do reserve secondary (#36d6e7) and tertiary (#ff6b5c) accents for data visualization, status indicators, and semantic color coding—use sparingly to avoid visual noise.

**Don't**

• Don't use primary (#c8f02d) for more than 5–10% of the interface; overuse dilutes its impact and confuses the visual hierarchy.
• Don't apply shadows to buttons or interactive elements—use background color shifts and border changes instead to maintain the clean, minimalist aesthetic.
• Don't use hard corners (0px border-radius) on any component except in rare cases of intentional visual contrast; maintain the geometric-but-approachable shape language.
• Don't mix Bricolage Grotesque and Hanken Grotesk at the same size or weight; use Bricolage for display/headline and Hanken for body/labels to maintain clear visual separation.
• Don't place small text (label-sm, 12px) over busy backgrounds without applying text-shadow 0 2px 4px rgba(0, 0, 0, 0.3) to ensure sufficient contrast.
• Don't use pure white (#ffffff) for text on the dark surface; use on-surface (#f3f4ec) instead to reduce eye strain and maintain the warm, approachable tone.