# devouringdetails.com

Source: https://devouringdetails.com/
Captured: 2026-10-22
Tags: marketing, landing, light, both, minimal, swiss, technical, calm, confident, elegant, human
Colors: #f8f8f8, #d3d1d0, #b0b0b0, #919191, #797979, #ff671c, #fca171, #f9bea0
Type (h2): DD · 32px/36px · 400 · tracking -0.4px — "Platform"
Type (h3): a · 13px/19.5px · 400 — "INFERRING INTENT"
Type (body): DD · 24px/40px · 500 — "Have you ever noticed that some animation sequences can be improved with just a "
Type (small): a · 13px/19.5px · 500 — "ANDY ALLEN"
Type (button): JetBrains Mono · 13px/19.5px · 500 — "REGISTER NOW"
Button: "Register Now" — fill #ff5800, text #ffffff, radius 0px, border 0px, padding 0px 8px, height 24px, type 13px/500
Radii: 12px (31), 9999px (26), 6px (25), 4px (7), 24px (4)

## Images

- Hero (desktop): https://media.lvly.design/library/devouringdetails-com/hero.webp?v=8ddd00e1
- Page crop (mid-1): https://media.lvly.design/library/devouringdetails-com/mid-1.webp?v=7e8e059a
- Page crop (mid-2): https://media.lvly.design/library/devouringdetails-com/mid-2.webp?v=dfb9668c
- Hero (mobile): https://media.lvly.design/library/devouringdetails-com/mobile-hero.webp?v=87a3cf6f
- Full page (desktop): https://media.lvly.design/library/devouringdetails-com/full.jpg?v=cedfb226
- Full page (mobile): https://media.lvly.design/library/devouringdetails-com/mobile-full.jpg?v=34753b3c
- Clip preview (mp4): https://media.lvly.design/library/devouringdetails-com/video-reuotv.preview.mp4?v=4205d612

A sales page for an interactive course that reads like a quiet reference manual. A white sheet is inset on a pale gray canvas (#eeeeee) with wide margins. One grotesk, set at 24px with a 40px line height, carries everything from the stacked nav to the long-form pitch, so the page reads like a well-set essay rather than a funnel. The only color is a hot safety orange (#ff5800): a dot for the logo, a hairline playhead that runs the full viewport width with a "REGISTER NOW" tag pinned to it, and the small marks inside the demo tiles. The page proves its interaction craft in the chrome itself. A tick-ruler minimap on the left edge tracks scroll position, the testimonials run together as one continuous paragraph, and the curriculum is shown as a grid of live, monochrome prototype tiles with mono uppercase captions.

## Steal-worthy details

- Viewport-wide orange hairline that works as a scroll playhead. A small triangle marker sits on the left edge, and a square, uppercase mono CTA tag hangs off the line at the right, so the call to action travels with the reader instead of living in a header
- A tick-ruler minimap in the left gutter: short 1px dashes for paragraphs, longer ones for section starts, used as a table of contents in place of a sidebar
- A square CTA with no radius, #ff5800 fill, 13px JetBrains Mono uppercase, 24px tall with 8px side padding. It reads like a label on an instrument, not a button
- No header bar at all. A single orange dot is the logo, and the nav is a plain vertical list in body-size type, set in the right text column
- The content sits on a white sheet inset on a gray canvas, with about 144px of gray on each side. It gives the page the feel of a printed manual without any shadow
- Testimonials set as one run-on paragraph. Each quote opens with an inline 24px avatar, quotes alternate between ink and #919191 gray, and the block fades and blurs into a "Read testimonials" toggle
- A curriculum grid of live mini prototypes on #f8f8f8 tiles with a 12px radius. The drawings are grayscale line work with one orange mark each, captioned bottom-left in 13px mono uppercase gray
- In-text links in mid-gray (#797979) rather than color or underline, so named references read as quieter asides within the sentence
- A full-width orange pill price bar ("Register Now" on the left, "$249" on the right) after a checklist of what the purchase includes, with small orange check marks

## Style recipe

Build the page on a pale gray canvas (#eeeeee) with a white content sheet inset about 10% from each side, with no shadow and no border. Inside it, use a narrow two-column text measure (about 440px per column, 24px gutter) or a single 900px column. Use one neo-grotesk (Inter Display, Söhne or similar) for everything: body at 24px/40px weight 500, section heads at 32px/36px weight 400 with -0.4px tracking. Let size and space carry the hierarchy instead of weight. Use JetBrains Mono at 13px uppercase for every label, caption and CTA. Ink is near-black and secondary text is #919191. Links are #797979 with no underline. Use exactly one accent, safety orange #ff5800 (lighter tints #fca171 and #f9bea0 for fills inside illustrations), and apply it sparingly: a dot logo, 1px rules, check marks, single marks inside diagrams. CTAs are square-cornered orange tags with a 0 radius, 24px tall, white mono uppercase text, and 8px horizontal padding. The one exception is a final full-width pill purchase bar. Cards are #f8f8f8 with a 12px radius and no border. Use a 6px radius for small controls and 9999px for pills and avatars. Diagrams and demos are grayscale hairline drawings with one orange element. Skip the header bar: use a mark plus a vertical text list. Prefer instrument-like chrome, such as hairline rulers, tick marks and a scroll-tracking line, over icons or decoration, and stay calm and precise.