# yoinkui.com

Source: https://www.yoinkui.com/
Captured: 2026-09-20
Tags: saas, landing, mixed, both, minimal, swiss, confident, technical, energetic, optimistic
Colors: #fafdfe, #101012, #575758, #c9d1d6, #313131, #b0b2b4, #8c8e8f, #82bedc
Type (h1): inter · 60px/60px · 600 · tracking -1.5px — "Ship faster than ever."
Type (h2): inter · 24px/31.9999px · 600 — "1. Select a component"
Type (body): inter · 16px/20px · 400 — "Whenever you spot a component you like, just fire up YoinkUI and click on it"
Type (button): inter · 16px/24px · 600 — "Get started now"
Button: "Get started now" — fill #000000, text #ffffff, radius 9999px, border 0px, padding 12px 30px, height 48px, type 16px/600
Radii: 9999px (7), 8px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/yoinkui-com/hero.webp?v=39f9cd9a
- Page crop (mid-1): https://media.lvly.design/library/yoinkui-com/mid-1.webp?v=a690e93d
- Page crop (mid-2): https://media.lvly.design/library/yoinkui-com/mid-2.webp?v=f955205a
- Hero (mobile): https://media.lvly.design/library/yoinkui-com/mobile-hero.webp?v=e5f96607
- Full page (desktop): https://media.lvly.design/library/yoinkui-com/full.jpg?v=524ed37f
- Full page (mobile): https://media.lvly.design/library/yoinkui-com/mobile-full.jpg?v=4949ca20
- Clip preview (mp4): https://media.lvly.design/library/yoinkui-com/video-8fio30.preview.mp4?v=9ffa881a

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.

## Steal-worthy details

- Blueprint grid as the hero's only ornament — a 1px cerulean graph-paper grid at very low opacity, roughly 60px cells, drawn edge to edge and clipped hard at the section boundary with no fade or vignette softening it
- Two-tone headline instead of a highlight — 60px Inter at weight 600, 60px line height (a 1.0 ratio, so the two lines nearly touch) and -1.5px tracking, with the entire second line set in the accent; the color break carries all the emphasis, so no italic, underline or marker shape is needed
- Install button that names its own surface — a 48px pill, `border-radius: 9999px`, 12px/30px padding, solid #000000 with a 16px/600 white label, and the Chrome glyph in a filled circle to the left of the text so the CTA reads as an extension install rather than a signup
- Social proof compressed into one centered line — three overlapping circular avatars, five amber stars, and a single bolded number inside an otherwise gray sentence, all stacked between the subhead and the button so the proof is passed before the click
- Chromeless header that becomes a floating capsule — transparent with no bar fill and no bottom border at rest, then on scroll it collapses into a translucent blurred pill inset from both edges, carrying the same logo, three links and install button at the same sizes
- Content column drawn, not implied — the dark band marks its measure with two full-height vertical hairlines and lets the page ground continue outside them, which reads as a layout guide left visible on purpose
- Hairline cells in place of feature tiles — the steps sit in a two-up then one-up grid divided by 1px rules on a #101012 ground, with no card fill, no radius and no shadow; each numbered heading gets a short accent bar flush to its left, the only color in the whole band
- The closing section mirrors the hero instead of restating it — the band inverts back to white with a soft cool glow bleeding in from the sides, repeats the same 48px black pill, and hands straight off to a black footer, so the page ends on the same two moves it opened with

## Style recipe

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.