Brand guidelines
Logos, colors, spacing, and usage rules for ServicePulse. Assets are SVG for crisp scaling; use them in presentations, partner pages, and press kits.
Logo & logomark
Download assets
Logomark (app icon)
Default mark: blue tile with white pulse line. Use for favicons, app icons, and avatars.
servicepulse-logomark.svgLogomark (monochrome line)
Pulse line only on transparent background. Use when the blue tile is not needed.
servicepulse-logomark-mono.svgLogo — horizontal, dark background
Full lockup with light wordmark. For slate/navy headers, footers, and dark UI.
servicepulse-logo-horizontal-dark-bg.svgLogo — horizontal, light background
Full lockup with dark wordmark. For white or light gray backgrounds.
servicepulse-logo-horizontal-light-bg.svgClear space
Keep the area around the logomark or full logo free of text, busy patterns, and other marks. As a rule of thumb, use padding equal to one quarter of the mark height on every side (for the 32px icon, at least 8px clear space). For the horizontal logo, use half the mark height above and below the lockup.
Dashed box illustrates minimum breathing room — do not place elements inside this zone.
Colors
Primary
#2563eb
Tailwind: blue-600
Buttons, links, logomark tile, primary actions
Primary hover
#3b82f6
Tailwind: blue-500
Interactive hover states
Marketing dark bg
#020617
Tailwind: slate-950
Hero and footer backgrounds
Body on dark
#f1f5f9
Tailwind: slate-100
Primary text on dark sections
Muted on dark
#94a3b8
Tailwind: slate-400
Secondary text, captions
Body on light
#0f172a
Tailwind: slate-900
Headings and text on white / light gray
Typography
The marketing site and product use the system UI stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif. SVG wordmarks use the same stack so they align with the live product when rendered in a browser.
For print or contexts without system fonts, substitute a neutral grotesk (e.g. Inter, Helvetica Neue) and match weight 700 for the wordmark.
Please don't
- Stretch, skew, or rotate the logo or logomark.
- Change the blue tile or pulse line to unapproved colors (see palette above).
- Place the white-on-blue mark on busy backgrounds without enough contrast.
- Add drop shadows, outlines, or effects that alter the mark's shape.
- Use the pulse line alone in a color other than white (on blue) or brand blue (#2563eb) on light backgrounds.
- Imply endorsement or partnership without permission.
Questions? Contact support