reDesign
Start a project
Start a project

Company OS. We designed Humanely's company apps, member portal, and design system.

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 groups the company overview, assistant entry point, and activity in one home. Product captures use sample company data.

The brief

Company OS is Humanely's application for company administration, including recruiting, HR, payroll, and compliance. Administrators need to review records and act across those areas. Members need access to their own applications, pay, leave, and documents.

We designed the company apps, member portal, and HDL, their shared interface system. The work connects consistent navigation and record layouts with the different information and actions each role needs.

The question box sits above the company overview, with health information and activity below it.
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.
Lens home in light mode
Recruiting, HR, compliance, and payroll retain the shared frame while app accents distinguish their controls and navigation.

We adapted a shared card layout to different member roles.

Member portal

Candidates follow an application and respond to offers. Employees check in, review leave, and open pending actions. Alumni access their letters. A shared card layout gives these tasks a consistent structure while the content changes with the member's role. Greeting cards establish the home; data and action cards organize the work beneath them.

Candidate cards bring application stages, offers, and related actions into the portal; greeting illustrations vary with the time of day.
The captured phone layouts use a horizontal card deck and bottom navigation, with role-specific content inside the shared frame.

We defined shared interface rules in HDL.

Design system

HDL, the Humanely design system, defines type, color, spacing, and reusable controls. Warm neutral surfaces carry dense records, with separate colors for app identity and status. Status patterns combine words and icons with color. The system also defines collection, detail, and portal patterns, connecting individual controls to the layouts that use them.

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
  • Alert Triangle
The sheet brings together app accents, status roles, warm surfaces, and the Geist typography used in the portal captures.

We carried the design into reusable page patterns.

Design implementation

The component library makes the relationship between controls and full pages visible. Collection patterns group summary figures, filters, and records; detail patterns separate the record's content from its properties. Portal widgets provide a different composition for personal tasks. Together, these examples connect shared interface rules with the tasks each page supports.

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 examples show shared controls arranged as an accounts list, a module home, portal widgets, and a record detail page.

Credits

Team

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

Next project: Keep app

Keep app. A project workspace that people and their AI agents share