Loading NAVA Market
Preparing your next page
Loading NAVA Market
Preparing your next page
Loading NAVA Market
Preparing your next page
Loading NAVA Market
Preparing your next page
NAVA Brand Guidelines
This is a working guide pulled directly from the platforms UI patterns: gradients, glass panels, bold section colors, and friendly clarity.
Primary
LockupClear Space
Keep 1x letter height around the wordmark.
Minimum Size
Logo lockup should be at least 24px tall on web.
Logo System
Use the official logo assets from NAVA. Pick the right format for the background and size as seen in this section.
Usage Notes
Asset Pack
Marketing gets one package with transparent PNG exports, original SVGs, and matching light/dark variants.
Primary lockup
Default for website headers, decks, and partner materials.
Lockup on dark
Use on dark UI, photography, and presentation cover slides.
Wordmark only
Use when the icon would feel redundant or space is horizontal.
Wordmark on dark
Use for sponsor walls, dark slides, and media end cards.
Icon only
Use for avatars, app icons, favicons, and social profile images.
Reverse on dark
Use when the mark needs maximum contrast on dark backgrounds.
Size examples
SmallMediumLargeDownloadable assets
Use the ZIP for marketing handoff, or grab individual files when you only need a specific format.
Full logo kit
Download ZIPZIP with 9 SVGs, 21 transparent PNGs, the palette JSON, and a short usage README.
Lockup SVG
Download SVGVector source for design tools and print-ready placement.
High-res icon PNG
Download PNG2048px transparent icon for app stores, press kits, and social use.
Dark-mode lockup
Download dark PNGWhite lockup for dark themes, photo backgrounds, and event screens.
Core Palette
These match the Search area gradients and provide fast recognition across the platform.
Market
Primary marketplace actions, header gradients.
#2563ebEstate
Map flows, location accents, trust states.
#0f766eJobs
Hiring CTAs, positive outcomes.
#059669Rentals
Availability, booking highlights.
#ea580cReal Estate Map
Map visuals should feel calm and readable: soft canvas, teal boundaries, and clear marker contrast.
Map Rules
Map canvas
#f8fafcBoundary / area
#0f766eLabel text
#5b6b6aPrimary markers
#2563ebMarker set
Primary markers and clusters use blue scale values.
Price drop badge
Green is reserved for the price-drop callout, not for markers.
Surfaces & Depth
Dashboards lean on glass panels over soft neutrals. Keep depth subtle and airy.
Layout Defaults
Glass Panels
Use `bg-white/40` + `backdrop-blur-xl` for hero cards and banners.
Rounded Geometry
Prefer `rounded-2xl` to `rounded-3xl` across panels and modals.
Soft Shadows
Use gentle depth like `shadow-lg` or `shadow-sm` with bright surfaces.
Hero Banner Example
Use layered gradients with a soft blur to frame key actions.
Extended Palettes
These colors appear in CV templates and third-party authentication buttons.
CV Templates
Professional
Modern
Creative
Watermark
Third-party auth
Google brand colors used on login buttons.
Button preview
Typography & Voice
Use the default product font stack. Pair bold headlines with calm, descriptive supporting copy.
Hierarchy
Display / H1
Find the right place, faster.
Subheading / H2
Search across rentals, jobs, and real estate.
Body
Support text should be short, warm, and action-oriented.
Direct & Helpful
Lead with the outcome: "Find your next ride", "Post a new role".
Warm Confidence
Use friendly, informed language. Avoid slang or empty hype.
Short, Scannable
Headlines under 60 chars. CTAs 1-3 words.
Components
Buttons, chips, and cards should look like they belong on the dashboard and search pages.
Primary CTA
Use for single, main action.
Secondary CTA
Pair with primary actions.
Listing status chips
Match the listing status colors used in cards and headers.
Job application status chips
Use the application status palette for review workflows.
Profile Badges
Use these badges to signal business accounts and trust signals in user and company modals.
Business badge
White surface, blue text, and subtle shadow for clarity on glass headers.
Verified status
Keep status pills compact and readable near user names.
Accessibility & QA
Maintain contrast for body text and ensure buttons are at least 44px tall. Use `focus-visible:ring-2` for keyboard navigation on all controls.
Contrast
Blue 600 + white is the default high-contrast pair.
Focus
Ring color should match the active area gradient.
Do
Match search gradients and dashboard card styles.
Don't
Invent new palettes or typography that drift from the product UI.
