skale.solutions

A whole agency site compressed into one non-scrolling white screen. Two 1px hairlines fence off a ~790px center column and run the full height of the viewport, each tipped top and bottom with a short segment of brand red — the only structural device on the page, and the thing that makes an otherwise empty field read as composed rather than unfinished. Inside the column sits the entire argument: the red mark and wordmark, a 42px/46px headline at 500 with -0.04em tracking whose last word is the brand name in red, a two-tone subhead that carries its claim in near-black and its qualifier in gray, a pair of 40px buttons, and a wall of seventeen client logos flattened to a single gray. Outside the rules, in the margins nothing else uses, two large dithered ASCII figures built from a five-glyph ramp bleed off the left and right edges — the one piece of texture, and it never touches the reading column. The mono corner slugs (the domain at top-left, the local time at top-right, 12px Roboto Mono in light gray) replace a navigation bar entirely. It works because the restraint is total and the one loud color appears exactly three times: the mark, one word, and four tiny rule caps.

Build on a pure white ground (#FFFFFF) and give the page a single fixed-width center column of ~790px on a 1440px viewport. Draw the column with two 1px #F4F4F4 vertical hairlines at its edges running the full height of the viewport, and cap each rule with a ~12px segment of the accent red at its very top and very bottom — those four ticks are the whole decorative budget. Put no header bar and no nav: set two 12px monospace slugs in the top corners at ~#9E9E9E with -0.04em tracking (a contextual label left, a live or ambient value right).

Type is one grotesque (Inter Display, or Inter) at two weights. Headline 42px/1.1 at 500 with -0.04em tracking, centered, broken to two lines by hand; body 16px/22px at 500; small labels 12px/18px; button labels 16px at 400, deliberately lighter than the body around them. Ink is #1A1A1A, not black; muted text #6B6B6B; the faintest tier #9E9E9E.

Color roles: ground #FFFFFF, ink #1A1A1A, muted #6B6B6B, hairline #F4F4F4, secondary surface #F0F0F0, primary surface #050505, and one accent — a hot red-orange such as #FF220D — used exactly three times: the mark, one word inside the headline (put it last), and the rule caps. Never use the accent for a button, a link underline or a background.

One radius everywhere: 4px. No borders on anything but the hairlines, no shadows, no gradients, no cards. Buttons are 40px tall with 10px/20px padding, set side by side with ~12px between them: primary solid #050505 with white text, secondary a flat #F0F0F0 with #1A1A1A text and zero border.

Vertical rhythm inside the column is generous and uniform — roughly 40–56px between mark, headline, subhead, buttons, and ~90px before the social-proof block. Prove credibility with a monochrome logo wall: flatten every mark to one gray in the #707070–#8A8A8A band, keep each brand's own letterforms, and let the rows wrap center-justified and ragged rather than gridding them.

The two moves that make it recognizable: capped hairline column rules as the only structure, and all texture exiled to the margins — put one large dithered ASCII drawing (a five-glyph density ramp over a photograph) outside each rule so it bleeds off the edge and never intrudes on the text. Keep motion to almost nothing: a 150ms opacity or color transition on the buttons and links, no entrance animation, no parallax. On narrow screens, rotate the device rather than dropping it — stack the ASCII art into a band at the top and turn the two vertical rules into one full-width horizontal hairline with the same red end caps; reflow the logo wall into two columns mirrored around a center gutter. Aim to fit everything in a single viewport with no scroll.