Design prototype

LogicTrade DesignSystem

De overkoepelende design-omgeving voor de nieuwe LogicTrade ERP-modules. Geen build-stap, geen backend — klikbare React-referenties met mock-data, bedoeld voor het development-team. Vier onderdelen: Design principles (waarom), het Design system (waarmee), Prototypes (voorbeelden) en Downloads (bestanden & AI-skill).

1 Design principles

Het startpunt — de fundamentele gedachte achter elk ontwerpbesluit.

Design Principles

Familiar. Fast. Focused. De kernuitgangspunten van het nieuwe design.

2 Design system

Logo's, kleuren, typografie, elementen en componenten — referentie voor alle modules.

Brand

Brand & logo's

Beeldmerk, logo en tagline — SVG & PNG.

Tokens

Kleuren

Kleur-tokens en richtlijnen — wanneer welk merkblauw, magenta of groen.

Tokens

Typografie

DM Sans, type-schaal en uppercase section-headers.

Patterns

Layout

Overview, drawer en detail — de drie kern-layouts.

Components

Buttons

Primary, secondary, ghost — varianten en states.

Components

UI Elementen

Modals, tables, boards en A4 paper — opbouw en tokens.

Components

Inputs

Text, search, select, checkbox en radio.

Patterns

Loaders & empty states

Skeletons, spinners en lege staten.

3 Prototypes

Volledige modules als voorbeeld — gebouwd volgens de principles en het design system.

Offerte

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

Service

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

Planning

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

4 Downloads & assets

Documentatie, styleguide en de design-skill voor AI-agents.

README.md STYLEGUIDE.md Design skill (.zip) — voor AI-agents, uitpakken in .claude/skills/

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.