Next payroll
05/11
Closing in 3 days
Living guide · design system v1.0
Vela RH guide
Tokens, typography and every component from section 10 with its states. Everything here is rendered with the same code as the website and the demo.
Colors
Values read live from tokens.css. The contrast ratio is measured against white and serves as a report: no color was adjusted.
Brand
--color-brand-indigo——--color-brand-coral——--color-brand-lilac——--color-brand-lilac-light——--color-brand-sand——--color-neutral-graphite——
Body text
--color-text-primary——--color-text-secondary——--color-text-muted——--color-text-inverse——
Surfaces and borders
--color-surface-page——--color-surface-subtle——--color-surface-brand——--color-border-default——--color-border-strong——
Actions and focus
--color-action-primary——--color-action-primary-hover——--color-action-primary-pressed——--color-focus——
Status
--color-success——--color-success-bg——--color-warning——--color-warning-bg——--color-danger——--color-danger-bg——--color-info——--color-info-bg——
Typography
Plus Jakarta Sans for headings, Inter for body text, tables and numbers. Scale from section 5.2; switches to the mobile values below 768 px.
- H1
- People management on the right course
- H2
- Payroll closed without rework
- H3
- Digital onboarding in four steps
- H4
- This week's tasks
- H5
- Next steps
- Body large
- Less time solving operational problems and more confidence to take care of people.
- Body
- There are 2 mismatches to review before closing October payroll.
- Body compact
- Pay period 10/2026 · 84 employees · updated at 8:30 a.m.
- Caption
- Illustrative values, compared with the previous month
Accents and characters
Admissão, Rescisão, Férias, 13º salário (Portuguese terms with accents)
À Á Â Ã É Ê Í Ó Ô Õ Ú Ü Ç · à á â ã é ê í ó ô õ ú ü ç
Tabular numbers
R$ 312,400.00
R$ 1,111.11
R$ 88,888.88
Currency, hours and dates always with .numeric.
Logo
Placeholder drawn in SVG from the brand manual, until the official file exists. Minimum width of 112 px for the horizontal version.
Graphic elements
Derived from the symbol's bands. Visual support, never behind text or critical data.
Icons
Lucide (ISC license), 1.75 px stroke, mapping from section 6.2.
- Payroll
file-text - Payslip
receipt - Time tracking
clock - Benefits
heart - Onboarding
user-round-plus - Documents
file-check - Vacation
calendar-days - Alert
bell - Attention
triangle-alert - Reports
chart-column - Team
users-round - Settings
settings - Integration
link-2 - Security / LGPD
shield-check - Search
search - Filter
sliders-horizontal - Close
x - Next step
arrow-right
Spacing, radius and shadow
Spacing (4 px base)
--space-1--space-2--space-3--space-4--space-5--space-6--space-8--space-10--space-12--space-16--space-20--space-24
--radius-sm--radius-md--radius-lg--radius-xl--radius-pill--shadow-sm--shadow-md--shadow-lg10.1 Buttons
States frozen for comparison. To really test them, use the mouse and the Tab key.
DefaultHoverFocusPressedDisabledLoading
Primary
Secondary
Body text
Danger
10.2 Form fields
Invalid CPF. Check the numbers you entered.
Phone confirmed by SMS.
Use the role name as it appears in the contract.
10.3 Select
Choose a status to filter.
10.4 Checkbox
10.5 Toggle
Closing reminder
Clocking in outside the office
Signature with a digital certificate
10.6 Status badges
PaidDonePendingIn progressOverdueErrorScheduledProcessingCanceled
10.7 Metric cards
A drop in payroll cost shows up as an improvement; an increase in absences, as a decline. The arrow shows the direction; the color and the text say whether it's good.
Active employees
84
+4%compared with September(change)
Absences in the month
12
+33%compared with September(worse)
Payroll cost
R$ 312,400
−6%compared with September(better)
10.8 Table
Click the headers to sort; check rows to see the selection. On narrow screens, the table scrolls inside its own box.
| Status | ||||||
|---|---|---|---|---|---|---|
| Mariana CostaMarketing Analyst | Marketing | R$ 8,200.00 | R$ 1,240.00 | R$ 6,960.00 | Paid | |
| Rafael LimaProduct Manager | Product | R$ 12,500.00 | R$ 2,430.00 | R$ 10,070.00 | Paid | |
| Camila SouzaSales Executive | Sales | R$ 9,800.00 | R$ 1,890.00 | R$ 7,910.00 | Pending | |
| Lucas PereiraAnalista Financeiro | Finance | R$ 7,300.00 | R$ 1,120.00 | R$ 6,180.00 | Processing | |
| Fernanda AlvesHR Analyst | People | R$ 6,900.00 | R$ 980.00 | R$ 5,920.00 | Overdue |
10.9 Tabs
Left/right arrows switch tabs; Home and End go to the first and last.
Fernanda Alves has been on the People team since 11/01/2026, full-time under the CLT.
Latest payslip: October 2026, net pay of R$5,920.00.
Accrual period in progress. No vacation scheduled.
Meal voucher, transportation voucher and health plan active.
10.10 Toasts and alerts
Persistent alert
Heads up: There are 2 mismatches to review before closing.
Review Camila Souza's and Fernanda Alves's time entries.
Success: Document sent.
The proof of address was attached to the onboarding.
Heads up: Deadline approaching.
October payroll closes in 3 days.
Error: Couldn't save.
Check your connection and try again. Your data is still in the form.
Info: Holiday on 10/12.
The day doesn't count as an absence in the hours bank.
10.11 Confirmation modal
Focus goes to "Cancel", stays trapped in the modal, Escape closes it and focus returns to the button that opened it.
10.12 Side navigation
10.13 Time-tracking calendar
1: Regular day2: Regular day3: Day off4: Day off5: Regular day6: Regular day7: Absence8: Regular day9: Overtime10: Day off11: Day off12: Holiday13: Regular day14: Regular day15: Overtime16: Regular day17: Day off18: Day off19: Regular day20: Regular day21: Absence22: Regular day23: Regular day24: Day off25: Day off26: Regular day27: Regular day28: Overtime29: Regular day30: Regular day31: Day off
- Regular day
- Absence
- Overtime
- Day off
- Holiday
10.14 Digital onboarding progress
- DetailsDonePersonal and contract information
- DocumentsIn progressUpload and validation
- SignatureTo doContract and terms
- DoneTo doOnboarding complete
Extras: FAQ and avatar
What size of company does Vela RH serve?
Companies with 20 to 300 employees. Below that, the Essencial plan is usually enough.
How long does the rollout take?
Two weeks on average, with the import of the current spreadsheet done by our team.
Is there a lock-in period?
No. The contract is monthly and can be canceled with 30 days' notice.
Carla MendesRafael LimaFernanda AlvesJoão Mendes