NAVA Brand Guidelines
Built from the Platfroms experience.
This is a working guide pulled directly from the platforms UI patterns: gradients, glass panels, bold section colors, and friendly clarity.
Primary
NAVAClear 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
- Use the full lockup on light surfaces.
- Use the wordmark alone when space is tight.
- Use the icon alone for avatars, favicons, and tabs.
Primary lockup
NAVAWordmark only
Icon only
Reverse on dark
NAVASize examples
NAVASmallNAVAMediumNAVALargeCore Palette
These match the Search area gradients and provide fast recognition across the platform.
Market
Primary marketplace actions, header gradients.
Estate
Map flows, location accents, trust states.
Jobs
Hiring CTAs, positive outcomes.
Rentals
Availability, booking highlights.
Real Estate Map
Map visuals should feel calm and readable: soft canvas, teal boundaries, and clear marker contrast.
Map Rules
- Use teal for boundaries and selection outlines.
- Keep labels dark and low-contrast against the canvas.
- Markers should use the marketplace blue for contrast.
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
- `max-w-7xl` for primary page width.
- `px-4 sm:px-6 lg:px-8` for consistent gutters.
- `gap-6` base spacing between blocks.
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.
Typography & Voice
Use the default product font stack. Pair bold headlines with calm, descriptive supporting copy.
Hierarchy
Find the right place, faster.
Search across rentals, jobs, and real estate.
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 / Don't
Do
Match search gradients and dashboard card styles.
Don't
Invent new palettes or typography that drift from the product UI.