gentelella
Version:
Gentelella v4 — free admin template. 60 pages, 20 chart variants, fully interactive inbox & kanban, live theme generator, component playground, PWA-ready. Vite 8, vanilla JS, no Bootstrap, no jQuery.
517 lines (423 loc) • 33 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typography | Gentelella 2026 v4</title>
<link rel="icon" href="../images/favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#1ABB9C" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a2332" media="(prefers-color-scheme: dark)">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="/images/apple-touch-icon.svg">
<meta name="description" content="Typography — UI > Typography. Free admin template by Colorlib. 60 pages, 20 chart variants, dark mode, PWA-ready.">
<meta property="og:type" content="website">
<meta property="og:title" content="Typography">
<meta property="og:description" content="Typography — UI > Typography. Free admin template by Colorlib. 60 pages, 20 chart variants, dark mode, PWA-ready.">
<meta property="og:image" content="/images/android-chrome-512x512.svg">
<meta property="og:site_name" content="Gentelella v4">
<meta name="twitter:card" content="summary_large_image">
<script>(function(){try{var t=localStorage.getItem('theme');var d=window.matchMedia('(prefers-color-scheme: dark)').matches;var theme=t||(d?'dark':'light');document.documentElement.setAttribute('data-theme',theme);}catch(e){}})();</script>
<script type="module" crossorigin src="/js/rolldown-runtime-DEgBLETi.js"></script>
<script type="module" crossorigin src="/js/toast-DgCSlJPv.js"></script>
<script type="module" crossorigin src="/js/menus-BVcs0GJR.js"></script>
<script type="module" crossorigin src="/js/modal-MTuCfURV.js"></script>
<script type="module" crossorigin src="/js/main-v4-BFwmMcfm.js"></script>
<link rel="stylesheet" crossorigin href="/assets/main-v4-DDS6x4g-.css">
</head>
<body data-shell="admin" data-page="typography" data-breadcrumb="Home > UI > Typography">
<a class="skip-link" href="#main-content">Skip to main content</a>
<aside class="sidebar" aria-label="Primary navigation">
<div class="sidebar-brand">
<div class="brand-icon">G</div>
<div class="brand-name">Gentelella <small>v4</small></div>
</div>
<nav class="sidebar-nav">
<div class="nav-group">
<div class="nav-label">General</div>
<div class="nav-tree">
<button type="button" class="nav-link nav-toggle" aria-expanded="false">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="4" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="10" width="7" height="11" rx="1.5"/></svg>
<span class="nav-text">Dashboards</span>
<svg class="nav-chev" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>
</button>
<div class="nav-sub"><div class="nav-sub-inner"><a class="nav-sublink" href="index.html">Operations</a><a class="nav-sublink" href="index2.html">Analytics</a><a class="nav-sublink" href="index3.html">Sales</a><a class="nav-sublink" href="index4.html">System health</a></div></div>
</div>
<div class="nav-tree">
<button type="button" class="nav-link nav-toggle" aria-expanded="false">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M9 9h6M9 13h4"/></svg>
<span class="nav-text">Forms</span>
<span class="badge badge-red">Hot</span>
<svg class="nav-chev" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>
</button>
<div class="nav-sub"><div class="nav-sub-inner"><a class="nav-sublink" href="form.html">General</a><a class="nav-sublink" href="form_advanced.html">Advanced controls</a><a class="nav-sublink" href="form_buttons.html">Buttons</a><a class="nav-sublink" href="form_upload.html">Upload</a><a class="nav-sublink" href="form_validation.html">Validation</a><a class="nav-sublink" href="form_wizards.html">Wizard</a></div></div>
</div>
<div class="nav-tree">
<button type="button" class="nav-link nav-toggle" aria-expanded="false">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18M9 10v9M15 10v9"/></svg>
<span class="nav-text">Tables</span>
<svg class="nav-chev" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>
</button>
<div class="nav-sub"><div class="nav-sub-inner"><a class="nav-sublink" href="tables.html">Static</a><a class="nav-sublink" href="tables_dynamic.html">Dynamic</a></div></div>
</div>
<div class="nav-tree">
<button type="button" class="nav-link nav-toggle" aria-expanded="false">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 19V5M8 19v-8M12 19V9M16 19v-5M20 19v-9"/></svg>
<span class="nav-text">Charts</span>
<span class="badge badge-teal">New</span>
<svg class="nav-chev" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>
</button>
<div class="nav-sub"><div class="nav-sub-inner"><a class="nav-sublink" href="chartjs.html">Chart cards</a><a class="nav-sublink" href="echarts.html">ECharts gallery</a><a class="nav-sublink" href="other_charts.html">SVG charts</a></div></div>
</div>
<a class="nav-link" href="calendar.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M8 4v6M16 4v6"/></svg>
<span class="nav-text">Calendar</span>
</a>
<a class="nav-link" href="map.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg>
<span class="nav-text">Map</span>
</a>
</div>
<div class="nav-group">
<div class="nav-label">Apps</div>
<a class="nav-link" href="chat.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"/></svg>
<span class="nav-text">Chat</span>
<span class="badge badge-teal">3</span>
</a>
<a class="nav-link" href="inbox.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="4" width="20" height="16" rx="3"/><path d="M2 7l10 6 10-6"/></svg>
<span class="nav-text">Inbox</span>
</a>
<a class="nav-link" href="kanban.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="6" height="14" rx="1.5"/><rect x="11" y="3" width="6" height="9" rx="1.5"/><rect x="19" y="3" width="2" height="6" rx="0.5"/></svg>
<span class="nav-text">Kanban</span>
</a>
<a class="nav-link" href="file_manager.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 7a2 2 0 012-2h4l2 2h7a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/></svg>
<span class="nav-text">Files</span>
</a>
<a class="nav-link" href="notifications.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 3a6 6 0 00-6 6c0 6-3 7-3 7h18s-3-1-3-7a6 6 0 00-6-6z"/><path d="M10.5 21a1.5 1.5 0 003 0"/></svg>
<span class="nav-text">Notifications</span>
</a>
</div>
<div class="nav-group">
<div class="nav-label">E-commerce</div>
<a class="nav-link" href="e_commerce.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 9l1-5h16l1 5M3 9v10a2 2 0 002 2h14a2 2 0 002-2V9M3 9h18"/><path d="M9 13a3 3 0 006 0"/></svg>
<span class="nav-text">Storefront</span>
</a>
<a class="nav-link" href="product_detail.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 13l-7 7a2 2 0 01-2.83 0L3 12.83V4h8.83L20 12.17a2 2 0 010 2.83z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg>
<span class="nav-text">Product</span>
</a>
<div class="nav-tree">
<button type="button" class="nav-link nav-toggle" aria-expanded="false">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="9" cy="21" r="1.5"/><circle cx="20" cy="21" r="1.5"/><path d="M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6"/></svg>
<span class="nav-text">Orders</span>
<svg class="nav-chev" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>
</button>
<div class="nav-sub"><div class="nav-sub-inner"><a class="nav-sublink" href="orders.html">All orders</a><a class="nav-sublink" href="order_detail.html">Order detail</a></div></div>
</div>
<a class="nav-link" href="invoice.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 21V3h14v18l-3-2-3 2-3-2-3 2-2-2z"/><path d="M9 8h6M9 12h6M9 16h4"/></svg>
<span class="nav-text">Invoice</span>
</a>
<a class="nav-link" href="pricing_tables.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="12" y1="2" x2="12" y2="22"/><path d="M16 6H9.5a3.5 3.5 0 100 7h5a3.5 3.5 0 010 7H7"/></svg>
<span class="nav-text">Pricing</span>
</a>
</div>
<div class="nav-group">
<div class="nav-label">Projects</div>
<a class="nav-link" href="projects.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
<span class="nav-text">All projects</span>
</a>
<a class="nav-link" href="project_detail.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="18" rx="2"/><path d="M2 8h20"/></svg>
<span class="nav-text">Project detail</span>
</a>
</div>
<div class="nav-group">
<div class="nav-label">UI library</div>
<a class="nav-link" href="general_elements.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6h16M4 12h16M4 18h10"/></svg>
<span class="nav-text">Elements</span>
</a>
<a class="nav-link" href="widgets.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="18" rx="2"/><path d="M2 8h20"/></svg>
<span class="nav-text">Widgets</span>
<span class="badge badge-blue">5</span>
</a>
<a class="nav-link" href="playground.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"/></svg>
<span class="nav-text">Playground</span>
<span class="badge badge-teal">New</span>
</a>
<a class="nav-link" href="theme.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M19 11H5a2 2 0 00-2 2v2a2 2 0 002 2h2v3a1 1 0 001 1h3a1 1 0 001-1v-3h7a2 2 0 002-2v-2a2 2 0 00-2-2z"/><path d="M19 11V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v6"/></svg>
<span class="nav-text">Theme</span>
<span class="badge badge-teal">New</span>
</a>
<a class="nav-link active" href="typography.html" aria-current="page">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>
<span class="nav-text">Typography</span>
</a>
<a class="nav-link" href="icons.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>
<span class="nav-text">Icons</span>
</a>
<a class="nav-link" href="media_gallery.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
<span class="nav-text">Media</span>
</a>
</div>
<div class="nav-group">
<div class="nav-label">Admin</div>
<a class="nav-link" href="contacts.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/></svg>
<span class="nav-text">Contacts</span>
</a>
<a class="nav-link" href="user_management.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
<span class="nav-text">User management</span>
</a>
<a class="nav-link" href="profile.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
<span class="nav-text">Your profile</span>
</a>
<a class="nav-link" href="settings.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>
<span class="nav-text">Settings</span>
</a>
<a class="nav-link" href="faq.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 015.8 1c0 2-3 3-3 3"/><circle cx="12" cy="17" r="0.5" fill="currentColor"/></svg>
<span class="nav-text">Help center</span>
</a>
</div>
<div class="nav-group">
<div class="nav-label">Layouts</div>
<a class="nav-link" href="fixed_sidebar.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 9v12"/></svg>
<span class="nav-text">Fixed sidebar</span>
</a>
<a class="nav-link" href="fixed_footer.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 9v12"/></svg>
<span class="nav-text">Fixed footer</span>
</a>
<a class="nav-link" href="level2.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="18" rx="2"/><path d="M2 8h20"/></svg>
<span class="nav-text">Nested page</span>
</a>
<a class="nav-link" href="plain_page.html">
<svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="18" rx="2"/><path d="M2 8h20"/></svg>
<span class="nav-text">Blank</span>
</a>
</div>
</nav>
<div class="sidebar-footer">
<div class="sidebar-user">
<div class="avatar">A<span class="online"></span></div>
<div class="sidebar-user-info">
<div class="name">Aigars Silkalns</div>
<div class="role">Admin</div>
</div>
<button class="more-btn" aria-label="More options">
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><circle cx="8" cy="3" r="1.2"/><circle cx="8" cy="8" r="1.2"/><circle cx="8" cy="13" r="1.2"/></svg>
</button>
</div>
</div>
</aside>
<header class="topbar">
<div class="topbar-left">
<button class="sidebar-toggle" type="button" aria-label="Open menu" aria-controls="sidebar" aria-expanded="false">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
<nav class="breadcrumb" aria-label="Breadcrumb"><span class="current" aria-current="page">Home</span></nav>
</div>
<div class="search-box">
<svg class="s-icon" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="7" cy="7" r="5"/><path d="M11 11l3.5 3.5"/></svg>
<input type="text" placeholder="Search pages or run a command…" aria-label="Open command palette">
<kbd>⌘K</kbd>
</div>
<div class="topbar-right">
<a class="tb-btn tb-docs" href="https://gentelella.colorlib.com/docs/" target="_blank" rel="noopener" title="Documentation">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M4 4h11a4 4 0 014 4v13H8a4 4 0 01-4-4V4z"/><path d="M4 17a4 4 0 014-4h11"/></svg>
<span>Docs</span>
</a>
<button class="tb-btn theme-toggle" type="button" title="Toggle theme" aria-label="Toggle theme" aria-pressed="false">
<svg class="theme-icon-light" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
<svg class="theme-icon-dark" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
</button>
<button class="tb-btn tb-notifications" type="button" title="Notifications" aria-label="Notifications" aria-haspopup="dialog" aria-expanded="false">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M12 3a6 6 0 00-6 6c0 6-3 7-3 7h18s-3-1-3-7a6 6 0 00-6-6z"/><path d="M10.5 21a1.5 1.5 0 003 0"/></svg>
<span class="dot"></span>
</button>
<button class="tb-btn tb-messages" type="button" title="Messages" aria-label="Messages" aria-haspopup="dialog" aria-expanded="false">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="3"/><path d="M2 7l10 6 10-6"/></svg>
</button>
<button class="tb-avatar" type="button" aria-label="Account menu" aria-haspopup="menu" aria-expanded="false">A</button>
</div>
</header>
<main id="main-content" tabindex="-1" class="main">
<div class="page-wrapper">
<div class="page-header">
<div class="page-header-row">
<div>
<div class="page-pretitle">Foundations</div>
<h1 class="page-title">Typography</h1>
</div>
</div>
</div>
<!-- ── Display + Type scale ── -->
<div class="row col-1">
<div class="card">
<div class="card-header"><div class="card-title">Display sizes</div></div>
<div class="card-body">
<div class="type-row"><div class="type-label">56px / 700 / -2px</div><div style="font-size:56px;font-weight:700;letter-spacing:-2px;line-height:1.05;color:var(--text)">Built to ship.</div></div>
<div class="type-row"><div class="type-label">42px / 700 / -1.4px</div><div style="font-size:42px;font-weight:700;letter-spacing:-1.4px;line-height:1.1;color:var(--text)">A free admin template, redesigned.</div></div>
<div class="type-row"><div class="type-label">32px / 700 / -1px</div><div style="font-size:32px;font-weight:700;letter-spacing:-1px;line-height:1.15;color:var(--text)">Real charts, real tables, real fast.</div></div>
</div>
</div>
</div>
<div class="row col-1">
<div class="card">
<div class="card-header"><div class="card-title">Heading scale</div></div>
<div class="card-body">
<div class="type-row"><div class="type-label">28px / 700 — H1</div><p style="font-size:28px;font-weight:700;letter-spacing:-0.5px;color:var(--text);line-height:1.2;margin:0">The quick brown fox jumps over the lazy dog</p></div>
<div class="type-row"><div class="type-label">22px / 600 — H2</div><h2 style="font-size:22px;font-weight:600;letter-spacing:-0.4px;color:var(--text);line-height:1.25;margin:0">The quick brown fox jumps over the lazy dog</h2></div>
<div class="type-row"><div class="type-label">18px / 600 — H3</div><h3 style="font-size:18px;font-weight:600;color:var(--text);line-height:1.3;margin:0">The quick brown fox jumps over the lazy dog</h3></div>
<div class="type-row"><div class="type-label">15px / 600 — H4</div><h4 style="font-size:15px;font-weight:600;color:var(--text);margin:0">The quick brown fox jumps over the lazy dog</h4></div>
<div class="type-row"><div class="type-label">14px / 400 — body</div><div style="font-size:14px;font-weight:400;color:var(--text)">Body copy at 14/1.43. The quick brown fox jumps over the lazy dog. Use this size for paragraph text and most UI labels.</div></div>
<div class="type-row"><div class="type-label">13px / 400 — secondary</div><div style="font-size:13px;font-weight:400;color:var(--text-secondary)">Secondary text at 13px in <code>--text-secondary</code> for descriptions, captions and tertiary copy.</div></div>
<div class="type-row"><div class="type-label">12px / 500 — helper</div><div style="font-size:12px;font-weight:500;color:var(--text-muted)">Helper text at 12px in <code>--text-muted</code>. Use sparingly for inline metadata.</div></div>
<div class="type-row"><div class="type-label">11px / 600 caps</div><div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:var(--text-muted)">Eyebrow / pretitle</div></div>
</div>
</div>
</div>
<!-- ── Inline + Block ── -->
<div class="row col-2">
<div class="card">
<div class="card-header"><div class="card-title">Inline text</div></div>
<div class="card-body" style="font-size:13px;line-height:1.65;color:var(--text-secondary)">
<p style="margin-bottom:10px">Bold uses <strong>medium 500</strong> by default. Italic <em>looks like this</em>. A <a href="#">hyperlink</a> uses the primary teal. Inline <code style="font-family:var(--font-mono);font-size:12px;background:var(--bg-surface-secondary);padding:1px 5px;border-radius:3px">code</code> sits at 12px. Use <kbd style="font-family:inherit;font-size:11px;background:var(--bg-surface-secondary);border:1px solid var(--border-color);padding:1px 5px;border-radius:3px">⌘K</kbd> to open the search.</p>
<p style="margin-bottom:10px">You can <mark style="background:var(--yellow-lt);color:var(--text);padding:0 2px;border-radius:2px">highlight</mark> or strike <s>old text</s>. Footnotes use <sup style="font-size:10px">superscript</sup> or <sub style="font-size:10px">subscript</sub>. Abbreviations like <abbr title="Cascading Style Sheets" style="border-bottom:1px dotted var(--text-muted);cursor:help">CSS</abbr> use a dotted underline.</p>
<p>Use <small style="font-size:11px;color:var(--text-muted)">small caps</small> for compact metadata.</p>
</div>
</div>
<div class="card">
<div class="card-header"><div class="card-title">Block elements</div></div>
<div class="card-body">
<blockquote style="border-left:3px solid var(--primary);padding:4px 14px;font-size:14px;color:var(--text);margin-bottom:14px;line-height:1.55">
“Design is not just what it looks like and feels like. Design is how it works.”
<footer style="font-size:12px;color:var(--text-muted);margin-top:6px">— Steve Jobs</footer>
</blockquote>
<ul style="font-size:13px;color:var(--text-secondary);padding-left:20px;line-height:1.6;margin-bottom:12px">
<li>Concise list items at 13px</li>
<li>Comfortable line-height of 1.6</li>
<li>Bullet color matches body text</li>
</ul>
<ol style="font-size:13px;color:var(--text-secondary);padding-left:20px;line-height:1.6;margin-bottom:12px">
<li>First step in the sequence</li>
<li>Second step continues from above</li>
<li>Third step closes the loop</li>
</ol>
<dl style="font-size:13px;display:grid;grid-template-columns:120px 1fr;gap:6px 14px;color:var(--text-secondary)">
<dt style="color:var(--text);font-weight:600">Plan</dt><dd style="margin:0">Business</dd>
<dt style="color:var(--text);font-weight:600">Seats</dt><dd style="margin:0">12 of 25 used</dd>
<dt style="color:var(--text);font-weight:600">Renewal</dt><dd style="margin:0">May 28, 2026</dd>
</dl>
</div>
</div>
</div>
<!-- ── Lead paragraph + reading copy ── -->
<div class="row col-1">
<div class="card">
<div class="card-header"><div class="card-title">Reading copy</div></div>
<div class="card-body" style="max-width:680px">
<p style="font-size:16px;color:var(--text);line-height:1.65;margin-bottom:14px"><strong style="font-weight:500">Lead paragraph</strong> at 16/1.65 for product copy, blog intros, and onboarding screens. Keeps lines around 65–80 characters for comfortable reading.</p>
<p style="font-size:14px;color:var(--text-secondary);line-height:1.7;margin-bottom:12px">Body paragraphs continue at 14/1.7 with secondary color. Notice how the spacing between paragraphs gives the eye a place to rest. Long-form articles can run to ~75 characters per line and stay readable on most desktop breakpoints.</p>
<p style="font-size:14px;color:var(--text-secondary);line-height:1.7;margin-bottom:12px">Inline emphasis like <a href="#">links</a>, <strong style="color:var(--text)">bold accents</strong>, and <em>italics</em> all share the body line-height so vertical rhythm is preserved across the whole block.</p>
<hr style="border:0;border-top:1px solid var(--border-color-light);margin:18px 0">
<p style="font-size:12.5px;color:var(--text-muted);line-height:1.55"><strong style="color:var(--text);font-weight:600">Footnote.</strong> Smaller meta text (12.5/1.55) sits comfortably below dividers. Use this for source attributions, timestamps, and disclaimers.</p>
</div>
</div>
</div>
<!-- ── Code blocks ── -->
<div class="row col-2">
<div class="card">
<div class="card-header"><div class="card-title">Code block</div></div>
<div class="card-body">
<pre style="background:var(--bg-surface-secondary);border:1px solid var(--border-color-light);border-radius:var(--radius);padding:14px 16px;font-family:var(--font-mono);font-size:12.5px;line-height:1.6;color:var(--text);overflow-x:auto;margin:0">// Add a chart factory to charts.js
function myChart(echarts, el, t) {
const chart = echarts.init(el);
chart.setOption({
series: [{ type: 'line', data: [12, 18, 24, 30] }]
});
return chart;
}</pre>
</div>
</div>
<div class="card">
<div class="card-header"><div class="card-title">Terminal</div></div>
<div class="card-body">
<pre style="background:#0f1623;color:#e6ebf2;border-radius:var(--radius);padding:14px 16px;font-family:var(--font-mono);font-size:12.5px;line-height:1.6;overflow-x:auto;margin:0"><span style="color:#7e8896">$</span> npm run build
<span style="color:#1ABB9C">✓</span> built in 4.9s
<span style="color:#7e8896">$</span> npm run preview
<span style="color:#7e8896">➜ Local:</span> http://localhost:4173/
<span style="color:#7e8896">$</span> █</pre>
</div>
</div>
</div>
<!-- ── Numerals + alignment ── -->
<div class="row col-2">
<div class="card">
<div class="card-header"><div class="card-title">Numerals</div></div>
<div class="card-body">
<div class="type-row">
<div class="type-label">Default</div>
<div style="font-size:18px;color:var(--text);font-weight:500">$28,401.50 · 99.9%</div>
</div>
<div class="type-row">
<div class="type-label">Tabular</div>
<div style="font-size:18px;color:var(--text);font-weight:500;font-variant-numeric:tabular-nums">$28,401.50 · 99.9%</div>
</div>
<div class="type-row">
<div class="type-label">Display</div>
<div style="font-size:36px;color:var(--text);font-weight:700;letter-spacing:-1px;line-height:1">$28,401</div>
</div>
<div class="type-row" style="border-bottom:none">
<div class="type-label">Mono</div>
<div style="font-size:14px;color:var(--text);font-family:var(--font-mono)">acct_8f3k29df3lkj</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header"><div class="card-title">Truncation</div></div>
<div class="card-body">
<div style="margin-bottom:14px">
<div style="font-size:11px;color:var(--text-muted);margin-bottom:4px">Single-line truncate</div>
<div style="font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px;border:1px dashed var(--border-color);padding:8px;border-radius:4px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</div>
</div>
<div>
<div style="font-size:11px;color:var(--text-muted);margin-bottom:4px">Multi-line clamp (3 lines)</div>
<div style="font-size:13px;color:var(--text-secondary);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;border:1px dashed var(--border-color);padding:8px;border-radius:4px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<span>Gentelella — A free Bootstrap admin template by <a href="https://colorlib.com">Colorlib</a></span>
<span>v4.0 Concept · 2026</span>
</footer>
</main>
</body>
</html>