Initial curated RAGcore source from c16667f0c9397e2bfc8dd0255b114fba23c8d05e

docs/08_UI/DESIGN_SYSTEM.md

@@ -0,0 +1,54 @@
+# Design System
+
+## Visuele richting
+
+Professionele donkere beheerinterface met hoge informatiedichtheid zonder rommel. Neutrale oppervlakken, één primaire accentkleur, duidelijke typografische hiërarchie en consistente spacingtokens.
+
+## Componenten
+
+App shell, breadcrumb, page header, status badge, operation journey, metric card, data table, filter bar, form field, tabs, timeline, code block, citation card, confirmation dialog, toast en inline problem panel.
+
+## Tokens
+
+Gebruik CSS custom properties voor color, spacing, radius, shadow, typography en focus ring. Geen willekeurige inlinewaarden. Statuskleuren hebben tekst/iconen en geteste contrastverhoudingen.
+
+De producttokens staan in `static/admin.css` onder `:root`. De primaire
+accentkleur is warm amber op een diepe blauwzwarte basis; groen, rood en blauw
+blijven uitsluitend semantische statuskleuren. Panelen gebruiken een zichtbare
+rand en oppervlaktetint in plaats van overvloedige drop shadows. Gewone tekst
+blijft minimaal 13–14 px; 10–12 px is alleen voor korte labels en metadata.
+Iedere statusbadge combineert zijn tekst met een onderscheidend symbool
+(check, waarschuwing, fout, info of pending); kleur is nooit de enige drager.
+De operation journey gebruikt iconen en pijlen als compacte oriëntatie, maar
+blijft een semantisch gelabelde `nav` met echte links.
+
+## Productidentiteit en shell
+
+Het RAGCore-beeldmerk is een lokale inline SVG: begrenzende haken rond vier
+verbonden evidencepunten. Daardoor blijft het scherp zonder extern asset en
+herkenbaar in login en navigatie. De login koppelt de merkbelofte aan drie echte
+capabilities: governed sources, dense+sparse retrieval en cited answers.
+
+De desktop-shell houdt de gegroepeerde navigatie zichtbaar vanaf 1024 px.
+Tablet en mobiel gebruiken een focus-begrensde drawer met Escape-herstel; zo
+blijft op 768 px voldoende ruimte over voor inhoud. De topbar toont paginacontext,
+deployment environment en de vaste local-first architectuurrichting, geen
+verzonnen live status.
+
+## Responsive gedrag
+
+- 1024 px en breder: vaste zijbalk; dashboardflow vier of twee kolommen.
+- 768–1023 px: navigatiedrawer; inhoud over de volledige viewport.
+- 375–767 px: acties stapelen, metriekkaarten worden één kolom en de
+  source-to-answerflow wordt een verticale route.
+- Dichte Sources-, Documents- en Jobs-tabellen worden onder 768 px semantische
+  recordkaarten. Iedere cel herhaalt haar kolomlabel; filters worden één kolom
+  en gebruiken de volledige breedte. Op desktop blijft de tabelweergave intact.
+- De publieke login toont op tablet/mobiel eerst de SSO-actie en daarna de
+  productuitleg; de DOM- en focusvolgorde blijft logisch omdat de uitleg geen
+  interactieve elementen bevat.
+- `prefers-reduced-motion` reduceert alle animaties en transities tot één frame.
+
+## Query Lab
+
+Split view: links query/config; rechts resultaten. Tabs voor final, candidates, context, prompt en trace. Iedere kandidaat toont bron, space, scores, filters, location en inclusion/exclusion reason.