-
01
Start with tokens
Primitives → semantic → component. Rebrand by overriding about 8 semantic tokens; switch themes with
data-theme. -
02
Blue means your move
Every color is a material or a signal. Signal Blue is reserved for actions; status always pairs color with icon and label.
-
03
Build pages as lines
Sections are stations. Each one has a goal, an audience and a next step. No station ends in a dead end.
Stations
- K00Cover & IndexYou are here
- K01PrinciplesDesign, conversion and accessibility rules
- K02Color & TokensMaterials, signals, themes, contrast
- K03Typography & NotationCondensed display, units, order codes
- K04Layout, Surfaces & DensityGrid, chamfers, Office / Shop Floor
- K05Iconography & Imagery1.5 px technical icons, photo direction
- K06Motion600 ms takt, servo / index / press
- K07ElementsEvery input and indicator, all states
- K08ComponentsNavigation, heroes, content, overlays
- K09PatternsFind → configure → RFQ and more
- K10Data VisualizationOEE, SPC, torque curves, timelines
- K11Conversion SystemHero formula, basket, gating, trust
- K12Content & ComplianceVoice, claims, safety, legal templates
- D01HomeBuilt to run. Every shift.
- D02Product · PXMore torque. Less space.
- D03ConfiguratorConfigure. Download. Done.
- D04Product FinderThe right drive in 60 seconds.
- D05Industry · Food & BevHygienic by design.
- D06Machine · VX5Five axes. One setup.
- D07Request a QuoteThree steps, one RFQ number
- D08Service & Spare PartsBack to full speed.
- D09Customer StoryHolmgaard: OEE 71 % → 86 %
- D10CareersBuild the machines that build the world.
- D11Hartwerk ConnectIIoT portal · Night Shift · Shop Floor
- D12Trade-Fair MicrositeSee it run live.
- UTLUtility templates404, legal, thank-you, maintenance
The Line
A rail through every page. A carrier indexes station to station with scroll.
Takt Motion
One 600 ms beat. Move, dwell, move. Counters tick; nothing floats.
Hall Door
Chapter transition. A sectional door lifts slat by slat, as it did on this page.
Balloons & BOM
Exploded views with numbered balloons linked to a live parts list and the quote basket.
Chamfer Geometry
45° machined chamfers, S / M / L, instead of rounded corners.
Stack Light & Nameplate
Signal-tower status language; product cards engraved like machine plates.
- DOC NO.
- TAKT-K00
- TITLE
- Cover & Index
- REV
- A
- SHEET
- 01 / 26
- DATE
- 2026-09-23
- LICENSE
- OFL fonts, self-hosted