# kitlangton.com

Source: https://www.kitlangton.com/
Captured: 2026-09-20
Tags: portfolio, landing, dark, both, dark-techno, editorial, technical, human, playful, confident
Colors: #030303, #2f2b2c, #3a120d, #554d44, #7d2216, #ee2b1d, #c03128, #7a6e5c
Type (body): commitMono · 16px/24px · 400 — "I am Kit Langton and this is my website. I have written a lot of code."
Type (small): commitMono · 12px/16px · 300 · tracking 0.3px — "8.1K"
Radii: 8px (22), 4px (8)

## Images

- Hero (desktop): https://media.lvly.design/library/kitlangton-com/hero.webp?v=1cafadf0
- Hero (mobile): https://media.lvly.design/library/kitlangton-com/mobile-hero.webp?v=a5eff2d9
- Full page (desktop): https://media.lvly.design/library/kitlangton-com/full.jpg?v=374ed02b
- Full page (mobile): https://media.lvly.design/library/kitlangton-com/mobile-full.jpg?v=fae4b5a8
- Clip preview (mp4): https://media.lvly.design/library/kitlangton-com/video-5422uu.preview.mp4?v=b115525c

A personal homepage built like a terminal broadsheet: pure black (#000000), one monospace face
(commitMono) at 16px/24px for absolutely everything, and three full-height columns divided by
1px hairlines so faint (#242424) they read as folds rather than borders. There is no hero
headline and no button anywhere on the page — the top of the left column is a marquee ticker
("CURRENT LIFE GOAL:") and a photograph of the author as a small child at a beige keyboard,
and everything under it is the same repeated row unit: a near-white title (#f0f0f0) over a
muted one-line description (#7d7d7d), with a small chip or a star count pinned to the far
right. Sections are announced by tracked uppercase labels in the same muted gray, and the only
horizontal division on the page is a hand-drawn sine wave in #2d2d2d, which is the single move
that stops the whole thing reading as a directory listing. Color enters only through content —
the video thumbnails' fiery reds (#ee2b1d) at 8px radius down the right column — so the
artwork supplies the warmth and the chrome supplies none. It works because the discipline is
total: with one typeface, one size and one weight axis, hierarchy has nowhere to go but case,
opacity and position, and the page ends up feeling like a well-kept index rather than a
portfolio pitch.

## Steal-worthy details

- Three equal-ish columns (roughly 35/35/29 of a 1440 viewport) separated by full-bleed 1px hairlines at #242424 on #000000 — the rule runs edge to edge, top to bottom, so the page reads as a printed sheet rather than as cards
- One horizontal divider on the whole page and it is a drawn sine wave in #2d2d2d, ~8px amplitude, repeating across the column width — the one unstraight line in an otherwise ruled layout, and the entire personality of the page sits in it
- Everything is commitMono 16px/24px, weight 400, normal tracking: titles, body, links, captions. Hierarchy comes from case, color and weight only — near-white #f0f0f0 for the thing you click, #7d7d7d for what it is
- The repeated row unit is two lines with no separator: title at full brightness, one-line description underneath in the muted gray, ~24px of air before the next pair. The same unit carries projects, repos, links and videos, so five different lists look like one list
- Metadata is pushed to the far right edge of its column and shrunk: a 4px-radius #2f2b2c chip with ~11px tracked uppercase text (TUTORIAL / APP), or a star glyph plus a count. Left edge holds the name, right edge holds the classification, the gap between them does the aligning
- Section labels are uppercase, ~12px, weight 300, +0.3px tracking in #7d7d7d, with no rule and no background — just the word and a generous gap before the first row
- Instead of a headline, the left column opens with an italic label plus bold value ticker ("CURRENT LIFE GOAL: PRECIPITATE THE AGE …") that runs past the column edge and is clipped by the rule — the overflow is the point, it tells you the line is scrolling
- Video cards are an 8px-radius thumbnail with an inline eye icon and view count sitting on the artwork's lower-left, then a two-line title and a dim date — the count lives on the image, never in a row beneath it
- Two radii only, and they split by role: 8px on every image (photo, thumbnail), 4px on every chip. Nothing else in the layout is rounded, because nothing else has a fill
- Narrow viewports abandon the grid entirely — the three columns stack into a single ~11500px scroll, so the desktop layout is the composition and mobile is just the same rows in sequence

## Style recipe

Build on pure black `#000000` with no elevated surfaces: no panels, no cards, no gradients, no
shadows. Set one monospaced family for the entire page (commitMono, Berkeley Mono, JetBrains
Mono) at 16px/24px, weight 400, normal tracking, and refuse a second family — no display face
for headings. Derive the whole hierarchy from three text colors: `#f0f0f0` for primary text and
links, `#7d7d7d` for descriptions, section labels and all metadata, and `#ffffff` for the one
bolded phrase per block that deserves it. Section labels are uppercase, 12px, weight 300, +0.3px
tracking, in the muted gray, with no rule and no fill under them.

Lay the page out as 2–4 full-height columns divided by 1px vertical hairlines in `#242424` that
run from the top edge of the viewport to the bottom, with ~48px of inner padding on each side of
a rule. Divide vertically exactly once, and do it with a drawn SVG sine wave (~8px amplitude,
~24px wavelength, 1px stroke, `#2d2d2d`) repeating across the column width — that squiggle
against otherwise perfectly straight rules is the signature; a straight `border-top` throws the
style away.

Make every list item the same two-line unit: title in `#f0f0f0` on line one, a single-sentence
description in `#7d7d7d` on line two, ~24px between pairs, and any classifier flushed to the
right edge of the column — a 4px-radius chip filled `#2f2b2c` with ~11px uppercase text tracked
+0.5px, or a 14px icon plus a tabular number. Use exactly two radii, 8px for images and 4px for
chips, and nothing else rounded. Let images carry every saturated color in the design: full-width
8px-radius artwork with small overlay stats sitting on the image's lower-left in a translucent
dark pill, and a hot red in the `#ee2b1d` family appearing only because the artwork contains it,
never as a UI color.

Keep interaction almost invisible: no buttons, no CTAs, no borders on hover — a link brightens
from `#7d7d7d` to `#f0f0f0` in ~120ms and nothing moves. Allow exactly one animated element, a
slow marquee line at the top set in italic for the label and bold for the value, and let it run
past the column edge so the rule clips it. Open the page with a personal artifact — a photograph,
a scan, a screenshot — rather than a headline, and collapse all columns to a single stacked
sequence below ~900px with the rules and the wave removed.