23 components

The smallest rung of the system — buttons, eyebrows, badges, dividers, form fields and progress indicators. Each is defined once in css/components.css and declared in components.meta.ts; this page, the list_components MCP tool and the skill catalog all read that single registry.

Buttons

Primary button

The main call-to-action. Terracotta fill on any surface. .btn-primary

<a href="#" class="btn-primary">Erstgespräch buchen →</a>

Primary button — Small

<a href="#" class="btn-primary btn--sm">Mehr erfahren</a>

Primary button — Large

<a href="#" class="btn-primary btn--lg">Erstgespräch buchen →</a>

Primary button — Pill

Add .btn--pill for a fully-rounded shape — softer CTAs.

<a href="#" class="btn-primary btn--pill">Erstgespräch buchen →</a>

Primary button — Block

Add .btn--block for a full-width button — quiz CTAs, constrained columns, forms. Composes with --pill / --lg.

<a href="#" class="btn-primary btn--block btn--lg">Mein Level herausfinden →</a>

Secondary button (on dark)

Outline button for dark surfaces — pairs with the primary inside heroes and dark cards. .btn-secondary

<div class="dark-strip"><a href="#" class="btn-primary">Erstgespräch buchen →</a>
<a href="#" class="btn-secondary">Mehr erfahren</a></div>

Outline button (on light)

Terracotta outline for light surfaces — the secondary action on cream/white. .btn-outline

<a href="#" class="btn-outline">Angebot ansehen</a>

Back / text button

Quiet text-only button for back/cancel affordances. .btn-back

<a href="#" class="btn-back">← Zurück</a>

Newsletter button

Compact CTA sized for newsletter and email contexts. .btn-email

<a href="#" class="btn-email">Weiterlesen →</a>

Eyebrows

Eyebrow

Small uppercase label above a heading. Terracotta, letter-spaced. .eyebrow

<div class="eyebrow">Prozess-Review</div>

Eyebrow — Lined (centered)

Add .eyebrow--lined for a centered label flanked by hairlines.

<div class="eyebrow eyebrow--lined">In 3 Schritten</div>

Badges & Tags

Badge

Emphasis label, e.g. FLAGSHIP. Soft terracotta fill. .badge

<span class="badge">FLAGSHIP</span>

Status tags

Status chips with the three brand semantic colors. .tag .tag-geht .tag-kommt .tag-tun

<span class="tag tag-geht">geht</span>
<span class="tag tag-kommt">kommt</span>
<span class="tag tag-tun">tun</span>

Pill

Rounded chip with border. Static by default — a bare .pill is a read-only label and intentionally has no hover. Add .pill--interactive only when it is clickable (filter / selectable / removable chip). .pill .pill--interactive

<span class="pill">Make.com</span>
<span class="pill">HubSpot</span>

Pill — Interactive (clickable chip)

Add .pill--interactive for a clickable filter/selectable chip — gains hover + .is-selected. Use a <button>/<a> for real interactivity.

<button class="pill pill--interactive">Make.com</button>
<button class="pill pill--interactive is-selected">HubSpot</button>

Dividers

Accent bar

Solid terracotta bar — section accent. .divider-accent-bar

<div class="divider-accent-bar"></div>

Header rule

Hairline rule under a document header. .divider-header-rule

<div class="divider-header-rule"></div>

Subject line border

Left terracotta border for subject / emphasis lines. .divider-subject

<div class="divider-subject">Betreff: Prozess-Review Angebot</div>

Table header underline

Terracotta underline for a table header row. .divider-table-header

<div class="divider-table-header">Leistung</div>

Section divider

Light hairline between sections. .divider-section .divider-newsletter

<div class="divider-section"></div>

Lists

List

The canonical content list. Compose ONE marker variant — .list--bulleted (terracotta dot, default), .list--numbered (lightweight typographic counter, distinct from the heavier .steps), .list--check (uniform ✓ for included rows; li.is-excluded for a struck-through "nicht enthalten" row), .list--icon (per-item inline SVG, stroke 1.5) — with optional tones .list--ok (green dot) / .list--muted (grey dot), .list--plain (markerless link/reference rows), .list--divided (hairline row separators), and .list--dark on a dark surface. .list .list--bulleted .list--numbered .list--check .list--icon .list--ok .list--muted .list--plain .list--divided .list--dark .list-icon .is-excluded

