# pierre.computer

Source: https://pierre.computer/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, neo-brutalist, technical, raw, serious, calm, confident
Colors: #f7f7f8, #d1d1d2, #b4b4b5, #969696, #7c7c7c
Type (small): BerkeleyMono · 12px/18px · 400 — "PIERRE COMPUTER COMPANY █ CORPORATE WEBSITE 2026"

## Images

- Hero (desktop): https://media.lvly.design/library/pierre-computer/hero.webp?v=7a7550c9
- Hero (mobile): https://media.lvly.design/library/pierre-computer/mobile-hero.webp?v=64c55bbf
- Full page (desktop): https://media.lvly.design/library/pierre-computer/full.jpg?v=9941b157
- Full page (mobile): https://media.lvly.design/library/pierre-computer/mobile-full.jpg?v=79d387be
- Clip preview (mp4): https://media.lvly.design/library/pierre-computer/video-0ftvdc.preview.mp4?v=7f7b7cc0

Pierre Computer Company's site is a corporate page rendered as a raw Markdown document: one column of 12px Berkeley Mono at a 20px leading on a near-white `#f7f7f8` ground, and nothing else — no header, no nav, no buttons, no images, no color beyond grays. The masthead is three uppercase lines ("PIERRE COMPUTER COMPANY ▮ / CORPORATE WEBSITE / 2026") with a blinking block cursor, then a whole blank screen of air before a tilde-and-asterisk ornament and a copyright line introduce the body. Headings keep their literal `#`/`##` glyphs in a lighter gray; links are written out in Markdown's `[label](url)` syntax with only the URL underlined, so the page reads like the source file of itself. The effect is deadpan and confident: an infrastructure company signalling that the plain text *is* the design, and that the 900px viewport can hold the entire company.

## Steal-worthy details

- The whole page is one desktop viewport (900px) — products, open source, writing and openings fit in a single monospace column with no scrolling, a real discipline of content rather than a layout trick.
- Markdown syntax left visible as typography: `#` and `##` rendered in a muted gray before bold uppercase headings, list dashes kept, links shown as `[label](https://…)` with the underline on the URL only.
- A blinking solid block cursor (`▮`) after the company name, the one moving element on an otherwise static page, reads as a terminal prompt and brand mark at once.
- Vertical rhythm is strictly the 20px line grid: blank "lines" are the only spacing unit, including the deliberate ~120px void between masthead and body.
- Tonal hierarchy with no color: near-black body text, mid-gray (`#969696`-ish) heading glyphs and ornament, `#d1d1d2`/`#b4b4b5` tints — the entire palette is five grays.
- Ornamental ASCII line (`~*~ © The Pierre Computer Company, Inc. ~*~`) as a section rule — a typographic flourish that costs no pixels of chrome.
- A 40px left margin and a ~470px measure on a 1440px canvas: the content hugs the top-left corner and leaves the rest of the screen empty on purpose.

## Style recipe

Set the page in a monospace face (Berkeley Mono, falling back to ui-monospace / SF Mono / Menlo) at 12px / 20px line-height, weight 400, no letter-spacing changes, on a `#f7f7f8` ground with near-black text (`#1a1a1a` or the face's default). Use one left-aligned column pinned to the top-left with a 40px margin and a measure of 60–70 characters; do not center and do not fill the width. Allow no images, icons, buttons, borders, shadows or radii — every element is text. Express hierarchy through Markdown's own glyphs: prefix h1 with `# ` and h2 with `## ` in a lighter gray (`#969696`), set the heading text in bold uppercase at the same 12px size, keep list items as `- ` lines, and write links as `[label](url)` with the underline on the URL only. Space everything in whole blank lines on the 20px grid; use a full empty screen between a masthead and the body when you want weight. Limit the palette to the ground, the text and three or four grays between (`#d1d1d2`, `#b4b4b5`, `#969696`, `#7c7c7c`). Permit exactly one motion: a blinking solid block cursor after the title. Write copy in uppercase for the masthead and section titles, sentence case for prose, and keep it short enough that the whole page fits one viewport. Close with an ASCII ornament (`~*~ … ~*~`) as the only decorative element.