Loading NAVA Market

Preparing your next page

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.

Pillars: clarity, trust, momentumPatterns: gradients, soft depth, rounded cardsDownload logo kit

Primary

Lockup

Clear 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.
Use the white assets on dark backgrounds and the navy/light assets on bright surfaces.

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

Small

Medium

Large

Downloadable assets

Use the ZIP for marketing handoff, or grab individual files when you only need a specific format.

Download full kit

Full logo kit

Download ZIP

ZIP with 9 SVGs, 21 transparent PNGs, the palette JSON, and a short usage README.

Lockup SVG

Download SVG

Vector source for design tools and print-ready placement.

High-res icon PNG

Download PNG

2048px transparent icon for app stores, press kits, and social use.

Dark-mode lockup

Download dark PNG

White 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.

#2563eb

Estate

Map flows, location accents, trust states.

#0f766e

Jobs

Hiring CTAs, positive outcomes.

#059669

Rentals

Availability, booking highlights.

#ea580c

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

#f8fafc

Boundary / area

#0f766e

Label text

#5b6b6a

Primary markers

#2563eb

Marker set

Primary markers and clusters use blue scale values.

#2563eb

#1d4ed8

#1e3a8a

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.

#4285f4

#34a853

#fbbc05

#ea4335

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.

Radius: 12-24px

Primary CTA

Use for single, main action.

Secondary CTA

Pair with primary actions.

Listing status chips

ActiveInactiveSoldCompleted

Match the listing status colors used in cards and headers.

Job application status chips

SubmittedUnder ReviewInterview ScheduledRejectedAccepted

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

BBusiness

White surface, blue text, and subtle shadow for clarity on glass headers.

Verified status

Verified

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.

Match search gradients and dashboard card styles.

Don't

Invent new palettes or typography that drift from the product UI.

Download logo kit Download brand palette

Loading NAVA Market

Preparing your next page

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.

Pillars: clarity, trust, momentumPatterns: gradients, soft depth, rounded cardsDownload logo kit

Primary

Lockup

Clear 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.
Use the white assets on dark backgrounds and the navy/light assets on bright surfaces.

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

Small

Medium

Large

Downloadable assets

Use the ZIP for marketing handoff, or grab individual files when you only need a specific format.

Download full kit

Full logo kit

Download ZIP

ZIP with 9 SVGs, 21 transparent PNGs, the palette JSON, and a short usage README.

Lockup SVG

Download SVG

Vector source for design tools and print-ready placement.

High-res icon PNG

Download PNG

2048px transparent icon for app stores, press kits, and social use.

Dark-mode lockup

Download dark PNG

White 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.

#2563eb

Estate

Map flows, location accents, trust states.

#0f766e

Jobs

Hiring CTAs, positive outcomes.

#059669

Rentals

Availability, booking highlights.

#ea580c

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

#f8fafc

Boundary / area

#0f766e

Label text

#5b6b6a

Primary markers

#2563eb

Marker set

Primary markers and clusters use blue scale values.

#2563eb

#1d4ed8

#1e3a8a

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.

#4285f4

#34a853

#fbbc05

#ea4335

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.

Radius: 12-24px

Primary CTA

Use for single, main action.

Secondary CTA

Pair with primary actions.

Listing status chips

ActiveInactiveSoldCompleted

Match the listing status colors used in cards and headers.

Job application status chips

SubmittedUnder ReviewInterview ScheduledRejectedAccepted

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

BBusiness

White surface, blue text, and subtle shadow for clarity on glass headers.

Verified status

Verified

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.

Match search gradients and dashboard card styles.

Don't

Invent new palettes or typography that drift from the product UI.

Download logo kit Download brand palette