MLflow AI Gateway
Dark · Generated 18/04/2026 · mlflow.org · AI Platform
v1.0.0
Color Palette
Background Colors
Black
#000000
Dark Gray 2
#0D1117
Dark Gray
#0E1416
Dark Blue
#1A4A7A
White
#FFFFFF
Red 2
#EB1700
Blue 5
rgba(120,110,220,.06)
Text Colors
Light Purple
#E8D0F0
Light Blue
#D6DEEB
White 2
#F7F8F8
Light Purple 2
#C792EA
Cyan
#7FDBCA
Blue 2
#58A6FF
Fill & Gradient Colors (Blue Ramp)
Red
rgba(224,85,133,.2)
Purple
rgba(144,102,204,.25)
Blue
rgba(90,143,212,.2)
Dark Blue 4
#1A5A8A
Blue 3
#1A6A9A
Cyan 2
#1A7AAA
Cyan 3
#1A8ABA
Blue 10
#2A7AAA
No Border Colors Detected
MLflow's border system uses alpha-transparency of existing colors rather than discrete border color tokens. Borders are rendered as rgba() variants of the blue/purple fill palette rather than named tokens.
Typography
Base Font · system-ui
System UI
MLflow is an open source platform for the machine learning lifecycle, including experimentation, reproducibility, deployment, and a central model registry.
Light · 300 Regular · 400 Medium · 500 Bold · 700
Heading Font · DM Sans
DM Sans
Accelerate every stage of the ML lifecycle with MLflow's unified AI platform.
Regular · 400 Medium · 500 Bold · 700
Mono Font · ui-monospace / SFMono
ui-monospace
import mlflow
mlflow.set_experiment("ai-gateway")
with mlflow.start_run():
Regular · 400 Medium · 500
Code Font · SFMono-Regular
SFMono
GET /api/2.0/gateway/routes
POST /api/2.0/gateway/chat/completions
DELETE /api/2.0/gateway/routes/{name}
Regular · 400
AI Gateway
Display Hero · 52px · DM Sans Bold · line-height: 62.4px · tracking: −3%
MLflow AI Platform
Heading XL · 40px · DM Sans Bold · line-height: 48px
Manage AI Models at Scale
Heading Large · 24px · DM Sans Bold · line-height: 32px
Track experiments, package code into reproducible runs, and share and deploy models across your organization.
Body Large · 18px · Regular · line-height: 28px · tracking: −1%
MLflow's unified platform covers the full ML lifecycle from experimentation to production deployment.
Body Default · 16px · Regular · line-height: 26.4px
Model registered · Experiment #1247 · Run duration: 4m 23s
Body Small · 14px · Regular · line-height: 24px
mlflow.models.predict(model_uri="models:/gpt-4/1")
Caption / Code · 12px · Monospace · line-height: 20px · tracking: 0.14px
Line Heights
Tight
16px
Snug
17.5px
Normal
20px
Relaxed
20.88px
Loose
24px
LH-6
24.75px
LH-7
26.4px
LH-8
28px
LH-9
28.8px
LH-10
32px
LH-11
48px
LH-12
52px
LH-13
62.4px
Letter Spacing
AI Models
Tight
−3% · display, headings (DM Sans)
Experiment Tracking
Normal
−1% · body text, UI labels
Model Registry
Wide
0% · neutral, code contexts
import mlflow
Wider
+0.14px · monospace code
Spacing
Spacing Scale
Token scale — 1px → 177.453px (sub-pixel precision at large values)
1
6
8
10
12
14
16
20
24
32
40
48
64
80
114.6
120
128
144
177
Borders
Border Radii
SM
4px
MD
6px
LG
6.4px
XL
8px
2XL
10px
Full
12px
R7
16px
R8 (Pill)
1.68e+07px
Note: --radius-r8: 1.67772e+07px is a scientifically precise full-pill radius (2²⁴ px) — effectively identical to 9999px in practice. Used 9× for badges, pills, and tags.
Border Width
Hairline
1px · used 116×
MLflow uses a single hairline border width throughout. All borders rely on alpha-transparent blue/purple colors rather than named border color tokens — e.g. rgba(200,146,234,0.12) for subtle separators.
Shadow / Elevation
Shadow Tokens — Blue-tinted compound shadows
5 tokens — black ambient shadows + branded blue compound shadows for elevated surfaces
Small
--shadow-sm
rgba(0,0,0,.2) 8px 22px · cards, modals
Medium
--shadow-md
rgba(0,0,0,.22) 10px 25px · elevated panels
Large
--shadow-lg
rgba(26,74,122,.4) 15px −3px compound · branded blue elevation
XL
--shadow-xl
rgba(26,90,138,.4) compound · deeper blue elevation
Shadow 5
--shadow-shadow-5
rgba(26,106,154,.4) compound · lightest blue elevation
Z-Index
TokenValueUsage
--z-11Base content layer, default stacking
--z-210Navigation, sticky headers, floating UI
--z-320Modals, overlays, top-level dialogs
Breakpoints
📱
--breakpoint-xs
576px
Mobile threshold
📱
--breakpoint-sm
767px
Small tablet (upper edge)
📲
--breakpoint-md
768px
Tablet threshold
💻
--breakpoint-lg
996px
Desktop (lower edge)
💻
--breakpoint-xl
997px
Desktop threshold
🖥️
--breakpoint-2xl
1100px
Wide desktop
📺
--breakpoint-3xl
1440px
Ultra-wide / XL screens
Opacity
Opacity Tokens
3 tokens — unconventional values (8%, 11%, 33%)
--opacity-8
8% · subtle tints
--opacity-11
11% · mid tints
--opacity-33
33% · visible overlays
MLflow uses non-standard opacity values — 8%, 11%, and 33% — rather than the typical round numbers (10%, 20%, 50%). These are used alongside alpha-embedded color tokens to create the layered depth of the dark AI platform UI.
Accessibility — Contrast Ratios
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
Text TokenBackground TokenRatioRating
Light PurpleWhite1.43:1Fail
Light PurpleBlack14.71:1AAA
Light PurpleDark Gray13.02:1AAA
Light PurpleDark Gray 213.26:1AAA
Light BlueBlack15.51:1AAA
Light BlueDark Gray13.72:1AAA
Light BlueDark Gray 213.97:1AAA
White 2Black19.74:1AAA
White 2Dark Gray17.46:1AAA
Light Purple 2Black8.73:1AAA
Light Purple 2Dark Gray7.72:1AAA
Light Purple 2White2.41:1Fail
CyanBlack12.89:1AAA
CyanDark Gray 211.61:1AAA
CyanWhite1.63:1Fail
CSS Variables Reference
Colors — Background & Text
Black--color-black#000000
Dark Gray 2 (page bg)--color-dark-gray-2#0D1117
Dark Gray--color-dark-gray#0E1416
Dark Blue--color-dark-blue#1A4A7A
White--color-white#FFFFFF
Red 2--color-red-2#EB1700
Light Purple (primary text)--color-light-purple#E8D0F0
Light Blue (secondary text)--color-light-blue#D6DEEB
White 2--color-white-2#F7F8F8
Light Purple 2 (vivid)--color-light-purple-2#C792EA
Cyan--color-cyan#7FDBCA
Blue 2--color-blue-2#58A6FF
Colors — Fill & Gradient Ramp
Red (gradient)--color-redrgba(224,85,133,.2)
Purple (gradient)--color-purplergba(144,102,204,.25)
Blue (gradient)--color-bluergba(90,143,212,.2)
Dark Blue 4--color-dark-blue-4#1A5A8A
Blue 8--color-blue-8#2A5A8A
Blue 3--color-blue-3#1A6A9A
Blue 9--color-blue-9#2A6A9A
Cyan 2--color-cyan-2#1A7AAA
Blue 10--color-blue-10#2A7AAA
Cyan 3--color-cyan-3#1A8ABA
Dark Blue 2 (shadow)--color-dark-blue-2rgba(26,74,122,.4)
Dark Blue 3 (shadow)--color-dark-blue-3rgba(26,90,138,.4)
Blue 4 (shadow)--color-blue-4rgba(26,106,154,.4)
Typography
Base (system)--font-family-basesystem-ui
Headings--font-family-2DM Sans
Mono--font-family-3ui-monospace
Code--font-family-4SFMono-Regular
Light--font-weight-light300
Regular--font-weight-regular400
Medium--font-weight-medium500
Bold--font-weight-bold700
Caption--font-size-2xs12px
Body Small--font-size-xs14px
Body SM--font-size-sm14.4px
Body Base--font-size-base15px
Body Default--font-size-lg16px
Body Large--font-size-xl18px
Heading LG--font-size-2xl24px
Display XL--font-size-3xl40px
Display Hero--font-size-4xl52px
Tight--letter-spacing-tight−3%
Normal--letter-spacing-normal−1%
Wide--letter-spacing-wide0%
Wider (mono)--letter-spacing-wider+0.14px
Spacing, Borders, Motion & Layers
Space 1--space-11px
Space 2--space-26px
Space 3--space-38px
Space 5--space-512px
Space 8--space-816px
Space 12--space-1224px
Space 16--space-1632px
Space 20--space-2040px
Space 24--space-2448px
Space 32--space-3264px
Space 40--space-4080px
Space 48--space-48114.617px
Hairline--border-width-hairline1px
SM--radius-sm4px
XL--radius-xl8px
2XL--radius-2xl10px
R8 (mega pill)--radius-r81.68e+07px
Instant--duration-instant0.15s
Fast--duration-fast0.16s
Normal (primary)--duration-normal0.2s
Slow--duration-slow0.3s
Slower--duration-slower0.45s
8%--opacity-80.08
11%--opacity-110.11
33%--opacity-330.33
Base--z-11
Nav / Float--z-210
Modal / Overlay--z-320
XS--breakpoint-xs576px
SM--breakpoint-sm767px
MD--breakpoint-md768px
LG--breakpoint-lg996px
XL--breakpoint-xl997px
2XL--breakpoint-2xl1100px
3XL--breakpoint-3xl1440px
Design System Preview · MLflow AI Gateway (Dark) · Generated 18/04/2026