<div class="p-6 max-w-7xl mx-auto space-y-8"> <!-- Header / Introduction --> <div class="callout"> <p class="mb-1 text-sm font-mono"> <strong>PRODUCTION TYPOGRAPHY SYSTEM:</strong> 14px base system with Proxima Nova + Arial<br> <strong>HIERARCHY:</strong> Display (48px) > H1 (22px) > H2 (18px) > H3 (16px) > H4 (14px) > H5 (12px)<br> <strong>BODY TEXT:</strong> Large (18px) > Medium (16px) > Small (14px, default) > XS (12px)<br> <strong>INTERACTIVE:</strong> Interaction (14px) | Indicator (12px) </p> <p class="mb-0 text-sm text-muted"> Use semantic HTML tags with production classes for consistent, accessible typography. Display and H1-H3 use Proxima Nova Bold; H4-H5 and all body text use Arial. </p> </div> <!-- Quick Reference Footer --> <div class="callout"> <p class="mb-1 text-sm font-semibold">Production Typography Quick Reference</p> <p class="mb-0 text-xs text-muted font-mono"> <strong>Display & Headings:</strong> .text-display | .h1-.h5 (or .text-heading-1 to .text-heading-5)<br> <strong>Body Text:</strong> .text-body-{l|m|s|xs} - L=18px, M=16px, S=14px (default), XS=12px<br> <strong>Interactive:</strong> .text-interaction (14px, buttons) | .text-indicator (12px, badges)<br> <strong>Utilities:</strong> .prose (800px max-width container)<br> <strong>Colors:</strong> .text-{primary|secondary|success|danger|warning|info|dark|light|muted|white|black}<br> <strong>Weights:</strong> .font-{light|normal|medium|semibold|bold} | <strong>Style:</strong> .italic, .not-italic<br> <strong>Decoration:</strong> .underline, .line-through, .no-underline<br> <strong>Alignment:</strong> .text-{left|center|right|justify} | <strong>Transform:</strong> .{lowercase|uppercase|capitalize}<br> <strong>Wrapping:</strong> .whitespace-{normal|nowrap}, .break-words, .truncate<br> <strong>Special:</strong> .mark, .blockquote, .list-unstyled, .list-inline </p> </div> <!-- Section 2: Heading Typography --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Heading Typography</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Usage Guide:</strong><br> <strong>H1 (22px):</strong> Main title of all pages<br> <strong>H2 (18px):</strong> Title of a section/block inside a page<br> <strong>H3 (16px):</strong> Title of a listed content inside a page or sub-section<br> <strong>H4 (14px):</strong> Input label or table title<br> <strong>H5 (12px):</strong> Help text titles, low-priority sub-sections<br> <span class="text-xs">Note: H1-H3 use Proxima Nova Bold; H4-H5 use Arial Bold. H6 is aliased to H5.</span> </p> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <!-- H1-H3: Proxima Nova Bold --> <div> <p class="text-sm font-medium mb-3">H1-H3: Proxima Nova Bold</p> <div class="space-y-3"> <div> <h1 class="h1">Heading 1 - Main Page Title</h1> <code class="text-xs text-muted">.h1 or .text-heading-1</code> </div> <div> <h2 class="h2">Heading 2 - Section Title</h2> <code class="text-xs text-muted">.h2 or .text-heading-2</code> </div> <div> <h3 class="h3">Heading 3 - Sub-section Title</h3> <code class="text-xs text-muted">.h3 or .text-heading-3</code> </div> </div> </div> <!-- H4-H5: Arial Bold --> <div> <p class="text-sm font-medium mb-3">H4-H5: Arial Bold</p> <div class="space-y-3"> <div> <h4 class="h4">Heading 4 - Input Labels</h4> <code class="text-xs text-muted">.h4 or .text-heading-4</code> </div> <div> <h5 class="h5">Heading 5 - Help Text Titles</h5> <code class="text-xs text-muted">.h5 or .text-heading-5</code> </div> <div> <h6 class="h6">Heading 6 (aliased to H5)</h6> <code class="text-xs text-muted">.h6 (renders same as .h5)</code> </div> </div> </div> </div> </div> <!-- Section 3: Body Typography --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Body Typography</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>All body text uses Arial.</strong> Choose the appropriate size based on content emphasis:<br> <strong>Body L (18px):</strong> Short texts that need much emphasis<br> <strong>Body M (16px):</strong> Texts that need emphasis<br> <strong>Body S (14px):</strong> Default for all regular texts (most common)<br> <strong>Body XS (12px):</strong> Help text or texts with low read priority </p> </div> <div class="space-y-4"> <div> <p class="text-body-l mb-1"> This is Body Large (18px). Use for short emphasized text that needs prominence, such as introductory paragraphs or key statements. </p> <code class="text-xs text-muted">.text-body-l</code> </div> <div> <p class="text-body-m mb-1"> This is Body Medium (16px). Use for text that needs emphasis but is longer than a brief statement, such as important descriptions or highlighted content. </p> <code class="text-xs text-muted">.text-body-m</code> </div> <div> <p class="text-body-s mb-1"> This is Body Small (14px). This is the default for all regular text throughout the application. Use for standard paragraphs, descriptions, and general content. Most of your body text should use this size. </p> <code class="text-xs text-muted">.text-body-s (or no class for default sizing)</code> </div> <div> <p class="text-body-xs mb-1"> This is Body Extra Small (12px). Use as help text, low-priority information, captions, timestamps, or fine print. This is the smallest body text size. </p> <code class="text-xs text-muted">.text-body-xs</code> </div> </div> <div class="mt-5 p-4 bg-neutral-100 rounded"> <p class="text-sm font-medium mb-2">Visual Comparison</p> <div class="space-y-2"> <p class="text-body-l mb-0">Body L - Emphasized introduction text</p> <p class="text-body-m mb-0">Body M - Secondary emphasis text</p> <p class="text-body-s mb-0">Body S - Default body text (most common)</p> <p class="text-body-xs mb-0">Body XS - Help text and captions</p> </div> </div> </div> <!-- Section 4: Interactive & Indicator Typography --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Interactive & Indicator Typography</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <!-- Interaction Typography --> <div> <div class="callout mb-3"> <p class="mb-0 text-sm"> <strong>Interaction (14px, Arial, lh 1.15):</strong> Used in buttons and standalone hyperlinks. Applied automatically via button component. </p> </div> <div class="space-y-3"> <button class="btn btn-primary" type="button">Primary Button</button> <button class="btn btn-outline-secondary" type="button">Secondary Button</button> <p class="text-body-s mb-0"> Buttons automatically use <code class="text-xs">.text-interaction</code> sizing internally. </p> </div> </div> <!-- Indicator Typography --> <div> <div class="callout mb-3"> <p class="mb-0 text-sm"> <strong>Indicator (12px, Arial, lh 1.16):</strong> Used for badge labels and indication labels throughout the UI. </p> </div> <div class="space-y-3"> <div> <span class="text-indicator px-2 py-1 bg-primary text-white rounded">Badge Label</span> <span class="text-indicator px-2 py-1 bg-success text-white rounded ml-2">Status</span> </div> <p class="text-body-s mb-0"> Use <code class="text-xs">.text-indicator</code> for small labels and badges. </p> </div> </div> </div> </div> <!-- Section 1: Display Typography --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Display Typography</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Display (48px, Proxima Nova Semibold, lh 1.0):</strong> Short titles that need emphasis. Use for hero sections and dramatic headings. </p> </div> <div class="mb-4"> <h1 class="text-display">This is Display Typography</h1> </div> <div class="text-sm text-muted"> <code>&lt;h1 class="text-display"&gt;Hero Title&lt;/h1&gt;</code> or <code>&lt;h1 class="display-1"&gt;Hero Title&lt;/h1&gt;</code> (alias) </div> </div> <!-- Section 5: Prose Container --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Prose Container (Optimal Line Width)</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>The .prose utility:</strong> Constrains content width to 800px maximum for optimal readability. Prevents overly long lines that cause eye fatigue. Use on content containers with long-form text. </p> </div> <div class="prose border p-4 rounded"> <h3 class="h4 mb-3">Example Article Content</h3> <p class="text-body-s mb-3"> This content is wrapped in a .prose container, which limits the maximum width to 800px. This ensures optimal line length for reading comfort. Research shows that lines of text between 45-75 characters are easiest to read. </p> <p class="text-body-s mb-0"> Notice how the text doesn't extend too far across the screen on large displays. This container automatically centers itself and maintains comfortable reading width regardless of viewport size. </p> </div> <div class="mt-3 text-sm text-muted"> <code>&lt;div class="prose"&gt;...long-form content...&lt;/div&gt;</code> </div> </div> <!-- Section 6: Text Colors (Semantic Palette) --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Text Colors (Semantic Palette)</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Semantic Colors:</strong> Use colors to convey meaning - primary for links, success for positive actions, danger for errors, muted for secondary info. </p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div> <p class="text-primary mb-1">.text-primary</p> <code class="text-xs text-muted">Main actions, links</code> </div> <div> <p class="text-secondary mb-1">.text-secondary</p> <code class="text-xs text-muted">Branding accent</code> </div> <div> <p class="text-success mb-1">.text-success</p> <code class="text-xs text-muted">Positive, confirmations</code> </div> <div> <p class="text-danger mb-1">.text-danger</p> <code class="text-xs text-muted">Errors, warnings</code> </div> <div> <p class="text-warning mb-1">.text-warning</p> <code class="text-xs text-muted">Cautions, alerts</code> </div> <div> <p class="text-info mb-1">.text-info</p> <code class="text-xs text-muted">Informational</code> </div> <div> <p class="text-dark mb-1">.text-dark</p> <code class="text-xs text-muted">Dark text</code> </div> <div class="bg-dark p-2 rounded"> <p class="text-light mb-1">.text-light</p> <code class="text-xs text-gray-400">Light text (on dark)</code> </div> <div> <p class="text-muted mb-1">.text-muted</p> <code class="text-xs text-muted">Muted, secondary</code> </div> <div class="bg-dark p-2 rounded"> <p class="text-white mb-1">.text-white</p> <code class="text-xs text-gray-400">White text</code> </div> <div> <p class="text-black mb-1">.text-black</p> <code class="text-xs text-muted">Black text</code> </div> </div> </div> <!-- Section 7: Font Weights & Styles --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Font Weights & Styles</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <!-- Font Weights --> <div> <div class="callout mb-3"> <p class="mb-0 text-sm"> <strong>Font Weights:</strong> Control text emphasis from light (300) to bold (700). Use Tailwind's native classes. </p> </div> <div class="space-y-2"> <p class="font-light">.font-light - Light weight (300)</p> <p class="font-normal">.font-normal - Normal weight (400)</p> <p class="font-medium">.font-medium - Medium weight (500)</p> <p class="font-semibold">.font-semibold - Semibold weight (600)</p> <p class="font-bold">.font-bold - Bold weight (700)</p> </div> </div> <!-- Font Styles --> <div> <div class="callout mb-3"> <p class="mb-0 text-sm"> <strong>Font Styles:</strong> Italic for emphasis or normal to override. Use Tailwind's native classes. </p> </div> <div class="space-y-2"> <p class="italic">.italic - Italic text</p> <p class="not-italic">.not-italic - Normal styled text</p> </div> <div class="mt-3 text-sm text-muted"> <code>&lt;p class="font-bold"&gt;...&lt;/p&gt;</code><br> <code>&lt;p class="italic"&gt;...&lt;/p&gt;</code> </div> </div> </div> </div> <!-- Section 8: Text Decoration --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Text Decoration</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Decorations:</strong> Add or remove underlines and line-throughs. Use Tailwind's native classes. </p> </div> <div class="space-y-2"> <p class="underline">.underline - Underlined text</p> <p class="line-through">.line-through - Strike-through text</p> <a href="#" class="no-underline">.no-underline - Link without underline</a> </div> <div class="mt-3 text-sm text-muted"> <code>&lt;p class="underline"&gt;...&lt;/p&gt;</code> </div> </div> <!-- Section 9: Text Alignment --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Text Alignment</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Alignment:</strong> Control horizontal text positioning within containers. Use Tailwind's native classes. </p> </div> <div class="space-y-4"> <div class="border p-3 rounded"> <p class="text-left mb-0">.text-left - Left aligned text (default for LTR languages)</p> </div> <div class="border p-3 rounded"> <p class="text-center mb-0">.text-center - Center aligned text</p> </div> <div class="border p-3 rounded"> <p class="text-right mb-0">.text-right - Right aligned text</p> </div> <div class="border p-3 rounded"> <p class="text-justify mb-0">.text-justify - Justified text stretches to fill the full width of the container, creating even edges on both sides for a cleaner, more formal appearance.</p> </div> </div> <div class="mt-3 text-sm text-muted"> <code>&lt;p class="text-center"&gt;...&lt;/p&gt;</code> </div> </div> <!-- Section 10: Text Transform --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Text Transform</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Transform:</strong> Change text casing without modifying the actual content. Use Tailwind's native classes. </p> </div> <div class="space-y-2"> <p class="lowercase">.lowercase - TRANSFORMS TO LOWERCASE</p> <p class="uppercase">.uppercase - transforms to uppercase</p> <p class="capitalize">.capitalize - transforms to capitalized</p> </div> <div class="mt-3 text-sm text-muted"> <code>&lt;p class="uppercase"&gt;...&lt;/p&gt;</code> </div> </div> <!-- Section 11: Text Utilities (Wrapping & Overflow) --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Text Utilities (Wrapping & Overflow)</h2> <div class="callout mb-4"> <p class="mb-0 text-sm"> <strong>Wrapping:</strong> Control how text wraps and breaks within containers. Use Tailwind's native classes. </p> </div> <div class="space-y-4"> <div class="border p-3 rounded max-w-md"> <p class="whitespace-normal mb-1">.whitespace-normal - This text will wrap normally when it reaches the edge of the container, allowing multiple lines.</p> <code class="text-xs text-muted">Default behavior</code> </div> <div class="border p-3 rounded max-w-md overflow-x-auto"> <p class="whitespace-nowrap mb-1">.whitespace-nowrap - This text will not wrap and will continue on a single line even if it overflows the container.</p> <code class="text-xs text-muted">Forces single line</code> </div> <div class="border p-3 rounded max-w-md"> <p class="break-words mb-1">.break-words - Thisverylongwordwithnospacescanbreakanywheretopreventoverflowingthecontainer</p> <code class="text-xs text-muted">Breaks long words</code> </div> <div class="border p-3 rounded max-w-md"> <p class="truncate mb-1">.truncate - This very long text will be truncated with an ellipsis when it exceeds the container width</p> <code class="text-xs text-muted">Shows ellipsis (...)</code> </div> </div> <div class="mt-3 text-sm text-muted"> <code>&lt;p class="truncate"&gt;...&lt;/p&gt;</code> </div> </div> <!-- Section 12: Special Elements --> <div class="border-t pt-6"> <h2 class="h4 mb-4">Special Elements</h2> <!-- Mark/Highlight --> <div class="mb-6"> <h3 class="h6 mb-2">Mark / Highlight</h3> <p class="mb-2">Use <mark class="mark">the mark element</mark> to highlight specific text within content.</p> <div class="text-sm text-muted"> <code>&lt;mark class="mark"&gt;highlighted text&lt;/mark&gt;</code> </div> </div> <!-- Blockquote --> <div class="mb-6"> <h3 class="h6 mb-2">Blockquote</h3> <blockquote class="blockquote"> <p>This is a blockquote for displaying quoted text or testimonials. It has distinct styling to set it apart from regular content.</p> <footer class="blockquote-footer">Citation or source attribution</footer> </blockquote> <div class="text-sm text-muted mt-2"> <code>&lt;blockquote class="blockquote"&gt;...&lt;/blockquote&gt;</code> </div> </div> <!-- Lists --> <div> <h3 class="h6 mb-3">Lists</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <p class="text-sm font-semibold mb-2">.list-unstyled</p> <ul class="list-unstyled"> <li>Remove default list styling</li> <li>No bullets or numbers</li> <li>No left padding</li> </ul> </div> <div> <p class="text-sm font-semibold mb-2">.list-inline</p> <ul class="list-inline"> <li class="list-inline-item">Item 1</li> <li class="list-inline-item">Item 2</li> <li class="list-inline-item">Item 3</li> </ul> </div> </div> <div class="text-sm text-muted mt-3"> <code>&lt;ul class="list-unstyled"&gt;...&lt;/ul&gt;</code><br> <code>&lt;ul class="list-inline"&gt;&lt;li class="list-inline-item"&gt;...&lt;/li&gt;&lt;/ul&gt;</code> </div> </div> </div> <!-- Production Specs Reference Table --> <div class="border-t pt-6 mt-8"> <h2 class="h4 mb-4">Production Sizing Specifications</h2> <div class="overflow-x-auto"> <table class="min-w-full border-collapse border border-neutral-300"> <thead class="bg-table-header"> <tr> <th class="border border-neutral-300 px-4 py-2 text-left text-sm font-bold">NAME</th> <th class="border border-neutral-300 px-4 py-2 text-left text-sm font-bold">CLASS</th> <th class="border border-neutral-300 px-4 py-2 text-left text-sm font-bold">SIZE (PX)</th> <th class="border border-neutral-300 px-4 py-2 text-left text-sm font-bold">LINE HEIGHT</th> <th class="border border-neutral-300 px-4 py-2 text-left text-sm font-bold">FONT</th> <th class="border border-neutral-300 px-4 py-2 text-left text-sm font-bold">WHERE & WHEN TO USE</th> </tr> </thead> <tbody> <tr> <td class="border border-neutral-300 px-4 py-2 text-sm font-semibold">Display</td> <td class="border border-neutral-300 px-4 py-2 text-sm"><code>.text-display</code> or <code>.display-1</code></td> <td class="border border-neutral-300 px-4 py-2 text-sm">48px</td> <td class="border border-neutral-300 px-4 py-2 text-sm">48px (1.0)</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Proxima Nova Semibold</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Short title that need emphasise</td> </tr> <tr> <td class="border border-neutral-300 px-4 py-2 text-sm font-semibold">H1</td> <td class="border border-neutral-300 px-4 py-2 text-sm"><code>.h1</code> or <code>.text-heading-1</code></td> <td class="border border-neutral-300 px-4 py-2 text-sm">22px</td> <td class="border border-neutral-300 px-4 py-2 text-sm">24px (1.1)</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Proxima Nova Bold</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Main title of all page</td> </tr> <tr> <td class="border border-neutral-300 px-4 py-2 text-sm font-semibold">H2</td> <td class="border border-neutral-300 px-4 py-2 text-sm"><code>.h2</code> or <code>.text-heading-2</code></td> <td class="border border-neutral-300 px-4 py-2 text-sm">18px</td> <td class="border border-neutral-300 px-4 py-2 text-sm">22px (1.2)</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Proxima Nova Bold</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Title of a section/block inside a page</td> </tr> <tr> <td class="border border-neutral-300 px-4 py-2 text-sm font-semibold">H3</td> <td class="border border-neutral-300 px-4 py-2 text-sm"><code>.h3</code> or <code>.text-heading-3</code></td> <td class="border border-neutral-300 px-4 py-2 text-sm">16px</td> <td class="border border-neutral-300 px-4 py-2 text-sm">20px (1.25)</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Proxima Nova Bold</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Title of a listed content inside a page or sub-section</td> </tr> <tr> <td class="border border-neutral-300 px-4 py-2 text-sm font-semibold">H4</td> <td class="border border-neutral-300 px-4 py-2 text-sm"><code>.h4</code> or <code>.text-heading-4</code></td> <td class="border border-neutral-300 px-4 py-2 text-sm">14px</td> <td class="border border-neutral-300 px-4 py-2 text-sm">16px (1.15)</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Arial Bold</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Input label or Table title</td> </tr> <tr> <td class="border border-neutral-300 px-4 py-2 text-sm font-semibold">H5</td> <td class="border border-neutral-300 px-4 py-2 text-sm"><code>.h5</code> or <code>.text-heading-5</code></td> <td class="border border-neutral-300 px-4 py-2 text-sm">12px</td> <td class="border border-neutral-300 px-4 py-2 text-sm">14px (1.17)</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Arial Bold</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Help text titles, low read sub-sections</td> </tr> <tr class="bg-neutral-100"> <td class="border border-neutral-300 px-4 py-2 text-sm font-semibold">Body L</td> <td class="border border-neutral-300 px-4 py-2 text-sm"><code>.text-body-l</code></td> <td class="border border-neutral-300 px-4 py-2 text-sm">18px</td> <td class="border border-neutral-300 px-4 py-2 text-sm">28px (1.55)</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Arial</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Short texts that need much emphasise</td> </tr> <tr class="bg-neutral-100"> <td class="border border-neutral-300 px-4 py-2 text-sm font-semibold">Body M</td> <td class="border border-neutral-300 px-4 py-2 text-sm"><code>.text-body-m</code></td> <td class="border border-neutral-300 px-4 py-2 text-sm">16px</td> <td class="border border-neutral-300 px-4 py-2 text-sm">24px (1.5)</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Arial</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Texts that need emphasize</td> </tr> <tr class="bg-neutral-100"> <td class="border border-neutral-300 px-4 py-2 text-sm font-semibold">Body S</td> <td class="border border-neutral-300 px-4 py-2 text-sm"><code>.text-body-s</code></td> <td class="border border-neutral-300 px-4 py-2 text-sm">14px</td> <td class="border border-neutral-300 px-4 py-2 text-sm">20px (1.4)</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Arial</td> <td class="border border-neutral-300 px-4 py-2 text-sm"><strong>Default for all regular texts</strong></td> </tr> <tr class="bg-neutral-100"> <td class="border border-neutral-300 px-4 py-2 text-sm font-semibold">Body XS</td> <td class="border border-neutral-300 px-4 py-2 text-sm"><code>.text-body-xs</code></td> <td class="border border-neutral-300 px-4 py-2 text-sm">12px</td> <td class="border border-neutral-300 px-4 py-2 text-sm">16px (1.33)</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Arial</td> <td class="border border-neutral-300 px-4 py-2 text-sm">As help text or texts with low read priority</td> </tr> <tr class="bg-blue-100"> <td class="border border-neutral-300 px-4 py-2 text-sm font-semibold">Interaction</td> <td class="border border-neutral-300 px-4 py-2 text-sm"><code>.text-interaction</code></td> <td class="border border-neutral-300 px-4 py-2 text-sm">14px</td> <td class="border border-neutral-300 px-4 py-2 text-sm">16px (1.15)</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Arial</td> <td class="border border-neutral-300 px-4 py-2 text-sm">For interactive elements like button, standalone hyperlink</td> </tr> <tr class="bg-blue-100"> <td class="border border-neutral-300 px-4 py-2 text-sm font-semibold">Indicator</td> <td class="border border-neutral-300 px-4 py-2 text-sm"><code>.text-indicator</code></td> <td class="border border-neutral-300 px-4 py-2 text-sm">12px</td> <td class="border border-neutral-300 px-4 py-2 text-sm">14px (1.16)</td> <td class="border border-neutral-300 px-4 py-2 text-sm">Arial</td> <td class="border border-neutral-300 px-4 py-2 text-sm">For badge labels or indication labels</td> </tr> </tbody> </table> </div> <div class="mt-4 text-sm text-muted"> <p class="mb-1"><strong>Note:</strong> All sizing uses the 14px base system (1rem = 14px).</p> <p class="mb-0"><strong>Font Strategy:</strong> Display and H1-H3 use Proxima Nova for brand identity; H4-H5 and all body text use Arial for performance and readability.</p> </div> </div> </div>