White and cream, editorial, precise, with a single moss-green thread. Every component reads its colours from tokens in globals.css, in both themes. Feature sections are added to the registry.
The logomark, string-art waves, live counters and the status chip.
<Logomark /><Wordmark /><StringArtWaves variant='hero' /><Odometer value={1284} chip /><StatusChip tone='ok' /><TwoToneHeading claim rest />Applicability decisions, confidence, fact states and source health (spec §9.2 and §9.7).
The text concerns this client: the profile’s facts meet the criteria of the cited obligations.
The text probably concerns this client; one fact or interpretation remains to be confirmed.
The text does not concern this client; the justification is kept for the auditor.
A profile fact is missing to conclude: a question is asked to the consultant.
<DecisionChip decision='may_apply' confidence={0.62} /><ConfidenceLine value={0.62} /><FactStateBadge source='inferred' /><HealthChip status='failed' />A cited passage, reproduced exactly as it appears in the stored text.
<LegalQuote reference='Art. 12'>…</LegalQuote><ContentBlock lang='ar'>…</ContentBlock>Display serif, Inter for the interface, mono for numbers and article references.
Read less. Miss nothing.
text-display · font-serifPage title
Section title
Card title
Nothing goes out without you. Every report is reviewed and approved by a consultant.
Inter 500, tracking −0.02emRunning text uses Inter 15/24 for summaries, with a comfortable measure of at most 68 characters.
[Mono eyebrow]
1,284 · 99.2% · v1.1
Register 13 px tabular — 12/09/2026 · Art. 4
Serif quote 15/23 in a cream block.
15/24 · mono 12/500 · 13 tabularSurfaces, ink, moss and semantics, in light and dark.
6 px fields, visible labels, translated errors.
useZodResolver(schema)2 px chips for states, mono for versions and counters.
<Badge variant='tint' /><StatusPill tone='success' pulse />12 px cream cards, hairline borders, no shadow; the Cabinet plan inline.
<Card />Nothing new from the 6 sources checked. The coverage statement is ready.
<EmptyState />Approved reports go out automatically on the planned date.
<PlanGate feature='autoSend' when />TanStack Table v8: search, facets, sorting, selection, pagination, a dense variant for registers.
| Exemple — texte fictif n° 100 | Order (arrêté) | Applicable | Compliant | 01/09/2026 | |
| Exemple — texte fictif n° 101 | Decree | To confirm | To assess | 02/09/2026 | |
| Exemple — texte fictif n° 102 | Law | Exempt | Non-compliant | 03/09/2026 | |
| Exemple — texte fictif n° 103 | Circular | Applicable | Compliant | 04/09/2026 | |
| Exemple — texte fictif n° 104 | Order (arrêté) | To confirm | To assess | 05/09/2026 | |
| Exemple — texte fictif n° 105 | Decree | Exempt | Non-compliant | 06/09/2026 | |
| Exemple — texte fictif n° 106 | Law | Applicable | Compliant | 07/09/2026 | |
| Exemple — texte fictif n° 107 | Circular | To confirm | To assess | 08/09/2026 |
Only floating elements get a soft shadow.
Skeletons in content; spinners only inside buttons.
<SkeletonCard /><SkeletonList rows={4} />Avatars, shortcuts, copy, relative time, file upload, periods, languages.
<AvatarGroup users={…} /><Kbd keys={['mod','K']} /><CopyButton /> <RelativeTime /><FileDropzone accept={acceptFor('text_document')} />iconsax, Bulk variant only.
import { Home2 } from 'iconsax-react'Client health, fact states (declared, inferred, confirmed), Yes / No / ? questions, sector template picker.
<HealthChips health={health} /><FactStateBadge source='inferred' /><CompletenessMeter value={64} />Does the Casablanca site store more than 500 L of flammable liquids?
<FactQuestionControl question={q} /><SectorTemplatePicker templates={…} value={key} />Source card (health, last 14 days, cadence), health chips, coverage statement, run log and incident banner.
Illustrative example: cadence, dates and counters are fictional.
<SourceHealthBadge status='failed' />MTEDD — Département du Développement durable
Legal texts (environmental assessment, pollution, waste, biodiversity) and discharge standards published by the department. The PDFs are usually extracts of the Bulletin officiel.
<SourceCard source actions />Institut marocain de normalisation (IMANOR)
New homologated Moroccan standards (NM) and draft standards under public inquiry — titles and abstracts only (standards are paid documents).
Page structure changed
health.reasons: structure_changed<SourceDays days />Started (scheduled check), publications since 29 Sept
Page read: Normes (valeurs limites air et eau) — 14 document links1.2 s
https://www.environnement.gov.ma/fr/lois-et-reglementations/normes1 new document found
Download refused by the site’s robots.txt: document flagged for manual upload
https://www.environnement.gov.ma/images/exemple.pdfPartly finished: 62 items listed, no new text8.4 s
<RunLog entries />2 sources covered out of 3 · 1 gap reported · 02/09/2026 → 02/10/2026
| Source | Checks | Latest | Texts | Coverage |
|---|---|---|---|---|
| Sustainable developmentMA | 4 checks2 Oct, 1 Oct, 30 Sept, 29 Sept | 02/10/2026 | 3 | Covered over the whole period |
| HealthMA | 2 checks2 Oct, 28 Sept | 02/10/2026 | 1 | Covered over the whole period |
| IMANORMA | 2 checks23 Sept, 22 Sept | 23/09/2026 | 0 | IMANOR could not be checked from 23 Sept to 2 Oct (9 days). |
<CoverageBlock coverage />Citation chips, passage viewer, cited summary, obligations with their exact quote, processing and relevance statuses.
<CitationChip chunkId chunk onOpen /><TextTypeLine textType externalRef country /><SummaryView sentences language chunks onOpenPassage /><ProcessingStatusChip status /><RelevanceChip isQse overridden />« Tout générateur de déchets dangereux doit désigner, parmi le personnel qu’il emploie une personne responsable chargée de la gestion des déchets dangereux, dénommée «responsable déchets». »
<LegalQuote reference />ART. 8. – Tout générateur de déchets dangereux doit désigner, parmi le personnel qu’il emploie une personne responsable chargée de la gestion des déchets dangereux, dénommée «responsable déchets».
<PassageViewer textId chunkId open onOpenChange /><Snippet value />Real examples, quoted word for word: décret n° 2-14-85 of 20 January 2015 on hazardous waste management (BO no. 6336, official translation edition).
Match card (decision, confidence, cited reasoning, question), bulk approval bar, impact editor and keyboard shortcuts.
Applies: 3 obligations met out of 3
Insufficient data: 1 obligation depends on an unknown fact
Le site Usine de Casablanca stocke-t-il plus de 500 L de liquides inflammables ?
<MatchCard match={m} />May apply: 1 obligation met out of 3
Karim B. (fictif)’s proposal: Applies
Le site dispose d’un poste de transformation : à confirmer lors de la visite.
<MatchCard capabilities={{ decide: false, prepare: true }} /><MatchRow match={m} /><BulkApproveBar count={3} /><ImpactFields value onChange /><KeyboardHints canDecide canPrepare /><RuleScopeLabel /> <RuleEffectBadge /> <LearnedBadge />Applicability, compliance and review chips, exemption row, register changes, overdue action.
<RegisterStatusChip status /><ComplianceChip status /><ReviewStateChip review />No installation concerned on the site (confirmed fact).
<ExemptionRow entry /><RegisterDiff clientId /><ActionStatusChip /> <DueCell />Report statuses, editable report item, delivery log, end-of-period progress.
<ReportStatusChip status /><MonthEndBar /><ReportItemEditor value lang onSave /><DeliveryLog deliveries />Plan seats, firm roles (owner, admin, consultant, junior, viewer) and the capability matrix from spec §2.2.
<RoleBadge role='consultant' /><SeatMeter seats={…} /><SeatMeter seats={…} />| Capability | Owner | Admin | Consultant | Junior consultant | Viewer |
|---|---|---|---|---|---|
| Billing, deleting the firm | |||||
| Members, roles, firm branding | |||||
| Sources configuration | |||||
| Approve matches and exemptions, send reports | |||||
| Manage rules and exemptions | |||||
| Create and edit clients, sites and profiles | |||||
| Prepare the review (summaries, proposals) | |||||
| Read texts, clients, registers and reports |
<RolesMatrix highlight='consultant' />Plan meters, Solo / Cabinet comparison, invoices and test-mode checkout (MAD).
<UsageMeters usage={usage} />paid · openstatus chipsSource status, demo banner, country choice, Arabic labels (right to left) and the deletion zone with typed confirmation. Fictional examples.
<SourcesStatusChip /> · <StatusChip tone>Private demonstration copy · erased in 2 hours · No email is sent from the demo.
Save to your account<DemoBannerView expiresAt saveHref />role=radiogroupdir='rtl' lang='ar'<SettingsCard tone='danger'>The components of the marketing site: announcement bar, mega-menu, live metric chip, waves, queue mock, keyboard decision stack, report preview, coverage promise.
<AnnouncementBar /><HeroMetricChip metric={{ kind: 'week', value }} /><SourcesStatusChip summary /><ReviewDemo /><SummariesArt /> · <MatchesArt /> · <RegisterArt /><Pipeline steps /><FirmTile firm /><StringArtWaves variant="band" />