Getting started
Introduction
A shared visual language for One Insurance. Explore the foundations, inspect the details, and bring consistent interfaces to every IFRC-OI project.
How to use this library
This library documents visual references using plain HTML and Tailwind CSS. Copy an example into your frontend and adapt its content and semantics. Most examples are portable HTML; the Icons page also documents the sun and moon Blade components provided by this application. API contracts and production insurance workflows are outside this library. Transitions and animations are intentionally outside the reference scope.
Specifications
- Foundation
- Tailwind CSS utilities with the existing Vite integration.
- Typography
- Inter; a neutral sans-serif with readable forms and tables.
- Brand
- Insurance green #006838 and leaf green #559e45, supported by sage surfaces.
- Interaction scope
- Documentation controls work; example actions are visual references.
The interface at a glance
A responsive policy overview combining the primary action, a neutral surface, and clear text hierarchy.
<section class="mx-auto max-w-3xl rounded-lg border border-[#dfe7df] bg-white p-6 dark:border-[#3d4140] dark:bg-[#262828] sm:p-8">
<span class="text-sm font-semibold text-[#006838] dark:text-[#f4f5f2]">One Insurance / Policy overview</span>
<h2 class="mt-3 text-2xl font-semibold tracking-tight sm:text-3xl">Protection for the journey ahead.</h2>
<p class="mt-3 max-w-xl text-base leading-7 text-[#333] dark:text-[#c4c7c5]">Keep policy details, coverage, and next steps in one clear view.</p>
<div class="mt-6 grid gap-4 sm:grid-cols-3">
<div class="rounded-md bg-[#f1f2f0] p-4 dark:bg-[#303232]"><p class="text-xs text-[#333] dark:text-[#c4c7c5]">Plan</p><p class="mt-2 font-semibold">Travel Essential</p></div>
<div class="rounded-md bg-[#f1f2f0] p-4 dark:bg-[#303232]"><p class="text-xs text-[#333] dark:text-[#c4c7c5]">Coverage</p><p class="mt-2 font-semibold">7 days</p></div>
<div class="rounded-md bg-[#f1f2f0] p-4 dark:bg-[#303232]"><p class="text-xs text-[#333] dark:text-[#c4c7c5]">Status</p><p class="mt-2 font-semibold">Ready for review</p></div>
</div>
<button type="button" class="mt-6 inline-flex min-h-11 items-center justify-center rounded-md bg-[#006838] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#00552e] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:bg-[#006838] dark:text-white dark:hover:bg-[#00552e] dark:focus-visible:outline-[#006838] disabled:cursor-not-allowed disabled:opacity-50">View policy</button>
</section>HTML + Tailwind CSS · fit to panel
Bring this into your project
Copy the HTML from the code panel. Keep complete utility names in files scanned by Tailwind, retain accessible labels and focus styles, and connect actions to your own application. Preview controls belong to this documentation and are not part of the copied example.