Design System

Style Guide

The SweetHawk design system. Colors, typography, components, and patterns used across all SweetHawk properties.

Brand Colors

Blue (Primary)
#0a6fff
Blue Dark
#0858d4
Blue Light
#e8f0ff
Blue XLight
#f0f5ff
Navy
#0a1628
Navy Mid
#0d1f3c
Pink
#D10071
Pink Light
#FFDEF0
Green
#16a34a
Green Light
#dcfce7
Red
#dc2626
Red Light
#fee2e2
Gray 900
#111827
Gray 500
#6b7280
Gray 200
#e5e7eb
Gray 50
#f8faff

Typography

Bricolage Grotesque — Headings

Heading 1 — Powerfully simple

Heading 2 — Zendesk apps

Heading 3 — Built for teams

Heading 4 — Turn workflows into engines

Heading 5 — 12,000+ organizations trust SweetHawk
Heading 6 — Seamlessly integrated with Zendesk
Inter — Body

Large body — The most installed suite of Zendesk apps. Seamlessly integrated, purpose-built for teams of any size.

Default body — SweetHawk was founded in 2015 with a simple mission: build the apps that Zendesk's most ambitious customers needed. We've grown to serve 300,000+ agents at 12,000+ organizations worldwide.

Small body — Privacy and security aren't just important — they're our top priority. We maintain premier partner status with Zendesk and offer flexible billing.

EYEBROW LABEL

Buttons

Ghost (on dark) Ghost Large

Tags & Badges

Default Blue Free Pink Eyebrow Free

Cards

Default Card

Cards have a subtle border and shadow on hover. They lift slightly when hovered to indicate interactivity.

🔒

Flat Card

Flat cards don't transform on hover. Used in dense layouts where subtle interaction is preferred.

Highlight Card

Highlight cards have a blue border and shadow. Used to draw attention to featured or recommended content.

App Cards

Pricing Cards

Standard
$6
per agent / month

  • Feature one
  • Feature two
  • Feature three
Get started

CTA Banner Example

Full-width call-to-action banner with blue gradient background. Used at the bottom of key pages.