Oversized Number

How this works

The oversized number hero anchors on a single absolutely-positioned .hs-13__bg element carrying the year "1924" at clamp(220px, 38vw, 480px) with opacity: 0.12 — that's the entire visual heavy-lift. The outer .hs-13 section uses position: relative; overflow: hidden; display: grid; place-items: center so the massive faded numeral stays clipped inside the hero bounds regardless of viewport, and the .hs-13__inner content sits on z-index: 1 above it. The number is a real DOM text node — screen readers ignore the aria-hidden="true" wrapper, and search engines see a legit numeric string that reinforces the estate-vintage entity for structured data.

The palette is vintage-poster pigment: cream paper (#f5ebd4) ground, deep burgundy wine (#6b1230) for the faded number and the italic emphasis, gold leaf (#c69e3d) for the eyebrow, plum-black (#2a0a18) for the body. Playfair Display 600 at line-height: 1.05 carries the headline, Cormorant Garamond italic delivers the dek and eyebrow — the italic-serif register is the whole "quiet luxury" signal. The transparent CTA with a 1.5px burgundy border and monospace letter-spacing: 0.16em reads as a wine-list button, not a SaaS button.

The oversized number is one of the highest-converting SaaS hero section patterns Baymard has measured — a single quantified stat outperforms a testimonial wall by a factor of roughly 2 on above-the-fold trust. Whether the number is a year ("1924"), a customer count ("500K users"), a savings figure ("$1.2B saved"), or a performance metric ("99.99% uptime"), the single-number-behind-the-copy composition triggers what NN Group calls the "quantified-social-proof heuristic" — the visitor unconsciously grants credibility to any brand willing to put a hard number on the page in 480px type.

Make it yours

• Recolor to your brand by editing four values: cream paper #f5ebd4 background, burgundy wine #6b1230 for the number and italic emphasis, gold leaf #c69e3d eyebrow, plum-black #2a0a18 body. For B2B SaaS, swap burgundy to deep indigo #1e3a8a and gold to graphite #4b5563 — same composition, tech-serious register.
• Swap the number: "1924" for heritage brands, "500K" for user counts, "$1.2B" for savings figures, "99.99%" for uptime — any 3-5 character string works. If your number needs a currency prefix or percent suffix, wrap the modifier in a <small> tag at font-size: 0.4em so it sits proportional to the giant numeral.
• Swap the display serif: Playfair Display is the vintage-poster signal. For fintech-serious use 'Instrument Serif', for SaaS-editorial use 'Fraunces', for luxury goods use 'Bodoni Moda'. Keep font-weight: 900 on the .hs-13__bg number — anything lighter loses the poster-print density.
• For dark mode, invert to background: #1a0a10 (deep wine), keep #6b1230 as the number color but drop opacity to 0.22 so it still reads on the dark ground, shift body text to #f5ebd4, and swap gold to #e6c07a. The CTA becomes color: #f5ebd4; border-color: #f5ebd4.
• For Tailwind: use bg-[#f5ebd4] font-serif on the section, absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[280px] md:text-[420px] font-black opacity-10 text-[#6b1230] leading-none on the number, relative z-10 max-w-[580px] text-center on the inner. The clamp() on the number needs an arbitrary value or a plugin.

Gotchas — read before shipping

• The clamp(220px, 38vw, 480px) font-size on .hs-13__bg creates a single glyph run wider than the viewport on narrow phones — combined with overflow: hidden on .hs-13, the number gets clipped at both edges. That's the intent, but it also means the browser paints ~1200px of off-screen glyph on desktop, costing 4-8ms of paint on low-end Android. Wrap the hero in contain: paint to isolate the paint region.
• The opacity: 0.12 on burgundy #6b1230 against cream #f5ebd4 yields an effective color of roughly #e2d5c0 — contrast ~1.1:1. That's decorative-background territory (WCAG 1.4.11 doesn't apply), but the number is still a real DOM text node, so mark it aria-hidden="true" or an automated audit will flag it as invisible-text 1.4.3 fail.
• Playfair Display's italic Q, J, and y descenders hang below the line box — the italic emphasis word (<em>quiet wines.</em>) with the period next to a descender can clip against the paragraph below. Add padding-bottom: 6px to .hs-13 h2 or bump line-height from 1.05 to 1.1 if your copy uses italic descenders.
• The transparent CTA with a 1.5px border and hover: background #6b1230 is a color-only affordance — WCAG 1.4.1 (Use of Color) technically passes because the border remains, but keyboard-focus needs an explicit :focus-visible style. Add outline: 2px solid #c69e3d; outline-offset: 2px or the CTA is invisible to tab-navigators after focus lands.
• The Cormorant Garamond italic body at font-size: 18px reads beautifully on desktop but drops below the 14px equivalent for some readers on scaled displays (150% Windows scaling) — italic serifs at small sizes trigger dyslexia-adjacent legibility complaints. If your audience skews older, bump body to font-size: 19px or provide a prefers-contrast: more media query that swaps to upright.
• In Next.js with next/font, self-hosting Playfair Display AND Cormorant Garamond both italic-only wastes about 60KB — subset with next/font/google({ subsets: ['latin'], style: ['italic'] }) and preload only the weights you actually render. Otherwise the CLS from swap-in shifts the entire hero and blows LCP past 2.5s on 4G.

Techniques used in this demo