K01 PRINCIPLES

Robust. Precise. Honest. Human.

Eighteen rules in three groups. When a design decision is unclear, these decide. When they conflict, accessibility wins, then honesty, then conversion.

Design

ST 010 · 6 RULES
D.1

Every color is a material or a signal

Greys and whites are surfaces. Red, yellow, green and blue carry machine meaning. Nothing is decoration.

D.2

Blue means your move

Signal Blue appears only on actions and key interactive states. If it is blue, it can be pressed.

D.3

Machined, not molded

45° chamfers, 1 px hairlines, depth from material tones. No soft rounded blobs, no heavy shadows.

D.4

Move in takt

Motion indexes on a 600 ms beat: move, dwell, move. Nothing floats, nothing loops without a pause control.

D.5

Honest imagery

Real people at work, machines in context. No cogs, no network overlays, no sparks for effect.

D.6

Pages are production lines

Numbered stations, one job each. The Line shows where you are and what comes next.

Conversion

ST 020 · 6 RULES
C.1 · THE FIRST RULE

Show the spec before you ask for the email.

Specs, datasheets, 2D previews, manuals and safety data are always open. Only CAD files and price lists sit behind a one-time, two-field registration.

  1. C.2 One primary action per viewport "Request a quote" is primary. The secondary action is always lower commitment, like "Talk to an engineer".
  2. C.3 No dead ends Every station and every page ends with a contextual next step.
  3. C.4 The basket is the engine Products, configurations, BOM parts and spare parts all go to one quote basket, sent as one RFQ.
  4. C.5 People, not forms Named engineers with photo, region, direct line and bookable slots.
  5. C.6 Proof with conditions Every figure carries its test conditions or source. Typical and guaranteed values never mix.

Accessibility

ST 030 · WCAG 2.2 AA
A.1

Never color alone

Status = color + shape + label + position, like a stack light.

A.2

Gloves count

44 px targets in Office, 56 px in Shop Floor density.

A.3

Keyboard everywhere

Mega menu, filters, configurator, tables and 3D viewer. Visible focus ring, 3 px.

A.4

Motion is optional

Full reduced-motion fallback; pause control on anything longer than 5 s.

A.5

Readable at arm's length

Body 16 px minimum, 60–75 characters per line, AAA contrast for body text.

A.6

+35 % text

Every component survives German. No fixed heights on text.