Buttons

Primary actions use orange, secondary uses navy outline, destructive uses red. All buttons use pill (full radius) shape with Helvetica Neue 600.

Variants
Sizes
With Icon & Loading

Form Elements

All inputs use 1.5px borders, 8px radius, and navy focus ring. Error states use red, success uses green.

States
This field is required.
Email verified.
Types
Enable notifications

Cards

All cards use 12px radius, 1px border, and reveal an orange top-bar on hover with shadow lift.

Service Card

Accurate, on-time payroll processing with direct deposit and one-click approval.

Learn more →
3,500+
Clients served nationwide
JM

"Best payroll service we've ever used."

Jane Mitchell
CEO, Mitchell & Co.

Modals & Dialogs

Modals use backdrop blur, 12px radius, and trap focus within the dialog.

Alerts & Notifications

Inline alerts use colored backgrounds with matching borders. Toasts appear top-right with slide-in animation.

Inline Alerts
Payroll processed successfully. 42 employees paid.
Tax filing deadline approaching. Due in 3 days.
Payment failed. Please check card details.
Your account has been upgraded to Professional.
Toast Notifications

Data Display

Table
EmployeeDepartmentPay PeriodAmountStatus
Jane MitchellEngineeringJan 1-15$4,250.00Paid
Robert ChenMarketingJan 1-15$3,800.00Paid
Sarah KimOperationsJan 1-15$4,100.00Pending
Michael TorresSalesJan 1-15$5,200.00Failed
Progress Bars
Onboarding: 75%
Tax Filing: 40%
Payroll Processed: 100%
Badges & Tags
PayrollNewActiveCompletedOverdue
Tooltips
NPS: 71Net Promoter Score — measures client loyalty
Inc. 50009x on the Inc. 5000 fastest-growing list

Typography Scale

Oswald SemiBold 600 / 48px — H1
Payroll handled by real people.
Oswald SemiBold 600 / 36px — H2
What Makes Us Different
Oswald Bold 700 / 20px — H3
Full-Service Payroll Processing
Avenir 65 Medium 500 / 18px / 1.7lh — Body Large
Powerful payroll technology, paired with the kind of support that actually picks up the phone.
Helvetica Neue Regular 400 / 14px / 1.6lh — Body
Since 2007, Coastal Payroll has helped businesses across the country manage their payroll, tax filing, and HR needs.
Helvetica Neue Bold 700 / 12px / 0.2em tracking — Label
Our Solutions
Helvetica Neue Regular 400 / 12px — Caption
No commitment. No pressure. Just a conversation.

Icon Set Reference

Heroicons outline style, 24x24 default. Used at 20px in cards, 16px in buttons, 24px standalone.

Phone
Email
Check
Arrow
User
Shield
Clock
Chart
Building
Map Pin
Calendar
Download

Spacing & Grid

Spacing Scale
4
8
12
16
24
32
48
64
96

Space tokens: 4px (.25rem) → 8px (.5rem) → 12px (.75rem) → 16px (1rem) → 24px (1.5rem) → 32px (2rem) → 48px (3rem) → 64px (4rem) → 96px (6rem)

12-Column Grid (max-width: 1280px)
12
6
6
4
4
4
3
3
3
3
8
4
3
6
3

Container: max-width 1280px, padding 2rem each side. Gap: 2rem between columns. Breakpoints: 1024px (2-col), 768px (1-col).