VOLTKIND — We Build Bold Brands Online

Summary

A bold, dark, award-site agency/studio homepage in near-monochrome noir #0c0c0c with a single acid-lime #c4ff00 accent and off-white #f5f5f0 text. A floating pill glass nav sits above a grain-textured hero whose massive Anton condensed all-caps headline ('WE BUILD BOLD brands ONLINE.') tucks an italic lime Archivo 'brands' inline, lit by a single soft lime glow, and capped by a full-bleed infinite keyword marquee (lime '✦' separators). Below: a studio statement with a 4-up stat-counter row (120+ / 14 / 98% / 5), a 2-column selected-work grid of rounded-2xl image cards with hover-reveal gradient meta + lime arrow circles (plus a wide featured card and a coal 'view all' card), a numbered services list whose full-width rows flip to a solid lime fill on hover, a clients/awards block with award pills and a hairline logo grid, a huge centered CTA ('Got a brand to launch?'), and a 4-column footer with a lime newsletter pill. The signature is restraint + one electric accent: noir surfaces split by white/10 hairlines, depth from SVG grain and a lone lime/10 blur (no second hue), Anton + Archivo + Inter doing the shouting, and lime rationed to pills, the logo diamond, index eyebrows, one word per headline, arrows, and interaction states. Awwwards-SOTD studio energy.

Style

A confident, award-site agency aesthetic: near-black 'noir' canvas with a single high-voltage acid-lime accent and warm off-white text, so the page reads as monochrome dark + one electric pop. The whole layout is built from full-bleed dark sections separated by 1px white/10 hairline borders rather than color blocks; depth comes from a faint SVG grain overlay and a single soft lime radial glow behind the hero, not from gradients of color. Type does the shouting: an Anton condensed all-caps display face at huge clamp() sizes with tight tracking and 0.86 line-height for the hero/section headers, an Archivo tight-tracked heavy face for sub-display and card titles, and Inter for body. The lone accent #c4ff00 is rationed: it fills the primary pill buttons (lime bg, noir text), the small rotated-diamond logo mark, the '✦' marquee separators, the section index labels '(Studio / 01)', one or two words inside each headline, the work-card arrow circles, and the hover state of the services rows (a row flips to a full lime fill with noir text). Interactions are tactile: pill buttons lift on hover, work-card images scale + a dark gradient meta panel slides up, an animated link-underline wipes in lime, and a keyword marquee scrolls infinitely. Rounded-2xl cards and fully-rounded pills against hard-edged sections give a studio-portfolio, Awwwards-SOTD feel.

Layout & Structure

A single-column, vertically stacked, frameless responsive marketing page; almost every section centers inside mx-auto max-w-[1320px] with px-5 -> md:px-8. Order top to bottom: a FIXED floating pill nav (mt-4 rounded-full glass bar, not a full-width bar); a HERO (grain + lime glow, an eyebrow with a short lime hairline, the massive Anton headline, then a 12-col row splitting a lead paragraph from two pill CTAs) capped by a full-bleed infinite keyword MARQUEE strip on a coal band; a STUDIO STATEMENT (3-col label + 9-col big Archivo statement with two emphasized words, then a 4-up stat-counter row); a SELECTED WORK grid (section header split, then a 2-col grid of rounded-2xl image cards with hover-reveal meta + one full-width wide card + a coal 'view all projects' card); a SERVICES list (header split, then 4 full-width 12-col rows divided by hairlines that fill lime on hover, each = index + Archivo title + tag chips + arrow); a CLIENTS/AWARDS block (header + award pills, then a 2/4/6-col bordered logo grid with gap-px hairline cells); a centered CONTACT CTA (grain, huge Anton headline, subcopy, two pills); and a 4-column FOOTER (brand + blurb + 'booking' status, two link columns, a newsletter input pill) with a bottom legal row. Reflow: the floating nav links hide below lg (the pill keeps logo + 'Start a project'); the hero copy row is grid-cols-1 -> md:grid-cols-12 (lead col-span-7, CTAs col-span-5 right-aligned); the studio block is 1 -> md:grid-cols-12 and the stats are grid-cols-2 -> md:grid-cols-4; the work grid is grid-cols-1 -> md:grid-cols-2 with the wide card spanning md:col-span-2 and switching aspect-[16/9] -> md:aspect-[21/8]; service rows are a fixed 12-col grid that stacks tags below the title on mobile; the awards grid is grid-cols-2 -> md:grid-cols-4 -> lg:grid-cols-6; the footer is grid-cols-1 -> md:grid-cols-12 (5/2/2/3). Everything collapses to one column on mobile; overflow-x is clipped on body.

