# skale.solutions

Source: https://skale.solutions/
Captured: 2026-09-20
Tags: agency, landing, light, both, minimal, swiss, confident, technical, calm, premium
Colors: #fefefe, #d2d2d2, #b3b3b3, #919191, #757575, #ffd3cd, #040404, #ff8779
Type (h1): interDisplay · 42px/46.2px · 500 · tracking -1.68px — "Viral launch videos for Bay Area startups at Skale"
Type (body): interDisplay · 16px/22px · 500 — "We create videos with millions of views for the companies you personally know an"
Type (small): Roboto Mono · 12px/18px · 500 · tracking -0.48px — "skale.solutions"
Type (button): interDisplay · 16px/24px · 400 — "Book a call Book a call"
Button: "Book a callBook a call" — fill #050505, text #ffffff, radius 4px, border 0px, padding 10px 20px 11px 20px, height 40px, type 16px/400
Radii: 4px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/skale-solutions/hero.webp?v=5bebb140
- Hero (mobile): https://media.lvly.design/library/skale-solutions/mobile-hero.webp?v=f045f876
- Full page (desktop): https://media.lvly.design/library/skale-solutions/full.jpg?v=f7674db8
- Full page (mobile): https://media.lvly.design/library/skale-solutions/mobile-full.jpg?v=532c3e6a
- Clip preview (mp4): https://media.lvly.design/library/skale-solutions/video-hfjnt2.preview.mp4?v=b1cd43b6

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.

## Steal-worthy details

- Hairline column rules with red end caps — a 1px `#F4F4F4` vertical rule at each edge of the center column, running the full viewport height, each capped by a ~12px segment of brand red at the very top and the very bottom. The rules carry the composition; the caps are the only ornament.
- Mono corner slugs instead of a nav — the domain at top-left and the local time at top-right, 12px Roboto Mono, -0.48px tracking, ~`#9E9E9E`. There is no menu bar, no logo lockup in the corner, and no links: the page is short enough not to need one, and the corners read as instrument labels.
- ASCII figures bleed off both margins — two large dithered drawings rendered from a tiny glyph ramp (F, S, V, $, ★) sit entirely outside the column rules and run off the left and right edges. All the texture on the page lives in the gutters, so the reading column stays absolutely clean.
- The brand word colored inside the headline — every other glyph in the 42px headline is `#1A1A1A`; the product name, deliberately placed last on line 2, takes the brand red. One word of color does the job a logo lockup usually does.
- Two-tone subhead in a single run — the claim is `#1A1A1A` and the qualifier that follows is ~`#6B6B6B`, both 16px/22px at weight 500 in the same sentence. Emphasis costs a color change, not a weight change or a line break.
- Borderless gray secondary button — the pair is 40px tall, 4px radius, 10px/20px padding: primary a solid `#050505` with white text, secondary a flat `#F0F0F0` fill with dark text and no border at all. Both labels are set at weight 400, lighter than the 500 body copy around them.
- Ragged-center logo wall — seventeen client marks, each keeping its own logotype rather than being reset in one typeface, all flattened to ~`#707070`–`#8A8A8A` and wrapped 6/5/6 on center like justified text instead of being forced into a grid. A tiny 12px "Our clients" label sits above it.
- The whole site is one viewport — the page height equals the 900px viewport exactly: mark, headline, subhead, two buttons, social proof, no scroll, no sections, no footer. The layout is an argument that nothing below the fold was needed.

## Style recipe

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.