← Sitemap

UI Kit

Component reference, sourced from Figma. Hover real buttons to see live hover state — the "Hover" column is a static preview.

App shell

Side nav + header composed together. This is what real screens render inside.

Default shell (Conversations expanded, AI Convo. agent active)

Content area — screens render here.

Side nav

256px dark rail with top-level items, badges, and expandable sections.

Default (Conversations expanded, AI Convo. agent active)

All sections collapsed

Buttons

5 variants · 2 sizes · 3 states · icon-only.

Default size (h-8 · 14px)

Default
Hover
Disabled
Primary
Secondary
Outline
Link
Ghost

Small size (h-6 · 12px)

Default
Hover
Disabled
Primary
Secondary
Outline
Link
Ghost

Icon-only

Default
Hover
Disabled
Primary · default
Secondary · default
Outline · default
Link · default
Ghost · default
Primary · sm
Secondary · sm
Outline · sm
Link · sm
Ghost · sm

Layouts (default size, primary)

Tabs

Section-level tab bar with icon + uppercase Raleway-bold label. The active tab gets a 3px bottom rule; the rest sit on a 1px rule that continues across the row.

Email Accounts active (4 tabs)

Without icons

Filter trigger

Light-gray pill that opens the filter panel. Three states based on count and clearable.

States

Default

Filter

With count

Filter(3)

Applied · clearable

Filter(3)

Tags

Pill-style tags with leading icon, plus a neutral “+N” counter chip.

Tones

purplebluegreenorangeredgray

Dismissible · with counter

Outreach Q4VIP5

Data table

Grid-based table primitives. The caller owns the `grid-cols-[…]` template, which keeps the header and rows aligned.

Sortable header + grouped rows

Name
Owner
Items
Status

Active campaigns (2 items)

Spring outreach
Alex Chen
42
Running
Product launch
Sara M.
17
Paused

Archived (1 item)

Q1 newsletter
Mike R.
8
Closed

Provider cards

2-column flex-wrap grid in the provider picker. Selected variant adds a 0px 4px 12px shadow + #E6E6E6 border.

Form fields

Label (Raleway SemiBold 14/16, red * for required) + input. Input: 1px #BDBDBD border, 4px radius, 8px / 16px padding.

From Name*
Email Address*
IMAP Server*
Port*
SSL/TLS*
SMTP Server*

Helper text — host could not be resolved

Daily Max Outreach Volume

Alerts

Inline tinted alert used inside modals for connection-state feedback. Tones: error, success, warning, info. The error variant supports an expandable description with a “More info” toggle.

IMAP connection successful

Connected to your email account successfully

SMTP connection failed

SMTP connection failed

MX record looks misconfigured

Pitchbox will sync the last 30 days of email