kargul.studio

A studio site that gets its authority from restraint: the entire page is a single warm-neutral gray (#efefef) carrying black Geist type, and there is not one chromatic color anywhere — client logos, team portraits and product shots are all desaturated to match. The hero is center-stacked and almost empty: a floating pill navigation detached from the top edge, a small availability pill with the page's only spot of color (a green status dot), a 52px/700 headline set at −1.56px tracking so the three lines lock into a tight block, a 16px/500 gray subhead, and a pair of pill buttons — one near-black, one white, identical 42px height. Below the fold the page alternates rhythm rather than color: two full-width near-black slabs at a 36px radius (Services, Project spotlights) drop in like inserted chapters, separated by light passages of stats, a white testimonial card, a portrait grid and an FAQ accordion. It works because every decision is the same decision made consistently — one typeface at four sizes, one radius family (9999px for controls, 18/24px for cards, 36px for slabs), zero color, generous vertical air — so the only thing left with contrast is the work itself.

Build on one warm-neutral ground, #efefef, and never leave it: no section gets a different background color, only a different value. Ink is #151515 for headings and #565656–#6f6f6f for body and captions; the only permitted chroma is a single ~8px status dot (a green such as #27b06a).

Type: one geometric-grotesque family (Geist, or Inter/Satoshi as substitutes) at four steps — h1 52px/700, line-height 1.07, letter-spacing −0.03em; h2 36px/700, 1.16, −0.03em; h3 18px/700, 1.33, −0.03em; body 16px/500, 1.5, tracking normal; small and button labels 13px (500 and 600). Tighten tracking as size grows and never track body text. Weight does all emphasis work — bold a clause inside a testimonial instead of coloring it.

Radii come in one family: 9999px for every control and chip, 18px for nested cards, 24px for standalone cards, 36px for full-width section slabs. Borders are almost absent — separation comes from a value step (a #ffffff card or a #151515 slab on the gray ground) plus 80–140px of vertical padding. Use soft, wide, very low-opacity shadows only under floating elements (the navigation, the hero buttons); flat everywhere else.

Layout: center the hero and every section heading, cap measure at ~640px for body copy and ~1100px for slabs, and inset slabs 20–24px from the viewport edge so the ground shows on both sides. Buttons are 42px tall with 10px/15px padding; pair a solid ink pill with a white pill flush against each other. Chips are uppercase 11px with 8/12px padding and a hairline outline on dark, a tint fill on light.

Imagery is grayscale by rule — logos, portraits and any photography desaturated and set to 40–60% opacity — with one exception: product screenshots, which stay in full color inside the dark slabs so they are the loudest thing on the page. Motion is understated: 150–200ms ease-out fades and 8–12px rises on scroll-in, hover states that only shift a background one value step. The two moves that make it recognizable are the detached three-capsule navigation and the alternation between light page and black rounded slab as the only structural rhythm.