yoinkui.com

A developer-tool landing page built out of alternating full-bleed bands rather than cards: a white hero drawn over a faint blue graph-paper grid, a near-black how-it-works band, a white closing call to action, and a black footer. Everything is Inter — 60px/600 at a 1.0 line height and -1.5px tracking for the headline, 16px/400 at a tight 20px leading for body — so the page's only real decisions are color and rule placement. Color is rationed hard: black and white do all the structural work, one cerulean carries the second headline line, the step ticks and the blueprint grid, and a row of amber stars is the single warm note on the page. The dark band is where the discipline shows. Instead of floating product screenshots on tiles, it marks the content column with two full-height hairlines and then subdivides it into cells with more hairlines, so the three numbered steps read as a technical drawing of the workflow rather than a feature grid. The header reinforces the same idea from the other direction: chromeless and invisible at the top of the page, it collapses on scroll into a translucent floating capsule with a rounded install button riding at its right edge. The result is confident and engineering-flavored without a single gradient card, and it inverts cleanly twice without ever changing its type or its button.

Build the page as a stack of full-bleed horizontal bands that alternate ground color — white (#FAFDFE), near-black (#101012), white again, black footer — and let the inversion do the sectioning. Never put a card inside a band when a hairline will do.

Type. Inter for everything. Display 60px / weight 600 / line-height 60px / letter-spacing -1.5px; section heads 24px / 600 / 32px at normal tracking; sub-heads and body 16px / 400 / 20px; button labels 16px / 600 / 24px. Only two weights exist — 400 and 600 — and tracking is negative only at the display size.

Color. Ground #FAFDFE and #101012. Ink #101012 on light, #FFFFFF on dark, with #575758 (light) and a ~60% white (dark) for secondary copy. One accent: a cerulean around #0090CC (the capture's quantized palette averages it to #82BEDC), spent on exactly three things — the second line of the display headline, the blueprint grid lines at low opacity, and a 3px tick beside each numbered heading. Amber (~#FBBF24) is allowed once, for rating stars. No other hue anywhere.

Shape. Two radii only: 9999px for every button and avatar, and 8px for product screenshots and inline panels. Borders are 1px hairlines at ~8–10% ink — used to draw the content column and to divide cells — never as card outlines. No shadows on the light band; on the dark band let the product screenshot's own window chrome supply the depth.

Buttons. Primary is a pill: solid #000000 on light and solid #FFFFFF-on-dark inverted where the band demands, 48px tall, 12px vertical and 30px horizontal padding, 16px/600 label, zero border. Put a filled circular glyph before the label when the button leads somewhere specific (a store, a platform, an app); put a small ↗ after it when it leaves the page.

Rhythm. Center the hero stack — headline, one-sentence subhead, proof row, button — with ~32–48px between items and generous air below, and let the grid ground run to the band edge. Below the fold go asymmetric: a marked content column of ~1280px, split into hairline cells, each cell holding a screenshot above a numbered heading and one sentence of gray copy. Screenshots bleed toward the top of their cell; copy sits low, left-aligned.

Motion. Keep it to one gesture: the header transitions from transparent to a translucent blurred capsule on scroll (background, backdrop-blur, inset and radius animating together over ~200–300ms). Everything else is static.

The two moves that make it recognizable: a faint technical grid drawn on the light ground and cut off dead straight at the band edge, and a headline whose second line is the accent color while the first stays ink.