Navattic Brand Identity

A complete profile of Navattic's visual system — colors, typography, components, and personality — extracted from https://www.navattic.com/. Built for designers, agents, and AI tools.

Color Palette

Brand palette extracted from https://www.navattic.com/.

• Primary:
  • Hex: #4B5563
  • RGB: rgb(75, 85, 99)
• Secondary:
  • Hex: #384252
  • RGB: rgb(56, 66, 82)
• Accent:
  • Hex: #286EF0
  • RGB: rgb(40, 110, 240)
• Background:
  • Hex: #FFFFFF
  • RGB: rgb(255, 255, 255)
• Text Primary:
  • Hex: #1D2735
  • RGB: rgb(29, 39, 53)
• Link:
  • Hex: #1D2735
  • RGB: rgb(29, 39, 53)

Typography

Each font links to its Google Fonts page where available.

• Primary Font: Inter
  • Google Fonts →
• Heading Font: Suisse
  • Google Fonts →

UI Components

Input

• Background: transparent
• Text Color: #0A0A0A
• Border Color: null
• Border Radius: 0px
• Shadow: none

Button Primary

• Background: #286EF0
• Text Color: #FFFFFF
• Border Color: #1C62E3
• Border Radius: 8px
• Shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 2px 3px 0px, rgba(0, 0, 0, 0.12) 1px 4px 8px 0px, rgba(0, 0, 0, 0.2) 0px -3px 2px 0px inset, rgba(255, 255, 255, 0.14) 0px 2px 0.4px 0px inset

Button Secondary

• Background: transparent
• Text Color: #4B5563
• Border Radius: 8px
• Shadow: none

Brand Personality

• Tone: professional
• Energy: medium
• Audience: business professionals and product teams

Navattic Brand in the Wild

Source: navattic.com

Source: navattic.com

Source: navattic.com

Source: navattic.com

Source: navattic.com

Frequently Asked Questions

• What is Navattic's primary brand color? Navattic's primary brand color is #4B5563. It anchors the visual identity across their website, product UI, and marketing materials.

• What accent color does Navattic use? Navattic uses #286EF0 as an accent color, typically applied to interactive elements like links, buttons, and call-to-action emphasis.

• What font does Navattic use? Navattic uses Inter for body text and Suisse for headings. Fonts were detected on https://www.navattic.com/ as part of their live design system.

• Does Navattic use a light or dark theme? Navattic's primary site uses a light color scheme, with a background of #FFFFFF.

• Where can I find Navattic's logo? Navattic's logo is available directly on their site (https://www.navattic.com/). The current logo URL is included in the machine-readable JSON profile linked above.

• How was this brand profile generated? This profile was extracted from https://www.navattic.com/ using the Firecrawl branding extraction API, which inspects the live page's CSS, fonts, color tokens, and component styles. It is not affiliated with or endorsed by Navattic.