Repository navigation
design: align visual language with the Fürstenberg Foundation - #409
Merged
Merged
Conversation
The site now belongs to the Fürstenberg Foundation, so it should read as a sibling of fuerstenberg-foundation.de. Their colours are not adopted — ours stay — so the family resemblance is carried by type scale, shape and rhythm. Their typeface (Dosis) is deliberately NOT adopted yet: it ships no Cyrillic subset, which leaves the ru/uk locales mixing faces mid-sentence. Fonts are unchanged from main pending that decision. Typography - Foundation type scale: H1 66px / -0.03em / 1.15, H2 42px, H3 28px, body 18px, all fluid via clamp() so they hold up on small screens. - Rich-text h6 renders as their "eyebrow": 16px bold uppercase, 3px tracking, in brand green. Editors get it by marking a line Heading 6 — no schema change. Shape - Buttons become pills: 15/33 padding, 1px tracking, solid / ghost / inverted. - Coach and blog cards 20px, media panels 33px, nav items pill-shaped. - Shadows tinted with the brand hue instead of neutral grey. Rhythm - centeredContent "gray" is now a near-white tinted band (was bg-slate-400), matching how the Foundation separates sections; section padding opened up. Also fixes two things this surfaced: headerBlock and centeredContent rendered an unstyled <button> and dropped buttonUrl entirely, and the coach card's rotated "emergency" ribbon escaped the rounded corner. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
fuerstenberg-foundation.de carries its primary CTA as a pill in the nav bar
("Ich brauche Hilfe"); ours is "Ich brauche Redezeit!". The nav comes from
Contentful, so the item is matched by slug — stable across all four locales
(de uses ich-suche-redezeit, en/ru/uk use i-need-speaking-time) — rather than
by nav position or the translated label.
The pill is a white fill with a green border and green label so it stays
legible in both header states: over the green hero, where the header is
transparent, and over white once it turns opaque on scroll. Hover inverts it
to the solid brand pill used elsewhere.
lg:whitespace-nowrap keeps it on one line in the desktop bar — the longer uk
and ru labels otherwise wrap to two lines and overflow the header. The mobile
drawer is full-width, so it still wraps there.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Matches the Foundation, which sits its CTA at the right-hand end of the bar, immediately before the language switcher, so it reads as an action rather than another nav link. Reordered in the array rather than with a CSS-only `order` so keyboard focus order still follows what you see. On mobile the CTA now closes the drawer instead of opening it; it stays fully visible without scrolling. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The Foundation has no large bold sub-heading element — 28px was interpolated between their H2 and body, and it shouts. It shouts loudest on the homepage, where all eight Heading 3 blocks are in fact lede paragraphs (97-351 characters each), so half the page's rich text renders bold. That is a content-authoring issue and predates this branch — production measures the same 2004 of 4045 characters bold — but the larger size made it much more obvious. It cannot be fixed in CSS: /de/ich-suche-redezeit and /de/ich-biete-redezeit use Heading 3 for genuine short subheads, so de-bolding h3 outright would flatten those. 22px still separates a real subhead from 18px body without dominating the page. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
On /de/ich-suche-redezeit (and the en/ru/uk equivalents) the active state layered bg-vsp-500 text-white over the base bg-white text-vsp-700. Tailwind resolves conflicting utilities by stylesheet order, not attribute order, so the pill rendered with the base white fill and the active white label — white on white. Fill and label colours now live only in mutually exclusive idle/active class sets, so nothing competes. Active renders as the solid brand pill, matching its hover state. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
White on #9cc317 is 2.05:1 and green-700 on white is 3.0:1 — both fail WCAG AA for button text. The Foundation's own near-black on our green is 9.1:1, so the brand green stays and only the label changes. Added as an `ink` token. Applies to every button: CleverButton (primary, secondary, inverted), the header CTA pill in all states, the cookie banner's accept button, the no-JS filter submit, and the admin CSV-export buttons. CleverButton renders through CleverLink, whose default link styling (text-vsp-500 hover:text-vsp-700 underline) beat text-ink — Tailwind resolves conflicting utilities by stylesheet order, and ink is emitted before vsp-500. It only ever looked right with white because .text-white happens to come later. CleverLink now takes an `unstyled` opt-out, which CleverButton uses. This also fixes a pre-existing bug where hover recoloured button labels to green-700 on a green-600 fill. Plain links keep the default styling. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The site now belongs to the Fürstenberg Foundation, so it should read as a sibling of fuerstenberg-foundation.de. Their colours are not adopted — ours stay — so the family resemblance is carried by type scale, shape and rhythm.
Their typeface (Dosis) is deliberately NOT adopted yet: it ships no Cyrillic subset, which leaves the ru/uk locales mixing faces mid-sentence. Fonts are unchanged from main pending that decision.
Typography
Shape
Rhythm
Also fixes two things this surfaced: headerBlock and centeredContent rendered an unstyled and dropped buttonUrl entirely, and the coach card's rotated "emergency" ribbon escaped the rounded corner.