Repository navigation
Conversation
A brand sits between the tiles' steps: its headline 48px at weight 300, its buttons 40px tall with 4px corners. A design's tune sets exact values for headlines, section headings, labels, buttons, cards and fields, each bounded so no value can break a page, and each one left out keeps what the tiles choose. Headlines take their own weight, defaulting to the heading weight; a headline's size scales down on a phone. Section headings are a part, so a tune sizes them without touching smaller headings. tuneFromMeasurements turns what a reader measured on a brand's own pages into exact values a person would choose, rounding to steps and holding a site's hero-sized section headings to what a card can carry.
The reader finds a page's headline, a section heading, its main button, a card and a field in its HTML, and applies the CSS rules that match them in cascade order, utility classes included, with rem, clamp(), min(), max(), vw and the page's custom properties resolved as a wide, light screen sees them. Rules for states, theme scopes, dark themes and small screens are left out, and what cannot be read stays unmeasured. No browser is needed. The faithful look takes what was measured as exact values, and every look's brief says what was measured so its steps start near it. A tracking measured as none is kept as none.
A tune can colour headlines and section headings and fill primary buttons with their own label, weight and case, in light mode. Each colour is checked where it sits: a headline at 3:1 on the page and the band (and not at all across a blend or an image), a section heading at 3:1 on the page and a card, and a button's label at 4.5:1 on its fill, else the fill's best label. A colour that would not read is left out. The website reader measures the headline's and heading's colours and the main button's fill, label, weight and case, and the faithful look takes them.
From a keyboard sweep of every public page on ten branded portals: - Anything focused by keyboard gets a ring in the solved focus colour, in the base layer, so a component without its own focus style still shows one; the vote box's own ring replaces the browser's, which vanished on a dark page. - A card style's shadow gives way to a focus ring, which is drawn as one; linked help cards on filled designs lost their ring. - Small targets reach 24px without changing their look: tags, author names, the composer's sign-in link and Home's roadmap links. - The composer and the help search show a full-strength ring while typed in, and author names a ring as well as an underline. - The logo link is named for whose portal it is when it shows a wordmark or a mark alone. - A section heading's own colour must read at 4.5:1, as it shrinks to body size on a phone.
From the second keyboard sweep: - The rich text editor is a multi-line text field named by its placeholder, where it had no name for a screen reader. - The composer rings itself with an outline while typed in, which its animated shadow cannot draw over. - The feed's search field fills its pill, so the whole pill is the field, and rings at full strength. - A page's own buttons on the band ring in the band's ink, where the page's grey ring was faint on a dark band. - Home blocks' links reach a 24px target without moving their line.
…led faces From a review of the branded portals' typography: - A brand's measured section headings keep its face, weight, tracking and colour but take a card title's size: 18px, a little more the larger the brand sets them, never past 24px, with tight tracking eased. A site's h2 introduces a screen; here it titles a card over 14-16px content, and at the brand's own size it outweighed everything around it. - A headline's line grows with it, on the tiles' scale and with an exact headline size, so it never reads as a caption under a poster. - Eight grotesk and geometric faces carry a light weight, for brands whose headlines are set light; only workspaces that choose them load it. - nearestBundledFont maps a brand's face to itself when bundled and to the bundled face of its class and build when it is a well-known brand face. The faithful look takes them, and every look's brief names them.
A stack's first known family wins, so a brand face ahead of a Helvetica fallback is matched as itself.
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
system-ui, sans-serif and the platform defaults count only when they lead the stack, where a brand chose them.
…eave the page room A light weight that carries a brand's 32px heading is too faint at a card title's size, so a measured section heading is at least weight 400. A measured headline is held under 88px: a portal's headline leads a page of content, not a marketing screen.
Brand has an Exact values section, folded away until wanted: the headline's size, weight, spacing, line height and colour; section headings' size, weight and colour; buttons' corners, height, fill and label; cards' corners, edge and shadow. A field left blank keeps what the choices give, each value is held within its bounds, and one button clears them all. The review list names them. The colour field is shared with the rest of Brand.
mortondev
force-pushed
the
feat/portal-design-v2-tune
branch
from
October 31, 2026 18:22
5da7588 to
c372ef0
Compare
… faithful look takes the site's main button
From judging the AI's portals against the approved goals:
- The headline is the largest h1 in sight, past hidden, screen-reader-only
and notice elements; a size set only by a reset (h1 { font-size: 2em })
says nothing about the brand and is left unmeasured.
- The main button is the one filled with the site's own button colour,
where a secondary button came first in the page.
- The faithful look takes a coloured main button as its brand colour, and
fills buttons with the text colour where the site's are near-black.
…very look words every page - When a site fills its hero with a colour, the faithful look's band takes it: the brand colour when the hero is that colour, else the hero's colour as the second. - Looks write the roadmap's, changelog's, help centre's and support's titles and lines in the brand's voice, where every page said its own name; the edit tool writes a page's title from plain text, a line at a time, as it does a headline. - The faithful look's rules, applied after the model's choices from what was read and measured on the site, live in their own module.
…compiles A look is answered under a strict schema the provider compiles into a grammar, and past a size it refuses the request: every start then fell back to an unbranded portal. The page words are now a flat list of eight lines, and faces are named as plain text and checked after, a face that is not bundled being left out. A test holds the schema at the size that compiles, so a new field is flattened or asked for separately rather than growing the look.
… only its colours Asked to match a screenshot, the edit chat saw only the picture's colours, so it could not read the layout, type or shapes it was asked to match. An attached image now goes to the model as an image, downscaled as the looks' start does, with its colours alongside. An answer to match a picture can touch many fields, so it has more room; one that does not fit is asked for once more, then without the picture.
…ounts the styles its page uses - A site that bundles its styles into one sheet can ship it at a few megabytes; the reader dropped any sheet over 1 MB, so a 2 MB bundle went unread and the reader measured whatever sheets were left. It now reads up to 4 MB a sheet. - A bundle carries styles for screens the page is not showing. A rule whose classes the page's HTML never uses counts a quarter towards the brand's colours and fonts, so a site's own buttons lead its palette rather than years of components it no longer shows.
…s seen bears it out A measurement can land on the wrong element: on wise.com the reader took an old blue button its bundle still styles for the main one, and the faithful look's brand colour, band and headline went blue and slate over a model that had seen the lime and forest green in the screenshot. A measured colour now counts only when it is among the screenshot's colours, or without a screenshot among the site's leading ones; a label's black or white needs no evidence. Exact sizes, weights and corners still apply.
This was referenced Nov 1, 2026
Member
Author
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stack created with GitHub Stacks CLI • Give Feedback 💬