Today's art direction
The Launch Poster
A product launch page for one CSS fix, pulled as a three-colour screenprint on racing green.
The launch page is the freelancer's most billed shelf, and a browser fix is a product like any other: a name, a date, a before and an after. Here the page is one centered poster column. The publication nameplate folds into the top of the hero as a printed lockup instead of a metadata table, a hard-edged disc of coarse magenta halftone sits behind an extended grotesque headline, and a two-frame proof strip does the selling before any feature list. A cream release-tag stamp, carrying the real version number it covers, heads each section, and the items read as release notes: a tag line, a title, a caption. The type pairs Unbounded, a wide grotesque, against Libre Caslon Text, an old-style serif that reads as ink on cream.
Chrome 153, stable 8 September
Single-axis scroll containers
The release notes say the update "extends the overflow property to support scrollable values together with clip," with overflow: scroll clip as the example, and that this "lets position: sticky be constrained by different ancestor scroll containers per axis." In practice this is the fix for the best-known sticky complaint on the web. A wrapper that hid horizontal overflow, for a carousel, a tab rail, or a full-bleed section, silently became a vertical scroll container too, and every sticky header inside it stuck to the wrapper instead of the page. Hidden or scroll on one axis with clip on the other is now legal, and the clipped axis never scrolls. Chrome 153 release notes.
Chrome 153, CSS property
scroll-axis-lock
The same release adds a property that "lets you instruct browsers not to constrain a user's scrolling gesture to one axis." Browsers lock a drag to the axis you started on, which is right for a document and wrong for a map, a wide table, or a canvas, where the lock forces people to start a gesture at an angle. The spec change is small and the CSS Working Group pull request shows the syntax.
Chrome 153, HTML elements
Declarative camera and microphone controls
Two new capability elements, camera and microphone, are "declarative, user-activated HTML controls" that "embed a browser-controlled, strictly styled UI into the page" and require a click before any permission prompt or stream. For a designer this means a permission button you cannot fully restyle, and that is the point: the browser owns the trust signal. The Chrome Status entry carries the details.
Runs in Claude Design, Lovable, v0, Bolt, and Beaver Builder AI.
Build a one-page product launch page for a single feature or fix; call the style The Launch Poster. Semantic HTML and CSS only, no JavaScript beyond a font loader. The whole page is one centered poster column on a deep vivid racing green ground (#0E4B31), with a deeper bottle green (#0A3623) for one panel, cream (#F4EAD5) for text and printed cards, hot magenta (#E8388F) for loud marks only (a nameplate shadow, stamp shadows, the halftone), and mint (#9BC7A8) for small labels and captions. No gradients, no glow, no purple.
Type: Unbounded (a wide extended grotesque) at weight 800 for the headline, stamps, and section titles, at 600 for item titles; Libre Caslon Text (old-style serif) for all body copy at 19px with line-height 1.7 and a measure of about 65 characters; DM Mono for tags, captions, and the nav, uppercase with 0.06em tracking. Never italicize paragraphs; italics only for inline emphasis in mint.
Above the fold, in order, all centered: a top nav in mono (brand left, three links right); a printed nameplate lockup, a cream card with a 4px hard magenta offset shadow, carrying the publisher line, a large number, and the date and reading time on one line; a large hard-edged circle (about 350px on desktop, 250px on mobile) of coarse magenta halftone dots (radial-gradient dots on a 9px grid, 55% opacity) centered behind the headline and tucked under the bottom edge of the nameplate; the headline at 3.6rem on desktop, 2rem on mobile, max 18 characters per line; a one-paragraph deck; then a proof strip: two cream frames side by side (stacked on mobile), each a drawn miniature of the same page, the left showing the broken state and the right the fixed state, with a mono state label and a one-sentence caption under each. Below the strip, a full-width printed plate (a 3:2 screenprint image with a mono caption under it).
Sections are release notes. Each opens with a cream stamp in Unbounded carrying a real version tag, the section title, and a note count in mono; items are separated by a 1px cream hairline at 28% opacity and carry a mono tag line, a title, and a caption. Put the callout for the style in the bottle-green panel. The design move section is the one wide section: a 7/5 grid with prose left and a square plate right, stacked on mobile. The prompt section is a cream sheet with dark green text, its stamp inverted to green. End with a prev/index/next rail and a centered colophon.
Guardrails: body never under 18px, line-height never under 1.6, no justified text, small labels at WCAG AA against the surface they sit on, no fake screenshots with readable text, no pill radius except none, card radius 4 to 8px, hover states on links only (underline color to magenta over 150ms), and a prefers-reduced-motion guard. Images: three-colour screenprint plates in the same green, cream, and magenta, with coarse halftone and slight misregistration, no legible text in them.
