font-preview.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Ekko Font Preview</title> 6 <link rel="preconnect" href="https://fonts.googleapis.com"> 7 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 8 <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Space+Grotesk:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;600;700&family=Sora:wght@400;600;700&family=DM+Sans:wght@400;600;700&family=Nunito:wght@400;600;700&family=Quicksand:wght@400;600;700&family=Comfortaa:wght@400;600;700&family=Rubik:wght@400;600;700&family=Inter:wght@400;600;700&family=Exo+2:wght@400;600;700&family=Orbitron:wght@400;600;700&display=swap" rel="stylesheet"> 9 <style> 10 body { 11 background: #0D0D18; 12 color: #e0e0e0; 13 padding: 40px; 14 margin: 0; 15 } 16 h1 { 17 font-family: system-ui; 18 color: #7cabf0; 19 text-align: center; 20 margin-bottom: 10px; 21 font-size: 22px; 22 } 23 .subtitle { 24 text-align: center; 25 color: #888; 26 font-family: system-ui; 27 font-size: 14px; 28 margin-bottom: 40px; 29 } 30 .category { 31 font-family: system-ui; 32 color: #7c3aed; 33 font-size: 13px; 34 text-transform: uppercase; 35 letter-spacing: 2px; 36 margin: 40px 0 20px; 37 padding-bottom: 8px; 38 border-bottom: 1px solid #2a2a4a; 39 } 40 .font-card { 41 background: #13132a; 42 border: 1px solid #2a2a4a; 43 border-radius: 12px; 44 padding: 28px 32px; 45 margin-bottom: 20px; 46 transition: border-color 0.2s; 47 } 48 .font-card:hover { 49 border-color: #7cabf0; 50 } 51 .font-name { 52 font-family: system-ui; 53 color: #888; 54 font-size: 11px; 55 text-transform: uppercase; 56 letter-spacing: 1.5px; 57 margin-bottom: 12px; 58 } 59 .font-heading { 60 font-size: 36px; 61 font-weight: 700; 62 color: #ffffff; 63 margin-bottom: 8px; 64 line-height: 1.2; 65 } 66 .font-subheading { 67 font-size: 20px; 68 font-weight: 600; 69 color: #7cabf0; 70 margin-bottom: 12px; 71 } 72 .font-body { 73 font-size: 15px; 74 font-weight: 400; 75 color: #b0b0c0; 76 line-height: 1.7; 77 max-width: 700px; 78 } 79 .font-tags { 80 margin-top: 12px; 81 display: flex; 82 gap: 8px; 83 flex-wrap: wrap; 84 } 85 .tag { 86 background: #1a1a3e; 87 color: #7cabf0; 88 padding: 3px 10px; 89 border-radius: 12px; 90 font-family: system-ui; 91 font-size: 10px; 92 } 93 .tag.bubbly { background: #2d1a4e; color: #c084fc; } 94 .tag.tech { background: #1a2e3e; color: #38bdf8; } 95 </style> 96 </head> 97 <body> 98 99 <h1>Ekko — Font Preview</h1> 100 <p class="subtitle">Pick a font for the marketing material. Each card shows heading, subheading, and body text.</p> 101 102 <div class="category">Bubbly / Friendly</div> 103 104 <div class="font-card"> 105 <div class="font-name">Nunito</div> 106 <div class="font-heading" style="font-family:'Nunito'">Ekko — Messaging Without Middlemen</div> 107 <div class="font-subheading" style="font-family:'Nunito'">Five independent paths. Zero servers.</div> 108 <div class="font-body" style="font-family:'Nunito'">Every message is encrypted end-to-end with modern cryptography. There is no Ekko server — your messages travel through decentralized networks that no single entity controls. The extra latency isn't a bug — it's the natural consequence of removing the middleman.</div> 109 <div class="font-tags"><span class="tag bubbly">rounded</span><span class="tag bubbly">warm</span><span class="tag bubbly">approachable</span></div> 110 </div> 111 112 <div class="font-card"> 113 <div class="font-name">Quicksand</div> 114 <div class="font-heading" style="font-family:'Quicksand'">Ekko — Messaging Without Middlemen</div> 115 <div class="font-subheading" style="font-family:'Quicksand'">Five independent paths. Zero servers.</div> 116 <div class="font-body" style="font-family:'Quicksand'">Every message is encrypted end-to-end with modern cryptography. There is no Ekko server — your messages travel through decentralized networks that no single entity controls. The extra latency isn't a bug — it's the natural consequence of removing the middleman.</div> 117 <div class="font-tags"><span class="tag bubbly">geometric</span><span class="tag bubbly">soft</span><span class="tag bubbly">playful</span></div> 118 </div> 119 120 <div class="font-card"> 121 <div class="font-name">Comfortaa</div> 122 <div class="font-heading" style="font-family:'Comfortaa'">Ekko — Messaging Without Middlemen</div> 123 <div class="font-subheading" style="font-family:'Comfortaa'">Five independent paths. Zero servers.</div> 124 <div class="font-body" style="font-family:'Comfortaa'">Every message is encrypted end-to-end with modern cryptography. There is no Ekko server — your messages travel through decentralized networks that no single entity controls. The extra latency isn't a bug — it's the natural consequence of removing the middleman.</div> 125 <div class="font-tags"><span class="tag bubbly">rounded</span><span class="tag bubbly">bubbly</span><span class="tag bubbly">distinctive</span></div> 126 </div> 127 128 <div class="category">Tech / Modern</div> 129 130 <div class="font-card"> 131 <div class="font-name">Space Grotesk</div> 132 <div class="font-heading" style="font-family:'Space Grotesk'">Ekko — Messaging Without Middlemen</div> 133 <div class="font-subheading" style="font-family:'Space Grotesk'">Five independent paths. Zero servers.</div> 134 <div class="font-body" style="font-family:'Space Grotesk'">Every message is encrypted end-to-end with modern cryptography. There is no Ekko server — your messages travel through decentralized networks that no single entity controls. The extra latency isn't a bug — it's the natural consequence of removing the middleman.</div> 135 <div class="font-tags"><span class="tag tech">monospaced-feel</span><span class="tag tech">techy</span><span class="tag tech">clean</span></div> 136 </div> 137 138 <div class="font-card"> 139 <div class="font-name">Outfit</div> 140 <div class="font-heading" style="font-family:'Outfit'">Ekko — Messaging Without Middlemen</div> 141 <div class="font-subheading" style="font-family:'Outfit'">Five independent paths. Zero servers.</div> 142 <div class="font-body" style="font-family:'Outfit'">Every message is encrypted end-to-end with modern cryptography. There is no Ekko server — your messages travel through decentralized networks that no single entity controls. The extra latency isn't a bug — it's the natural consequence of removing the middleman.</div> 143 <div class="font-tags"><span class="tag tech">geometric</span><span class="tag tech">modern</span><span class="tag tech">versatile</span></div> 144 </div> 145 146 <div class="font-card"> 147 <div class="font-name">Sora</div> 148 <div class="font-heading" style="font-family:'Sora'">Ekko — Messaging Without Middlemen</div> 149 <div class="font-subheading" style="font-family:'Sora'">Five independent paths. Zero servers.</div> 150 <div class="font-body" style="font-family:'Sora'">Every message is encrypted end-to-end with modern cryptography. There is no Ekko server — your messages travel through decentralized networks that no single entity controls. The extra latency isn't a bug — it's the natural consequence of removing the middleman.</div> 151 <div class="font-tags"><span class="tag tech">sharp</span><span class="tag tech">futuristic</span><span class="tag tech">premium</span></div> 152 </div> 153 154 <div class="font-card"> 155 <div class="font-name">Exo 2</div> 156 <div class="font-heading" style="font-family:'Exo 2'">Ekko — Messaging Without Middlemen</div> 157 <div class="font-subheading" style="font-family:'Exo 2'">Five independent paths. Zero servers.</div> 158 <div class="font-body" style="font-family:'Exo 2'">Every message is encrypted end-to-end with modern cryptography. There is no Ekko server — your messages travel through decentralized networks that no single entity controls. The extra latency isn't a bug — it's the natural consequence of removing the middleman.</div> 159 <div class="font-tags"><span class="tag tech">sci-fi</span><span class="tag tech">geometric</span><span class="tag tech">energetic</span></div> 160 </div> 161 162 <div class="font-card"> 163 <div class="font-name">Orbitron</div> 164 <div class="font-heading" style="font-family:'Orbitron'">Ekko — Messaging Without Middlemen</div> 165 <div class="font-subheading" style="font-family:'Orbitron'">Five independent paths. Zero servers.</div> 166 <div class="font-body" style="font-family:'Orbitron'">Every message is encrypted end-to-end with modern cryptography. There is no Ekko server — your messages travel through decentralized networks that no single entity controls. The extra latency isn't a bug — it's the natural consequence of removing the middleman.</div> 167 <div class="font-tags"><span class="tag tech">display-only</span><span class="tag tech">cyberpunk</span><span class="tag tech">bold</span></div> 168 </div> 169 170 <div class="category">Balanced / Professional</div> 171 172 <div class="font-card"> 173 <div class="font-name">Plus Jakarta Sans</div> 174 <div class="font-heading" style="font-family:'Plus Jakarta Sans'">Ekko — Messaging Without Middlemen</div> 175 <div class="font-subheading" style="font-family:'Plus Jakarta Sans'">Five independent paths. Zero servers.</div> 176 <div class="font-body" style="font-family:'Plus Jakarta Sans'">Every message is encrypted end-to-end with modern cryptography. There is no Ekko server — your messages travel through decentralized networks that no single entity controls. The extra latency isn't a bug — it's the natural consequence of removing the middleman.</div> 177 <div class="font-tags"><span class="tag">polished</span><span class="tag">startup</span><span class="tag">highly readable</span></div> 178 </div> 179 180 <div class="font-card"> 181 <div class="font-name">Rubik</div> 182 <div class="font-heading" style="font-family:'Rubik'">Ekko — Messaging Without Middlemen</div> 183 <div class="font-subheading" style="font-family:'Rubik'">Five independent paths. Zero servers.</div> 184 <div class="font-body" style="font-family:'Rubik'">Every message is encrypted end-to-end with modern cryptography. There is no Ekko server — your messages travel through decentralized networks that no single entity controls. The extra latency isn't a bug — it's the natural consequence of removing the middleman.</div> 185 <div class="font-tags"><span class="tag">rounded</span><span class="tag">modern</span><span class="tag">friendly-pro</span></div> 186 </div> 187 188 <div class="font-card"> 189 <div class="font-name">DM Sans</div> 190 <div class="font-heading" style="font-family:'DM Sans'">Ekko — Messaging Without Middlemen</div> 191 <div class="font-subheading" style="font-family:'DM Sans'">Five independent paths. Zero servers.</div> 192 <div class="font-body" style="font-family:'DM Sans'">Every message is encrypted end-to-end with modern cryptography. There is no Ekko server — your messages travel through decentralized networks that no single entity controls. The extra latency isn't a bug — it's the natural consequence of removing the middleman.</div> 193 <div class="font-tags"><span class="tag">geometric</span><span class="tag">clean</span><span class="tag">neutral</span></div> 194 </div> 195 196 </body> 197 </html>