Kleuren · LogicTrade design system

Kleurprincipes

Merkblauw is voor interactie — links, primaire CTA's, focus, het grand-totaal. Geen standaard tekstkleur. Bodytekst is --ink-700/--ink-900.
Magenta is nooit bodytekst — alleen backgrounds, badges, soft borders en de „Niet definitief” status-pill. Mag subtiel een locked/read-only state markeren.
Groen = bevestigend — Versturen, Klant aanmaken, „Definitief” pill en het Eerstvolgend-puntje (volgende afspraak).
Sectie-headers (KLANT, DOCUMENT, OPMERKINGEN) gebruiken --ink-900 navy + uppercase + letter-spacing: 0.6px.
Geld in regel- en samenvattingsrijen is --ink-700. Alleen het grand „Totaal” krijgt --accent-blue — dat is hét eindgetal.

0 · Pagina-achtergrond

De app-achtergrond is geen platte kleur maar een zachte gradient met een blauwe glow bovenaan en een subtiele noise-overlay. Cards rusten hier op alsof het een tafel is.

Glow (top)radial-gradient(ellipse 100% 55% at 50% -8%, rgba(195, 213, 255, 0.38) 0%, transparent 65%)

Basislinear-gradient(168deg, #f1f4fb 0%, #eaecf3 55%, #e7eaf1 100%)

NoisefractalNoise SVG · opacity 0.032 · fixed overlay

html {
  background:
    radial-gradient(ellipse 100% 55% at 50% -8%,
      rgba(195, 213, 255, 0.38) 0%, transparent 65%),
    linear-gradient(168deg,
      #f1f4fb 0%, #eaecf3 55%, #e7eaf1 100%);
}

1 · Merk

Merkkleuren — bewust spaarzaam ingezet. Blauw voor interactie en het grand-totaal, magenta uitsluitend voor status/badges (nooit als bodytekst), groen voor bevestigende acties.

Primair merk. Links, focus, actieve nav, drop-targets, „Totaal” grand-total, KPI-blauwe kaart.

Zachte merkvulling — hover/active backgrounds, focus rings, drop-target highlight.

Zachte blauwe schaduw onder hover-states.

Secundair merk. Heel spaarzaam: KPI-trend chips, „Niet definitief” pill, locked-state hint. Nooit als bodytekst.

Magenta tint voor zachte achtergronden en pill-fills.

Succes, primaire CTA („Versturen”), „Definitief” pill, eerstvolgend-dot.

Groene vulling (zeldzaam).

2 · Ink (tekst)

Een platte 5-staps schaal. Standaard bodytekst is --ink-700. Daarboven zwaarder, daaronder rustiger. Geen tussenwaarden toevoegen — die zijn al getest en versmolten visueel.

Sterkste — paginatitels, grote getallen (KPI), sectie-headers (KLANT, DOCUMENT…), grand-total label.

Standaard bodytekst. Item-namen, totalen-waardes, knop-labels, regel-totalen.

Secundair — labels, metadata, tabel-kolomheaders, captions.

Tertiair — placeholders, voetnoten („30 dagen”), idle-iconen.

Disabled, dashed-button borders, hele lichte dividers.

3 · Oppervlakken

Vier oppervlak-tiers — van pagina-canvas tot bijna-wit voor nesting. Cards zitten op --bg, geneste structuren op --surface-alt en --surface-muted.

Pagina-achtergrond (de „tafel” waarop de cards rusten).

Cards, modals, panels, primaire „page object” oppervlak.

Subtiel genest oppervlak — KPI-internals, hover-banden, totals box.

Bijna-wit — group-headers, item-row hover.

4 · Randen

Drie tiers borders. Standaard is --border, --border-soft voor rustigere kaders, --border-line voor hairlines tussen rijen.

Standaard zichtbare border — inputs, chips, cards, container outlines.

Rustigere borders — KPI-cards, group-cards, sectie-dividers.

Hairline — tussen tabelrijen, item-rijen, accordion separators.

5 · Status / semantisch

Semantische kleuren — alleen voor wat ze betekenen, niet als decoratie.

Destructieve acties (verwijderen on hover, deselect klant).

6 · Schaduw — hoofd-cards

Overview-tabel card, A4 document-content en de right side bar. Één rustige, licht donkerblauwe schaduw met een hairline border. Geen hover-state — de grote cards blijven rustig liggen.

Shadow4px 4px 15px 0 rgba(14, 34, 85, 0.05)

Border1px solid #eef0f4 (var(--border-soft))

Radius12px

.main-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 4px 4px 15px 0 rgba(14, 34, 85, 0.05);
}

7 · Schaduw — KPI-cards

Kleinere tegels met een kleurgebonden schaduw (blauw, roze, paars). Bij hover verdiept de schaduw en schuift de card licht omhoog. Hover onderstaande tegels om het effect te zien.

Blauw · rust0 4px 14px rgba(19, 80, 234, 0.06)

Blauw · hover0 10px 24px rgba(19, 80, 234, 0.11), 0 3px 8px rgba(19, 80, 234, 0.06)

Roze · rustgeen schaduw

Roze · hover0 10px 24px rgba(230, 0, 126, 0.15), 0 3px 8px rgba(230, 0, 126, 0.07)

Paars · rust0 4px 14px rgba(170, 0, 255, 0.06)

Paars · hover0 10px 24px rgba(170, 0, 255, 0.11), 0 3px 8px rgba(170, 0, 255, 0.05)

Transformhover: translateY(-2px)

Transitiontransform .18s, box-shadow .18s

Radius12px

.kpi {
  border-radius: 12px;
  transition: transform .18s, box-shadow .18s;
}
.kpi:hover { transform: translateY(-2px); }

.kpi--blue   { box-shadow: 0 4px 14px rgba(19, 80, 234, 0.06); }
.kpi--blue:hover {
  box-shadow: 0 10px 24px rgba(19, 80, 234, 0.11),
              0 3px 8px  rgba(19, 80, 234, 0.06);
}

.kpi--pink   { box-shadow: none; }
.kpi--pink:hover {
  box-shadow: 0 10px 24px rgba(230, 0, 126, 0.15),
              0 3px 8px  rgba(230, 0, 126, 0.07);
}

.kpi--purple { box-shadow: 0 4px 14px rgba(170, 0, 255, 0.06); }
.kpi--purple:hover {
  box-shadow: 0 10px 24px rgba(170, 0, 255, 0.11),
              0 3px 8px  rgba(170, 0, 255, 0.05);
}

8 · Schaduw — floating menu's

Context menus, dropdowns en popovers die boven de UI zweven. Drie gestapelde lagen geven een zeer diffuus, ver uitwaaierend effect (tot 67px verticale spread) met een grijsblauwe tint. Border-radius blijft klein (4px) — dit zijn functionele menu's, geen cards.

Laag 10 7px 16px rgba(199, 202, 220, 0.10)

Laag 20 30px 30px rgba(199, 202, 220, 0.09)

Laag 30 67px 40px rgba(199, 202, 220, 0.05)

Radius4px

.menu-floating {
  background: var(--surface);
  border-radius: 4px;
  box-shadow:
    0 7px 16px  rgba(199, 202, 220, 0.10),
    0 30px 30px rgba(199, 202, 220, 0.09),
    0 67px 40px rgba(199, 202, 220, 0.05);
}

9 · Gebruik in code

Gebruik altijd de CSS-variabelen, nooit hardcoded hex. Zo blijft theming centraal.

.my-card {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-700);
}

.my-card__title { color: var(--ink-900); }
.my-card__link  { color: var(--accent-blue); }
.my-card__total { color: var(--accent-blue); font-weight: 700; }

Kleuren & kleurgebruik