<ul class="list list--bulleted">
  <li>Prozess-Review über fünf Dimensionen</li>
  <li>Priorisierte Hebel-Map statt Bauchgefühl</li>
  <li>Klare nächste Schritte mit Fixpreis</li>
</ul>

List — Numbered

Lightweight typographic 1./2./3. — for ordered points that don't warrant the full .steps timeline.

<ol class="list list--numbered">
  <li>Bestandsaufnahme der Abläufe</li>
  <li>Hebel identifizieren und priorisieren</li>
  <li>Den ersten Hebel umsetzen</li>
</ol>

List — Check / included

Uniform terracotta ✓ for included rows; add .is-excluded to a row for a muted, struck-through "nicht enthalten". Generalises the pricing-card feature list.

<ul class="list list--check" aria-label="Leistungen">
  <li>Tool-Setup &amp; Einrichtung</li>
  <li>Einschulung Ihres Teams</li>
  <li class="is-excluded">Laufende Betreuung</li>
</ul>

List — Custom icon

Each row carries its own inline SVG in a .list-icon span (24×24 viewBox, stroke 1.5, currentColor → terracotta) — for mixed-icon lists.

<ul class="list list--icon">
  <li><span class="list-icon"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg></span>Direkt aus der Praxis, nicht aus der Folie</li>
  <li><span class="list-icon"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg></span>Hands-on umgesetzt, nicht delegiert</li>
</ul>

List — Tones (ok / muted)

.list--ok turns the dot green (Do's), .list--muted greys it (neutral / patterns). The default dot is terracotta (e.g. Don'ts).

<ul class="list list--bulleted list--ok">
  <li>Konkret, mit Zahlen und Beispiel</li>
  <li>Aktiv formuliert</li>
</ul>

List — Divided

Add .list--divided for hairline separators between rows — reference rows, link lists. Pairs with .list--plain for markerless link rows.

<ul class="list list--plain list--divided">
  <li><a href="#">Brand-Spec lesen</a></li>
  <li><a href="#">Tokens &amp; Komponenten</a></li>
  <li><a href="#">Vorlagen-Katalog</a></li>
</ul>

List — On dark

Add .list--dark on a dark section — light text, on-dark divider colour.

<div style="background:var(--bg-dark);padding:28px;border-radius:var(--radius-card)">
  <ul class="list list--bulleted list--dark">
    <li>Funktioniert auf dunklem Grund</li>
    <li>Gleiche Marker, helle Schrift</li>
  </ul>
</div>

Forms

Text input

Branded text input with terracotta focus ring. .form-input

<input class="form-input" type="email" placeholder="ihre@email.de">

Text input — Textarea

<textarea class="form-textarea" placeholder="Worum geht es?"></textarea>

Checkbox

Checkbox with label, terracotta accent. .form-checkbox

<label class="form-checkbox">
  <input type="checkbox"> Ich stimme der Datenschutzerklärung zu.
</label>

Option button

Full-width single-choice option (quiz / survey). Body font + roomy line-height for legibility of longer, often multi-line answers; .is-selected for the chosen state. .option-btn

<button class="option-btn">Wir arbeiten überwiegend analog / mit Papier</button>
<button class="option-btn is-selected">Erste Tools im Einsatz, aber unverbunden</button>

Range slider

Range input with terracotta track. .form-range

<input class="form-range" type="range" min="0" max="100" value="60">

Form message

Inline success/error feedback after submit. .form-message .form-message--success .form-message--error

<div class="form-message form-message--success">Danke! Wir melden uns innerhalb von 24 h.</div>

Form message — Error

<div class="form-message form-message--error">Bitte eine gültige E-Mail-Adresse eingeben.</div>

Progress

Progress bar

Thin animated progress indicator. .progress-bar .progress-fill

<div class="progress-bar"><div class="progress-fill" style="width: 60%;"></div></div>

Score bar

Compact inline bar for ranked rows / scores. .score-bar

<div class="score-bar"><span style="width: 78%;"></span></div>

Gauge

Segmented gauge — filled segments show level. .gauge-bar

<div class="gauge-bar">
  <span class="is-active"></span><span class="is-active"></span><span class="is-active"></span><span></span><span></span>
</div>