Marketing

Marketing Nav

Quieter than an application’s chrome: a slim sticky bar in the chrome material, links centred, one action at the end. It is .b-marketing-nav rather than .b-topnav because a product page is not an app and should not pretend to be.

Chapter

One idea, centred, with room around it. An eyebrow names the subject, the title is capped at twenty characters of measure so it always breaks well, and the lede is one sentence at reading width. .b-chapter--tight halves the vertical room; .b-chapter--start aligns the whole chapter to the reading edge.

Hero

The first chapter, with the product beneath it. .b-hero opens the top spacing and enlarges the title; .b-hero__media holds the picture at the distance the headline needs to breathe. Show the product, not an abstraction of it.

Hero furniture

The three marks that sit around a headline on almost every product page: the news above it, the credibility under it, and the ground it all stands on. Each is small enough that every team rebuilds it slightly differently, which is exactly why they belong here.

Announcement

One line of news above the title — a release, a launch, a price change. It is a link, so it is an <a>. The arrow is a text mark rather than an icon and steps forward on hover, the way a link should suggest travel.

Rating

Borrowed credibility, stated plainly: five marks and who is vouching. A star that was not earned carries .is-empty rather than being left out, so the row is always five wide and reads as a score instead of a count. Put the real number in the aria-label — five shapes mean nothing to a screen reader.

Logo wall

The companies already here. Every mark sits at the same height whatever its proportions — --b-logo-h — which is the only thing that makes a row of logos look deliberate rather than pasted. Inline SVG on currentColor is the intended form: it inherits the wall's ink and therefore survives the dark theme. A raster logo is greyed instead, because a PNG cannot follow the text colour.

Tile field

The ground a hero stands on. A flat page makes a centred headline look like it is floating in milk; this is the quietest possible answer — three checkerboards at different scales, each barely there, masked so the pattern dissolves before it reaches the words. It is drawn entirely from gradients, so it costs no image and no element per square, and it re-tints with the theme. --b-tile is the cell size.

It is positioned absolute, so whatever holds it carries .b-has-tiles — positioned and clipping, so no page has to remember. Everything after it is lifted above it automatically.

Proof and pointers

Three shapes a product page reaches for once it has something to show: a row of names too long to stand still, a case study, and a card that sends somebody off to read.

Marquee

For a line of marks that will not fit standing still. The track holds the list twice and travels exactly half its width, which is what makes the loop seamless; with one copy it visibly snaps. It pauses under the pointer so a name can be read, and for anyone who asked for less motion it stops and becomes an ordinary scrolling row. --b-marquee-time is the pace.

The list goes in twice, each copy in its own .b-marquee__group, and the track travels half its width so group two lands where group one started. The group is not decoration: half the track is one group, so the loop only closes if a group is at least as wide as the rail. Five short names in a wide row leave the second copy ending early and a hole travelling along behind it. Each group is floored at the rail's own width and spaces its contents out to fill it, so the belt is solid at any width with any number of names; when the list is genuinely wider than the rail, max-content wins and nothing changes.

A group almost always carries a row class as well, usually .b-logo-wall, and those are defined later in this layer, so the three properties that make a marquee a marquee are pinned at a specificity a row cannot reach: it is not a row's business whether a belt wraps or how its copies fill the rail. The rhythm still is. Set --b-marquee-gap and the end padding follows it automatically, at exactly half, which is what keeps the space across the seam equal to every other space in the belt.

Quote card

The shape a case study takes. The figure leads because it is what gets remembered, the sentence earns it, and the name is what makes either believable. It sits on the accent, because this is the one card on a page meant to interrupt.

Resource card

A picture, what kind of thing it is, and enough of the first line to decide. The whole card is the link, and the plate stands in when there is no picture, so a row of three never has a hole in it.

Blog

What a composition engine is

How the pieces fit, and why it matters on a slow connection.

Docs

Getting started

Install, the tokens, and your first screen.

Case study

A card with no picture

The plate takes the accent, so the row keeps its rhythm.

Figure

A picture is furniture, so it has a shape: .b-figure__frame clips it to the large radius, lifts it on the elevation scale, and fills any gap with a surface rather than white. .b-figure--bleed lets it run to the edges of the page, which is how a chapter ends when the image is the argument. .b-figure--fade dissolves the bottom of the frame into the page instead of ending it, which is what a product shot under a hero wants: a window into the thing rather than a photograph with an edge. --b-fade-from is where the fade begins.

Feature Row

Picture beside prose, alternating down the page. .b-feature-row--flip swaps the sides so consecutive rows do not march; below md both stack with the picture first. Actions inside a row align with the prose, never centre.

Mail

An inbox that behaves like an application.

Threads, labels, and search that reads the whole message — one keystroke away.

Open an inbox ›

Bento

Tiles of unequal weight in one grid — the rest of a platform at a glance. .b-bento__tile--wide takes two columns so the grid has a rhythm instead of a checkerboard; on a phone every tile is full width.

