Skip to content
One Insurance

IFRC-OI / UI theme library

One brand.
Every interface.

Explore the visual foundations and Tailwind CSS patterns behind a consistent IFRC One Insurance experience.

Explore references About the project
The IFRC-OI visual language 01 / Preview

Clarity in
every detail.

Purposeful color. Clear typography.
Familiar patterns, across every journey.

Primary action Secondary
Our brand paletteIFRC-OI
Static styles. Ready to reference.Tailwind CSS

A reference for what comes next.

Explore the UI library
01

Brand foundations

Color, type, spacing, and the details that make an interface feel like One Insurance.

02

UI patterns

Visual references for buttons, forms, navigation, and everyday interface elements.

03

Insurance journeys

A shared direction for plan selection, quotations, payment, and policy issuance screens.

04

Developer guidance

A home for platform architecture, API contracts, integrations, and operational documentation.

Brand and text colors.

Logo greens build the brand palette. Charcoal and supporting neutrals keep interface text clear and readable.

Insurance green

#006838

bg-[#006838]
Leaf green

#559E45

bg-[#559e45]
Soft sage

#D0E3C8

bg-[#d0e3c8]
Canvas

#F1F2F0

bg-[#f1f2f0] border-[#dfe7df]
Off-white · page canvas

#FCFDFB

bg-[#fcfdfb] border-[#dfe7df]
Aa
Dark charcoal · hero text

#183D2C

text-[#183d2c] font-semibold
Aa
Secondary text

#333

text-[#333] font-medium
Aa
Muted text

#808080

text-[#808080] font-medium
Aa
Inverse text on green

#FFFFFF

bg-[#006838] text-white font-semibold

Shared references.
Consistent experiences.

OI Developers brings UI references and development documentation together for the IFRC One Insurance team.

Built to guide your frontend

Inspect a visual example, copy its Tailwind CSS styles, and adapt the pattern to your project.

Focused on visual design

Static mockups define the look and layout. Framework components, transitions, and animations sit outside this library's scope.