Tokens / Colors

Color Palette

Alle Farb-Tokens aus theme/variables.yml. Werden via scripts/sync_tokens.py als Bricks Global Variables registriert.

--brand-rhubarb#77202f
--brand-crown-blue#464b64
--brand-black-iris#2b3042
--primary#2b3042
--primary-hover#464b64
--primary-ultra-light#f1f2f5
--primary-light#d8dae2
--primary-semi-light#858ba0
--primary-semi-dark#464b64
--primary-dark#252a3a
--primary-ultra-dark#171a24
--action#77202f
--action-hover#641b28
--secondary#464b64
--secondary-light#d8dae2
--base#2b3042
--base-ultra-light#fbf8f1
--base-light#d8dae2
--cream#fbf8f1
--cream-dark#f2eadc
--white#ffffff
--black#000000
Tokens / Typography

Type Scale

Fluide Skala aus theme/variables.yml › typography. Fonts: heading: Jost, editorial: Jost, body: Jost.

Symbole der Liebe

editorial-headlineclamp(40px, 5vw, 80px)

Symbole der Liebe

editorial-statementclamp(32px, 4.5vw, 72px)

Symbole der Liebe

editorial-h2clamp(29px, 3vw, 45px)

Symbole der Liebe

editorial-taglineclamp(10px, 0.9vw, 13px)

Symbole der Liebe

editorial-bodyclamp(15px, 1.1vw, 18px)
Tokens / Spacing

Spacing

Vertikales Maß (Höhe des Bandes) zeigt den Wert. Editorial-Pads sind clamp(), Wert beim Viewport-Mid.

--section-pad-editorialclamp(80px, 10vw, 160px)
--section-pad-compactclamp(48px, 6vw, 80px)
--gutter24px
Tokens / Shadows

Shadows

Drei Elevation-Stufen für Cards und Modals.

--shadow-sm0 2px 8px rgba(43, 48, 66, 0.06)
--shadow-md0 4px 20px rgba(43, 48, 66, 0.1)
--shadow-lg0 8px 40px rgba(43, 48, 66, 0.14)
Primitives / Buttons

Buttons

Button-System: .btn für Struktur, .btn--solid/.btn--outline für Darstellung, .btn--primary/.btn--action/.btn--inverse für Farbrolle. Legacy-Aliases bleiben temporär zur Migration.

btn btn--solid btn--actionSolid Action
btn btn--solid btn--primarySolid Primary
btn btn--outline btn--primaryOutline Primary
btn btn--outline btn--inverseOutline Inverse
btn btn-actionLegacy: btn-action
btn btn-outlineLegacy: btn-outline
btn btn-outline-darkLegacy: btn-outline-dark
Primitives / Headings

Headings

Alle Heading-Tags mit Default-Styling. Klasse .heading setzt font-family + transform + tracking.

h1

Symbole der Liebe

h2

Symbole der Liebe

h3

Symbole der Liebe

h4

Symbole der Liebe

h5
Symbole der Liebe
h6
Symbole der Liebe
Primitives / Layout

Layout

Container und Section-Pads — sichtbar gemacht durch Hintergrundfarben.

.container — max-width: var(--content-width)

Inhalt-Bereich (1400px max)

section padding-y — clamp basiert

compact pad

editorial pad

Composition

Symbole der Liebe

Geschaffen, um Sie ein Leben lang zu begleiten

Eine Mini-Komposition aus echten Primitives — eyebrow, heading, subline, body-text und zwei Buttons. Identisch im Browser-Preview und im Bricks-Render — sonst ist die Pipeline kaputt.