ServiceBud Team
Contact

Empowering Tomorrow.
Building Infrastructure.

The visual and verbal system for ServiceBud Team KFT. This document reads the same token files the website ships, so nothing here can describe a colour, size or weight the site does not actually use.

Version
3.1
Supersedes
1.0 — July 2026
Languages
EN · DE · HU · RU · UK

Foundation

Mission

To deliver electrical infrastructure and renewable energy installations across Central Europe through certified technical expertise, transparent client partnership and uncompromising safety standards.

Vision

To be the B2B electrical contracting partner of choice for industrial complexes, commercial developments and utility-scale solar projects in Germany and Hungary.

Value pillars

  1. 01 Engineering precision. No shortcuts. Full compliance with the European electrical framework — DIN and VDE in Germany, MSZ in Hungary.
  2. 02 Partnerable integrity. Clear, early communication with general contractors, developers and facility directors. Bad news travels fast or it is not integrity.
  3. 03 Safety and compliance first. Every site, every cable, every worker under certified protocol.
  4. 04 Future-ready infrastructure. Low-current systems and solar integrations designed for a thirty-year service life.

Tagline hierarchy

Two lines, and they are not interchangeable. The tagline is what the company stands for; the descriptor is what it sells.

Tagline

Empowering Tomorrow. Building Infrastructure.

Descriptor

Precision electrical contracting across Hungary and Germany

  • The tagline appears once per surface, set in Display, and never inside running copy.
  • The descriptor is the working line: search titles, directory entries, the first line of a cold reply. It is the one that has to survive translation without losing meaning.
  • Never set the tagline in the mono face. It is a statement, not a measured value.
  • The tagline is not a substitute for the company name in a legal or contractual context.
  • Where only one line fits — a card back, a signature, a favicon-sized context — the descriptor wins. It answers the question the reader actually has.

Archetype

The Expert Specialist. Precise, safety-first, solution-oriented. The register is a senior engineer explaining a decision to a peer — not a supplier pitching, and not a brochure. Where the brand has a personality it shows in restraint and in specificity, never in enthusiasm.

Colour

Every token below is measured against its own canvas at build time. The role column is binding: a token marked fill is never used for type, whatever it looks like in a swatch.

Dark theme — canvas #10100e

  • Industrial Canvas --canvas #10100e 1.00:1 · surface Page ground. Warm-black, not blue-black — it sits under amber site photography without turning it green.
  • Raised Surface --surface #16171a 1.06:1 · surface Panels, menus, the contact block.
  • Crisp Off-White --ink #ebe9fc 15.96:1 · AAA All body and display type.
  • Muted Ink --ink-muted #9aa4b2 7.55:1 · AAA Supporting copy, metadata, captions.
  • Electric Sky --signal #7dd3fc 11.42:1 · AAA The conductor. Links, accents, the live cable, and the logomark on dark grounds.
  • Safety Gold --safety #fab932 10.93:1 · AAA Site-safety register: warnings, concept badges, the second voice.
  • Industrial Amber --safety-fill #cc8d05 6.69:1 · fill Fills and strokes only. Too dim against ink for type.
  • Cobalt --signal-deep #3232c8 2.20:1 · fill Fill only — see the audit note below. Never type on dark.
  • Slate Blue --slate #324b7d 2.21:1 · structure Borders, dividers, structural tone. Demoted from accent in v3.

Light theme — canvas #f0f0ee

  • Warm Grey Canvas --canvas #f0f0ee 1.00:1 · surface Page ground. Warm, so the dark and light modes share a temperature.
  • Raised Surface --surface #ffffff 1.14:1 · surface Panels, menus, cards.
  • Dark Slate --ink #050315 17.86:1 · AAA All body and display type.
  • Muted Ink --ink-muted #4b5565 6.60:1 · AA Supporting copy, metadata, captions.
  • Electric Sky, deepened --signal #075985 6.63:1 · AA The conductor, darkened to stay legible on a light ground.
  • Royal Indigo --signal-deep #323296 9.06:1 · AAA Primary. Safe as type and as fill on light.
  • Safety Gold, deepened --safety #8a5f00 4.95:1 · AA Text-safe partner of the gold.
  • Safety Gold --safety-fill #fab932 1.53:1 · fill The gold itself: fills, strokes, never type.
  • Slate Blue --slate #324b7d 7.55:1 · AAA Structural tone; safe as type on light.

