OpenMined Design System
Style guide scaffold — tokens, typography, components.
Colors
Grayscale
Gold
Orange
Red
Violet
Blue
Teal
Green
Lime
Yellow
Interactive States
Text Tokens
--text-headline --text-body --text-subtle --text-headline-light --text-body-light --text-interactive-default --text-interactive-hover --text-interactive-active Gradients
7 directional gradients at 67° per brand spec. No "full" or "blue-teal" tokens exist.
Surfaces
Semantic (theme-responsive)
--surface-background-default Background Default --surface-background-bright Background Bright --surface-background-dim Background Dim --surface-foreground-lowest Foreground Lowest --surface-foreground-low Foreground Low --surface-foreground-default Foreground Default --surface-foreground-high Foreground High --surface-foreground-highest Foreground Highest Static Dark Tokens (always-dark sections)
--dark-surface-background-default Dark Bg Default --dark-surface-background-bright Dark Bg Bright --dark-surface-foreground-lowest Dark Fg Lowest --dark-surface-foreground-low Dark Fg Low --dark-surface-foreground-default Dark Fg Default --dark-surface-foreground-high Dark Fg High --dark-surface-foreground-highest Dark Fg Highest Typography
Page Scale — Headings & Body
The Quick Brown Fox
The Quick Brown Fox
The Quick Brown Fox
The Quick Brown Fox
The Quick Brown Fox Jumps
The Quick Brown Fox Jumps Over
The quick brown fox jumps over the lazy dog.
Who It's For
The quick brown fox jumps over the lazy dog. Vivamus lacinia odio vitae vestibulum vestibulum lorem ipsum dolor sit amet.
The quick brown fox jumps over the lazy dog. Vivamus lacinia odio vitae vestibulum vestibulum lorem ipsum dolor sit amet.
The quick brown fox jumps over the lazy dog.
Article Scale
Long-form reading context. Rendered inside .article-single__content.
Federated Learning and the Future of Collaborative AI
Privacy-preserving machine learning has emerged as one of the defining challenges of the AI era. As organizations accumulate vast stores of sensitive data — medical records, financial transactions, behavioral signals — the traditional approach of centralizing that data for model training becomes untenable both legally and ethically.
Federated learning inverts the paradigm: instead of bringing data to the model, we bring the model to the data. Each participant trains locally, shares only gradient updates, and never exposes raw records.
Why Centralization Fails
The costs of centralized training are not merely regulatory. Moving petabytes of sensitive data introduces exfiltration risk at every step — in transit, at rest, and in the hands of whoever operates the central silo. A breach at the aggregation point can compromise every contributing institution simultaneously.
Differential privacy adds a second line of defense: calibrated noise injected into gradient updates ensures that no individual training example can be reverse-engineered from the published model weights, even by an adversary with full access to the final checkpoint.
Gradient Compression
Modern federated systems combine gradient sparsification with quantization to reduce communication overhead by several orders of magnitude, making participation viable over commodity bandwidth. The tradeoff between compression ratio and convergence speed remains an active area of research.
Aggregation Protocols
Secure aggregation uses cryptographic masking so the central coordinator sees only the sum of participant gradients — never any individual update. Combined with differential privacy, this provides composable privacy guarantees.
Implementation Considerations
Practical deployments must account for client dropout, non-IID data distributions, and adversarial participants who may submit poisoned gradients. Robust aggregation rules such as Krum and coordinate-wise median provide tolerance against a bounded fraction of Byzantine participants.
Spacing
10 defined steps. --spacing-6XL and --spacing-7XL are not in the token system.
--spacing-XS XS --spacing-S S --spacing-M M --spacing-L L --spacing-XL XL --spacing-2XL 2XL --spacing-3XL 3XL --spacing-4XL 4XL --spacing-5XL 5XL --spacing-full Full Border Radius
--border-radius-XS XS --border-radius-S S --border-radius-M M --border-radius-L L --border-radius-XL XL --border-radius-full Full Shadows
--shadow-sm sm --shadow-md md --shadow-lg lg Transitions
3 tokens. No --transition-slow exists. base and theme share 0.4s — the normalized value per Decision #8b. Hover each box to preview.
--transition-base 0.4s ease — buttons, links, icons, surfaces --transition-theme 0.4s ease — theme switch bg/color transitions Buttons
Variants
With Icon
As button element
Links
The three-state underline animation (in → out → in-green) is shared by bare a:not([class]), .link-inline, and .animated-line.
Nav variant wraps .animated-line for navigation contexts. Subtle is a distinct style.
a (global style) Visit the OpenMined documentation to get started.
.animated-line (utility) Forms
[ HubSpot Form Embed — stub placeholder ]
HubSpot script injection renders here. Styles defined in a later phase.
Icons
Ionicons web components via CDN. Usage: <ion-icon name="arrow-forward-outline"></ion-icon>