Component workspace

Shepherd design system

Tokens and primitives, all in one place. Nothing on this page reads from a database — it exists so the visual language can be reviewed and iterated on before any business logic is built. See the shell in context on /dashboard and /finance.

Color

Every swatch below is a token in app/globals.css — no component references a raw hex value.

neutral

0
25
50
100
200
300
400
500
600
700
800
900
950

primary

50
100
200
300
400
500
600
700
800
900
950

accent

50
100
200
300
400
500
600
700
800
900

success

50
100
400
500
600
900

warning

50
100
400
500
600
900

danger

50
100
400
500
600
900

Type scale

Inter for UI and dense data; Sora (font-display) for headlines and big numbers.

captionThe quick fox, $1,204.00
body-smThe quick fox, $1,204.00
bodyThe quick fox, $1,204.00
body-lgThe quick fox, $1,204.00
heading-smThe quick fox, $1,204.00
headingThe quick fox, $1,204.00
heading-lgThe quick fox, $1,204.00
display-smThe quick fox, $1,204.00
displayThe quick fox, $1,204.00
display-lgThe quick fox, $1,204.00

Radius

A consistent radius scale — components use rounded-{sm,md,lg,xl,2xl,full}, never a one-off value.

sm
md
lg
xl
2xl
full

Elevation & glass

Soft physical depth rather than hard borders.

elevation-1
elevation-2
elevation-3
glass

Button

Input

Enter a valid email address.

Looks good.

Card

Solid

Default surface + border.

Flat

Recessed neutral fill.

Glass

Frosted, over color.

Badge

NeutralPrimaryAccentCompletedPendingVoided

Avatar

POMLGK

Empty state

No applicants yet

New applications will show up here as they come in.

Loading state

Modal / sheet

Centered dialog on desktop, bottom sheet on mobile — same component.

Tap confirmation

The flagship interaction — restrained shell, expressive at the point of touch.

Tap to check in