OpenMined Design System

Style guide scaffold — tokens, typography, components.

Colors

Grayscale

50
100
150
200
300
400
500
550
600
700
750
800
850
900
950
1000

Gold

50
100
200
300
400
500
600
700
800
900
950

Orange

50
100
200
300
400
500
600
700
800
900
950

Red

50
100
200
300
400
500
600
700
800
900
950

Violet

50
100
200
300
400
500
600
700
800
900
950

Blue

50
100
200
300
400
500
600
700
800
900
950

Teal

50
100
200
300
400
500
600
700
800
900
950

Green

50
100
200
300
400
500
600
700
800
900
950

Lime

50
100
200
300
400
500
600
700
800
900
950

Yellow

50
100
200
300
400
500
600
700
800
900
950

Interactive States

default
hover
focus
active
disabled

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.

--gradient-gold-orange Gold → Orange
--gradient-orange-red Orange → Red
--gradient-red-violet Red → Violet
--gradient-violet-blue Violet → Blue
--gradient-teal-green Teal → Green
--gradient-green-lime Green → Lime
--gradient-lime-yellow Lime → Yellow

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

H1 · Rubik 400

The Quick Brown Fox

H2 · Rubik 400

The Quick Brown Fox

H3 · Rubik 400

The Quick Brown Fox

H4 · Rubik 400

The Quick Brown Fox

H5 · Inter 400
The Quick Brown Fox Jumps
H6 · Inter 400
The Quick Brown Fox Jumps Over
.text-subtitle · Inter 400 21px

The quick brown fox jumps over the lazy dog.

.text-eyebrow

Who It's For

Body · Inter 400 16px

The quick brown fox jumps over the lazy dog. Vivamus lacinia odio vitae vestibulum vestibulum lorem ipsum dolor sit amet.

Body 300 (light)

The quick brown fox jumps over the lazy dog. Vivamus lacinia odio vitae vestibulum vestibulum lorem ipsum dolor sit amet.

Body italic

The quick brown fox jumps over the lazy dog.

.text-caption · Inter 500 11px Caption — labels, metadata, timestamps, small print
.text-caption-error This field is required.

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.

Hover me
--transition-base 0.4s ease — buttons, links, icons, surfaces
Hover me
--transition-theme 0.4s ease — theme switch bg/color transitions

Buttons

Variants

Primary Outline

With Icon

As button element

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>

logo-github
logo-twitter
logo-linkedin
logo-youtube
arrow-forward-outline
arrow-back-outline
chevron-forward-outline
chevron-down-outline
close-outline
menu-outline
search-outline
moon-outline
sunny-outline
copy-outline
link-outline
open-outline
download-outline
checkmark-circle-outline
alert-circle-outline
information-circle-outline
lock-closed-outline
shield-checkmark-outline
eye-outline
layers-outline

Graphics

Diamond Embed (SDF WebGL)

Stream Embed (Gradient WebGL)

Logos

OpenMined Logo — full color Full color · light bg
OpenMined Logo — white on dark White · dark bg
OpenMined Logo — mono white Mono white · dark bg
OpenMined Logo — mono black Mono black · light bg