Design prototype

Welkom bij LogicTrade DesignSystem

Dit is de interactieve design-omgeving voor de nieuwe LogicTrade ERP-modules. Geen build-stap, geen backend — klikbare React-prototypes met mock-data, bedoeld als referentie voor het development-team. Lees README.md voor opstart en architectuur, en STYLEGUIDE.md voor het volledige design system (tokens, componenten, motion, UX-flows). Beide bestanden staan in de project-root.

README.md STYLEGUIDE.md

Next gen modules

Design afgerond

Offerte

Verkoop · offertes opstellen, beheren en versturen. Volledig uitgewerkte flow met list, detail, drawer en nieuwe-offerte canvas.

Design in progress

Service

Aftersales · servicemeldingen, reparaties, reclamaties en onderhoud. Starter-scaffold met list-view en detail-placeholder.

Design in progress

Planning

Bezorgingen, monteurs en agenda. Wordt opgepakt nadat Service afgerond is.

Design system

Patronen en componenten — referentie voor alle modules.

Brand

Brand & logo's

Alle LogicTrade-logo's op één plek: beeldmerk, logo en logo met tagline. SVG & PNG, met kopieer- en download-knop.

Tokens

Kleuren & kleurgebruik

Alle kleur-tokens, achtergrond-gradient en richtlijnen — wanneer welk merkblauw, magenta of groen.

Tokens

Typografie

DM Sans, de volledige type-schaal en de uppercase section-header behandeling.

Patterns

Loaders & empty states

Skeleton-patronen, spinners en lege staten — referentie voor alle modules.

Onder de motorkap. Eén SPA-shell op app.html met persistente sidebar, topbar en tweaks-panel; modules wisselen client-side via een hash-route (#offerte, #service, #planning). Code-structuur: shared/, offerte/, service/, planning/. Zie README.md voor de volledige run-instructies.