Brand
The sherpa brand kit.
Everything you need to represent sherpa correctly: the logo, our color palette, the typefaces, and a few rules to keep it consistent. Right-click the logo anywhere on the site to copy it as SVG.
Logo
One mark, two tones.
The lockup pairs the angular mark with the lowercase wordmark. Use pine on light surfaces and cloud on dark ones. Never redraw either — always export from the source SVG.
Clear space
Give the mark room to breathe. Keep clear space on every side of at least the height of the mark’s peak, and never crowd it with other elements.
Color
A palette from the ridge line.
Pine and cloud carry the brand; orange leads the eye to action. Click any swatch to copy its hex.
Core
Supporting
Neutrals
Typography
Three voices, one system.
Display
Oceanic Text · 400 / 400i / 500
Guides for the last mile of work.
Headlines only. Set at a tight -0.02em tracking, and lean on the italic for a single accented word — never a whole line. Medium (500) is reserved for smaller sub-headings.
Body & UI
GT America · 400 / 400i
sherpa’s AI agents run your external workforce program end to end — classifying workers, engaging suppliers, paying on time, and staying compliant across every kind of work.
Body copy, buttons, and interface text. Italic for light emphasis; never faux-bold — there is no heavier weight.
Labels
GT America Mono · 300 / 700
Eyebrows · step pills · metadata
Eyebrows and small labels, set uppercase at 11px with wide tracking. Bold (700) for labels, light (300) for longer mono strings in mockups.
Elevation
Three shadows, pine-tinted.
Elevation is intentionally soft — a low, pine-tinted cast, never black and never neutral gray. Three tiers cover the whole product.
shadow-card
Panels and small cards — workflow mockup panels, color swatches.
0 4px 16px -6px · 10% · rgba(20 30 22)
shadow-float
Feature cards, popovers, and dropdowns that lift off the page.
0 12px 32px -12px · 16% · rgba(20 30 22)
shadow-hero
Big imagery — the product demo canvas and hero media.
0 24px 56px -20px · 24% · rgba(20 30 22)
Usage
Keep it consistent.
Do
- Keep clear space around the mark of at least the height of its peak.
- Use pine on light surfaces and cloud on dark surfaces for contrast.
- Scale the mark and wordmark proportionally from the source SVG.
Don’t
- Don’t recolor the logo outside the pine / cloud tones.
- Don’t stretch, squeeze, rotate, or otherwise distort it.
- Don’t add a heavier weight — never faux-bold the wordmark.
- Don’t place the mark on busy or low-contrast backgrounds.