Spec Strip

Four numbers, evenly spaced, with the claim underneath each. Use tabular numerals so the row stays even, and keep the labels honest — a figure with a footnote is worth more than a figure without one.

The louder half

Everything above is the quiet version of a product page, and the restraint that makes a toolbar good makes a front page forgettable. A landing page is not an application: the type has to be readable from across a room, the ground has to change between chapters so the page has floors, and the accent has to be used at full strength rather than apologetically. These are the pieces that do that.

Highlight marker

The one phrase in a headline that carries the sentence, on a block of accent. .b-mark sits behind the letters rather than around them: the bleed comes from a box-shadow spread instead of inline padding, which would break the line's rhythm, and box-decoration-break keeps it whole when the phrase wraps. Set --b-mark-ground for a different colour.

Tinted chapter

.b-chapter--tint puts a chapter on a wash of the accent. Alternating it with the plain ground is what gives a long page floors you can feel without a single rule or border, and because the wash is mixed from the accent it follows a brand colour. It is deliberately weaker than --b-color-accent-soft, which is a component's fill, not a room's paint.

The confident bar

.b-marketing-nav--lg is the same bar at the height, type size and spacing a front page needs, with the action on the right as a filled pill rather than a link. The base .b-marketing-nav is right above an application, where the chrome should get out of the way; on a front page it reads as a browser toolbar somebody forgot to style.

Showcase

A screenshot dropped on white reads as a document. Inside .b-showcase, a large rounded panel of colour, it reads as a product: the panel gives it an edge and a shadow to sit against, and the page gets one block of brand at the point a visitor is deciding whether to keep reading. Put the picture in .b-showcase__shot. Wide, the panel becomes a stage and a second child, usually a .b-stat-card, takes the column beside it, which is the whole reason the panel is bigger than the picture it holds.

Logos on cards

A bare row of wordmarks reads as text. .b-logo-wall--cards puts each one on its own white plate, where they read as the companies they stand for, which is the whole point of showing them. Same wall, one modifier, and it works inside .b-marquee.

Accordion without the box

.b-accordion--plain drops the card around a group of questions. The boxed version belongs in an application, where a group needs an edge to separate it from the rest of the screen; on a marketing page the questions are the only thing in their column, so the chrome is noise. Hairlines between rows, a circled mark on the right that becomes a minus when open.

Headline beside the substance

A page reads as a sequence of arguments rather than a stack of announcements when each chapter puts its headline on the left and the substance next to it. .b-feature-row--top aligns the two columns to the same line, which centring does not: centred is right when the row is a picture beside prose, and wrong when it is a headline beside a list of ten things, where the headline drifts to the middle of a tall column and stops looking like the title of what is next to it. .b-feature-row__title--lg gives that headline the chapter's weight.

Dark chapter

Product pages alternate light and dark full-bleed sections so the page has chapters you can feel while scrolling. .b-chapter--dark flips color-scheme rather than hardcoding colours, so every token inside resolves for the dark ground and any component dropped in keeps working. It is one of the three selectors the token block is declared on, alongside :root and [data-theme] — a chapter that inverts is a themed subtree, and flipping the scheme without re-declaring the tokens leaves them resolved against the page around it, which reads as a dark band that came out light.

.b-chapter__media is what a chapter shows under its words — a rail, a grid, a picture. It takes the same standoff as .b-chapter__actions, so a chapter with cards and a chapter with buttons breathe alike, and it sets the text back to start alignment because cards are not headlines.

Pill switcher

One product across several surfaces, switched from a row of pills under the bar — .b-pill-nav, with .is-active on the current one. Use it when the surfaces are peers; use tabs when one contains the others.

Card rail

A row you push sideways, snapping card to card — for a set of features that reads better as a sequence than a grid. Every figure in a rail is forced to one aspect so the captions line up; photographs arrive at whatever shape they were taken.

Shared mailboxes

sales@ and support@ belong to the team.

Files where the mail is

Storage sits beside the mailbox.

Paid in shillings

Mobile money or card, one balance.

Moving media

A hero can move. Put a <video> in the figure frame with autoplay muted loop playsinline — muted because a page that makes noise is a page people close, and playsinline so phones do not take it fullscreen. Keep it short, keep it small, and give it a poster so something is there before it loads.

Promo band

One offer, full width, in its own colour — the band near the end of a product page that carries the ask. It sets a dark scheme so the controls inside it come out right.

Footnotes

The small print a claim earns. Numbered, caption-sized and tertiary, sitting between the last chapter and the footer — with <sup> markers on the claims themselves. A figure with a footnote is worth more than a figure without one.

Site Footer

Small, dense, and unafraid of links: groups of destinations in columns, then the legal line that carries the footnotes the page made. Caption-sized throughout — a footer is for finding, not for reading.