<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Header / Introduction --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw: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="tw:mb-0 tw: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="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-semibold">Production Typography Quick Reference</p> <p class="tw:mb-0 tw:text-xs text-muted tw:font-mono"> <strong>Display & Headings:</strong> .tw-text-display | .tw-h1-.tw-h5 (or .tw-text-heading-1 to .tw-text-heading-5)<br> <strong>Body Text:</strong> .tw-text-body-{l|m|s|xs} - L=18px, M=16px, S=14px (default), XS=12px<br> <strong>Interactive:</strong> .tw-text-interaction (14px, buttons) | .tw-text-indicator (12px, badges)<br> <strong>Utilities:</strong> .tw-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> .tw-mark, .tw-blockquote, .tw-list-unstyled, .tw-list-inline </p> </div> <!-- Section 2: Heading Typography --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Heading Typography</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw: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="tw:text-xs">Note: H1-H3 use Proxima Nova Bold; H4-H5 use Arial Bold. H6 is aliased to H5.</span> </p> </div> <div class="tw:grid tw:grid-cols-1 tw:lg:grid-cols-2 tw:gap-8"> <!-- H1-H3: Proxima Nova Bold --> <div> <p class="tw:text-sm tw:font-medium tw:mb-3">H1-H3: Proxima Nova Bold</p> <div class="tw:space-y-3"> <div> <h1 class="tw-h1">Heading 1 - Main Page Title</h1> <code class="tw:text-xs text-muted">.tw-h1 or .tw-text-heading-1</code> </div> <div> <h2 class="tw-h2">Heading 2 - Section Title</h2> <code class="tw:text-xs text-muted">.tw-h2 or .tw-text-heading-2</code> </div> <div> <h3 class="tw-h3">Heading 3 - Sub-section Title</h3> <code class="tw:text-xs text-muted">.tw-h3 or .tw-text-heading-3</code> </div> </div> </div> <!-- H4-H5: Arial Bold --> <div> <p class="tw:text-sm tw:font-medium tw:mb-3">H4-H5: Arial Bold</p> <div class="tw:space-y-3"> <div> <h4 class="tw-h4">Heading 4 - Input Labels</h4> <code class="tw:text-xs text-muted">.tw-h4 or .tw-text-heading-4</code> </div> <div> <h5 class="tw-h5">Heading 5 - Help Text Titles</h5> <code class="tw:text-xs text-muted">.tw-h5 or .tw-text-heading-5</code> </div> <div> <h6 class="tw-h6">Heading 6 (aliased to H5)</h6> <code class="tw:text-xs text-muted">.tw-h6 (renders same as .tw-h5)</code> </div> </div> </div> </div> </div> <!-- Section 3: Body Typography --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Body Typography</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw: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="tw:space-y-4"> <div> <p class="tw:text-body-l tw: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="tw:text-xs text-muted">.tw-text-body-l</code> </div> <div> <p class="tw:text-body-m tw: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="tw:text-xs text-muted">.tw-text-body-m</code> </div> <div> <p class="tw:text-body-s tw: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="tw:text-xs text-muted">.tw-text-body-s (or no class for default sizing)</code> </div> <div> <p class="tw:text-body-xs tw: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="tw:text-xs text-muted">.tw-text-body-xs</code> </div> </div> <div class="tw:mt-5 tw:p-4 tw:bg-neutral-100 tw:rounded"> <p class="tw:text-sm tw:font-medium tw:mb-2">Visual Comparison</p> <div class="tw:space-y-2"> <p class="tw:text-body-l tw:mb-0">Body L - Emphasized introduction text</p> <p class="tw:text-body-m tw:mb-0">Body M - Secondary emphasis text</p> <p class="tw:text-body-s tw:mb-0">Body S - Default body text (most common)</p> <p class="tw:text-body-xs tw:mb-0">Body XS - Help text and captions</p> </div> </div> </div> <!-- Section 4: Interactive & Indicator Typography --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Interactive & Indicator Typography</h2> <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-6"> <!-- Interaction Typography --> <div> <div class="tw-callout tw:mb-3"> <p class="tw:mb-0 tw: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="tw:space-y-3"> <button class="tw-btn tw-btn-primary" type="button">Primary Button</button> <button class="tw-btn tw-btn-outline-secondary" type="button">Secondary Button</button> <p class="tw:text-body-s tw:mb-0"> Buttons automatically use <code class="tw:text-xs">.tw-text-interaction</code> sizing internally. </p> </div> </div> <!-- Indicator Typography --> <div> <div class="tw-callout tw:mb-3"> <p class="tw:mb-0 tw:text-sm"> <strong>Indicator (12px, Arial, lh 1.16):</strong> Used for badge labels and indication labels throughout the UI. </p> </div> <div class="tw:space-y-3"> <div> <span class="tw:text-indicator tw:px-2 tw:py-1 tw:bg-primary tw:text-white tw:rounded">Badge Label</span> <span class="tw:text-indicator tw:px-2 tw:py-1 tw:bg-success tw:text-white tw:rounded tw:ml-2">Status</span> </div> <p class="tw:text-body-s tw:mb-0"> Use <code class="tw:text-xs">.tw-text-indicator</code> for small labels and badges. </p> </div> </div> </div> </div> <!-- Section 1: Display Typography --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Display Typography</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw: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="tw:mb-4"> <h1 class="tw:text-display">This is Display Typography</h1> </div> <div class="tw:text-sm text-muted"> <code>&lt;h1 class="tw:text-display"&gt;Hero Title&lt;/h1&gt;</code> or <code>&lt;h1 class="tw-display-1"&gt;Hero Title&lt;/h1&gt;</code> (alias) </div> </div> <!-- Section 5: Prose Container --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Prose Container (Optimal Line Width)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>The .tw-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="tw-prose tw:border tw:p-4 tw:rounded"> <h3 class="tw-h4 tw:mb-3">Example Article Content</h3> <p class="tw:text-body-s tw:mb-3"> This content is wrapped in a .tw-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="tw:text-body-s tw: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="tw:mt-3 tw:text-sm text-muted"> <code>&lt;div class="tw-prose"&gt;...long-form content...&lt;/div&gt;</code> </div> </div> <!-- Section 6: Text Colors (Semantic Palette) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Text Colors (Semantic Palette)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw: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="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:lg:grid-cols-3 tw:gap-4"> <div> <p class="tw:text-primary tw:mb-1">.text-primary</p> <code class="tw:text-xs text-muted">Main actions, links</code> </div> <div> <p class="tw:text-secondary tw:mb-1">.text-secondary</p> <code class="tw:text-xs text-muted">Branding accent</code> </div> <div> <p class="tw:text-success tw:mb-1">.text-success</p> <code class="tw:text-xs text-muted">Positive, confirmations</code> </div> <div> <p class="tw:text-danger tw:mb-1">.text-danger</p> <code class="tw:text-xs text-muted">Errors, warnings</code> </div> <div> <p class="tw:text-warning tw:mb-1">.text-warning</p> <code class="tw:text-xs text-muted">Cautions, alerts</code> </div> <div> <p class="tw:text-info tw:mb-1">.text-info</p> <code class="tw:text-xs text-muted">Informational</code> </div> <div> <p class="tw:text-dark tw:mb-1">.text-dark</p> <code class="tw:text-xs text-muted">Dark text</code> </div> <div class="tw:bg-dark tw:p-2 tw:rounded"> <p class="tw:text-light tw:mb-1">.text-light</p> <code class="tw:text-xs tw:text-gray-400">Light text (on dark)</code> </div> <div> <p class="text-muted tw:mb-1">.text-muted</p> <code class="tw:text-xs text-muted">Muted, secondary</code> </div> <div class="tw:bg-dark tw:p-2 tw:rounded"> <p class="tw:text-white tw:mb-1">.text-white</p> <code class="tw:text-xs tw:text-gray-400">White text</code> </div> <div> <p class="tw:text-black tw:mb-1">.text-black</p> <code class="tw:text-xs text-muted">Black text</code> </div> </div> </div> <!-- Section 7: Font Weights & Styles --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Font Weights & Styles</h2> <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-6"> <!-- Font Weights --> <div> <div class="tw-callout tw:mb-3"> <p class="tw:mb-0 tw:text-sm"> <strong>Font Weights:</strong> Control text emphasis from light (300) to bold (700). Use Tailwind's native classes. </p> </div> <div class="tw:space-y-2"> <p class="tw:font-light">.font-light - Light weight (300)</p> <p class="tw:font-normal">.font-normal - Normal weight (400)</p> <p class="tw:font-medium">.font-medium - Medium weight (500)</p> <p class="tw:font-semibold">.font-semibold - Semibold weight (600)</p> <p class="tw:font-bold">.font-bold - Bold weight (700)</p> </div> </div> <!-- Font Styles --> <div> <div class="tw-callout tw:mb-3"> <p class="tw:mb-0 tw:text-sm"> <strong>Font Styles:</strong> Italic for emphasis or normal to override. Use Tailwind's native classes. </p> </div> <div class="tw:space-y-2"> <p class="tw:italic">.italic - Italic text</p> <p class="tw:not-italic">.not-italic - Normal styled text</p> </div> <div class="tw:mt-3 tw:text-sm text-muted"> <code>&lt;p class="tw:font-bold"&gt;...&lt;/p&gt;</code><br> <code>&lt;p class="tw:italic"&gt;...&lt;/p&gt;</code> </div> </div> </div> </div> <!-- Section 8: Text Decoration --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Text Decoration</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Decorations:</strong> Add or remove underlines and line-throughs. Use Tailwind's native classes. </p> </div> <div class="tw:space-y-2"> <p class="tw:underline">.underline - Underlined text</p> <p class="tw:line-through">.line-through - Strike-through text</p> <a href="#" class="tw:no-underline">.no-underline - Link without underline</a> </div> <div class="tw:mt-3 tw:text-sm text-muted"> <code>&lt;p class="tw:underline"&gt;...&lt;/p&gt;</code> </div> </div> <!-- Section 9: Text Alignment --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Text Alignment</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Alignment:</strong> Control horizontal text positioning within containers. Use Tailwind's native classes. </p> </div> <div class="tw:space-y-4"> <div class="tw:border tw:p-3 tw:rounded"> <p class="tw:text-left tw:mb-0">.text-left - Left aligned text (default for LTR languages)</p> </div> <div class="tw:border tw:p-3 tw:rounded"> <p class="tw:text-center tw:mb-0">.text-center - Center aligned text</p> </div> <div class="tw:border tw:p-3 tw:rounded"> <p class="tw:text-right tw:mb-0">.text-right - Right aligned text</p> </div> <div class="tw:border tw:p-3 tw:rounded"> <p class="tw:text-justify tw: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="tw:mt-3 tw:text-sm text-muted"> <code>&lt;p class="tw:text-center"&gt;...&lt;/p&gt;</code> </div> </div> <!-- Section 10: Text Transform --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Text Transform</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Transform:</strong> Change text casing without modifying the actual content. Use Tailwind's native classes. </p> </div> <div class="tw:space-y-2"> <p class="tw:lowercase">.lowercase - TRANSFORMS TO LOWERCASE</p> <p class="tw:uppercase">.uppercase - transforms to uppercase</p> <p class="tw:capitalize">.capitalize - transforms to capitalized</p> </div> <div class="tw:mt-3 tw:text-sm text-muted"> <code>&lt;p class="tw:uppercase"&gt;...&lt;/p&gt;</code> </div> </div> <!-- Section 11: Text Utilities (Wrapping & Overflow) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Text Utilities (Wrapping & Overflow)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Wrapping:</strong> Control how text wraps and breaks within containers. Use Tailwind's native classes. </p> </div> <div class="tw:space-y-4"> <div class="tw:border tw:p-3 tw:rounded tw:max-w-md"> <p class="tw:whitespace-normal tw:mb-1">.whitespace-normal - This text will wrap normally when it reaches the edge of the container, allowing multiple lines.</p> <code class="tw:text-xs text-muted">Default behavior</code> </div> <div class="tw:border tw:p-3 tw:rounded tw:max-w-md tw:overflow-x-auto"> <p class="tw:whitespace-nowrap tw: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="tw:text-xs text-muted">Forces single line</code> </div> <div class="tw:border tw:p-3 tw:rounded tw:max-w-md"> <p class="tw:break-words tw:mb-1">.break-words - Thisverylongwordwithnospacescanbreakanywheretopreventoverflowingthecontainer</p> <code class="tw:text-xs text-muted">Breaks long words</code> </div> <div class="tw:border tw:p-3 tw:rounded tw:max-w-md"> <p class="tw:truncate tw:mb-1">.truncate - This very long text will be truncated with an ellipsis when it exceeds the container width</p> <code class="tw:text-xs text-muted">Shows ellipsis (...)</code> </div> </div> <div class="tw:mt-3 tw:text-sm text-muted"> <code>&lt;p class="tw:truncate"&gt;...&lt;/p&gt;</code> </div> </div> <!-- Section 12: Special Elements --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Special Elements</h2> <!-- Mark/Highlight --> <div class="tw:mb-6"> <h3 class="tw-h6 tw:mb-2">Mark / Highlight</h3> <p class="tw:mb-2">Use <mark class="tw-mark">the mark element</mark> to highlight specific text within content.</p> <div class="tw:text-sm text-muted"> <code>&lt;mark class="tw-mark"&gt;highlighted text&lt;/mark&gt;</code> </div> </div> <!-- Blockquote --> <div class="tw:mb-6"> <h3 class="tw-h6 tw:mb-2">Blockquote</h3> <blockquote class="tw-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="tw-blockquote-footer">Citation or source attribution</footer> </blockquote> <div class="tw:text-sm text-muted tw:mt-2"> <code>&lt;blockquote class="tw-blockquote"&gt;...&lt;/blockquote&gt;</code> </div> </div> <!-- Lists --> <div> <h3 class="tw-h6 tw:mb-3">Lists</h3> <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-6"> <div> <p class="tw:text-sm tw:font-semibold tw:mb-2">.tw-list-unstyled</p> <ul class="tw-list-unstyled"> <li>Remove default list styling</li> <li>No bullets or numbers</li> <li>No left padding</li> </ul> </div> <div> <p class="tw:text-sm tw:font-semibold tw:mb-2">.tw-list-inline</p> <ul class="tw-list-inline"> <li class="tw-list-inline-item">Item 1</li> <li class="tw-list-inline-item">Item 2</li> <li class="tw-list-inline-item">Item 3</li> </ul> </div> </div> <div class="tw:text-sm text-muted tw:mt-3"> <code>&lt;ul class="tw-list-unstyled"&gt;...&lt;/ul&gt;</code><br> <code>&lt;ul class="tw-list-inline"&gt;&lt;li class="tw-list-inline-item"&gt;...&lt;/li&gt;&lt;/ul&gt;</code> </div> </div> </div> <!-- Production Specs Reference Table --> <div class="tw:border-t tw:pt-6 tw:mt-8"> <h2 class="tw-h4 tw:mb-4">Production Sizing Specifications</h2> <div class="tw:overflow-x-auto"> <table class="tw:min-w-full tw:border-collapse tw:border tw:border-neutral-300"> <thead class="tw:bg-table-header"> <tr> <th class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-left tw:text-sm tw:font-bold">NAME</th> <th class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-left tw:text-sm tw:font-bold">CLASS</th> <th class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-left tw:text-sm tw:font-bold">SIZE (PX)</th> <th class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-left tw:text-sm tw:font-bold">LINE HEIGHT</th> <th class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-left tw:text-sm tw:font-bold">FONT</th> <th class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-left tw:text-sm tw:font-bold">WHERE & WHEN TO USE</th> </tr> </thead> <tbody> <tr> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm tw:font-semibold">Display</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm"><code>.tw-text-display</code> or <code>.tw-display-1</code></td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">48px</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">48px (1.0)</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Proxima Nova Semibold</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Short title that need emphasise</td> </tr> <tr> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm tw:font-semibold">H1</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm"><code>.tw-h1</code> or <code>.tw-text-heading-1</code></td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">22px</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">24px (1.1)</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Proxima Nova Bold</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Main title of all page</td> </tr> <tr> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm tw:font-semibold">H2</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm"><code>.tw-h2</code> or <code>.tw-text-heading-2</code></td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">18px</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">22px (1.2)</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Proxima Nova Bold</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Title of a section/block inside a page</td> </tr> <tr> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm tw:font-semibold">H3</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm"><code>.tw-h3</code> or <code>.tw-text-heading-3</code></td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">16px</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">20px (1.25)</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Proxima Nova Bold</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Title of a listed content inside a page or sub-section</td> </tr> <tr> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm tw:font-semibold">H4</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm"><code>.tw-h4</code> or <code>.tw-text-heading-4</code></td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">14px</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">16px (1.15)</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Arial Bold</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Input label or Table title</td> </tr> <tr> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm tw:font-semibold">H5</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm"><code>.tw-h5</code> or <code>.tw-text-heading-5</code></td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">12px</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">14px (1.17)</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Arial Bold</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Help text titles, low read sub-sections</td> </tr> <tr class="tw:bg-neutral-100"> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm tw:font-semibold">Body L</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm"><code>.tw-text-body-l</code></td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">18px</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">28px (1.55)</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Arial</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Short texts that need much emphasise</td> </tr> <tr class="tw:bg-neutral-100"> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm tw:font-semibold">Body M</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm"><code>.tw-text-body-m</code></td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">16px</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">24px (1.5)</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Arial</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Texts that need emphasize</td> </tr> <tr class="tw:bg-neutral-100"> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm tw:font-semibold">Body S</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm"><code>.tw-text-body-s</code></td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">14px</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">20px (1.4)</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Arial</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm"><strong>Default for all regular texts</strong></td> </tr> <tr class="tw:bg-neutral-100"> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm tw:font-semibold">Body XS</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm"><code>.tw-text-body-xs</code></td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">12px</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">16px (1.33)</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Arial</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">As help text or texts with low read priority</td> </tr> <tr class="tw:bg-blue-100"> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm tw:font-semibold">Interaction</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm"><code>.tw-text-interaction</code></td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">14px</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">16px (1.15)</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Arial</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">For interactive elements like button, standalone hyperlink</td> </tr> <tr class="tw:bg-blue-100"> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm tw:font-semibold">Indicator</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm"><code>.tw-text-indicator</code></td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">12px</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">14px (1.16)</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">Arial</td> <td class="tw:border tw:border-neutral-300 tw:px-4 tw:py-2 tw:text-sm">For badge labels or indication labels</td> </tr> </tbody> </table> </div> <div class="tw:mt-4 tw:text-sm text-muted"> <p class="tw:mb-1"><strong>Note:</strong> All sizing uses the 14px base system (1rem = 14px).</p> <p class="tw: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>