본문으로 건너뛰기

Quiet Operations

HR App UI Design Template

Cohort is an HR app design with a calm, paper-warm look and a people-chip system, built for teams shipping HR and people-management products.

HR app dashboard screen with employee stats and pending approvals
HR app people directory screen with searchable employee list
HR app employee profile screen with compensation and job details

화면 살펴보기

Sleek에서 완전히 편집 가능한 HR 모바일 앱 디자인을 미리 보세요.

HR app dashboard screen with employee stats and pending approvals
HR app people directory screen with searchable employee list
HR app employee profile screen with compensation and job details
Org Chart화면 4
Approvals화면 5
Time Off화면 6
Onboarding화면 7

HR App 소개

Cohort is an HR app UI design template built around a "Quiet Operations" aesthetic: a warm paper-white canvas, deep slate text, and a single muted sage accent reserved for primary actions and positive status, with a soft clay tone flagging anything that needs attention. There are no heavy card borders or drop shadows; surfaces sit as inset panels separated by faint paper-tone shifts and hairline rules, while large thin tabular numerals keep headcounts, balances, and dates aligned in tidy columns.

The template ships seven connected screens that cover a full people-team workflow: a Dashboard with a greeting and hero stats, a searchable People Directory, an Employee Profile with compensation and tabs, an Approvals queue, a Time Off calendar with balances, an Org Chart tree, and a new-hire Onboarding checklist. A signature people-chip recurs throughout, a circular headshot paired with a tracked-out role label and a status dot (green active, clay pending, grey out-of-office), so the whole product feels populated with real humans.

Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your HR product needs. Then export it to code, copy it into Figma, or hand a prompt to an AI agent to build it for real, far faster than starting from a blank canvas.

포함된 화면

01

Dashboard

A personalized "Good morning, Priya" greeting over a hero stat row (142 employees, 6 open roles, pending approvals), a "Needs your attention" panel of approval people-chips, and an "Out today" list. The HR manager's daily command center.

02

People Directory

A searchable, filterable list of people-chips with role labels, status dots, and locations, plus department filter pills across the top. The fast way to find anyone in the company.

03

Employee Profile

A large header chip with Actions and Message buttons, tabs for Overview, Pay, Docs, and Time Off, and a compensation block showing base salary and equity in tidy tabular numerals.

04

Org Chart

An expandable tree of people-chips showing reporting lines from the CEO down through VPs, managers, and individual contributors. Makes team structure clear at a glance.

05

Approvals

A queue of expense and time-off requests as inset panels with requester chips, amounts, context, and Approve (sage) or Decline (ghost) actions, split into Pending and History tabs. Keeps decisions moving.

06

Time Off

A balance summary for vacation and sick days, a month calendar marking booked days in sage and pending requests in clay, and a request history list. Self-service leave at a glance.

07

Onboarding

A new-hire checklist for Daniel Reyes with a progress bar (4 of 9 tasks), required-action items with completed, overdue, and waiting states, plus a Team & IT section with assignees. Tracks every step of week one.

주요 기능

  • Quiet Operations aesthetic: paper-white canvas, sage accent, clay attention states
  • Tonal-stack surfaces with hairline rules and no drop shadows
  • Signature people-chip: avatar, tracked-out role label, and status dot
  • Tabular numerals for headcounts, balances, and salaries
  • Dashboard with hero stats and a needs-attention queue
  • Searchable directory with department filters
  • Approvals queue with sage approve and ghost decline actions
  • Time-off calendar with booked and pending day states

이런 분께 맞습니다

Founders validating an HR or people-management MVP
Product designers needing an HR app starting point
HR-tech teams prototyping a people platform
Indie developers building an internal HR tool

이런 것을 만들 수 있습니다

  • Launch an MVP for an HR or people-operations product
  • Mock up screens for an investor or stakeholder pitch
  • Hand a consistent HR UI off to developers
  • Explore a redesign of an existing HR mobile app

이 템플릿 사용 방법

  1. 1

    템플릿 열기

    화면을 둘러보고 전체 디자인을 미리 보며 아이디어에 맞는지 확인해 보세요.

  2. 2

    이 템플릿 사용

    한 번의 클릭으로 Sleek에서 완전히 편집 가능한 사본을 엽니다.

  3. 3

    AI로 편집

    원하는 것을 설명하기만 하면 팔레트 재스타일, 레이아웃 변경, 화면 추가·삭제가 가능합니다.

  4. 4

    내보내고 출시

    디자인을 내보내거나 개발자에게 넘기고, 출시를 향해 계속 만들어가세요.

궁금한 점에 답해 드립니다. 시작하기 전에 알아야 할 모든 것.

How do I build an HR app from this template?
Click "Use this template" to open Cohort in Sleek as your own editable project, then shape it by describing the changes you want: restyle the palette, edit any screen, and add the flows your product needs. You start from seven complete screens instead of a blank canvas, so you reach a working HR app UI design far faster.
What screens are included in this HR app UI design template?
Seven connected screens: Dashboard, People Directory, Employee Profile, Approvals, Time Off, Org Chart, and Onboarding. Together they cover the core flow of a people-management app, from approving requests to tracking leave and onboarding new hires.
Can I customize the HR app UI design?
Yes. Use the template in Sleek and edit any screen by chatting with the AI: change the palette, adjust layouts, swap labels, and add or remove flows. There's no manual redraw; you describe the change and it's applied.
Is this HR management app UI suitable for a people platform or internal tool?
Absolutely. The directory, approvals, time-off, org chart, and onboarding screens map cleanly onto HRIS products, internal people tools, and team-management apps. Adjust the fields and statuses to fit your organization.
Can I export the design to code or Figma?
Yes. Sleek exports your design as code, copies straight into Figma with no plugin, or hands you a ready-made prompt that an AI agent like Claude Code or Cursor can use to build it into a real, working app.
Is this HR app design template free to use?
You can open and explore the design for free, then use it in your own Sleek project to build on it. Editing and exporting follow Sleek's standard plans.

다른 문의가 있나요? support@sleek.design 주소로 이메일을 보내 주세요.

HR 앱 디자인 시작하기

Sleek에서 사용해 내 것으로 만드세요. 팔레트를 다시 스타일링하고, AI로 어떤 화면이든 편집한 뒤 코드나 Figma로 내보내세요.