Quote list0

Brand guidelines

The single source for hugepump.com, presentations, trade show screens and motion work. Design idea: engineering drawing sheet. The product comes from real CAD data, the page is laid out like a technical drawing, and yellow lights up only where a dimension or a decision is.

Principles

  1. Measurements first.Every product presentation opens with a number: flow rate, pressure, connection size. Not adjectives, values. Large, bold, expanded figures are the signature of the system.
  2. Real parts, real data.Product visuals are rendered from STEP models: exploded view, cross-section, assembled. No stock photos and no artificial scenes.
  3. Simple layout.12-column grid, few lines, large visuals. No shadows, gradients or rounded cards. The technical drawing language is used only in product explanations, never as decoration.
  4. Yellow is a decision.At most one primary action and one accent area per page. Large yellow surfaces only on presentation covers and campaign banners.
  5. Dark stage, light content.Sections where the product is staged (hero, exploded view, film) are on a dark stage. Sections where information is read (filter, table, form) are on a light background.

Color

The yellow is taken directly from the logo and is not used as a text color on light backgrounds; a darkened mustard is used when needed. Layers are separated with lines, not shadows. Contrast ratios depend on the page background of the selected theme.

Brand

brand-yellow#FBBF161.5:1 to background

HUGE yellow, taken directly from the logo. Primary CTA fill, dimension line emphasis, selected state. Text on it is always ink-on-yellow. Not used as TEXT color on light backgrounds (1.6:1).

brand-yellow-deep#D9A1002.1:1 to background

Hover/pressed state of the yellow button, shadow edge of a yellow area.

brand-yellow-text#8A64004.9:1 to background

When yellow is needed as text or line: darkened mustard on light backgrounds (4.9:1), logo yellow on dark backgrounds.

brand-yellow-tint#FFF4D11.0:1 to background

Selected row, product added to the quote list, calm accent area.

logo-grey#7B76784.1:1 to background

The grey of 'PUMP / Blower / Vacuum / Acid' in the logo. Only in the logo and in decorative text 24px and larger.

ink-on-yellow#14151816.6:1 to background

Text and icons on a yellow fill (10.9:1).

Background and stage

surface#F4F4F11.0:1 to background

Page background. Concrete grey in light mode, graphite in dark mode.

surface-raised#FFFFFF1.1:1 to background

Card, table, form panel. Separated with a line instead of a shadow.

surface-sunken#E9E9E51.1:1 to background

Filter rail, code/technical drawing area, table header.

stage#14151816.6:1 to background

Product stage: hero, render and presentation sections stay dark in both themes.

on-stage#F1F1EE1.0:1 to background

Primary text on stage (16:1).

on-stage-muted#A3A1A22.3:1 to background

Secondary text and dimension labels on stage (7.1:1).

line-stage#3A3D429.9:1 to background

Drafting grid and dimension lines on stage.

Text and line

ink#14151816.6:1 to background

Main text, headings, model codes.

ink-muted#57534F6.9:1 to background

Secondary text, units, descriptions (7.0:1 on light, 7.6:1 on dark).

line#D3D3CE1.4:1 to background

Hairline dividers, table lines, card edges. Decorative; carries no meaning.

line-strong#86837E3.4:1 to background

Form control edge, dimension line, underline of an inactive tab (3.4:1 on light, 3.7:1 on dark).

focus-ring#14151816.6:1 to background

Keyboard focus ring, 2px + 2px gap.

Parent brand and status

gunalsan-navy#13324E12.0:1 to background

Günalsan parent brand navy. Only in corporate/company sections and next to the Günalsan logo.

gunalsan-red#F03C1F3.5:1 to background

Günalsan logo red. Outside the logo only for warning graphics (ATEX, hazard). For text, use signal-red-text.

signal-red-text#B8290F5.7:1 to background

Error message and warning text (5.6:1 on light, 6.9:1 on dark).

success#1F6B455.9:1 to background

Form confirmation, 'in stock' status.

Data series

series-1#B07F003.2:1 to background

Performance curve series 1 (selected model).

series-2#2F66905.6:1 to background

Performance curve series 2 / comparison.

series-3#57534F6.9:1 to background

Performance curve series 3 / reference.

Typography

Archivo · variable · wght 400–800, wdth 62–125

A single family is used; there is no second monospace or technical font. Headings and technical values are set in the expanded (wdth 112) bold cut, and figures are set tabular. Labels are in sentence case. Model codes are written without spaces in capitals; inches use the double prime: 3″.

