Ramtt · Marketing showcase

Every marketing component, on one page.

Live previews of all 52 primitives in @ramtt/ui marketing — grouped by purpose. This is the visual QA surface; ramtt.com is where they ship.

01

Typography

Eyebrow, DisplayHeading, SectionHeading, SubHeading, LeadParagraph, BodyProse, PullQuote.

Eyebrow — accent / neutral / muted
Accent eyebrow (default)Neutral eyebrowRaspberry eyebrowAubergine eyebrow
DisplayHeading — hero / h1

The quiet ambition.

The quiet ambition.

SectionHeading — h2 / h3

A section in h2.

A section in h3.

SectionHeading + SubHeading

A section heading, set in Satoshi.

A subheading that sits beneath.

LeadParagraph + BodyProse

Lead paragraphs open the room. They are 19px, book weight, and set the cadence for what follows.

Body prose is the working text of the site. 17px Satoshi, neutral color, 1.6 line-height. Uses oldstyle numerals where supported. Never serif — serif is for headings and pull-quotes only.

PullQuote — md / lg
The plan is not the product. The explanation is.
Malte Therkildsen
Every number on the screen should know why it exists.

02

Layout

MarketingSection, MarketingContainer, TintedSection, NumberedSectionHead.

MarketingContainer widths
width="content"
width="prose"
TintedSection — bgColor + padding

A tinted room.

TintedSection paints a full-bleed band behind its children. Use it to separate long pages into scenes.

NumberedSectionHead

07

A section of its own.

The number on the left grounds the scroll — used on ramtt.com landing and blog index.

03

Navigation

EditorialNav, AnnouncementBar.

04

Heroes

HeroBanner (product), EditorialHero (article room), EditorialPageHero (landing stack).

HeroBanner — left align, light

Train like you mean it. Read like you care.

An adaptive plan, fuel targets that move with the weather, and a letters page that tells you why.

EditorialPageHero
Letters · 2026 archive

Forty-eight essays.One running practice.Written by hand.Written by hand.

The Letters are RAMTT's running journal — slow, observed, and free to read.

Essays
48
Avg read
12 min
Ads
0
EditorialHero (article top)
2026-04-04

The quietest PR in Danish running this spring

Malte TherkildsenFounder, RAMTT
Editorial deskLetters
AthletesLetters

05

Buttons

MarketingButton — solid / outline / ghost, md + lg, light + dark surface.

Variants — light surface
Dark surface

06

Features

FeatureGrid, FeatureShowcase, FeaturePromo, MetricBanner, LogoCloud.

FeatureGrid (3 cols, bordered)

Training that adapts

The plan recalculates after every session — load, fatigue, sleep, weather.

Fuel, not food rules

CHO and hydration targets per session. Heat-adjusted. No calorie drama.

Signals, not algorithms

Plain-English explanations for every number — so you can trust the call.

FeatureShowcase (media right)
Adaptive plan

The plan rewrites itself before Monday.

Weekly batch recomputes load, readiness, and upcoming sessions from every stream you connect.

  • Auto-recomputeEvery Sunday 03:00 UTC
  • Weather-awareHeat + CHO adjusted
  • Signals layerPlain-English explainers
FeaturePromo

Every number has a sentence.

Fuel targets adapt to heat.

Coach alerts, not noise.

MetricBanner
147Athletes coached
8m+Sessions logged
92%PB rate in first season
LogoCloud

Trusted by teams at

Aarhus AthleticsFyrtårnNordic RunTeam ØBergen Elite

07

Social proof

TestimonialCard, TestimonialCarousel.

TestimonialCard
Every single number on the screen means something. That is the part I had never seen before.
Lukas V.10k runner · Aarhus
TestimonialCarousel
Every single number on the screen means something. That is the part I had never seen before.
Lukas V.10k runner · Aarhus
The plan corrects itself on Monday before I even open the app.
Mette J.Marathon · 2:58 · Copenhagen
It reads like a coach wrote it, not a dashboard.
Tom R.Ultra · UTMB finisher

08

Pricing

PricingCard, PricingTable, ComparisonTable.

PricingCard (single, highlighted)
Plan
€19/ mo

The full adaptive plan, signals, and fuel targets.

  • Adaptive plan (auto-recomputed)
  • Fuel + hydration per session
  • Signals explainers
  • Coach alerts
PricingTable (3 tiers)
Athlete
€0/ mo

Log, read, learn. No card required.

  • Session log
  • Weekly summary
  • Letters archive
Plan
€19/ mo

The full adaptive plan, signals, and fuel targets.

  • Adaptive plan (auto-recomputed)
  • Fuel + hydration per session
  • Signals explainers
  • Coach alerts
Team
€49/ mo / athlete

For coaches running a squad.

  • Everything in Plan
  • Coach dashboard
  • Team reports
ComparisonTable
RAMTTStrava PremiumTrainingPeaks
Adaptive plan
Fuel targets per session
Plain-English signals
No ads / no resale

09

Editorial cards

EditorialCard, EditorialGrid, EditorialCarousel, EditorialSection, EditorialTag, DateStamp, AuthorRow.

10

Article surfaces

ArticleLayout, ArticleByline, ArticleMeta, ArticleScrollSpy, Callout, CodeBlock, EmbedWrapper, PullQuote, MethodologyAside, Footnote, ShareRow, PostNavigation, EditorialBody.

MT
Malte TherkildsenFounder · Letters
April 202612 min readSignals

This is the inside of an article. The layout, meta, byline, and body prose are all primitives in the marketing barrel — nothing inline.

Paragraphs follow a simple rule: 17px Satoshi, 1.6 line-height, neutral color. Footnote references use superscript digits, like this one1 — anchored to the list at the end.

Tip
Tip: Callouts come in note, tip, warning, and important. Label is optional.
Heads up
Warnings get a warm tint and an explicit label override here.
The plan is not the product. The explanation is.
Letters, April 2026
fuel.ts
export function choTarget(session: Session, weather: Weather) {  const base = session.durationMin * 0.9;  return Math.round(base * heatChoMultiplier(weather.tempC));}
Figure 1 — heat multiplier curve
DelXLinkedIn
ArticleScrollSpy (standalone)

11

Blog chrome

BlogHeader, BlogSearchInput, TagFilterBar, BlogPagination, EditorialNewsletter.

BlogHeader (search + filter)

Letters

RAMTT's running journal — slow, observed, free.

BlogSearchInput (standalone)
TagFilterBar (standalone)
BlogPagination
EditorialNewsletter

Subscribe for an instantly better inbox

One email per week. No resale. Unsubscribe in one click.

12

Motion

FadeInOnScroll, ReadingProgress (active at the top of this page).

FadeInOnScroll — scroll to trigger

First block fades in.

Each child enters with a small opacity + translate transition when it crosses the viewport threshold.

Second block fades in.

Uses IntersectionObserver — no scroll handlers.

Third block fades in.

Combine with ReadingProgress at the top of long articles.