Floating pill nav (fixed)

Hero

Keyword marquee strip

Studio statement + stat counters

Selected work grid

Services list (hover-fill rows)

Clients / awards

Contact CTA

Footer (4-column + newsletter)

Components

Anton condensed display headline with an italic lime script word (.display + .script-accent)

The page's whole identity: enormous condensed all-caps Anton headlines (hero 'WE BUILD BOLD brands ONLINE.', the CTA 'Got a brand to launch?') with one word swapped to an italic, heavy, lime Archivo word tucked inline at 0.6em, mixing brutalist scale with a handwritten-feeling pop.

Lime pill button (.pill-btn)

The one filled control style: fully-rounded pills that lift on hover, used in the nav ('Start a project'), the hero ('View selected work'), and the CTA ('hello@...'); the secondary variant is a bordered ghost pill that turns lime on hover.

Hover-reveal work cards (.work-card / .card-img / .card-meta)

Rounded-2xl portfolio image cards where the photo scales on hover while a dark gradient meta panel slides up to reveal the project title and a lime arrow circle; below the image an always-visible label row keeps the card readable at rest and in screenshots.

Hover-fill services rows (.svc-row) + animated link underline (.link-underline)

Full-width numbered service rows that flip to a solid lime fill with noir text on hover (index, arrow, and tag-chip borders all invert), plus a reusable lime underline that wipes in from the left under text links.

Infinite keyword marquee (.marquee)

A full-bleed coal band of capability keywords separated by lime '✦' stars that scrolls horizontally forever; the keyword list is duplicated so the loop is seamless.

Atmospheric grain + lime glow

Texture instead of color: a faint SVG fractal-noise grain overlay on the hero and CTA sections, plus a single soft lime radial glow behind the hero, giving depth on the near-black canvas without adding a second hue.

Special Notes

Frameless, fully responsive dark agency/studio marketing homepage (no browser chrome / no device frame). Every section centers in mx-auto max-w-[1320px] with px-5 -> md:px-8 and sections are split by 1px border-white/10 hairlines. Built with the Tailwind CDN plus a small tailwind.config registering custom colors (noir #0c0c0c, coal #141414, slate2 #1c1c1c, off #f5f5f0, lime #c4ff00) and the three font families (Anton, Archivo, Inter); Google Fonts loads Anton + Archivo 400-900 + Inter 300-700; icons are Iconify Lucide (lucide:) glyphs via the iconify web component. Responsive contract: the floating pill nav drops its center links below lg; the hero copy row is grid-cols-1 -> md:grid-cols-12 (lead col-span-7, CTAs col-span-5 right-aligned); the studio block is 1 -> md:grid-cols-12 with stats grid-cols-2 -> md:grid-cols-4; the work grid is 1 -> md:grid-cols-2 (the wide card md:col-span-2, aspect-[16/9] -> md:aspect-[21/8]); service rows stay a 12-col grid that stacks tags below the title on mobile; the awards grid is grid-cols-2 -> md:4 -> lg:6; the footer is 1 -> md:grid-cols-12 (5/2/2/3); body is overflow-x-hidden. All copy and the 'VOLTKIND' brand are placeholders meant to be swapped. The transferable library value is (1) the STYLE: a near-monochrome noir #0c0c0c canvas with off-white #f5f5f0 text and a SINGLE rationed acid-lime #c4ff00 accent (pills, logo diamond, '✦' stars, section index eyebrows, one word per headline, work-card arrows, the services hover-fill, stat suffixes, the link-underline), atmosphere from SVG grain + one lime/10 blur glow rather than extra color; and (2) the LAYOUT: a floating pill glass nav -> grain hero with an Anton condensed headline + inline italic lime script word + a keyword marquee -> stat-counter studio statement -> 2-col rounded-card work grid with hover-reveal meta -> hover-fill numbered services list -> awards/clients hairline logo grid -> huge centered CTA -> 4-column footer with a newsletter pill. Strictly one accent hue (lime): never introduce red/blue/violet.