Design systemLogos
The Petavue logo in its three layouts, and the logos of the tools Petavue connects to. Exported from the Figma design system.
Every file on this page comes from the "Petavue - Design System" Figma file, page "Logo". Click any logo to download it.
Petavue logo
Three layouts, each for a light and a dark background. On a light background the logo is the brand blue; on a dark background it is white on --color-primary-500.
| Layout | Use for | Files |
|---|---|---|
| Logo | Navigation rail, favicons, small spaces | mark-light.svg, mark-dark.svg |
| Logo and name, horizontal | Headers, sign-in, emails | horizontal-light.svg, horizontal-dark.svg |
| Logo and name, vertical | Splash and empty screens, centred layouts | vertical-light.svg, vertical-dark.svg |
The favicon is a separate 32px file: /logos/brand/favicon.svg.
In code
Use BrandLogo instead of an image file. It draws the same mark as an inline SVG, so it takes the brand colour from the tokens.
import { BrandLogo } from "@/ui";
<BrandLogo variant="icon" size="md" />
<BrandLogo variant="full" size="md" />
<BrandLogo variant="full" size="md" mode="dark" />| Prop | Values | Default |
|---|---|---|
variant | "icon" (logo only) or "full" (logo and name) | "full" |
mode | "light" or "dark" | "light" |
size | "sm" (24px), "md" (32px), "lg" (40px) | "md" |
BrandLogo only has the horizontal layout. For the vertical layout, use vertical-light.svg or vertical-dark.svg.
Rules
- Do not recolour, stretch, rotate or add effects to the logo.
- Use the dark version only on the brand blue, never on grey or on photos.
Integration logos
The 30 tools in the Figma file, in their own colours.
Sizes
Figma has each logo at three sizes. The files here are the large version; they scale down cleanly.
<img src="/logos/integrations/hubspot.svg" alt="" width={24} height={24} />| Size | Pixels | Use for |
|---|---|---|
| Small | 16 | Inline with 12px or 14px text: table cells, menu items, recommendation cards |
| Medium | 24 | Lists of sources and integration rows |
| Large | 48 | Integration cards and connection screens |
Rules
- Show a vendor's logo only when you mean that product. When a label is a category, such as "CRM", use a neutral Phosphor icon instead, because the customer may run a different tool.
- A logo next to the tool's name is decoration: give it
alt="". A logo on its own needs the name asaltor a Tooltip. - Never change a vendor's colours.
In the product today
The app reads its integration logos from src/assets/integrations through SourceIcon. That folder and Figma only partly overlap.
| Logos | |
|---|---|
| In both | HubSpot, Salesforce, Snowflake, Gong, ZoomInfo, Marketo, Outreach, Segment, Google Analytics (GA4.svg in the app) |
| Only in Figma | Gainsight, Mixpanel, Zendesk, Slack, Amplitude, PostgreSQL, SingleStore, Mailchimp, Aircall, Freshdesk, Bombora, Clearbit, Oracle, Bullhorn, Pendo, Jira, BigQuery, Redshift, Elastic, SurveyMonkey, ServiceNow |
| Only in the app | Google Ads, LinkedIn, Meta Ads, 6sense, NetSuite, PartnerStack, Salesloft, Splash, Webflow, Apollo, lemlist |
The paid media logos the product leans on most (Google Ads, LinkedIn, Meta Ads) are not in the Figma file yet.