KKS-17 — Design Tokens

Every token _variables.scss sets under KKS-17, rendered so it can be held against the Figma Branding page (node 232-3383) and the file-level Text styles.

Colour blocks use the theme's own utility classes, so each one shows what the site actually serves. The value printed inside is what _variables.scss commits. Where the block and the label disagree, the token is not reaching the frontend — see the drift check at the bottom of this page.

Theme-Farben

The four brand colours. Block = served value, label = committed value.

$primary
#192E5F
Navy

$secondary
#54C9BE
Mint

$tertiary
#F55E21
Orange

$quaternary
#FEEFE9
Sand

Farbrampen (100 – 900)

These are not emitted as CSS custom properties, so the swatches below carry literal hexes copied from _variables.scss — they will not follow a token change. Re-check them by eye after any edit to the ramps.

Step	$primary	$secondary	$tertiary	$quaternary
100	#E8EAEF	#E9F0F3	#FEEFE9	#FEEFE9
300	#BAC0CF	#BCD3DB	#FCCFBC	#FEEFE9
500	#6E7C9B	#6EA0B1	#F9966E	#FEEFE9
700	#192E5F	#1F6C87	#F55E21	#FEEFE9
900	#192E5F	#54C9BE	#F55E21	#FEEFE9

Three things here are deliberate, not bugs:

