AcaciaFund

Design System

Live component library, following Atomic Design (Frost, 2016). Components are named by structure (card, badge, ring), never by content (aml-card). Canonical spec: docs/00-system-architecture/ui-ux-spec.md.

1 · Design Principles

Cognitive Load Management

Progressive disclosure, reduced split attention, worked examples (Sweller, 1988).

Trust Through Transparency

Provenance badges, sentence-level citations, SQI scores visible by default.

Progress Over Perfection

Streaks, mastery rings, SM-2 queues celebrate incremental learning.

Context-Agnostic Naming

Structure over content: card, badge, timeline.

2 · Atoms

Color Tokens

--color-accent
Accent · #4f46e5
--color-aml
Compliance · #ea580c
--color-markets
Markets · #16a34a
--color-data-engineering
Data · #6366f1
--color-text
Text · #1c1917
--color-text-muted
Text muted · #78716c
--color-bg
Background · #fafaf9
--color-surface
Surface · #ffffff
--color-border
Border · #e7e5e4

Typography

Fraunces — Display: "Invest in understanding, to build resilience."

Manrope — Body: Synthesis from 32+ authoritative sources, explained from first principles.

JetBrains Mono — n = 1,234 · p < 0.05 · R² = 0.87

Buttons — .btn modifiers

Badges — .badge-pill / .badge-outline / .badge-knowledge

Compliance Markets Data Verified Reference alias: KYC

Progress Ring — .progress-ring

72%
Driven by --ring-progress; used in mastery dashboards and cards.

3 · Molecules

Article Card — .card / .ghost-card

Compliance Transaction Monitoring Foundations Rule-based detection, SAR thresholds, and the regulatory stack behind CDD.
Markets Vpin Toxicity Modeling Volume-synchronized probability of informed trading, explained from first principles.

Filter Chips — .chip-bar / .chip-btn

Citation Export — .citation-export

Cite this synthesis
DOI: 10.48550/arXiv.2607.05307 ↗

4 · Organisms

Pillar Rail — .pillar-rail / .rail-card

Compliance57
55%
Markets73
68%

Extraction Table — Tier 5.2

VariableValueSupporting passage
Accuracy92.4%"The model reached an accuracy of 92.4% on the held-out set."
p-valuep < 0.05"The effect was significant across all strata."

5 · Tokens & Invariants

  • · Name components by structure (card, badge, ring) — never by content.
  • · Admin templates must extend admin/base.html; site templates extend layout.j2.
  • · Every UI change must map to a component in docs/00-system-architecture/ui-ux-spec.md.
  • · Motion tokens, density modes, and focus mode live in static/css/design-system.css.