Landing plan

The "Simple, honest pricing" block: three ways to pay for one plan, standing on the page's one atmospheric band, and what that plan includes said once underneath them.

Organism 1 grey page 1 coloured page added 2026-08-15

What it is

It was built five times, and the fifth is the one on the page. The first put the four included things in a full-measure card under the three prices. The founder, seeing it: "это ужасно". The shared list was a white bar under three white cards holding four short phrases across 1800px, the badge stacked above the yearly price pushed that figure 31px below the two it is compared with, and the growing sentence left 120px of nothing in the middle of two cards. The second made the list a line, put the badge on the price's own line and gave every card a body and a footer with a divider between. The third gave the band its picture, the fourth made the price the Display figure of the page (see below), and the fifth is the founder's of 2026-08-16.

The fifth build, and its four clauses. "не нравятся мне карточки они скучние ... еще куча текста вверху а сами карточки сплюснутіе + надо 69 долл поставить по центру и виделть". Less above the price: five lines stood between the heading and the first number - a lead, a reassurance, an eyebrow and a row of four - in the one section a person opens to see a number, so the list and the reassurance moved BELOW the prices, where detail belongs after an answer. The yearly price to the middle: first is the reading order of a list, and a row of three is seen as a shape rather than read as a list; monthly, yearly, lifetime is also the ladder in order of commitment. The card is a plate: centred, so the price is on the card's axis and the card's axis is on the section's, with the badge on the card's top edge rather than in its corner. And the recommended card is a podium, raised at the top only and wearing a petrol edge.

Three identical lists is a block admitting that the comparison it is drawn as does not exist. Each of the three cards carried "Everything in Tendd Pro" over History and trends, Advanced alerts, Full cancel guides and Export - the identical four, word for word, twelve list items and twelve ticks for four facts. This is not three plans: it is one plan and three ways to pay for it, which is what D4 locked and what the copy has said all along. The list is lifted out and stated once, under all three, where it belongs to all three. The plan option already made half of this argument at stage 07, about colour: twelve petrol ticks smeared the accent until the button stopped being the loudest thing on the screen. The other half is that twelve of anything for four facts is the same mistake in another currency.

The band was centred in grey and not in colour. _wf.css centres this section, heading, lead and all; the rollout kept the centring for the closing block and lost it here, so a left-aligned heading stood over a centred row of cards with a third of the band empty beside it. That is a desync, not a design, and the grey is the contract.

And the band was white. It is the one section on the page that asks for money and it stood on the same flat fill as the section above it. The founder, 2026-08-15: "может на фон какую ненавязчивую спокойную картинку сделать". It now carries a wash: a teal haze drifting across paper in the light theme, the same composition at dusk in the dark one.

The price is the biggest thing in the card

The founder, 2026-08-15: "а можно как то блоки с ценами сделать красивее больше? виделить цену большой такой?" So the plan price is set in Display, 46px, through a third size declared on the amount and worn as a class in the markup. It does not break the One Number Rule, it states it properly: the rule is that exactly one object on a screen is set in Display and it is the number the person came for. In the app that is the monthly total. The landing has no total, so until now it had no Display figure at all - the rule named the app's occurrence rather than the job, and the count per screen is still one.

And the ask uncovered a desync that had been shipping since the rollout. When the size axis was declared on the amount, four host rules became one modifier, and a modifier has to be worn: upgrade.html writes class="amt figure" on all three of its cards and the landing's three were left bare, so the landing's prices were rendering at 14px - the size of the sentence under them - while the grey has drawn them at 30px since it was built. Measured in the browser before it was fixed. Nobody saw it because the coloured landing did not exist when the axis was declared, and a 14px price reads as a small bold price rather than as a missing rule.

The cadence under the figure goes up one step with it, to --type-sub: under a 46px number, "a year" at 14px was reading as the start of the sentence below rather than as part of the price. The card's padding goes to 32 and all three cards take the one elevation, because paper laid on a picture with nothing under it reads as a hole cut in the picture rather than as a card on top of it.

Anatomy

Limits

