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.

Richtlijnen

Tone of voice

Helpend, kort en zonder jargon.

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

Skeletons, spinners en voortgang.

Patterns

Empty states

Lege staten met altijd één volgende stap.

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.

Artikelen

Artikelbeheer · productkaart met prijzen, kenmerken, uitvoeringen en voorraad. Zelfde opzet als offerte: lijst, preview en detail.

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.

Beheer

Administratief gebied · domeinen met stamgegevens (BTW-tarieven, omzetgroepen) en instellingen die het gedrag bepalen.

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 React-app (TanStack Start) met file-based routing: elke module en design-pagina heeft een eigen URL (/offertes, /artikelen, /meldingen, /planning, /beheer, /design/…). Sidebar en topbar staan in één gedeelde layout. Code-structuur: src/routes/, src/components/lt/, src/styles/lt/.