Typography

DM Sans

Display, navigation and body. Geometric enough to read as engineered, humanist enough to stay readable at 15px across five languages including Cyrillic.

JetBrains Mono

Measured values only: standards codes, ratings, dates, counts, phone numbers. Not a costume for "technical" — if the value is not measured, it is set in DM Sans.

Level Token Family Wt Size Leading Tracking Use
Display --t-display DM Sans 600 44 → 88px 0.98 -0.035em The tagline lockup. Once per page, never twice.
H1 --t-h1 DM Sans 600 32 → 56px 1.08 -0.028em Page title. Carries the search intent.
H2 --t-h2 DM Sans 600 24 → 38px 1.14 -0.022em Section heading. No label above it.
H3 --t-h3 DM Sans 600 18 → 24px 1.30 -0.012em Card and row titles.
Subhead --t-subhead DM Sans 400 16 → 20px 1.50 normal FAQ questions, phone numbers.
Lead --t-lead DM Sans 400 15 → 18px 1.55 normal Section introductions, scope lines.
Body --t-body DM Sans 400 14 → 15px 1.62 normal Running text. Measure capped at 68ch.
Caption --t-caption DM Sans 400 12 → 13px 1.50 normal Metadata, list items, footer links.
Spec --t-label JetBrains Mono 500 11 → 12px 1.40 +0.04em Measured values only — ratings, standards, dates, counts.

Standing rules

  • Tracking never goes below −0.04em. Display sits at −0.035em; everything else is looser.
  • Body measure is capped at 68 characters. Longer lines are a layout bug, not a content one.
  • No label, kicker or eyebrow above a heading. The heading carries its own weight — v1 set one above every section and they said nothing the heading did not.
  • Display type appears once per page. A second use makes neither one the entry point.

Iconography

One drawing per discipline, from the company's own icon set. They are diagrams of the actual thing — a rack, a drum paying out cable, a distribution structure, an array on its mount — not symbols standing in for it. The set is closed: if a new service needs an icon, it gets drawn to this rule, not borrowed from a library.

  • Low-Current Systems Low-current systems icon.svg
  • Cable Laying Cable-laying icon.svg
  • External Networks External networks.svg
  • Solar Panels Solar panels.svg

Construction

  • Drawn on a 2000 grid inside a 2100 frame, so every icon carries the same optical margin.
  • Line art only. Two stroke tiers: 75 for the subject, 50 for annotation. Nothing in between.
  • Round caps, round joins. A square terminal reads as a different family.
  • Stroke is currentColor. An icon never carries its own colour, so it inherits whatever the surrounding text is already proven legible against.
  • Minimum display size 32px. Below that the detail tier closes up and the drawing becomes a smudge — use the logomark instead.
  • No fill, no gradient, no shadow, no container circle behind the drawing.

Violations

  • Substituting an icon-library glyph because the official drawing is inconvenient
  • Recolouring the subject and the annotation differently
  • Setting an icon in the safety gold to mean "important" — gold is the site-safety register, not emphasis
  • Scaling below 32px, or using an icon where a photograph of the actual work would say more

Stroke tiers

Primary 75 Detail 50

Measured on the 2000 grid. The subject of the drawing takes the primary tier; dimension lines, rays and bearing marks take the detail tier. Nothing takes a third weight.

Size floor

72px 48px 32px 24px

32px is the floor. At 24px the wound cable on the drum closes into a solid block and the drawing stops being a drawing — the logomark is the correct mark at that size.

Layout

A 4px base, geometric rather than linear, so the steps stay distinguishable at the sizes that matter. Values below are the tokens the site consumes.