display-xl120px · 800 · 0.9Hero model code / single word. Archivo wdth 112 (expanded). Once per page.
HP30
display72px · 800 · 0.95Section opening heading, presentation cover.
We carry the flow.
h148px · 700 · 1.0Page heading (category, product).
Diaphragm Pumps
h232px · 700 · 1.1Section heading.
Technical Specifications
h322px · 600 · 1.25Card and sub-section heading.
Metal Body Series
lead20px · 400 · 1.45Intro paragraph under a heading, 3 lines at most.
It runs on compressed air, contains no electric motor, and is safely used in explosive atmospheres.
body16px · 400 · 1.6Body text. Line length 60–72 characters.
Ball and flap valves automatically control the fluid entering and leaving the chambers.
small14px · 400 · 1.5Footnote, form help, card description.
Values are measured at 7 bar air pressure.
nav15px · 600 · 1.2Main menu and button text.
Products
label15px · 650 · 1.3Form and data label. Sentence case (not capitals), Archivo semibold.
Max. flow rate
spec-value32px · 800 · 1.0Technical value. Archivo expanded (wdth 112), tabular figures.
890
spec-unit13px · 400 · 1.2Unit next to the value, ink-muted.
l/min
code14px · 650 · 1.4Model and part code. No spaces, capitals: HP30, S063045.
HP30-AL-PTFE-T

Multilingual: heading boxes are designed for a 35% text expansion (DE, RU). In Arabic the layout is mirrored; model codes and values stay left to right.

Grid and layout

12 columns · 24 px gutter · 40 px margin · max 1360 px

8 columns on tablet, 4 columns and a 16 px side margin on phone.

Spacing scale

space-14pxBetween icon and text, inner label spacing.
space-28pxValue–unit, tight lists.
space-316pxControl inner spacing, rows inside cards.
space-424pxCard padding, grid gutter.
space-540pxPage side margin (desktop), between blocks.
space-664pxLarge separation within a section.
space-7104pxVertical rhythm between sections (desktop).
space-8168pxBreathing room above and below hero and stage sections.

Corners and lines

radius-0Card, panel, visual, stage
radius-1 · 2 pxButton, input, badge
radius-fullOnly callout bubbles and status dots
stroke-hair · 1 px · grid, table, dimension line
stroke-rule · 2 px · focus, active tab, section top line
stroke-bar · 6 px · proportion of the yellow bar in the logo

Technical drawing elements

3″ · 76 mm 2 Dimension line: thin line, 45° ticks at both ends, label in the middle. Callout bubble: 28 px circle, attached to the part with a thin line.

Components

Real components from the site
Button
Request a quoteProductsCatalog

One yellow button per page. Deeper yellow on hover. Focus ring 2 px.

Badge and chip
Air diaphragmFood safeExplosive atmosphereDistribution
SpecBlock
Max. flow rate
890l/min
Connection
3inch
Discharge head
70m
Solids passage
8mm
SeriesCard
Metal body

HP30

890 l/min · 3″ · Aluminum
Callout
Not sure about your fluid?

Write the fluid name, temperature and flow rate; our application engineer will reply with a body and elastomer recommendation.

Ask an engineer
Our recommendationMetal body air diaphragm, ball valve
QuoteBar
6Your quote list: HP30 metal body × 2 · Diaphragm, HP30 × 4Request a quote

Fixed at the bottom of every page; the quote list is one click away for purchasing.

Visuals and motion

HP30 assembled render
Assembled · 3/4 view
HP30 exploded render
Exploded · matches the parts list
HP30 front render
Front

Renders and photography

Renders come from STEP data: aluminum die-cast in satin metal, elastomers in matte black, fasteners in stainless steel. Camera at a 3/4 angle, horizon slightly raised. Photography is only from our own facility, assembly, testing and the field. Icons on a 24 px grid, 1.5 px stroke; no emoji and no filled icons.

  • Animation explainsExploded-view film, 3D model that opens on scroll, operating principle loop, curve drawn in as it appears.
  • Particles only at the moment of separationIn the direction of movement and short-lived; no decorative sparkle.
  • 240–480 msCurve cubic-bezier(0.2, 0, 0, 1). Principle loops run close to real stroke speed, about 1 s per stroke.
  • Reduced motionWhen prefers-reduced-motion is on, loops stop and scroll-driven scenes stay on their final frame.

Open the 3D heroWatch the exploded-view film

Tone of voice

Short, measured, engineer to engineer.

Not like this

"The best pump in the world, the most suitable solutions for you!"

Like this

"890 l/min, 7 bar, 8 mm particles."

Not like this

Capitals such as "MAX. FLOW" and spaced-out micro labels

Like this

"Max. flow rate" — label in sentence case