The podium rises at the top only, and that single word is the whole of it. Negative block margin at BOTH ends, which is what the fourth build wrote, makes the card 32px taller and centres that height on the row, so its divider and its button sit 16px off every neighbour's and the three actions stop standing on one line. Taken off the top alone the card is 32px taller, its price stands 32px above the two it beats, and its foot is level: the growing middle row swallows the whole difference. Measured at nine widths in both themes, prices 31px apart with dividers and feet equal. Below the tablet point nothing rises, because a single column has no row to stand out of; the edge does not go with it, because a stack still has a recommended card.

The petrol edge is the accent's third job and not a fourth one. D-Concept spends petrol inside a screen's content on the primary action, the current selection and the trust line. This is the selection: three ways to pay for one plan, one of them already chosen for the reader, with a badge that says why. It reads --line-selected, the role written for exactly that, so the file never asks which theme it is in. It is drawn as a repainted 1px border plus a 1px spread shadow rather than as a 2px border, and that is arithmetic: a 2px border pushes the card's content 1px inward, which would take the raised price off the axis its two neighbours share.

The four included things are plates, and the tick is still refused. The founder, later the same day: "мне вот єти слова сделать би красивее и как то их виделить". They were four runs of 14px body ink in a wrapping line, which is what a sentence looks like, and these are not a sentence: they are the four things the price buys, and each of them is a thing. A plate is what this page already says a thing is - the trust band above sets its four claims on the same recessed ground - so this borrows a shape the page owns rather than inventing one for four words. The ink goes up one step with it, to --type-sub and the primary tier, because under an eyebrow at body size and body ink they read as its caption. Still no tick: the eyebrow says "included", an ornament repeated on every line adds nothing the label has not, and the plate is what gives them presence. Not the accent either - this band already spends petrol twice, on the primary action and on the recommended card's edge.

The badge has been in three places and each move is the previous one's measurement. Stacked above the price it pushed the yearly figure 31px below the other two, so the numbers a person compares did not start on one line. Beside the price, in a second column, it fixed that and cost the card its axis: a centred card cannot carry a thing pinned to its right-hand corner. On the top EDGE it costs no flow height at all. The plan option wrote position: relative on this card at stage 07 with the words "for the badge, which is in the flow today and is given an anchor for the day it is not". This is that day, and the anchor was already there.

The wash is one band and nowhere else, and that is the whole discipline of it. --wash-pricing is the one non-colour role in tokens.css. It is there rather than in this component for one mechanical reason: system rule 6 says a role lives in both themes or it does not exist, and a paint that reverses between a paper theme and an ink theme is exactly what that rule was written for. The alternative was a [data-theme] selector inside a component file, and there are zero of those in the 68 component files: the point of two token levels is that a component never asks which theme it is in.

The contrast is solved in the composition and not in the asset, and that is what lets the picture be a picture. The band lays its own ground over it at BOTH ends, so the wash is a horizon running from the tops of the cards to their feet: nothing in this band reads over the picture at all, and the only thing standing on it is opaque paper. The stops are pixels and not percentages, which is arithmetic rather than preference: what the fade has to land in is a gap between two elements, and from the tablet point up every one of those gaps is at a constant offset while the band's own height runs from 1566px on a phone to 828 wide. So 48%, the fourth build's number, is 751px down a phone band, halfway inside the second card. Read off the page and identical at every width at 760 and above: the lead ends at 190, the raised card starts at 222 and the quiet ones at 254, their feet stand 266 above the bottom edge and the list's eyebrow 218 above it. Worst rendered pair over nine widths in both themes: 5.78:1, on a ground of 255,255,255 - the muted ink's own token contrast on bare paper.

And the picture stops at the tablet point, which is the only honest answer to what a phone does here. Below it the three cards are a STACK and those constants stop being constants: the plate row under them wraps to one, two or three rows as the width falls, so the gap the bottom fade must land in sits 202px above the band's edge at 640 and 298 at 360 while the cards' feet stand at 250 and 346. No single offset is inside both, and no percentage either - the two intervals do not overlap (77.9 to 81.0 at 360 against 82.2 to 85.6 at 640). The alternative was a fade that puts a picture behind the smallest ink in the band at one width and not another, which is the failure this arrangement exists to end. A horizon is what a ROW stands on; a stack has no horizon, and on a phone the picture was nine tenths covered by the cards. It also means a phone never downloads the asset: a background-image inside a query that does not match is never fetched.