Token Value Use
--container 1240px Maximum content width. Wider reads as a template stretched to fill a monitor.
--gutter clamp(1.25rem, 4vw, 2.5rem) Page edge inset. Fluid, so the first character sits the same distance from the bezel on a phone as on a laptop.
--measure 68ch Body measure cap. Applies to prose regardless of the column it sits in.
--section-y clamp(4.5rem, 9vw, 9rem) Vertical rhythm between sections. The only vertical spacing decision on a page.
--radius 14px Panels, cards, figures, images.
--radius-sm 10px Controls and small chips. Pills are reserved for buttons.
--head-h 72px Header height. Anchors sit below it, which is why in-page links land correctly.

Space scale

  • --s-1 4px
  • --s-2 8px
  • --s-3 12px
  • --s-4 16px
  • --s-5 24px
  • --s-6 32px
  • --s-7 48px
  • --s-8 64px
  • --s-9 96px
  • --s-10 128px

Gaps come from this scale or they are wrong. A one-off 13px gap is how a system starts to need a designer present for every change.

Photography

Every image on this site is a job this company actually did. That is the entire photographic strategy, and it is worth more than any art direction layered on top of it. A general contractor can tell site photography from a stock library in under a second, and the moment they spot stock, every claim on the page moves into the "unverified" column with it.

Direction

  • Real sites, real installations, real crews. No stock, ever — not as a stand-in, not "until we get the real one".
  • Prefer the unglamorous frame: a labelled rack, a trench with the conduits visible, a terminated panel. Evidence beats atmosphere.
  • No staged handshakes, no hard hats worn indoors for the camera, no lens flare added afterwards.
  • Show work, not workers, unless the person consented and the site permits it. Faces need a release; a cable tray does not.
  • Do not photograph anything that identifies a client's security layout — camera positions, door controller models, rack contents with visible addressing.

Treatment

  • Service rows carry the image desaturated at 55% opacity, returning to full colour on hover and on keyboard focus. The greyscale state is the resting state, so a page of four services does not turn into four competing photographs.
  • Project cards and page figures run at full colour. They are the evidence, so they are not decorated.
  • No duotone, no brand-colour overlay, no gradient scrim across a whole image. A scrim is permitted only where type sits directly on a photograph, and only as far as the type actually extends.
  • Aspect ratios: 4:3 for service figures, 3:2 for project covers, 16:9 for the hero. Crop to the ratio; never letterbox.

The conductor

One authored moment, and the only motion the brand owns: a live line traced down the page, routed through the sections rather than drawn beside them. It carries the product's whole argument — a continuous circuit, installed by one crew, from the first conduit to the last termination.

Behaviour

The line lights the section it has already passed and leaves the section ahead dark. The lit edge terminates exactly under the travelling head — light never precedes the head, because a cable does not illuminate before the current reaches it.

Constraints

  • Present at every viewport width. It is the identity, not a desktop garnish.
  • Under prefers-reduced-motion the whole line shows energised and the head is removed.
  • No animation library. Geometry and position are recomputed in the same frame, so they cannot disagree.
  • Nothing else on the page animates on scroll except one shared entrance.

Components

Buttons

Request a quote See the work Get in touch

Flat fills, never gradients. Pills are for controls of this size only; anything larger takes the 14px card radius.

Spec values

DIN EN 50173DIN VDE 0100DIN VDE 0100-410VDE-AR-N 4105 +36 70 301 0096 2022

Mono, tabular figures, uppercase where the source is uppercase. This is the only place JetBrains Mono appears.

Elevation

1px border, no shadow Shadow, no border

Declare elevation once. A 1px border under a wide soft shadow is the ghost card and is not used anywhere in this system.

Collateral

Two artefacts carry the brand outside the website, and both are read in conditions the company does not control — a card in bad light on a site, a signature in someone else's mail client. Neither is a place to be clever.

Business card

ServiceBud Team
Front — 85 × 55 mm

Attila Pavlisko

CEO

T
+36 70 301 0096
E
office@servicebudteam.com
W
servicebudteam.com

Lublói utca 4. 2. em. 6. ajtó, 1023 Budapest

