Foundations
Typography
A complete reference for titles, paragraphs, font sizes, weights, spacing, and text treatments. Every specimen includes the Tailwind classes needed to reproduce it.
Usage & approach
Inter is the brand UI font. Normal paragraphs use text-base: 1rem, or 16px with the default 16px browser root. Leave the root size responsive to browser preferences. Choose heading elements by document hierarchy, then choose their visual size independently. Use one page h1 and do not skip heading levels. The 400, 500, 600, and 700 font files are loaded; the other Tailwind weight mappings are documented as reference-only. Italic is a browser-synthesized treatment unless a matching italic font file is supplied.
Specifications
- Default body
- font-sans text-base font-normal leading-7: 1rem type, 1.75rem line height.
- Page title
- text-4xl sm:text-5xl font-semibold tracking-tight leading-tight: 2.25rem → 3rem.
- Section title
- text-2xl sm:text-3xl font-semibold tracking-tight: 1.5rem → 1.875rem.
- Supporting UI
- text-sm (0.875rem) for labels; text-xs (0.75rem) for captions. These supplement 1rem paragraphs.
- Loaded weights
- font-normal 400, font-medium 500, font-semibold 600, font-bold 700. Other weights need matching font assets.
- Measure and spacing
- max-w-prose for reading; leading-7 for body; tracking-tight for larger headings; tracking-normal for paragraphs.
- Text colors
- Primary: text-[#183d2c] dark:text-[#f4f5f2]. Supporting: text-[#333] dark:text-[#c4c7c5].
- Data and code
- tabular-nums for aligned figures; font-mono for code and references. Match the selected font to the content.
Titles & heading hierarchy
Suggested H1–H6 styles for a content page. The page title grows from 2.25rem to 3rem at 640px. Headings express structure; a smaller heading can still be styled prominently when the hierarchy calls for it.
<div class="space-y-7">
<div><p class="mb-2 font-mono text-xs text-[#333] dark:text-[#c4c7c5]">H1 · page title · 2.25rem → 3rem</p><h1 class="text-4xl font-semibold leading-tight tracking-tight sm:text-5xl">Your coverage, clearly.</h1></div>
<div><p class="mb-2 font-mono text-xs text-[#333] dark:text-[#c4c7c5]">H2 · major section · 1.875rem → 2.25rem</p><h2 class="text-3xl font-semibold leading-tight tracking-tight sm:text-4xl">Policy overview</h2></div>
<div><p class="mb-2 font-mono text-xs text-[#333] dark:text-[#c4c7c5]">H3 · section · 1.5rem → 1.875rem</p><h3 class="text-2xl font-semibold leading-snug tracking-tight sm:text-3xl">Coverage details</h3></div>
<div><p class="mb-2 font-mono text-xs text-[#333] dark:text-[#c4c7c5]">H4 · subsection · 1.25rem</p><h4 class="text-xl font-semibold leading-snug">Travel benefits</h4></div>
<div><p class="mb-2 font-mono text-xs text-[#333] dark:text-[#c4c7c5]">H5 · group title · 1.125rem</p><h5 class="text-lg font-semibold leading-normal">Medical assistance</h5></div>
<div><p class="mb-2 font-mono text-xs text-[#333] dark:text-[#c4c7c5]">H6 · small title · 1rem</p><h6 class="text-base font-semibold leading-normal">Important information</h6></div>
</div>HTML + Tailwind CSS · fit to panel
Complete font-size scale
All 13 default Tailwind sizes, with rem values and pixel equivalents at a 16px root. Display sizes demonstrate the available scale; normal paragraph text remains 1rem. Each sample uses its default Tailwind line height.
<dl class="min-w-0">
<div class="grid min-w-0 items-center gap-3 border-b border-[#dfe7df] py-5 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">text-xs · 0.75rem / 12px</code><p class="mt-2 text-xs text-[#333] dark:text-[#c4c7c5]">Captions and metadata</p></dt><dd class="min-w-0 text-xs font-normal">Aa</dd></div>
<div class="grid min-w-0 items-center gap-3 border-b border-[#dfe7df] py-5 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">text-sm · 0.875rem / 14px</code><p class="mt-2 text-xs text-[#333] dark:text-[#c4c7c5]">Labels and supporting UI</p></dt><dd class="min-w-0 text-sm font-normal">Aa</dd></div>
<div class="grid min-w-0 items-center gap-3 border-b border-[#dfe7df] py-5 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">text-base · 1rem / 16px</code><p class="mt-2 text-xs text-[#333] dark:text-[#c4c7c5]">Default paragraphs</p></dt><dd class="min-w-0 text-base font-normal">Aa</dd></div>
<div class="grid min-w-0 items-center gap-3 border-b border-[#dfe7df] py-5 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">text-lg · 1.125rem / 18px</code><p class="mt-2 text-xs text-[#333] dark:text-[#c4c7c5]">Lead text and small titles</p></dt><dd class="min-w-0 text-lg font-normal">Aa</dd></div>
<div class="grid min-w-0 items-center gap-3 border-b border-[#dfe7df] py-5 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">text-xl · 1.25rem / 20px</code><p class="mt-2 text-xs text-[#333] dark:text-[#c4c7c5]">Subsection titles</p></dt><dd class="min-w-0 text-xl font-normal">Aa</dd></div>
<div class="grid min-w-0 items-center gap-3 border-b border-[#dfe7df] py-5 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">text-2xl · 1.5rem / 24px</code><p class="mt-2 text-xs text-[#333] dark:text-[#c4c7c5]">Section titles</p></dt><dd class="min-w-0 text-2xl font-normal">Aa</dd></div>
<div class="grid min-w-0 items-center gap-3 border-b border-[#dfe7df] py-5 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">text-3xl · 1.875rem / 30px</code><p class="mt-2 text-xs text-[#333] dark:text-[#c4c7c5]">Major section titles</p></dt><dd class="min-w-0 text-3xl font-normal">Aa</dd></div>
<div class="grid min-w-0 items-center gap-3 border-b border-[#dfe7df] py-5 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">text-4xl · 2.25rem / 36px</code><p class="mt-2 text-xs text-[#333] dark:text-[#c4c7c5]">Page titles</p></dt><dd class="min-w-0 text-4xl font-normal">Aa</dd></div>
<div class="grid min-w-0 items-center gap-3 border-b border-[#dfe7df] py-5 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">text-5xl · 3rem / 48px</code><p class="mt-2 text-xs text-[#333] dark:text-[#c4c7c5]">Small display titles</p></dt><dd class="min-w-0 text-5xl font-normal">Aa</dd></div>
<div class="grid min-w-0 items-center gap-3 border-b border-[#dfe7df] py-5 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">text-6xl · 3.75rem / 60px</code><p class="mt-2 text-xs text-[#333] dark:text-[#c4c7c5]">Display titles</p></dt><dd class="min-w-0 text-6xl font-normal">Aa</dd></div>
<div class="grid min-w-0 items-center gap-3 border-b border-[#dfe7df] py-5 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">text-7xl · 4.5rem / 72px</code><p class="mt-2 text-xs text-[#333] dark:text-[#c4c7c5]">Large display titles</p></dt><dd class="min-w-0 text-7xl font-normal">Aa</dd></div>
<div class="grid min-w-0 items-center gap-3 border-b border-[#dfe7df] py-5 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">text-8xl · 6rem / 96px</code><p class="mt-2 text-xs text-[#333] dark:text-[#c4c7c5]">Oversized display; use sparingly</p></dt><dd class="min-w-0 text-8xl font-normal">Aa</dd></div>
<div class="grid min-w-0 items-center gap-3 border-b border-[#dfe7df] py-5 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">text-9xl · 8rem / 128px</code><p class="mt-2 text-xs text-[#333] dark:text-[#c4c7c5]">Oversized display; use sparingly</p></dt><dd class="min-w-0 text-9xl font-normal">Aa</dd></div>
</dl>HTML + Tailwind CSS · fit to panel
Font weights
The complete Tailwind 100–900 mapping. Only loaded Inter faces are rendered as visual specimens, so unsupported weights are not presented as accurate samples. Prefer 400 for paragraphs, 500 for labels, 600 for titles, and 700 for strong emphasis.
<dl>
<div class="grid gap-3 border-b border-[#dfe7df] py-4 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">font-thin · 100</code><p class="mt-1 text-xs text-[#333] dark:text-[#c4c7c5]">Thin · not loaded</p></dt><dd><span class="text-sm text-[#333] dark:text-[#c4c7c5]">Reference only · additional font asset required</span></dd></div>
<div class="grid gap-3 border-b border-[#dfe7df] py-4 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">font-extralight · 200</code><p class="mt-1 text-xs text-[#333] dark:text-[#c4c7c5]">Extra light · not loaded</p></dt><dd><span class="text-sm text-[#333] dark:text-[#c4c7c5]">Reference only · additional font asset required</span></dd></div>
<div class="grid gap-3 border-b border-[#dfe7df] py-4 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">font-light · 300</code><p class="mt-1 text-xs text-[#333] dark:text-[#c4c7c5]">Light · not loaded</p></dt><dd><span class="text-sm text-[#333] dark:text-[#c4c7c5]">Reference only · additional font asset required</span></dd></div>
<div class="grid gap-3 border-b border-[#dfe7df] py-4 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">font-normal · 400</code><p class="mt-1 text-xs text-[#333] dark:text-[#c4c7c5]">Normal · loaded</p></dt><dd><span class="text-xl font-normal">One Insurance</span></dd></div>
<div class="grid gap-3 border-b border-[#dfe7df] py-4 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">font-medium · 500</code><p class="mt-1 text-xs text-[#333] dark:text-[#c4c7c5]">Medium · loaded</p></dt><dd><span class="text-xl font-medium">One Insurance</span></dd></div>
<div class="grid gap-3 border-b border-[#dfe7df] py-4 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">font-semibold · 600</code><p class="mt-1 text-xs text-[#333] dark:text-[#c4c7c5]">Semibold · loaded</p></dt><dd><span class="text-xl font-semibold">One Insurance</span></dd></div>
<div class="grid gap-3 border-b border-[#dfe7df] py-4 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">font-bold · 700</code><p class="mt-1 text-xs text-[#333] dark:text-[#c4c7c5]">Bold · loaded</p></dt><dd><span class="text-xl font-bold">One Insurance</span></dd></div>
<div class="grid gap-3 border-b border-[#dfe7df] py-4 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">font-extrabold · 800</code><p class="mt-1 text-xs text-[#333] dark:text-[#c4c7c5]">Extra bold · not loaded</p></dt><dd><span class="text-sm text-[#333] dark:text-[#c4c7c5]">Reference only · additional font asset required</span></dd></div>
<div class="grid gap-3 border-b border-[#dfe7df] py-4 last:border-0 dark:border-[#3d4140] sm:grid-cols-[14rem_minmax(0,1fr)]"><dt><code class="text-sm">font-black · 900</code><p class="mt-1 text-xs text-[#333] dark:text-[#c4c7c5]">Black · not loaded</p></dt><dd><span class="text-sm text-[#333] dark:text-[#c4c7c5]">Reference only · additional font asset required</span></dd></div>
</dl>HTML + Tailwind CSS · fit to panel
Display, lead, body & supporting text
Display text is for short introductions, lead text introduces a section, and regular paragraphs stay at 1rem. Smaller labels and captions serve distinct supporting roles.
<div class="max-w-prose space-y-6">
<p class="text-xs font-semibold uppercase tracking-wider text-[#006838] dark:text-[#f4f5f2]">One Insurance / UI reference</p>
<p class="text-4xl font-semibold leading-tight tracking-tight text-balance sm:text-6xl">Clarity in every detail.</p>
<p class="text-lg font-normal leading-relaxed text-[#333] dark:text-[#c4c7c5]">A clear lead paragraph introduces the subject before the supporting details.</p>
<p class="text-base font-normal leading-7 text-[#333] dark:text-[#c4c7c5]">Normal body copy is 1rem. Keep a comfortable line length and enough space between paragraphs so people can read, scan, and return to the information they need.</p>
<div><p class="text-sm font-medium">Policy reference</p><p class="mt-2 text-xs leading-5 text-[#808080] dark:text-[#b2b7b4]">Supporting caption · 0.75rem. Use it for metadata rather than long explanations.</p></div>
</div>HTML + Tailwind CSS · fit to panel
Line height
Named leading utilities are unitless multipliers. leading-7 is spacing-based: 1.75rem (28px at the default root), making it the normal paragraph setting. leading-none (1) is suitable only for short display text, not body paragraphs.
<div class="grid gap-6 sm:grid-cols-2">
<div><p class="mb-3 font-mono text-xs">leading-tight · 1.25</p><p class="text-2xl font-semibold leading-tight">Clear headings need a compact, readable rhythm.</p></div>
<div><p class="mb-3 font-mono text-xs">leading-snug · 1.375</p><p class="text-xl font-semibold leading-snug">Use a little more room for headings that wrap to another line.</p></div>
<div><p class="mb-3 font-mono text-xs">leading-normal · 1.5</p><p class="text-base leading-normal">A practical rhythm for short supporting content and compact interface explanations.</p></div>
<div><p class="mb-3 font-mono text-xs">leading-relaxed · 1.625</p><p class="text-base leading-relaxed">A relaxed rhythm gives longer sentences more room without changing the text size.</p></div>
<div><p class="mb-3 font-mono text-xs">leading-7 · 1.75rem</p><p class="text-base leading-7">Our default paragraphs use this line height with 1rem text for comfortable reading.</p></div>
<div><p class="mb-3 font-mono text-xs">leading-loose · 2</p><p class="text-base leading-loose">Loose spacing can be useful for short instructions, but avoid it in dense forms.</p></div>
</div>HTML + Tailwind CSS · fit to panel
Letter spacing
Tailwind tracking values use em units and scale with the text size. Use tighter tracking for larger titles, normal tracking for paragraphs, and wider tracking only for short labels.
<div class="space-y-5">
<div><p class="font-mono text-xs">tracking-tighter · -0.05em</p><p class="mt-2 text-3xl font-semibold tracking-tighter">One Insurance</p></div>
<div><p class="font-mono text-xs">tracking-tight · -0.025em</p><p class="mt-2 text-3xl font-semibold tracking-tight">One Insurance</p></div>
<div><p class="font-mono text-xs">tracking-normal · 0em</p><p class="mt-2 text-base tracking-normal">A natural rhythm for normal paragraph text.</p></div>
<div><p class="font-mono text-xs">tracking-wide · 0.025em</p><p class="mt-2 text-sm font-medium tracking-wide">Coverage overview</p></div>
<div><p class="font-mono text-xs">tracking-wider · 0.05em</p><p class="mt-2 text-xs font-semibold uppercase tracking-wider">Policy information</p></div>
<div><p class="font-mono text-xs">tracking-widest · 0.1em</p><p class="mt-2 text-xs font-semibold uppercase tracking-widest">Reference library</p></div>
</div>HTML + Tailwind CSS · fit to panel
Font families
Use font-sans (Inter) for the interface. font-mono uses the system monospace stack for technical text. font-serif shows the system serif alternative for editorial exploration; it is not the default brand font.
<div class="space-y-6">
<div><p class="mb-2 font-mono text-xs">font-sans · Inter</p><p class="font-sans text-base leading-7">The default voice for the One Insurance interface.</p></div>
<div><p class="mb-2 font-mono text-xs">font-mono · system monospace</p><p class="break-all font-mono text-base leading-7">OI-DEMO-0001 / quotation_reference</p></div>
<div><p class="mb-2 font-mono text-xs">font-serif · system serif</p><p class="font-serif text-xl leading-relaxed">An editorial alternative for a different reading context.</p></div>
</div>HTML + Tailwind CSS · fit to panel
Emphasis, links & text decoration
Use strong and em for semantic emphasis, rather than choosing a visual class alone. Links need a real destination and a visible focus style. The sample link stays within this preview. Italic may be synthesized because the current font configuration loads upright faces.
<div class="max-w-prose space-y-5 text-base leading-7">
<p><strong class="font-bold">Important information</strong> uses a loaded 700 weight. Use <em class="italic">italic emphasis</em> sparingly and retain the meaning in the sentence.</p>
<p><a href="#policy-note" class="font-medium text-[#006838] underline decoration-1 underline-offset-4 focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:text-[#f4f5f2] dark:focus-visible:outline-white">Read the policy note</a></p>
<p><mark class="rounded-sm bg-[#d0e3c8] px-1 text-[#183d2c]">Highlighted text</mark> marks a relevant passage. <del class="line-through">Previous wording</del> represents removed content.</p>
<p><span class="uppercase">Uppercase</span>, <span class="lowercase">LOWERCASE</span>, and <span class="capitalize">capitalized labels</span> are visual transformations.</p>
<p id="policy-note" class="text-[#333] dark:text-[#c4c7c5]">Example policy note: the owning application and insurer remain the source of approved policy wording.</p>
</div>HTML + Tailwind CSS · fit to panel
Lists & definitions
Use unordered lists for related points, ordered lists for sequences, and definition lists for label/value relationships. Keep list content at the normal 1rem body size.
<div class="grid gap-8 text-base leading-7 sm:grid-cols-2">
<div><h3 class="mb-3 text-lg font-semibold">Review checklist</h3><ul class="list-disc space-y-2 pl-5 marker:text-[#006838] dark:marker:text-[#c4c7c5]"><li>Confirm traveller details.</li><li>Check coverage dates.</li><li>Review the selected plan.</li></ul></div>
<div><h3 class="mb-3 text-lg font-semibold">Quotation steps</h3><ol class="list-decimal space-y-2 pl-5 marker:font-semibold"><li>Enter trip details.</li><li>Choose a plan.</li><li>Review the quotation.</li></ol></div>
<dl class="grid gap-4 sm:col-span-2 sm:grid-cols-2"><div><dt class="font-medium">Policy reference</dt><dd class="mt-1 break-all font-mono text-[#333] dark:text-[#c4c7c5]">OI-DEMO-0001</dd></div><div><dt class="font-medium">Coverage period</dt><dd class="mt-1 text-[#333] dark:text-[#c4c7c5]">01–07 November 2026</dd></div></dl>
</div>HTML + Tailwind CSS · fit to panel
Quotes & attribution
A blockquote separates a quoted passage from surrounding prose. Keep the source close to the quotation; this is an internal sample principle, not a customer testimonial.
<figure class="max-w-prose border-l-4 border-[#006838] pl-5">
<blockquote class="text-lg font-medium leading-relaxed"><p>Make the important information easy to find and the next step easy to understand.</p></blockquote>
<figcaption class="mt-4 text-sm text-[#333] dark:text-[#c4c7c5]">OI Developers · sample interface principle</figcaption>
</figure>HTML + Tailwind CSS · fit to panel
Numbers, amounts & technical text
Use tabular-nums to align digits in financial comparisons and lining-nums for an even numeral height when supported by the font. Superscript and subscript are semantic elements. All amounts and references here are fictional.
<div class="max-w-md space-y-6">
<dl class="space-y-3 text-base lining-nums tabular-nums"><div class="flex justify-between gap-4"><dt>Sample premium</dt><dd>₱1,250.00</dd></div><div class="flex justify-between gap-4"><dt>Illustrative adjustment</dt><dd>₱0.00</dd></div><div class="flex justify-between gap-4 border-t border-[#dfe7df] pt-3 font-semibold dark:border-[#3d4140]"><dt>Sample total</dt><dd>₱1,250.00</dd></div></dl>
<p class="text-base leading-7">A reference<sup class="text-xs">1</sup> can point to a note. Subscripts preserve notation such as CO<sub class="text-xs">2</sub>.</p>
<p class="text-base leading-7">Use <code class="rounded bg-[#f1f2f0] px-1.5 py-0.5 font-mono text-sm dark:bg-[#303232]">policy_reference</code> for identifiers and <kbd class="rounded border border-[#c7d4c9] px-1.5 py-0.5 font-mono text-xs dark:border-[#565c58]">Tab</kbd> for keyboard keys.</p>
</div>HTML + Tailwind CSS · fit to panel
Alignment, wrapping & truncation
Keep reading paragraphs left-aligned. Use centered text for short introductions and right alignment for numbers. text-balance improves heading wraps, text-pretty reduces awkward body wraps, and truncation should be limited to secondary content with a way to inspect the full value.
<div class="space-y-6 text-base leading-7">
<div class="space-y-2"><p class="text-left">Left aligned · default reading direction</p><p class="text-center">Centered · short statement</p><p class="text-right tabular-nums">Right aligned · ₱1,250.00</p></div>
<h3 class="max-w-md text-2xl font-semibold leading-snug text-balance">A clear view of the protection you choose.</h3>
<p class="max-w-prose text-pretty">Use a comfortable measure and natural wrapping for readable explanations. Long paragraphs should not stretch across an entire wide screen.</p>
<p class="break-words">Long references can wrap: DEMO-POLICY-REFERENCE-000000000000000000000001.</p>
<div><p class="mb-2 font-mono text-xs">truncate · single-line preview</p><p class="max-w-56 truncate" title="Travel Essential coverage overview and supporting information">Travel Essential coverage overview and supporting information</p></div>
<div><p class="mb-2 font-mono text-xs">line-clamp-2 · secondary excerpt</p><p class="line-clamp-2 max-w-sm">A short excerpt can help someone scan a longer document. Keep required coverage terms and important actions fully visible, and provide access to the complete document in the host application.</p></div>
</div>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.