Designing Humanely’s Company OS

Client
Humanely
Year
2026
Services
Product design, Design system
Team
reDesign, with reLabs
Lens, the Company OS home: a greeting over an illustrated landscape, an ask bar, the company health score, an AI insight and the activity timeline
Lens brings the company overview, assistant, and recent activity together. The screens use sample company data.

Overview

Company OS brings recruiting, HR, payroll, and compliance into a shared workspace. Company teams review records and take action there, while members use the portal for their own applications, pay, leave, and documents.

As founding designer, I worked across information architecture, interface design, and implementation. I designed how company teams find records, how members reach their own tasks, and how those flows share a design language.

The Lens home puts the assistant alongside company health and recent activity.
Company app examples
4
Recruit, HR, Compliance, and Payroll in the captured October 2026 interface.
Member role examples
3
Candidate, employee, and alumni homes shown in this case study.
Interface themes
2
Lens is shown in light and dark in the October 2026 captures.

The design challenge

As the suite grew, its app boundaries were becoming the navigation. A hiring manager drafting an offer still needed the candidate’s details, and a compliance operator had to pick through multiple filing periods to find the underlying duty. The interface needed to make the next action clear while keeping the relevant record in view.

Planning the information architecture

We organized the main rail around the work people recognize. Home brings together the overview and starting actions. Company, People, and Finance own their records, and Activity brings events into a single timeline.

Company
Legal entities, offices, assets, and business relationships such as vendors and customers.
People
Employee records, roles, and the org chart. Recruiting hands off to HR when a candidate is hired.
Finance
Money in, money out, and banking. Financial activity can reference a vendor whose record lives in Company.
Activity
A shared chronology for company events and changes across workspaces.

Recruit, HR, Compliance, and Payroll keep their own workflows inside the shared shell. The member portal gives individuals a separate home for their personal tasks and records.

Lens home in light mode
A shared frame carries across company apps, with accents marking each workspace.

UX decisions in practice

Keep the record visible while someone acts
When drafting an offer or scheduling an interview, a contextual panel keeps the candidate’s stage and key details in view. A full-page view gives the operator space for deeper review.
Organize compliance around the duty
A filing-first list repeated the same obligation across periods. We made the obligation the entry point and moved its filings into tabs so the operator can see the duty and its history together.
Reuse collection behavior across views
Tables, cards, and boards share filtering and sorting. An empty search offers Clear filters. A genuinely empty collection offers a way to create the first record.
Protect edits and make status readable
Shared forms keep validation and save actions predictable and warn before discarding edits. In recruiting, a pending action has its own label and color, with red reserved for a negative outcome.

A shared portal for three member roles

Member portal

The member home changes with the person using it. Candidates can track an application and respond to offers. Employees can check in and review leave or pending actions. Alumni can find their letters. The same card structure gives each role a familiar home.

Candidate widgets cover application progress, offers, and next steps. The greeting changes with the time of day.
On phones, members browse cards horizontally and use the same bottom navigation across roles.

Humanely Design Language

Design system

HDL defines the type, color, spacing, and controls shared across Company OS. Neutral surfaces give dense records room to breathe, and app accents distinguish different workspaces. Status is communicated with labels and icons alongside color.

