Brand Guidelines
Official logos, colors, typography, and design tokens for the OpenMined brand. Everything you need to represent OpenMined consistently.
Logo
Our logo comes in horizontal, stacked, and icon-only layouts across multiple color variants. Always use the provided SVG files.
Full Color
Horizontal
Dark Background
Horizontal
Ghost
Horizontal
Mono White
Horizontal
Full Color
Stacked
Dark Background
Stacked
Ghost
Stacked
Mono White
Stacked
Icon / Mark
Symbol only
Colors
Our palette includes 11 color families. Click any swatch to copy its hex code.
Grayscale
00#ffffff
50#fcfcfd
100#f7f6f9
150#f4f3f6
200#f1f0f4
300#ecebef
400#cfcdd6
500#b4b0bf
550#868394
600#5e5a72
700#464257
750#353243
800#2e2b3b
850#272532
900#23202c
950#17161d
1000#000000
Gold
50#fef9f0
100#fef2e2
200#fce5c5
300#fbdaac
400#f9cd8f
500#f8c073
600#f5a22e
700#d17e0a
800#885207
900#442903
950#221502
Orange
50#fef5f0
100#feece2
200#fcd5c0
300#fac1a3
400#f9ab81
500#f79763
600#f46a20
700#c74c0a
800#833207
900#441a03
950#220d02
Red
50#faf0f2
100#f5e0e5
200#ebc2ca
300#e0a3b0
400#d68595
500#cc677b
600#b73d56
700#8a2e40
800#5c1f2b
900#2e0f15
950#17080b
Violet
50#f4f0f4
100#e9e1ea
200#d5c7d6
300#bea9c1
400#a88bac
500#937098
600#76587a
700#59425c
800#3c2d3e
900#1d151e
950#0e0b0f
Blue
50#eef0f6
100#e1e4ef
200#c3c8df
300#a6adcf
400#8892bf
500#6976ae
600#4f5b92
700#3b446d
800#272d49
900#141724
950#090a11
Teal
50#ecf5f9
100#ddeef3
200#badde8
300#98cbdc
400#75bad1
500#52a8c5
600#388ca8
700#2a697e
800#1c4654
900#0e232a
950#061013
Green
50#ecf8f6
100#def2ee
200#b9e4dc
300#97d8cb
400#76cbba
500#53bea9
600#3c9f8b
700#2d7668
800#1d4e44
900#0f2924
950#071310
Lime
50#f4faf4
100#eaf6ea
200#d5ecd4
300#c0e3bf
400#aadaaa
500#96d195
600#64bb62
700#429541
800#2c642b
900#163216
950#0b190b
Yellow
50#fdfaf1
100#fcf7e8
200#faf0d1
300#f7e8ba
400#f5e0a3
500#f2d98c
600#eac248
700#cea017
800#896b10
900#453508
950#201904
Gradients
Gold → Orange
linear-gradient(67deg, #F8C073 0%, #F79763 99.29%)
Orange → Red
linear-gradient(67deg, #F79763 0%, #CC677B 99.29%)
Red → Violet
linear-gradient(67deg, #CC677B 0%, #6976AE 99.29%)
Violet → Blue
linear-gradient(67deg, #6976AE 0%, #52A8C5 99.29%)
Teal → Green
linear-gradient(67deg, #52A8C5 0%, #53BEA9 99.29%)
Green → Lime
linear-gradient(67deg, #53BEA9 0%, #96D195 99.29%)
Lime → Yellow
linear-gradient(67deg, #96D195 0%, #F2D98C 99.29%)
Typography
Rubik is our heading typeface for H1–H4. Inter handles everything else — headlines, body copy, subtitles, captions, and footnotes.
H1
Rubik · 61 / 73.2
Bold
Regular
H2
Rubik · 47 / 56.4
Bold
Regular
H3
Rubik · 36 / 43.2
Bold
Regular
H4
Rubik · 27 / 32.4
Bold
Regular
Headline
Inter · 21 / 25.2
Bold
Regular
Light
Body
Inter · 16 / 24
Bold
Medium
Regular
Light
Subtitle
Inter · 12 / 16.5
Bold
Medium
Regular
Caption
Inter · 11 / 16.3
Bold
Regular
Footnote
Inter · uppercase
Bold · 10px
Regular · 14px
Rubik
Weights used
Regular 400
Aa Bb Cc Dd Ee
Semibold 600
Aa Bb Cc Dd Ee
Inter
Weights used
Light 300
Aa Bb Cc Dd Ee
Regular 400
Aa Bb Cc Dd Ee
Medium 500
Aa Bb Cc Dd Ee
Semibold 600
Aa Bb Cc Dd Ee
Bold 700
Aa Bb Cc Dd Ee
Monospace
Code sample
import syft as sy
domain = sy.login(email="admin@openmined.org")
domain = sy.login(email="admin@openmined.org")
UI Elements
Core interactive components, spacing scale, and border radii drawn from our design tokens.
Buttons
Border Radius
XS
2px
S
6px
M
8px
L
16px
XL
32px
Full
999px
Spacing Scale
Guidelines
Follow these rules to ensure consistency when using the OpenMined brand.
Do
- Use the provided SVG logo files at all times
- Maintain sufficient clear space around the logo
- Use the dark-background variant on dark surfaces
- Use the mono-black variant when color is unavailable
- Use Rubik for headings (H1–H4) and Inter for body text
- Reference design tokens for consistent colors and spacing
Don't
- Stretch, rotate, or distort the logo
- Change the logo colors or add effects
- Place the full-color logo on busy backgrounds
- Recreate the logo with different fonts
- Use low-resolution raster versions of the logo
- Mix brand colors arbitrarily outside the token system
Surface Modes
Light
Surface / Background / Default
Grayscale / 50
Surface / Background / Bright
Grayscale / 00
Surface / Background / Dim
Grayscale / 150
Surface / Foreground / Lowest
Grayscale / 100
Surface / Foreground / Low
Grayscale / 200
Surface / Foreground / Default
Grayscale / 300
Surface / Foreground / High
Grayscale / 400
Surface / Foreground / Highest
Grayscale / 500
Dark
Surface / Background / Default
Grayscale / 800
Surface / Background / Bright
Grayscale / 700
Surface / Background / Dim
Grayscale / 950
Surface / Foreground / Lowest
Grayscale / 900
Surface / Foreground / Low
Grayscale / 850
Surface / Foreground / Default
Grayscale / 750
Surface / Foreground / High
Grayscale / 700
Surface / Foreground / Highest
Grayscale / 600