A change to the block's height runs the sweep again, and that is not a politeness. The stops were read off the page on 2026-08-16 and invalidated the same day, when the four included things became plates and the block grew: the eyebrow landed back inside the fade at 2.75:1 in the dark theme. Found by re-running the sweep in the same step, not by eye.

Three pictures were made, and the first two died of the same mistake. The first pooled its haze in one corner and, cropped by cover, read as a smudge at the right-hand edge. The second was symmetrical and correct and had been lightened almost to nothing, because every pixel of it was being made to clear 4.5:1 against the smallest ink on the band. The founder, twice: "это ужасно", then "не оно очень скучное". Both are the same error - the ASSET was carrying the contrast, so the only asset that passed was one with nothing in it. A replacement picture runs the same sweep; what it may not do is climb into the top 40% of the band.

The path in the token is written from components/ and that is a browser fact, not a preference. A url() inside a custom property resolves against the stylesheet that uses the property, not the one that declares it: written as assets/... the token asked for design/system/components/assets/ and returned 404, measured on the page before it was corrected. Every consumer of a token is one folder deep in components/ or patterns/, so ../assets/ is the one path right from all of them. The asset itself sits at design/system/assets/, a shelf this change created: the system is liftable whole and now carries its own picture, 17KB light and 20KB dark.

The count stays declared, and it is not the hard-coded count the fluid grid exists to remove. repeat(3, ...) is right here because the block holds exactly three prices and D4 is why. Fluid would put four or five tracks across a wide window and leave two empty on the one block whose whole job is a choice between three named things. The row also takes the whole measure now, where it used to stop at --container-page: with the list lifted out, a card is a price, a sentence and a button, and at 780 across three that is 253px a card, at which both button labels wrapped inside the button. At the full wrap it is 373 and neither does. Between the two points they still wrap, and that is stated rather than hidden: counted as line boxes at every 10px from 760 to 1500 and re-counted on 2026-08-16, because the fourth build took the card's padding from 24 to 32 and left the old thresholds standing. Both labels take two lines from the tablet point up, the yearly one settles at a window of 1010 (a card of 285) and the monthly at 1080 (308), and above 1080 neither wraps. The clean number is a card of 308, which is a third width point, and rule 8 says a third is the founder's. Nothing renders wrong in the band between: the buttons stay level, no card grows past its neighbours, and this is the one button in the product allowed to wrap, declared with its own measurement.

The band left the shell rather than changing there. Trust and Pricing were one rule, two sections on the surface fill. Pricing is now a fill plus a picture, which is no longer the same object - and the shell is imported after every organism, so a band rule left there could not be corrected from here at any specificity short of an argument.

The grey changed structure twice and each decision is written where the rule demands. The wireframe is frozen; the founder's decisions of 2026-08-15 and 2026-08-16 are comments on the section in wireframes/index.html, and _wf.css draws the same three cards in the same order, the same single list under them, the same podium and the same badge on the edge. The wash is the colour layer's and the grey has none: greyscale is the contract, and a picture is styling.

And the grey gained one thing back on 2026-08-16. _wf.css had zeroed the 44px floor under the lifetime card's note, which is what holds that card's footer to the height of the two real buttons beside it, so the grey's third divider stood 31px below the other two at the wide widths where the colour's stood level. Found by measuring both corpora at nine widths in the same step, not by eye. The floor is back and the two agree.

Where it comes from

Drawn by design/system/components/landing-plan.css through ../system/index.css. It stands on the landing and its grey twin. Ground: docs/decisions.md, D4 and the entry of 2026-08-15. Registered in docs/inventory.md and in _nav.js, in the organism group. It hosts the plan option with its chip, amount and button, and the eyebrow, each at the size its own file gives it.