Back
Trim
85 × 55 mm
Bleed
3 mm all round
Safety
5 mm from trim
Stock
400 gsm uncoated
Finish
None. No spot UV, no foil, no rounded corners.
Front
Mark in Electric Sky, "ServiceBud" in Crisp Off-White, "Team" in Electric Sky, on Industrial Canvas
Back
Name, role, phone, email, site, registered address
  • The front carries no contact detail and no tagline. It is the mark and nothing else — the card is small enough that one job per side is the only way either side stays legible.
  • Phone and email are set in JetBrains Mono at 7pt. They are measured values, and mono is what stops a 0 being read as an O when someone types it off the card.
  • The registered address prints only when the company registration number is available to print alongside it. A partial legal block is worse than none.

Email signature

Attila Pavlisko

CEO · ServiceBud Team KFT

+36 70 301 0096
office@servicebudteam.com
servicebudteam.com

Precision electrical contracting across Hungary and Germany

Width
480px maximum
Type
Arial / Helvetica — never a web font
Body size
13px / 1.5
Rule
2px #075985 — Electric Sky deepened — 32px wide, above the name
Images
None. The mark is drawn in text-safe HTML or omitted.
Colours
Light-mode tokens only
  • DM Sans is not available in Outlook, and a signature that falls back unpredictably looks worse than one that never tried. Arial is the specification, not a compromise.
  • No image logo. Remote images are blocked by default in most corporate clients, so an image-based signature arrives as a broken-image icon at exactly the moment a first impression is being made.
  • Light-mode tokens only: the signature sits inside the recipient's message body, which the sender does not control.
  • No quotes, no legal disclaimer longer than the signature, no "sent from" line, no social icons the company does not maintain.

Voice

Partnerable, solution-oriented, authoritative, precise. Specific beats enthusiastic every time: "channel-level test results for every data link" earns more than "quality you can trust".

  • German (DE)

    Formal Sie, always

    Schwachstromanlagen · Kabelverlegung · Außennetze · Photovoltaik

    Lead with VDE/DIN compliance and Termintreue. State the cross-border arrangement plainly rather than implying a German branch — a German GC will ask in the first call, and the honest version is the stronger position.

  • Hungarian (HU)

    Professional, collaborative

    Gyengeáramú rendszerek · Kábelfektetés · Külső hálózatok · Napelem

    Home market. Emphasise proximity and the fact that a site visit is a morning, not a mobilisation.

  • English (EN)

    International B2B

    Low-current systems · Cable laying · External networks · Solar PV

    Canonical. Everything else is translated from here, so this is where wording is settled.

  • Russian (RU) / Ukrainian (UK)

    Professional, direct

    Слаботочные системы · Прокладка кабеля · Внешние сети · Солнечные панели

    Present for crew and client accessibility rather than for search reach in HU/DE. Keep parity with EN; do not write market-specific claims here.

Claims discipline

Only publish what is verifiable. Where a fact is missing — a company registration number, a German address, a named region — the correct move is to leave it out and say so, not to write around it. Every place in the codebase where a claim could be fabricated carries a comment explaining why it is empty.

Accessibility

Binding, and measured rather than asserted. Every figure below is computed from the same tokens at build time, which is why the colour section can mark three brand colours as unusable for type without anybody having to remember it.

  1. 01

    Text meets 4.5:1 against its own background; large display type meets 3:1.

    Every token in the colour section is measured against its canvas at build time, and any token that fails as foreground is marked fill-only. Three of them are.

  2. 02

    Colour is never the only carrier of meaning.

    A link is underlined or positioned, not merely tinted. A form error states what is wrong in words.

  3. 03

    Focus is always visible, and the focus state matches the hover state.

    Service rows, project cards and buttons all respond to :focus-visible exactly as they respond to :hover. A keyboard user sees the same affordance a mouse user does.

  4. 04

    prefers-reduced-motion is honoured by removing motion, not by shortening it.

    The conductor shows fully energised and its travelling head is removed. Nothing else animates on scroll.

  5. 05

    Every page declares its language, and every alternate is declared to search engines.

    Five locales, real URLs, hreflang on 100 of 102 pages — the two exceptions are the 404 and this document, neither of which should be indexed.

  6. 06

    Interactive targets are at least 44 × 44px.

    Including the language switcher and the theme control, which are the two most commonly undersized controls on a multilingual site.

Corrections from v1

