Yellow
Primary accent. Buttons, highlights.
Client-First style guide for the Webflow rebuild.
Every Boxenstopp token, typography class, and spacing value, structured the Finsweet Client-First way and ready to copy into Webflow Variables and classes. Click any value to copy it.
How to use this in Webflow
- Create the colors and sizes below as Webflow Variables (Colors and Sizes collections).
- Keep semantic HTML tags. Apply Client-First utility classes only for variations:
heading-style-h1…h6,text-size-*,text-weight-*,text-style-*. - Build layout with
page-wrapper→main-wrapper→padding-global→container-*→padding-section-*. - Use the spacing scale via
padding-[direction]+padding-[size](andmargin-*/spacer-*). - Keep Boxenstopp yellow as the primary accent. Do not switch primary CTAs to Shiftmove blue.
01 — Variables
Colors
Brand and neutral palette. Each chip copies the hex or the suggested Webflow variable name.
Soft Yellow
CTA surfaces, highlight bands, soft pills.
Ink
Default headings and dark UI text.
Ink Strong
Large display headings (H1/H2).
Body
Body copy and leads.
Muted
Secondary text, captions, notes.
Teal
Kickers, eyebrows, editorial links.
Link Blue
Inline links and focus outline.
Surface
Cards and soft panels.
Search
Input backgrounds.
Border
Dividers and card borders.
Footer
Footer background.
Black
Max-contrast surfaces (dark CTA bands).
White
Base background.
02 — Variables
Typography
System Arial stack (no webfont). Arial ships Regular (400) and Bold (700); the design declares 900 on display headings, which renders as Arial Bold. Swap to a heavier webfont in Webflow only if a stronger display weight is wanted.
Font family
Headings — heading-style-h1 … h6
Fuhrparkwissen, H1
Fuhrparkwissen, H2
Fuhrparkwissen, H3
Fuhrparkwissen, H4
Fuhrparkwissen, H5
Fuhrparkwissen, H6
Body sizes — text-size-*
Fuhrparkwissen, klar erklärt für die Praxis.
Fuhrparkwissen, klar erklärt für die Praxis.
Fuhrparkwissen, klar erklärt für die Praxis.
Fuhrparkwissen, klar erklärt für die Praxis.
Fuhrparkwissen, klar erklärt für die Praxis.
Weights — text-weight-*
AaLight300Not in Arial; renders 400.
AaNormal400
AaMedium500Not in Arial; renders 400.
AaSemibold600Not in Arial; renders 700.
AaBold700
AaX-Bold900Display headings; renders Arial Bold.
Text styles — text-style-*
Secondary color (#4f565a).
Underlined, link-blue / teal.
Uppercase + letter-spacing; used for kickers.
Emphasis.
Pull quotes and blockquotes.
Old price / removed.
Truncate to 2 lines.
Truncate to 3 lines.
03 — Variables
Spacing
Client-First scale, 1rem = 16px. Apply with padding-[direction] + padding-[size], margin-*, or spacer-*.
0
0px
Tiny
2px
XX-Small
4px
X-Small
8px
Small
16px
Medium
32px
Large
48px
X-Large
64px
XX-Large
80px
Huge
96px
X-Huge
128px
XX-Huge
192px
Optional custom steps used in this design: Custom 1 1.5rem (24px), Custom 2 2.5rem (40px), Custom 3 3.5rem (56px).
04 — Variables
Radius, borders & effects
Corner radii, border weights, shadows, focus, and motion used across cards, buttons, and panels.
Button radius
Yellow and dark buttons, search submit.
Card radius
Cards, panels, inputs, tables. --radius-card.
Pill radius
Topic pills, status pills, chips.
Border (hairline)
Cards, dividers, table rows.
Border (button)
Buttons. --button-border.
Shadow soft
Resting cards and sections.
Shadow raised
Tables and elevated panels.
Hover lift
Buttons and interactive cards.
Focus outline
Global keyboard focus.
Transition
Background, color, transform, shadow.
05 — Components
Buttons & pills
Primary actions stay yellow. Dark buttons are for strong conversion moments. Pills carry topics, filters, and metadata.
Primary (yellow)bg #ffdc00, text #111
border 2px #111, radius 4px, 16px/900, min-h 44px, padding 0 24px.
Darkbg #000, text #fff
border 2px #111, radius 4px, 16px/900, min-h 46px, padding 0 22px. Hover inverts.
Pillbg #fff, border 1px #c9cbcd
radius 999px, 13px/900, padding 0 14px. Soft variant: bg #fff9a8.
06 — Structure
Page structure & containers
Client-First layout wrappers, mapped to Boxenstopp widths. Build pages with these instead of one-off section styling.
—
Outermost wrapper, holds the whole page.
—
Wraps page content between header and footer.
clamp(22px, 5vw, 96px)
Left/right page gutter. --site-gutter.
1680px
Full site max width. --site-max.
1180px
Standard content/section width.
760px
Article reading column.
6rem (96px)
Vertical rhythm between major sections.
4rem (64px)
Medium section spacing.
3rem (48px)
Compact section spacing.
07 — Copy
All tokens (CSS variables)
Paste into a global stylesheet, or recreate each entry as a Webflow Variable. This is the full token set in one block.
:root {
/* Colors */
--yellow: #ffdc00;
--soft-yellow: #fff9a8;
--ink: #141719;
--ink-strong: #202625;
--text-body: #3f4649;
--text-muted: #4f565a;
--teal: #006571;
--link-blue: #00a0df;
--surface: #f8fafb;
--search: #ebedef;
--border: #dfe5e8;
--footer: #000b20;
--black: #050505;
--white: #ffffff;
/* Spacing (Client-First, 1rem = 16px) */
--space-tiny: 0.125rem; /* 2px */
--space-xxsmall: 0.25rem; /* 4px */
--space-xsmall: 0.5rem; /* 8px */
--space-small: 1rem; /* 16px */
--space-medium: 2rem; /* 32px */
--space-large: 3rem; /* 48px */
--space-xlarge: 4rem; /* 64px */
--space-xxlarge: 5rem; /* 80px */
--space-huge: 6rem; /* 96px */
--space-xhuge: 8rem; /* 128px */
--space-xxhuge: 12rem; /* 192px */
/* Radius & borders */
--radius-button: 4px;
--radius-card: 8px;
--radius-pill: 999px;
--button-border: 2px;
/* Structure */
--site-gutter: clamp(22px, 5vw, 96px);
--container-large: 1680px;
--container-content: 1180px;
--container-readable: 760px;
/* Type */
--font-family: Arial, Helvetica, sans-serif;
--h1: 3rem; /* 48px / 900 */
--h2: 1.875rem; /* 30px / 900 */
--h3: 1.5rem; /* 24px / 900 */
--h4: 1.25rem; /* 20px / 800 */
--h5: 1.125rem; /* 18px / 800 */
--h6: 1rem; /* 16px / 700 */
--text-large: 1.25rem; /* 20px */
--text-regular: 1.0625rem; /* 17px */
--text-small: 0.875rem; /* 14px */
--text-tiny: 0.8125rem; /* 13px */
/* Effects */
--shadow-soft: 0 14px 34px rgba(15, 23, 42, 0.05);
--shadow-raised: 0 18px 42px rgba(15, 23, 42, 0.06);
--focus: #00a0df;
}08 — Components
Homepage baseline
The current homepage style is the reference for static pages: centered, useful, yellow-led, supported by clear entry cards instead of decorative hero treatment.
Willkommen beim Vimcar Boxenstopp.
Die Wissensplattform für Fahrzeug- und FuhrparkverwalterInnen.
Vorlagen
Formulare und Protokolle für die Fuhrparkverwaltung.
Blog
Aufgaben, Pflichten und praktische Tipps im Fuhrpark.
Kurse
Online-Kurse für einen tieferen Einblick.
Beratung
Fuhrparksoftware kennenlernen und Fragen klären.
09 — Components
CMS article system
Article pages use a 760px readable column, a compact sticky sidebar, and a bottom suggested-articles block.
Fahrtenbuchwechsel: Die Wahl zwischen 1%-Regelung und Fahrtenbuchmethode
Die Frage, ob das detaillierte Fahrtenbuch die bessere Option ist, stellt sich für viele Unternehmer und Selbstständige bei der privaten Nutzung von Dienstwagen.
Kurz gesagt: Entscheidend ist ein klarer Prozess und eine saubere Dokumentation.
10 — Components
Resource visuals
Low-quality migrated screenshots are replaced with coded document previews that stay sharp in cards and article heroes.
Vimcar BoxenstoppVorlage
Unfallbericht Vorlage
11 — Components
Suggested articles
Related content uses simple cards with topic pill, title, reading time, and restrained neutral surfaces.
Coverbild
Coverbild
Fahrtenbuch führen: Was bei der Steuerprüfung zählt.
Coverbild