Design System

SiteWorker component library, design tokens, and visual reference.

27 UI primitives · 7 domain components · 3 layout shells

Design Tokens

All colors, typography, spacing, and motion values are defined as CSS custom properties and exposed as TypeScript constants via @/lib/design-tokens.

Animation Durations
--duration-fast150ms
--duration-normal250ms
--duration-slow400ms
Z-Index Scale
z-base0
z-dropdown50
z-sticky100
z-overlay200
z-modal300
z-popover400
z-toast500
z-tooltip600
z-max9999
Border Radius
--radius-smvar(--radius-sm)
--radius-mdvar(--radius-md)
--radius-lgvar(--radius-lg)
--radius-xlvar(--radius-xl)

Typography

Heading 1 -- Project Dashboard

Heading 2 -- Worker Roster

Heading 3 -- Active Assignments

Heading 4 -- Timesheet Summary

Heading 5 -- Assignment Details
Heading 6 -- Note Section

Body text -- SiteWorker enables workforce accountability through geolocation-verified clock-ins, safety tier tracking, and prevailing wage compliance across all job sites.

Body small -- Worker was clocked in at 6:02 AM within the geofence.

Muted text -- Last updated 3 hours ago by the project manager.

Caption -- Assignment ID: ASG-2026-0412

Overline -- Safety Requirements

Link -- View full report
Typography Scale Reference
h12.25rem / 2.5rem / 700
h21.875rem / 2.25rem / 700
h31.5rem / 2rem / 600
h41.25rem / 1.75rem / 600
h51.125rem / 1.75rem / 600
h61rem / 1.5rem / 600
body1rem / 1.5rem / 400
bodySm0.875rem / 1.25rem / 400
caption0.75rem / 1rem / 400
overline0.75rem / 1rem / 600

Colors

Theme Colors

Primary
Secondary
Accent
Muted
Destructive
Background
Foreground
Border

Brand Colors

50
100
200
300
400
500
600
700
800
900
950

Standing Colors

Good Standing
Needs Attention
Limited Access

Safety Tier Colors

Tier A — High-risk ready
Tier B — Standard
Tier C — Restricted

Status Colors

success
warning
danger
info
neutral

Role Accent Colors

worker
client
pm
recruiter
admin
superadmin

Spacing & Radius

Spacing Scale (Tailwind)

14px
28px
312px
416px
624px
832px
1040px
1248px
1664px
2080px
2496px

Border Radius

sm
md
lg
xl
full

Buttons

Variants

Sizes

States

Inputs

Checkboxes & Radios

Checkboxes

Radio Group

Cards

Basic Card
A simple card with header and content.

This project has 24 active workers across 3 job sites.

Card with Footer
Includes actions in the footer area.

Weekly timesheet review is pending for 8 workers.

Badges

shadcn Variants

DefaultSecondaryDestructiveOutline

Avatars

Sizes

JMsm
SCdefault
MJlg

Avatar Group

JMSCMJAR
+5

Accordions

Spinners

Sizes

Loading...
xs
Loading...
sm
Loading...
default
Loading...
lg
Loading...
xl

Dialogs & Sheets

Alert Dialogs

Popovers

Tables

Active workers on Metro West project.
NameTradeSafety TierStandingHours (Week)
John MartinezElectricianTier AGood Standing42.5
Sarah ChenPipefitterTier AGood Standing40.0
Marcus JohnsonIronworkerTier BNeeds Attention38.0
Ana RodriguezCarpenterTier BGood Standing40.0
Derek WilliamsPlumberTier CLimited Access32.0

Tabs

Project Overview
Metro West Water Treatment Expansion -- Phase 2

24 active workers across electrical, piping, and structural trades.

Project is on schedule with 68% completion as of this week.

Toasts

Alerts

Tooltips

Skeletons

Card Loading State

Table Row Loading State

KPI Tile Loading State

Layout Shells

Three layout shells provide consistent page structure across the application. Each shell wraps page content and provides navigation, headers, and footers appropriate for its context.

DashboardLayout
Authenticated dashboard pages

Role-based sidebar navigation

Topbar with breadcrumbs, notifications, profile

4 role variants: worker, client, recruiter, admin

@/components/layouts/dashboard
PublicLayout
SEO-optimized public pages

Sticky header with logo, nav, sign-in CTA

Footer with link columns and social links

Semantic HTML, SSR-compatible

@/components/layouts/public
AuthLayout
Login and authentication flows

Centered card over brand gradient

Logo, form fields, submit button

Responsive design for all screen sizes

@/components/layouts/auth