9 defects carried by the previous system. They are recorded rather than quietly fixed, because each one explains why a rule above is written the way it is — and because a system that hides its own history invites the next person to repeat it.

  1. 01
    dark --primary: #3232c8 --signal-deep, fill only

    Cobalt on the dark canvas measures 1.87:1. It was documented as the dark-mode primary, which invites it to be used for type; at that ratio it is illegible for anyone, not just for users with low vision.

    Fix. Kept as a fill behind white type (where it is compliant), renamed so the role no longer implies foreground use, and the type role handed to Electric Sky at 11.42:1.

  2. 02
    dark --accent: #324b7d --slate, structural only

    Slate Blue on the dark canvas measures 1.61:1 — lower than the primary it was supposed to accent. Meanwhile §2.3 of the v1 guidelines specified Electric Sky #7dd3fc for the logomark on dark grounds, so the document contradicted itself about what the dark accent even was.

    Fix. Electric Sky is the dark accent, matching the logo rule and the cable. Slate Blue is reassigned to borders and dividers, which is what it is actually good at.

  3. 03
    light --accent: #7dd3fc --signal: #075985

    Electric Sky on the warm grey canvas measures 1.30:1. As a light-mode accent it is invisible.

    Fix. The hue is kept and the value deepened to #075985 (6.63:1), so light mode reads as the same brand rather than a different one.

  4. 04
    Site shipped #0284c7 / #d97706 / #f8fafc One token set, one source

    The v1 stylesheet carried three competing palettes: :root, a prefers-color-scheme block that matched the guidelines, and an html.light-mode class that did not. Because the theme script always set a class, the class always won — so the palette the guidelines documented never actually reached a visitor, in either mode.

    Fix. A single token file with two themes. This document renders live token values, so a swatch here cannot describe a colour the site does not use.

  5. 05
    Inert theme toggle Working, persisted control

    The guidelines page carried a theme toggle button that was never wired to any script, and the site forced the theme to match the OS on every load — so the preference could not be changed anywhere.

    Fix. One control in the header, stored in localStorage, applied before first paint so there is no flash.

  6. 06
    EN / HU / RU / UK EN / DE / HU / RU / UK

    The guidelines specified EN, DE and HU. The site shipped EN, HU, RU and UK — no German at all, in a business whose second named market is Germany.

    Fix. German added. All five languages now have real URLs and hreflang rather than a client-side text swap.

  7. 07
    Documented scale, unused Scale is the implementation

    The v1 type scale matrix specified sizes, line heights and tracking per level. The stylesheet used unrelated ad-hoc clamps, and no element mapped to a named level.

    Fix. Every level in the scale below is a CSS custom property that the site actually consumes.

  8. 08
    Four icons, four stroke weights Primary 75 / detail 50

    The official icon set was drawn at 100 for low-current, 50 for cable laying and solar, and 100 with 75 detail for external networks. On the services page all four appear in one column, so the disciplines read at visibly different optical weights — low-current twice as heavy as solar — which makes the set look assembled rather than designed.

    Fix. Geometry is untouched; only stroke weight is normalised, onto a two-tier rule. The frame gained a 50-unit bleed because several drawings run to the edge of the 2000 grid, where a heavier stroke would have clipped.

  9. 09
    services.js declared icons nothing drew One component, one source

    Each service carried an `icon` field naming its drawing. No component read it, so the field described an intention rather than an implementation — the same class of defect as a documented type scale the stylesheet ignores.

    Fix. A single ServiceIcon component reads data/icons.js. The guidelines page and the service pages therefore cannot show different drawings.

Governance

Source of truth: src/data/brand.js and src/styles/tokens.css in the website repository.

  • This document is generated from the token files the site ships. Change the tokens and this page changes with them; there is no second place to update.
  • A new colour is a change to the palette, which means it needs a measured contrast ratio and a declared role before it can be used. "Just this once" is how v1 acquired three palettes.
  • Anything added here must be implemented, or it does not belong here. A rule nobody can point at in the codebase is a wish.
  • Facts the company cannot verify stay out — of this document, of the site, and of the schema. Where a value is deliberately absent, the code says why.

Questions on this system: office@servicebudteam.com