.weight-item display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 1rem 0;
<!-- Another solid grid: show different use cases as "solid pieces" of design --> <div class="section-title">◼️ nexa | solid applications</div> <div class="cards-grid"> <div class="nexa-card"> <div class="card-icon">🏗️</div> <div class="card-title">Brand identity</div> <div class="card-text">Solid logotypes and visual systems. Nexa's geometric structure creates trust and modernity. A go-to font for bold brand voices.</div> </div> <div class="nexa-card"> <div class="card-icon">📰</div> <div class="card-title">Editorial design</div> <div class="card-text">Magazines, posters, and impactful headlines. Nexa's heavy weights command attention while remaining elegant and solid.</div> </div> <div class="nexa-card"> <div class="card-icon">🖥️</div> <div class="card-title">UI & Web</div> <div class="card-text">Solid digital experiences. With clear shapes and high legibility, Nexa elevates modern interfaces into memorable, solid pieces.</div> </div> </div> google fonts nexa
<!-- solid pieces grid: each card is a "solid piece" of Nexa expression --> <div class="section-title">✦ solid pieces | nexa in action</div> <div class="cards-grid"> <div class="nexa-card"> <div class="card-icon">⬛️</div> <div class="card-title">Heavy weight</div> <div class="card-text">Nexa Heavy (800) defines solidity. Perfect for headlines that demand attention, authority, and presence. No compromise, only structure.</div> <div class="bold-demo">ARCHITECTURE OF FORM</div> </div> <div class="nexa-card"> <div class="card-icon">🔲</div> <div class="card-title">Bold presence</div> <div class="card-text">Bold (700) balances power with readability. Used in modern interfaces, branding, and editorial design. A robust piece of the Nexa ecosystem.</div> <div class="bold-demo">STRENGTH IN EVERY CURVE</div> </div> <div class="nexa-card"> <div class="card-icon">▣</div> <div class="card-title">Solid geometry</div> <div class="card-text">Geometric precision meets humanist warmth. Nexa's letterforms feel solid like cast metal — each character stands as an unshakeable piece.</div> <div class="bold-demo">ENDURING · TIMELESS</div> </div> </div> No compromise, only structure
/* Solid, massive wordmark */ .hero-wordmark font-family: 'Nexa', sans-serif; font-weight: 800; /* Heavy weight — solid piece foundation */ font-size: clamp(3.5rem, 12vw, 10rem); letter-spacing: -0.02em; background: linear-gradient(135deg, #FFFFFF 0%, #E0E4F0 80%); background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 10px 30px rgba(0,0,0,0.2); margin-bottom: 0.5rem; line-height: 1.1; text-transform: uppercase; ENDURING · TIMELESS<
.card-icon font-size: 2.8rem; margin-bottom: 1.5rem;
/* Each card = a solid piece of Nexa expression */ .nexa-card background: #12161C; border-radius: 2rem; padding: 2rem 1.8rem; transition: transform 0.25s ease, box-shadow 0.3s ease; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 20px 35px -15px rgba(0,0,0,0.5);
/* responsive touches */ @media (max-width: 700px) .nexa-masterpiece padding: 1rem 1.2rem 2rem; .section-title font-size: 1.9rem; .weight-text font-size: 1.2rem; .weight-label width: 70px;