Skip to content
TYPO3Soul Design System

Site

The front of a product site. Every page here argues: it is sds-bands, and the ground changes where the argument takes a step. A reader arrives with a question about the product and leaves with a decision.

The landing page#

The first page a project shows: the pitch, the parts of the system, and how to start. Every element on it is the real one. A change to a button or a code block arrives here without an edit to this page.

Landing

A feature in full#

The page a product site owes each claim. What the thing is, how it works, what it changes, what it costs, and what it does not do. The last one is the reason a reader trusts this page.

Feature

The tour#

A feature presentation that is not three cards in a row. Cards compare: they put four things beside each other for a reader to pick from. A reader reads a tour in order, because the second step means nothing until the first one has happened. So the steps alternate sides down the page, and the eye crosses the column at every one. Each carries the picture of the thing it describes, and a press opens it at full size.

Tour

One audience#

The same software, argued to one audience. A landing page that tries to convince three different people convinces none. So this page speaks to one of them and says at the top which one. The way across is there for whoever landed on the wrong one. This is the agency: not the buyer and not the user, but who carries the thing for years after both have moved on. What convinces them is what it costs them to keep.

Audience

Which way to run it#

A comparison whose gaps are the point. A matrix with everything present somewhere tells a reader nothing. Every mark carries the name of its column, so the table reads without sight.

Compare

What it costs#

The page a marketing site gets wrong most reliably, in the same two ways. The tiers are adjectives instead of what you get. And the question every reader has, what happens when I stop the payment, has no answer anywhere. Both answers stand on the page. Three tiers, and the middle one carries a mark: not the one to sell, but the one most readers land on.

Plans

One deployment#

A reference page earns nothing unless a reader can check it. So the two things that decide are near the top. Who this was, in figures a reader can compare themselves against. And what it cost, the part that went wrong included. A case study with no bad month reads as marketing. The headline is the outcome rather than the name, because somebody who scans a list of these looks for their own situation.

Case study

Who is behind it#

Who answers for it, why it exists, who pays for it, and what happens if it stops. No photographs: a face is a file to fetch, keep in step and licence, and none of that names a maintainer.

About

Get started#

The three questions a careful reader asks before they run somebody else's code. Which file is mine, is it the published one, and what happens when it does not answer. It needed no new component.

Get started