$primary-500, $secondary-500 and $tertiary-500 are interpolated — Figma has no such step and nothing consumes them yet.
$secondary-900 is mint (#54C9BE), a different hue to the rest of its ramp — Kostas' decision, recorded in KKS-17.
$quaternary is a single-value alias: all five steps are the same sand. It exists so components can name it, not to provide a ramp.

Grautöne, Body

100
#f8f8f8

300
#dedede

500
#ababab

600
#6c6c6c

700
#494949

900
#212121

$body-bg #ffffff — the sampled Figma white; every Desktop page frame carries a plain white background.
$body-color #0C172F — note this is not $primary (#192E5F); body text is its own darker navy.

Typografie — Überschriften

Figtree, $headings-font-weight: 800, colour $primary. Headings render mixed case — the Figma text styles are written that way, so no text-transform is applied. Desktop px on the left, mobile px in brackets.

H1 — 62px [36.5px]

H2 — 49px [32px]

H3 — 39px [26px]

H4 — 31px [22px]

H5 — 25px [18px]

H6 — 20px [20px]

Resize below 768px to check the mobile scale. H6 is the one step that does not shrink — Figma's "H6 - Mobile" is also 20px.

Typografie — Fließtext

Lead — 22px / 130%. Figma style "Lead". Used for standfirst paragraphs under a heading.

Fließtext — 18px / 150%, the base size ($font-size-base: 1.125rem against a 16px root). This was 16px before KKS-17. Mobile drops to 17px. Everything you are reading in this paragraph is the base style, so line length and rhythm can be judged directly against the Figma body copy.

Small — $font-size-sm, retargeted from 12px to the Figma value under KKS-17.

Links inside body copy look like this.

Buttons

Figma buttons are pills ($btn-border-radius: $border-radius-pill) — they were square before KKS-17. Label 16px / 130%, weight 400, letter-spacing .07em, padding 8px / 30px.

Primary Secondary Tertiary

Outline primary Outline secondary

Small Large Disabled

The asymmetric padding in Figma (30px left, 10px right) exists because a circular arrow icon sits on the right; $btn-padding-x takes the left value and the icon side is handled by the component's own $btn-gap: 1.25rem.

Radien und Schatten

$border-radius, -sm and -lg are all 0 — the design uses square corners everywhere except buttons, which are full pills (50rem).

radius 0
panels, cards, images

radius pill
buttons only

The design uses no drop shadows. Six elements were sampled in Figma under KKS-17 and none carried one, so the shadow tokens are off rather than tuned. If a component appears to need a shadow, that is a design question, not a token gap.

Frame-Hintergrund: gradient cool (Verlauf 2)

Figma Color style Verlauf 2 — linear-gradient(90deg, #192E5F 0%, #1F6C87 49%, #54C9BE 100%). Written in terms of $primary / $secondary-700 / $secondary, so it follows the palette.

The solid CTA on this frame is the orange $tertiary — the one hue that stays legible against both the navy start and the mint end. Outline buttons are white and fill white on hover.

Primary CTA Default Outline

⚠️ The ramp ends on mint #54C9BE, only 2.0:1 against white. White body text is right at the navy end and weak at the mint end — keep running text on the left.

Frame-Hintergrund: gradient warm (Verlauf)

Figma Color style Verlauf — linear-gradient(90deg, #E23025 -1.01%, #EE5027 48.65%, #EE9427 100.34%). Figma's own percentages are kept verbatim rather than rounded. #E23025 is the stop that was mistaken for $tertiary before KKS-17 corrected it to #F55E21.

Here the solid CTA is navy $primary — the opposite temperature, so it contrasts across the whole red→amber ramp.

Primary CTA Default Outline

Button hovers are darken(base, 8%): navy → #101E3F, orange → #E3490A. Not Figma values — the design has no recorded button states yet (KKS-17 Task 2.3).

Buttons mit Pfeil-Badge (.btn-arrow)

The design's CTA carries a circular arrow badge. Geometry from Figma 246-3857 and 299-17752: pill radius 100px, padding 8/10/8/30, gap 20px, and a 21px circle — exactly the button's content height (37 − 8 − 8).

The badge inverts the button surface so the arrow stays legible on every variant: solid buttons get a white badge with a navy arrow, light and outline buttons get a navy badge with a white arrow.

Primary Secondary Tertiary

Default Light Dark

Outline primary Outline secondary

All eleven combinations are selectable in the RTE link dialog. btn-arrow composes with any variant, so it works for form submits too (Figma 311-22606) — on a <button>, since input[type=submit] cannot carry a pseudo-element.

⚠️ The older .btn-default-arrow / .btn-primary-arrow classes render a different, legacy full-height bar and are untouched, so existing content keeps its look.

Pfeil-Badge auf Verlauf: Amber-Akzent

On the two gradient panels the design switches the badge to the amber accent $amber #FFA927 — the one hue that reads against both ends of either ramp. Scoped to the frame, so a button keeps its normal badge everywhere else.

Default Outline Primary

Textlinks mit Pfeil (.link-arrow)

Figma 295-16106: a text link with a bare arrow after the label in $tertiary orange — no circle, no button chrome. The arrow nudges 3px right on hover.

Stellenanzeige aufrufen*

Arrow before the label

On dark and gradient frames the arrow switches to white automatically. Both variants are in the RTE link dialog as Textlink mit Pfeil.

Textlink auf dunklem Frame

Auf dunklem Grund wird der Pfeil weiß

Liste mit Pfeil (.list-arrow)

Figma 258-1309 („Frame 80“, the list in the open accordion panel). Measured: container Fill 1040px with a 5px vertical gap; the text node is 1013px, so the hanging indent is 27px (14px arrow + 13px gap).

ab Haltestelle „Hauptbahnhof“ mit dem Bus 245 Richtung „S+U Zoologischer Garten“ bis Haltestelle „Kleiner Tiergarten“, Fahrzeit ca. 9 min
alternativ: ab „Hauptbahnhof“ mit dem Bus TXL Richtung „Flughafen Tegel Airport“ bis U-Bahnhof Turmstraße, Fahrzeit ca. 12 min
Kurzer Eintrag zum Vergleich

The indent is in px, not em: the Figma values are absolute and the arrow is a fixed-size icon, so an em indent would drift with the item's font size. A wrapped item keeps its arrow beside the first line.

Selectable in the RTE as Liste mit Pfeil.

Liste mit Pfeil auf dunklem Frame

On dark and gradient frames the arrow turns white, matching .link-arrow so the two never disagree inside one frame.

Regulatorische, methodische und biometrische Beratung
Budgetberatung und Studienplanung
Projekt- und Datenmanagement

Icon-Architektur — ein Geometriespeicher

Every icon variant the theme ships, drawn through the same var(--sp-icon-…) custom properties the components use — so this page renders the real store, not a copy of it. 51 variants across 34 geometries.

Before KKS-17 the tree held 142 inline SVG data URIs which normalise, colour-blind, to 70 drawings; the rest were clones made only to change a fill. Geometry now lives once in bootstrap5/_icons.scss with its colours as positional placeholders, and each (geometry, colour) pair the tree uses becomes one custom property instead of being re-inlined at every call site.

A white-drawn variant sits on a navy tile so it is visible; that tile is the demo page's, not the icon's.

Alle ausgelieferten Icon-Varianten

accordion-up — 1 variant

$primary

arrow-left — 2 variants

$primary$white

arrow-long — 1 variant

$secondary

arrow-right — 2 variants

$primary$white

arrow-right-boxed — 2 variants

$body-color$white

arrow-right-heavy — 1 variant

$body-color

arrow-right-thin — 1 variant

$white

btn-arrow — 3 variants

$primary$secondary$white

btn-badge-arrow — 2 variants

$primary$white

btn-download — 1 variant

white

chevron-right-boxed — 1 variant

$primary

chevron-up-flat — 1 variant

black

eye — 2 variants

$magenta$white

fax — 2 variants

$primary$white

globe — 1 variant

$primary

job-search — 2 variants

$primary, whitewhite

link-extern — 2 variants

$primary$white

link-external-box — 1 variant

$secondary

list-arrow-kks — 2 variants

$tertiary$white

location — 2 variants

$primary$white

mail — 2 variants

$primary$white

mask — 1 variant

white

mask-left — 1 variant

$white

mask-mobile-bottom — 1 variant

white

mask-stripes — 2 variants

#0F9937$secondary

next — 1 variant

$secondary-700

plus — 1 variant

white

previous — 1 variant

$secondary-700

quote — 2 variants

$primary$white

search — 2 variants

$body-color$primary

tel — 2 variants

$primary$white

trash — 1 variant

white

whatsapp — 1 variant

$white

www — 1 variant

$white

Worauf beim Abgleich mit Figma zu achten ist

Checks worth making against Figma zZFGfGsFGt8F3gGSEdgvmb:

Two-colour glyphs keep both colours. job-search ships with two slots filled independently. Colour is a positional placeholder, not an omitted fill — 96 of these URIs set fill='none' on the root <svg>, and fill is inherited, so a child with no fill would inherit none and vanish.
The arrow family. btn-arrow, btn-badge-arrow, arrow-long, list-arrow-kks and the chevrons are separate drawings on purpose — slider and paginator arrows keep the old chevron, which is a different affordance.
Legacy .btn-<variant>-arrow now has an arrow. Its :after resolved to background-image: "data:…" — a bare quoted string, which is not a valid CSS image — so it never rendered. It does now.

Compiled weight: bootstrap5-theme.min.css 1,850,844 → 1,748,899 bytes (−99.6 KB), with all 523 previously rendered URIs verified byte-identical after decoding.

Breadcrumb (KKS-23)

Figma 258-4463 (container) and 258-4466 (items). The breadcrumb at the top of this page is the live one — this block only records what it should be, so the two can be held against each other.

Every property changed. The previous set — 10px, uppercase, .15em tracking, navy links, a mint current item and a literal backslash separator — came from the base distribution and matched nothing in this design.

Eigenschaft	Figma	vorher
Schriftgröße	`14px`	`10px`
Schreibweise	gemischt	`uppercase`
Laufweite	`normal`	`.15em`
Zeilenhöhe	`150%`	`1.3`
Vorfahren-Link	`#F55E21` Orange	`#192E5F` Navy
aktuelle Seite	`#0C172F`, 700	`#54C9BE` Mint, 400
Trenner	Linie 11 × 1.1px	Backslash `\`

Der Trenner ist eine Linie, kein Zeichen

Node 258-4465 is an 11 × 0 vector with a 1.1px border in Fließtext #0C172F — a rule, not a glyph. At 39 % canvas zoom it reads as an arrow, which is how it was first mis-sampled; the Properties panel is what settles it.

Bootstrap draws the separator through ::before content, so $breadcrumb-divider is now an empty string and the dash is a border-top on that same pseudo-element. An empty float collapses to zero width, hence the explicit width/height and the margin-top that centres it optically rather than on the baseline.

Two places had painted the old character with color: the $frame-backgrounds loop and the .inverse block. Both now set border-top-color — otherwise the dark-background variants keep their spacing and silently lose the separator. Check this against a dark frame, not only the white page.

Same node 258-4465 is the one _variables.scss:179 cites for the $body-color sample, so the divider colour and the body colour are one value by construction, not by coincidence.