SaaS landing page prompt, in values

A SaaS landing page is read by somebody who already solves the problem, badly, in a spreadsheet or a group chat or a process they invented on a Tuesday. Nothing on the page counts until it names that thing. A features grid answers a question the visitor has not asked yet.

That makes software the only page type in this set where the first screen has to contain a picture of the product, cropped to one screen of the real interface. An illustration of a dashboard reads as a product that does not exist.

Short verdict: 1.2 from an 11px root, a 4px spacing grid, #2B54E4 on white at 6.02:1, and nine sections in which the replacement is named before any logo appears. Every design in the Thanor library ships at that level.

The replacement question#

A physical product photographs. Software does not, which leaves two jobs no other page type in this set has to do at once: make the thing visible, and name the thing it displaces.

The visible half is a frame, and the crop is the whole decision. One screen of the interface at 1440px wide, scaled to fit the container, showing a single view with real data in it. A full application window shrunk to 620px is illegible, and illegible evidence is worse than none, because the reader registers the attempt and the failure together.

The displacement half is a section, and it is the section almost every generated software page omits. Two columns, plain type, no icons:

• Left column, headed what you do now. Four lines, each one a step of the process the reader currently runs. Written in their nouns, not yours.
• Right column, headed what you do instead. Four lines, same order, same length. If a line on the right has no partner on the left, delete it.
• Under both, one sentence naming the mechanism. Not the benefit, the mechanism.

The rest of the page inherits its meaning from that block. A logo row above it is decoration; the same logo row below it is a list of people who agreed with the comparison. So it sits second, and proof sits third, which is the one place this order departs from a general landing page sequence.

One more constraint peculiar to software: the page has to state the pricing model in words before the pricing table arrives. Per seat, per usage, or flat. A reader who reaches a table without knowing which of the three they are looking at reads the numbers twice, and the second read is the one where they leave.

The ladder, the grid and five colours#

Ratio 1.2, the minor third, from an 11px root. A software page carries nine text roles, and a wider ratio cannot fit nine steps between a footnote and a headline without the middle ones colliding.

The price at step 7 sits one step under the headline. A price set smaller than the copy around it reads as a number somebody hoped you would skim.

Spacing runs 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Section padding 96px on desktop, 64px on tablet, 40px on a phone, identical everywhere. Container min(100% - 32px, 1160px), twelve columns, 24px gutter.

Ink on the surface measures 17.46:1, so body copy needs no second value, and the accent works as both a button fill and a link colour.

Three curves and the things that hold still#

An interface page moves differently from a marketing page, because half of what it shows is an interface and interfaces have their own tempo. Three curves, and each one owns a category rather than an element.

--ease-ui:     cubic-bezier(0.4, 0, 0.2, 1);    /* 160ms */
--ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);   /* 520ms */
--ease-panel:  cubic-bezier(0.65, 0, 0.35, 1);  /* 280ms */

--ease-ui at 160ms takes every control: button hover, input focus, the pricing toggle, a checkbox. It is the stock material curve, and on controls that is correct, because a control should feel like the operating system rather than like a brand.

--ease-reveal at 520ms takes section entrances, 16px up, triggered once at 20% of the viewport, staggered 70ms across at most four siblings. --ease-panel at 280ms takes anything that opens and closes in both directions: tabs, accordions, the security section's disclosure rows.

Four things never animate, and three of them are specific to software:

1. The product frame. It is the evidence. Evidence that fades up is evidence arriving late.
2. The pricing table. Same reason, more money attached.
3. Numbers in a stat row. A counting animation on a figure invites the reader to watch the count instead of reading the figure.
4. Body copy, which does not move on any page in this set.

Nine sections, in the order a buyer asks#

The order below is not the general case. It is the software case, and two rows in it move against the usual advice for a reason.

1. Hero. Headline at step 8, one line of subhead, primary and secondary button, product frame. 35 words of copy.
2. The replacement. Two columns, the mechanism sentence underneath.
3. Proof. Six logos, or one measured number with a source. Not both.
4. How it works. Three steps, 40 words each, no icons.
5. One feature in depth. A second product frame, cropped tighter than the first, and the only place a second frame appears.
6. Everything else. A two column list of twelve short lines. Not twelve cards, which is a grid pretending to be an argument.
7. Pricing. Two or three plans, middle one marked, monthly shown by default, the model named in the heading.
8. Objections. Security, data handling, migration, cancellation. Disclosure rows on --ease-panel.
9. The ask. One button, one line, no form.

Section 6 is where generated pages lose the most. Twelve features rendered as twelve cards with twelve icons occupies 2,400px of height and says nothing that a two column list of twelve lines does not say in 380px. The grid exists because a grid is easy to generate, not because a reader wanted one.

Section 8 earns the largest word budget on the page, around 240 words, because it is the only section a serious evaluator reads in full. The hero specification covers section 1 at the same resolution.

The verdict on a software brief#

Name the replacement, show one legible screen, state the pricing model in words before the table, and keep twelve features to twelve lines. Those four decisions separate a software page from a page about anything else, and none of them is a matter of taste. Every design in Thanor arrives with them already decided.

The brief to paste#

Build a SaaS landing page.

TYPE: ratio 1.2 from an 11px root: 11, 13, 16, 19, 23, 27, 33, 39, 47.
Body 16/26. Section headings 33. Price 39. Hero 47/52, weight 600.

SPACE: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Section padding 96 / 64 /
40, identical everywhere. Container min(100% - 32px, 1160px). 12 columns,
24px gutter, 24px card padding.

COLOUR: #FFFFFF page, #F6F7F9 surface, #101218 ink, #5C6270 muted,
#2B54E4 accent with white text, used once per screen.

MOTION: cubic-bezier(0.4, 0, 0.2, 1) 160ms on every control.
cubic-bezier(0.16, 1, 0.3, 1) 520ms, 16px up, once at 20% of viewport,
70ms stagger, four siblings maximum. cubic-bezier(0.65, 0, 0.35, 1)
280ms on tabs and accordions. The product frame, the pricing table, stat
numbers and body copy never animate.

SECTIONS: hero with one cropped interface view / replacement block, two
columns, what you do now and what you do instead, four lines each, plus a
mechanism sentence / proof, six logos OR one sourced number / three steps
/ one feature in depth, second tighter frame / everything else as twelve
list lines, no cards / pricing, three plans, middle marked, monthly
default, model named / objections as disclosure rows on security, data,
migration, cancellation / one button ask, no form.

A brief with no ratio and no millisecond figure returns the framework default however long it runs, which is why generated pages resemble each other. Browse the Thanor library and read one design end to end.