Page Header
| Team member | Date | Amount | Status |
|---|---|---|---|
LNLord Nelson | Sep 21, 2024 | +$1,240.00 | Approved |
JCJustin Castle | Sep 20, 2024 | -$320.00 | Pending |
MRMaria Rivera | Sep 18, 2024 | +$2,000.00 | In review |
Olamee Component Library
The single source of truth for Olamee's UI. Every element below is built from the design system's tokens — Karla & Montserrat type, the violet/mint palette, and the standard radii and shadows. Light mode only.
App Shell
The signature layout: gradient icon-rail (Find / Manage / Admin) + top bar + page header. Every screen lives inside this frame.
O
Find
Manage
Admin
Rail sections (Find / Manage / Admin) match the Figma navigation; the active item uses the white-on-violet treatment.
Colors
Brand, status and neutral palettes pulled from the Figma variables.
Brand & Status
Gunmetal neutral scale
800
base
400
300
200
100
50
lightest
Typography
Montserrat for headings, Karla for body & UI text.
Montserrat 700 / 34
Heading 1
Montserrat 700 / 28
Heading 2
Montserrat 600 / 20
Heading 3
Karla 700 / 16
Body strong — the quick brown fox
Karla 400 / 14
Body base — the quick brown fox jumps over the lazy dog.
Karla 400 / 12
Caption / helper text — supporting detail.
Radius & Shadow
Consistent rounding and elevation across the system.
Border radius
8 · chip
10 · tab
12 · button
16 · panel
24 · pill
28 · card
Elevation
xs
sm
md
lg
Spacing
A 4px base scale drives all gaps, padding and margins.
4 · xs
8 · sm
12 · md
16 · base
24 · lg
32 · xl
48 · 2xl
64 · 3xl
Icons
Line icons at 2px stroke, 20–24px. Representative set used across the product.
search
plus
check
close
edit
trash
calendar
file
bell
settings
chevron
download
user
info
archive
filter
Stroke icons keep a 2px weight; swap freely with your icon library (Lucide/Phosphor-style) as long as proportions match.
Text Links
Inline links in body copy.
This is body text containing a primary link, a subtle link, and a destructive link. Links underline on hover.
Segmented Buttons
Single-choice toggle group for view switches and filters.
Inputs & Forms
Text fields, search pill, select, textarea — with focus, hint and error states.
As it appears on your ID.
Enter a valid email address.
Advanced Inputs
Disabled/readonly, prefix/suffix, number stepper, multi-select tags, autocomplete, range & OTP.
$USD
PayrollOnboarding
60%
File Upload
Dropzone with uploaded-file list — for documents and attachments.
Click to upload or drag & drop
PDF, PNG, JPG up to 10 MB
Done
Checkbox · Radio · Switch
Selection controls in the primary violet.
Stepper / Wizard
Multi-step progress for onboarding and guided flows.
Account
Profile
3Documents
4Review
Tabs
Segmented (pill) and underline styles. Active = brand violet.
Segmented
Underline
Badges & Chips
Status badges and removable filter chips.
Status badges
Approved
Rejected
Pending
In review
Active
Draft
Chips
See attachments
Engineering
This month
Alerts
Inline feedback banners.
Request approvedThe time-off request has been approved and the employee notified.
Action neededTwo timesheets are awaiting your review before payroll closes.
Sync failedWe couldn't reach the payroll service. Retry in a few minutes.
Heads upThe new onboarding flow goes live next Monday.
Cards
Surfaces with the 28px radius and soft elevation.
Total employees
1,284
▲ 4.2% this month
Pending requests
37
▼ 1.1% vs last week
Avg. approval time
2.4h
▲ faster than target
Profile details
ActiveA card with a header, body and footer. Use for forms, detail panels and grouped content.
Data Table
The core table pattern — avatar cells, signed amounts, chips and pagination.
| Team member | Date requested | Type | Amount | Status | Attachments |
|---|---|---|---|---|---|
LNLord Nelson | Sep 21, 2024 | Reimbursement | +$1,240.00 | Approved | See attachments |
JCJustin Castle | Sep 20, 2024 | Deduction | -$320.00 | Pending | See attachments |
DHDorothy Hale | Sep 19, 2024 | Reimbursement | +$540.00 | Rejected | See attachments |
MRMaria Rivera | Sep 18, 2024 | Bonus | +$2,000.00 | In review | See attachments |
Showing 4 out of 200 results
Page 1 of 14
Table + Selection
Row checkboxes, a bulk-action bar and sortable headers (the "with checkbox" table variant).
| Team member | Department | Salary | Status | |
|---|---|---|---|---|
LNLord Nelson | Engineering | $92,000 | Active | |
JCJustin Castle | People Ops | $74,000 | Active | |
DHDorothy Hale | Finance | $81,500 | On leave |
Pagination
Numbered pager with rows-per-page control.
…
Rows per page
Empty State
Shown when a list, table or search has no results.
No requests yet
When your team submits time-off or reimbursement requests, they'll appear here for review.
Skeleton Loader
Placeholder shimmer while content loads.
Description List
Key–value detail view for profiles and records.
- Full name
- Evan Vance
- Employee ID
- EMP-00421
- Department
- Engineering
- Manager
- Maria Rivera
- Start date
- March 14, 2022
- Status
- Active
Timeline
Activity feed / audit trail.
Request submitted
Approved by manager
Pending People Ops sign-off
Payout scheduled
Modal
Centered dialog with overlay.
Drawer / Slide-over
Right-side panel for filters, detail views and quick edits.
Toast
Transient notifications, bottom-right.
Tooltip
Hover the button below.
More information
Notifications & Status
Count badges on icons and presence/status dots.
3
12
EV
MR
Online
Away
Offline
Avatars
Initial avatars and stacked groups.
ESEVEV
ABC+5
Accordion
Collapsible content groups.
Open the Find section, choose Time Off, pick your dates and submit. Your manager is notified instantly.
Payslips live under Manage → Payroll. PDFs are available the day after each pay run.
Requests route to your direct manager, then to People Ops for final sign-off.
Progress & Spinner
Determinate bars and a loading spinner.
72%
30%
Calendar / Date Picker
Selected day uses the brand violet; ranges use the 50 tint.
November 2023
Su
Mo
Tu
We
Th
Fr
Sa
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
Date Range Picker
Preset shortcuts on the left, calendar with range selection, and an action footer.
November 2023
Su
Mo
Tu
We
Th
Fr
Sa
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
Nov 7 – Nov 13, 2023
Scroll Area
Custom slim scrollbar styling.
Scrollable region with the system's slim scrollbar. Use inside panels, dropdowns and long lists.
Olamee's surfaces stay on the lavender-white card color (#FDFDFE) over the page gray (#F5F6F8).
Dividers and rules use gunmetal-100 (#EFF0F3) for a soft separation that doesn't compete with content.
Body text sits at gunmetal-base (#30343F); secondary text drops to gunmetal-400 (#8D8F97).
The brand violet (#7A5FFF) is reserved for primary actions, active states and selection.
Keep elevation subtle — most cards use the xs or sm shadow; only floating layers (menus, modals) go to lg.