Standing Indicator

Compact Variant (default)

Good StandingNeeds AttentionLimited Access

Full Variant (with explanation and restoration steps)

Good Standing
Needs Attention

Missed 2 consecutive workdays

Steps to restore:

  • Complete 3 on-time check-ins
Limited Access

Failed safety audit

Steps to restore:

  • Retake OSHA 30
  • Pass site inspection

Safety Badge

Compact Variant (default)

Tier ATier BTier C

Full Variant (with description)

Tier A — High-risk readyTier B — StandardTier C — Restricted

Worker Trust Card

Expanded Variant (detail view)

JM

John M.

Good Standing
Journeyman Electrician5-10 years
Reliability
Strong
Completion
Good
Communication
Strong
Tier A — High-risk ready4 certificationsOrientation: Complete
24
Assignments
96%
Completion
98%
On-time
5.0/5
Avg rating

Why recommended

Consistently reliable with excellent safety record. Strong leadership on multi-crew electrical projects. Always clocks in on time.

Compact Variant (list item)

SC
Sarah C.Good Standing
PipefitterTier A3-5 years
12 assignments4.6/5 avg rating
MJ
Marcus J.Needs Attention
IronworkerTier B1-3 years
8 assignments3.8/5 avg rating
DW
Derek W.Limited Access
PlumberTier C
3 assignments

Job Card

Expanded (default)

Southwest Contractors Inc.

Metro West Water Treatment Expansion

Journeyman Electrician

4200 Industrial Blvd, Phoenix, AZ 85043

PostedSourcingMar 24, 2026
ElectricianTravel

Pay Breakdown

Base rate$56.25/hr
Fringe rate$23.40/hr
Total prevailing rate$79.65/hr
Fringe: Split (cash + benefits)
Per diem (daily flat rate)$65.00/day

Schedule

DurationApr 1, 2026 - Sep 30, 2026
Workdays per week5 days
Hours per workday8.5 hrs

Safety Requirements

Minimum Safety TierTier A
Required Certifications
  • ✓OSHA 30
  • ≈Arc Flash
Site OrientationPending
Positions2 / 6 filled(4 openings)
Posted Mar 24, 2026

Compact

Downtown Convention Center Renovation

Apprentice Pipefitter

100 Congress Ave, Austin, TX 78701

PostedSourcingMar 25, 2026
PipefitterMulti-siteTier B
$32.00/hr$46.50/hr total
May 1, 2026 - Ongoing2 openings

Earnings Breakdown

Actual Earnings
Journeyman Electrician -- This week

Earnings Breakdown

Base wages
Fringe
Per diem
Base Wages
Hourly rate$56.25/hr
Hours worked42.5h
Subtotal$2390.63
Fringe Benefits
Fringe rate$23.40/hr
AllocationSplit (cash + benefits)
Hours42.5h
Subtotal$994.50
Per Diem
Daily rate$65.00/day
Days eligible5 days
Subtotal$325.00
Total Earned$3710.13
Projected Earnings
Ironworker -- Estimated weekly

Earnings Breakdown(projected)

Base wages
Fringe
Base Wages
Hourly rate$48.75/hr
Hours estimated40h
Subtotal$1950.00
Fringe Benefits
Fringe rate$19.50/hr
AllocationBenefits contribution
Hours40h
Subtotal$780.00
Total Estimated$2730.00

Pay Structure Display

Detailed Variant
Journeyman Electrician -- Davis-Bacon

Pay Structure

Prevailing Wage?
Base rate$56.25/hr
Fringe rate$23.40/hr
Fringe paid as: Split (cash + benefits)
Health & welfare60%
Pension25%
Cash supplement15%
Total prevailing rate$79.65/hr
Per diem$65.00/day
Structure: Daily flat rate
Hours per workday8.5 hrs
Compact Variant
Ironworker -- Local 63
$48.75/hrPW
+ $19.50/hr fringe(Benefits contribution)
$68.25/hr total
+ $55.00/day per diem

KPI Tiles

With Trends

Active Workers
142
+8%Across 12 job sitesTrend: up
Hours This Week
5,284hrs
0%Avg 37.2 hrs/workerTrend: flat
Safety Incidents
0
-100%Last 30 daysTrend: down
On-Time Rate
96.3%
+1.2%Clock-in within 5 minTrend: up

With Sparklines

Weekly Hours
5,284hrs
+5%Trend: up
Active Projects
12
+2Trend: up
Revenue
$1.2M
+15%Trend: up
Compliance Rate
99.1%
+0.3%Trend: up