Component library
Lavasource UI
Primitives from shadcn/ui, restyled to the Figma workshop spec. Hover, focus, and press the live controls — static rows show the remaining states.
01 · Buttons
Primary button
Default
Hover
Focus
Pressed
Disabled
Loading
Secondary button
Default
Hover
Focus
Pressed
Disabled
Loading
Tertiary button
Default
Hover
Focus
Pressed
Disabled
Loading
Text button
Default
Hover
Focus
Pressed
Disabled
Loading
02 · Text Input
Input states
Default
Focus
Filled
Disabled
Error
With label and helper text
We'll send a sign-in link here.
Default + helper
Required
Error + message
With icon
03 · Dropdown / Select
Closed
Open
Selected
Disabled
Error
04 · Checkbox & Radio
Checkbox
Unchecked
Checked
Focus
Disabled
Disabled checked
Error
Radio
Unchecked
Checked
Focus
Disabled
Disabled checked
Error
05 · Card
Default
Hover
Selected
Disabled
06 · Tag / Removable Chip
Default
Hover
Focus
Removing
Read-only tag
Status — hiring
Status — featured
Default
Hover
Focus
Removing
Read-only tag
Status — hiring
Status — featured
07 · Label & Helper Text
Default
Required
Error label
Hiring for
Section label (caps)
Keep it under 80 characters — it appears in every listing.
Helper text
Error message
Link sent — check your inbox.
Success message
08 · Avatar (initials only — no photos in MVP)
Sizes
20px — list row
24px — inline
32px — nav
40px — card
48px — profile
64px — hero
Colour palette
Dark slate
Purple
Indigo
Figma red
Coral
Orange (brand)
09 · Empty, Loading & Error Patterns
Page loading — skeleton
List loading — distinct from page
Loading results…
Empty list — icon + reason + next action
Something failed — what failed, retry action
Unsaved changes prompt — what's lost, stay or leave
Permission denied — employer without search access
Field validation — in plain words, next to the field
10 · Community (Bettermode) alignment note
The Community platform runs on Bettermode. Before launch, confirm these theme and auth constraints so the community matches Lavasource.
- 1Typography — confirm Plus Jakarta Sans can be injected into Bettermode.
- 2Primary colour — confirm #f95e21 can replace Bettermode’s default accent.
- 3Border radius — confirm card radii (14px) and button radii (12px) can be themed.
- 4Navigation header — confirm whether the Bettermode header can match Lavasource.
- 5Sign-in flow — confirm whether SSO/magic-link from Lavasource can be used.