Style guide

Pipeline B2B

A B2B growth agency: white pages cut by deep green bands with a silk sheen, square corners on everything, Sentient for the display sizes and DM Sans for the rest. One green carries every band and every primary button.

Variables: --pp-*
Defined in: app/demo/pipeline-b2b/pipeline.css
Values: Read live from that file, so this page always matches it.

Colour
Typography
Corners
Spacing
Motion
Breakpoints
Components

Colour

The whole palette, grouped by the job each colour does. Components only paint with these.

Ink

--pp-ink

Headings and body copy, the dark foot of the About and Services heroes

--pp-ink-soft

Ledes and secondary copy

--pp-ink-strong

The price on the light plans

--pp-grey

Footer titles, the rights line, the currency on the light plans

Brand band

--pp-brand

Every dark band, the primary button

--pp-brand-hover

Its hover, and the band behind the Services quote

--pp-on-brand

Text on the band

--pp-on-brand-soft

Ledes and captions on the band

--pp-on-brand-faint

The lifted panel on the band, the field's focus ring

--pp-field

The newsletter field: the text colour at 20% over the band

Surfaces

--pp-surface

The page, the navbar, white cards, the secondary button

--pp-surface-hover

The secondary button's hover

--pp-surface-2

The pricing plans below 992px

Lines

--pp-line

Card borders and the pricing rules

--pp-edge

The hairline round a photograph

--pp-edge-on-brand

The same hairline on the band

Accents

--pp-plate

Behind a photograph while it loads

--pp-orange

The one accent: the third proof bar

--pp-bar-neutral

The first proof bar

Typography

The ramp, largest first. Each class sets its own face, size, leading, weight and tracking, and the display sizes step down at the breakpoints.

Display.pp-6xl

Fuel Your Pipeline with Precision

Display 5xl.pp-5xl

Why Pipeline B2B

Display 4xl.pp-4xl

Drive growth with our powerful B2B marketing solutions.

Article headline.pp-4xl .pp-blog-hero

Navigating the Future of B2B Marketing

Heading 3xl.pp-3xl

Your Vision, Our Mission

Heading 2xl.pp-2xl

Growth Plan

Heading xl.pp-xl

Personalized Strategy

Lead.pp-lg

Maximize your pipeline with smarter marketing

Body.pp-base

Get a marketing approach tailored to your specific industry and goals.

Small.pp-sm

Targeted lead generation to fill your pipeline

Eyebrow.pp-eyebrow

Accelerate. Optimize. Grow.

Corners

Every radius in the template. Nothing rounds on a value of its own.

--pp-radius

Buttons, the field, cards and photographs: square, as the original

--pp-radius-full

The testimonial portraits

Spacing

The page rhythm. These step down at the breakpoints, so the readings follow the window. Each bar is drawn at its real length.

--pp-gutter

Page edge

--pp-section

Top and bottom of a slab

--pp-measure

The article's reading column

--pp-container

The widest a column gets

Motion

How long things take and how they ease. Hover a row to run it: durations on the house ease, easings on one duration long enough to show the curve.

Durations

--pp-dur-fast

The nav underline

--pp-dur

Buttons, links, the field, the menu

--pp-dur-zoom

A card's photograph under the pointer

--pp-dur-zoom-slow

The featured article's photograph

Easings

--pp-ease

Every transition: easeOutQuint

Breakpoints

Where the layout changes. A media query cannot read a variable, so these are the one set of numbers written straight into the stylesheet and the components.

max-width: 991px

Tablet: the nav folds into the menu, the rhythm steps down, most grids go to two columns.

max-width: 767px

Phone: the gutter tightens, the rhythm steps down again, buttons go full width, grids to one column.

Components

The template's building blocks, live. Hover them: this is how they behave on the pages.

ButtonPipelineButton, primary. The one action a slab asks for; below 768px every button runs full width.

Schedule a call

Button on the bandThe secondary variant: white, for a button that stands on the brand band.

Get Full Access

Heading blockSectionHead. The eyebrow, a display heading and a lede that open almost every slab.

Empower your brand

Streamline Your Marketing, Maximize Your ROI

Your ROI focuses on optimizing your marketing strategies to enhance efficiency and ensure every investment drives significant returns

Checked listCheck. The square-ended tick on every feature list, in the ink it sits on.

Personalized Account-Based Marketing (ABM)
Optimized performance tracking
Scalable strategies for long-term growth

PhotographsPlate. A warm placeholder while the picture loads and a 10% hairline round it, black on white, white on the band.

Three colleagues reviewing printed pages together at a desk

Article cardPostCard. The whole card is the link; the picture eases in a little under the pointer.

Industry trends · 22/12/2024

Navigating the Future of B2B Marketing

Explore emerging trends shaping the future of B2B marketing.

Marketing strategies · 15/9/2024

Unlocking B2B Growth Strategies

Discover proven tactics to drive sustainable growth for your B2B business.

Client logosClientLogo. Flat wordmarks sized by height: the dark set on white, the light set on the band.

Newsletter fieldNewsletterForm. The template's one form, painted for the band it always sits on.