# kargul.studio

Source: https://kargul.studio/
Captured: 2026-09-20
Tags: agency, landing, mixed, both, minimal, corporate-clean, confident, premium, technical, calm
Colors: #efefef, #d2d2d2, #6f6f6f, #b1b1b1, #8e8e8e, #565656, #2f2f2f, #151515
Type (h1): Geist · 52px/55.64px · 700 · tracking -1.56px — "A design and engineering partner for scale-ups and enterprise products."
Type (h2): Geist · 36px/41.76px · 700 · tracking -1.08px — "Services"
Type (h3): Geist · 18px/24px · 700 · tracking -0.54px — "Branding"
Type (body): Geist · 16px/24px · 500 — "We act as an elite extension of your in-house team, shipping high-fidelity produ"
Type (small): Geist · 13px/22px · 500 — "Recent Work"
Type (button): Geist · 13px/22px · 600 — "Start a project"
Button: "StartaprojectStart a project" — fill #ffffff, text #232323, radius 9999px, border 0px, padding 10px 15px, height 42px, type 13px/600
Radii: 9999px (8), 18px (8), 24px (7), 36px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/kargul-studio/hero.webp?v=f8214c57
- Page crop (mid-1): https://media.lvly.design/library/kargul-studio/mid-1.webp?v=071956d1
- Page crop (mid-2): https://media.lvly.design/library/kargul-studio/mid-2.webp?v=e7998e4e
- Hero (mobile): https://media.lvly.design/library/kargul-studio/mobile-hero.webp?v=d32fa6b0
- Full page (desktop): https://media.lvly.design/library/kargul-studio/full.jpg?v=c5784a0b
- Full page (mobile): https://media.lvly.design/library/kargul-studio/mobile-full.jpg?v=a96bb352
- Clip preview (mp4): https://media.lvly.design/library/kargul-studio/video-2es42d.preview.mp4?v=48b7e44a

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.

## Steal-worthy details

- Floating pill navigation — the bar is detached from the top edge and split into three capsules (a square logo chip, a 9999px link group, a filled CTA pill), so the header reads as an object hovering over the page rather than a band across it
- Availability pill above the headline — a 13px capsule reading "Accepting 3 more projects this quarter" with a single green dot; it is the only saturated pixel on the page and it converts scarcity into a status indicator rather than a banner
- Headline tracking tuned to the size — 52px/700 with line-height 55.64px and letter-spacing −1.56px (−0.03em); the sub-1.1 leading plus negative tracking is what turns three centered lines into one dense typographic block
- Paired pill CTAs at one height — a solid #151515 primary beside a #ffffff secondary, both 9999px, both 42px tall, both 13px/600 labels, set edge to edge with no gap so they read as a single segmented control
- Oversized logo watermark behind the hero — the studio mark blown up to ~120px and dropped to a barely-there tint of the background, sitting behind the availability pill so it reads as texture, not branding
- Near-black slabs as chapter markers — the Services and Project spotlights sections are full-width #151515 panels at a 36px radius inset from the page edges, with their own nested 18/24px cards; the page changes register without changing hue
- Total grayscale discipline on imagery — client logos, the 13 team portraits and the tool row are all desaturated and set at low opacity, so nothing competes with the product screenshots inside the dark slabs, which are the only full-color images on the page
- Anchored price in the headline — the offer sets the number inside the h2 itself with the original struck through beside it, so the discount is typographic rather than a badge or a ribbon

## Style recipe

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.