3.0 KiB
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-motionreduceert 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.