Color

  • Humanely blue

    The Humanely brand accent in the captured interface.

    1. Tint#EDF4FF
    2. Info#478AFF
    3. Primary#0074F8

  • Sub-app accents

    Each app carries one accent of its own on its buttons and focus rings.

    1. Recruit#CA358B
    2. HR#008186
    3. Compliance#008736
    4. Payroll#9C6A00
    5. Books#C64E00

  • Company

    Module color for company records.

    1. Fill#EDE9FE
    2. Border#A78BFA
    3. Text#5B21B6

  • People

    Module color for people records.

    1. Fill#FCE7F3
    2. Border#F9A8D4
    3. Text#9D174D

  • Compliance

    Module color for compliance records.

    1. Fill#D1FAE5
    2. Border#6EE7B7
    3. Text#065F46

  • Finance

    Module color for finance records.

    1. Fill#FEF3C7
    2. Border#FCD34D
    3. Text#92400E

  • Vendors

    Module color for vendor records.

    1. Fill#E0F2FE
    2. Border#7DD3FC
    3. Text#075985

  • Customers

    Module color for customer records.

    1. Fill#FEF9C3
    2. Border#FDE047
    3. Text#854D0E

  • Warm neutrals

    Surfaces, boundaries, and text in the captured interface.

    1. Page#F9F7F4
    2. Card#FBFAF9
    3. Muted#F1EDE5
    4. Border#EAE5DC
    5. Divider#E8E3DA
    6. Placeholder#9E9082
    7. Quiet text#5A4A31
    8. Body#3C3121
    9. Heading#0F0C08

  • Success

    Done and healthy.

    1. Tint#E7F6EF
    2. Color#22C55E
    3. Text#15803D

  • Warning

    Needs a look soon.

    1. Tint#FFF4ED
    2. Color#F59E0B

  • Error

    Blocked or overdue.

    1. Tint#FEF2F2
    2. Color#EF4444
    3. Text#DC2626

  • Chart colors

    The categorical palette for charts and tags.

    1. Blue#3B82F6
    2. Emerald#10B981
    3. Pink#EC4899
    4. Violet#8B5CF6
    5. Teal#14B8A6
    6. Orange#F97316
    7. Highlight#FEF08A

  • AI and focus

    Colors for the assistant, its gradient and the focus ring.

    1. AI#F7FE87
    2. AI cyan#7DBFC3
    3. AI blue#007FFF
    4. AI orange#FF6B35
    5. Accent#7367EE
    6. Indigo#6366F1
    7. Focus#0AA45E

Type

  • Geist

    400 · 600

    3 candidates are ready for a decision

    Portal titles and interface text

  • Geist Mono

    500

    OCT 31 87% 16 owed

    Numbers

  1. Hero72px / 72px
  2. Display30px / 33px
  3. Page title28px / 32px
  4. Stat22px / 25px
  5. Card title17px / 22px
  6. Body14px / 22px
  7. Label13px / 18px
  8. Meta12px / 17px
  9. Footnote11px / 15px
  10. Chart axis10px / 12px

Lucide

  • Plus
  • File Text
  • Triangle Alert
  • Check
  • Trash 2
  • Users
  • Shield Check
  • Building 2
  • List Checks
  • Calendar Clock
  • Arrow Up Right
  • More Horizontal
  • Square Pen
  • Arrow Left
  • Lock
  • Calendar Days
  • Info
  • Pencil
  • Briefcase
  • History
  • Upload
  • Check Circle 2
  • Clock
  • Circle Dot
  • User Plus
  • Download
  • Eye
  • Search
  • Message Square
  • Arrow Right
  • Calendar Range
  • Sparkles
  • Pin
  • External Link
  • Ban
  • Layers
  • Link 2
  • Activity
  • Paperclip
  • Inbox
  • Scroll Text
  • Refresh Cw
The HDL sheet documents the palette, type scale, and icons used across Company OS.

From components to complete pages

Design implementation

The library shows how shared controls work together on real pages. Collection views bring summaries, filters, and records into one place. Detail pages give record content and properties their own space, while portal widgets surface the next action for each member.

HDL's Accounts collection page: a KPI strip, a toolbar and a data grid
HDL portal widgets: tasks, pay, calendar, leave and hours
An HDL module home: openings, a decision banner, scorecards and the pipeline
An HDL detail page: an opportunity with its summary, details and properties
The library applies the same controls to collections, module homes, member widgets, and record details.

What the team built

The company and member portals use the same foundations for different jobs. HDL lives alongside the apps that use it, so updates to a shared control can ship with the screens that depend on it. The case study shows implemented patterns using sample company data.

Credits

Team

  • reDesign Product interface design and HDL design system
  • reLabs Engineering