Desktop Headings
Heading H1 - Desktop
Heading H2 - Desktop
Heading H3 - Desktop
Heading H4 - Desktop
Heading H5 - Desktop
Heading H6 - Desktop
Mobile Headings
Heading H1 - Mobile
Heading H2 - Mobile
Heading H3 - Mobile
Heading H4 - Mobile
Heading H5 - Mobile
Heading H6 - Mobile
Additional Information
This column can contain additional typography examples or metadata.
Example Paragraph - Large
Example Paragraph - Medium
This is a large paragraph. It uses the "paragraph-large" class.
This is a medium paragraph. It uses the "paragraph-medium" class.
This is a small paragraph. It uses the "paragraph-small" class.
Label Large
Label Medium
Label Small
Label XSmall
Full Color Palette
Neutral 50
.neutral-50 #f9fafb
Neutral 100
.neutral-100 #f3f4f6
Neutral 200
.neutral-200 #e5e7eb
Neutral 300
.neutral-300 #d1d5db
Neutral 400
.neutral-400 #9ca3af
Neutral 500
.neutral-500 #6b7280
Neutral 600
.neutral-600 #4b5563
Neutral 700
.neutral-700 #374151
Neutral 800
.neutral-800 #1f2937
Neutral 900
.neutral-900 #111827
Primary navy 50
.primary-navy-50 #E6E9EB
Primary navy 100
.primary-navy-100 #CED2D6
Primary navy 200
.primary-navy-200 #9CA5AE
Primary navy 300
.primary-navy-300 #6B7280
Primary navy 400
.primary-navy-400 #394C5D
Primary navy 500
.primary-navy-500 #081F34
Primary navy 600
.primary-navy-600 #06192A
Primary navy 700
.primary-navy-700 #05131F
Primary navy 800
.primary-navy-800 #030C15
Primary navy 900
.primary-navy-900 #02060A
Aqua 50
.aqua-50 #eef2ff
Aqua 100
.aqua-100 #e0e7ff
Aqua 200
.aqua-200 #c7d2fe
Aqua 300
.aqua-300 #a5b4fc
Aqua 400
.aqua-400 #818cf8
Aqua 500
.aqua-500 #00E0FF
Aqua 600
.aqua-600 #4f46e5
Aqua 700
.aqua-700 #4338ca
Aqua 800
.aqua-800 #3730a3
Aqua 900
.aqua-900 #312e81
Mitsloan primary 500
.mitsloan-primary-500 #EF4444
Success 50
.success-50 #F0FDF4
Success 100
.success-100 #DCFCE7
Success 200
.success-200 #BBF7D0
Success 300
.success-300 #86EFAC
Success 400
.success-400 #4ADE80
Success 500
.success-500 #22C55E
Success 600
.success-600 #16A34A
Success 700
.success-700 #15803D
Success 800
.success-800 #166534
Success 900
.success-900 #14532D
Warning 50
.warning-50 #FFFBEB
Warning 100
.warning-100 #FEF3C7
Warning 200
.warning-200 #FDE68A
Warning 300
.warning-300 #FCD34D
Warning 400
.warning-400 #FBBF24
Warning 500
.warning-500 #F59E0B
Warning 600
.warning-600 #D97706
Warning 700
.warning-700 #B45309
Warning 800
.warning-800 #92400E
Warning 900
.warning-900 #78350F
Destructive 50
.destructive-50 #FEF2F2
Destructive 100
.destructive-100 #FEE2E2
Destructive 200
.destructive-200 #FECACA
Destructive 300
.destructive-300 #F87171
Destructive 400
.destructive-400 #EF4444
Destructive 500
.destructive-500 #EF4444
Destructive 600
.destructive-600 #DC2626
Destructive 700
.destructive-700 #B91C1C
Destructive 800
.destructive-800 #991B1B
Destructive 900
.destructive-900 #7F1D1D
White
.white #FFFFFF
Black
.black #000000
Light background
.light-background #f8fcff
Beige
.beige #CEB78A
New purple
.new-purple #403393
Classic blue 500
.classic-blue-500 #005B9C
Classic blue dark
.classic-blue-dark #007DD6
Slate 50
.slate-50 #f8fafc
Slate 100
.slate-100 #f1f5f9
Slate 200
.slate-200 #e2e8f0
Slate 300
.slate-300 #cbd5e1
Slate 400
.slate-400 #94a3b8
Slate 500
.slate-500 #64748b
Slate 600
.slate-600 #475569
Slate 700
.slate-700 #334155
Slate 800
.slate-800 #1e293b
Slate 900
.slate-900 #0f172a
Gray 50
.gray-50 #fafafa
Gray 100
.gray-100 #f5f5f5
Gray 200
.gray-200 #e5e5e5
Gray 300
.gray-300 #d4d4d4
Gray 400
.gray-400 #a3a3a3
Gray 500
.gray-500 #71717a
Gray 600
.gray-600 #525252
Gray 700
.gray-700 #404040
Gray 800
.gray-800 #262626
Gray 900
.gray-900 #171717
Zinc 50
.zinc-50 #fafafa
Zinc 100
.zinc-100 #f4f4f5
Zinc 200
.zinc-200 #e4e4e7
Zinc 300
.zinc-300 #d4d4d8
Zinc 400
.zinc-400 #a1a1aa
Zinc 500
.zinc-500 #71717a
Zinc 600
.zinc-600 #52525b
Zinc 700
.zinc-700 #3f3f46
Zinc 800
.zinc-800 #27272a
Zinc 900
.zinc-900 #18181b
Stone 50
.stone-50 #fafaf9
Stone 100
.stone-100 #f5f5f4
Stone 200
.stone-200 #e7e5e4
Stone 300
.stone-300 #d6d3d1
Stone 400
.stone-400 #a8a29e
Stone 500
.stone-500 #78716c
Stone 600
.stone-600 #4b5563
Stone 700
.stone-700 #44403c
Stone 800
.stone-800 #292524
Stone 900
.stone-900 #1c1917
Teal 50
.teal-50 #f0fdfa
Teal 100
.teal-100 #ccfbf1
Teal 200
.teal-200 #99f6e4
Teal 300
.teal-300 #5eead4
Teal 400
.teal-400 #2dd4bf
Teal 500
.teal-500 #14b8a6
Teal 600
.teal-600 #0d9488
Teal 700
.teal-700 #0f766e
Teal 800
.teal-800 #115e59
Teal 900
.teal-900 #134e4a
Emerald 50
.emerald-50 #ecfdf5
Emerald 100
.emerald-100 #d1fae5
Emerald 200
.emerald-200 #a7f3d0
Emerald 300
.emerald-300 #6ee7b7
Emerald 400
.emerald-400 #34d399
Emerald 500
.emerald-500 #10b981
Emerald 600
.emerald-600 #059669
Emerald 700
.emerald-700 #047857
Emerald 800
.emerald-800 #065f46
Emerald 900
.emerald-900 #064e3b
Lime 50
.lime-50 #f7fee7
Lime 100
.lime-100 #ecfccb
Lime 200
.lime-200 #d9f99d
Lime 300
.lime-300 #bef264
Lime 400
.lime-400 #a3e635
Lime 500
.lime-500 #84cc16
Lime 600
.lime-600 #65a30d
Lime 700
.lime-700 #4d7c0f
Lime 800
.lime-800 #3f6212
Lime 900
.lime-900 #365314
Cyan 50
.cyan-50 #ecfeff
Cyan 100
.cyan-100 #cffafe
Cyan 200
.cyan-200 #a5f3fc
Cyan 300
.cyan-300 #67e8f9
Cyan 400
.cyan-400 #22d3ee
Cyan 500
.cyan-500 #06b6d4
Cyan 600
.cyan-600 #0891b2
Cyan 700
.cyan-700 #0e7490
Cyan 800
.cyan-800 #155e75
Cyan 900
.cyan-900 #164e63
Sky 50
.sky-50 #f0f9ff
Sky 100
.sky-100 #e0f2fe
Sky 200
.sky-200 #bae6fd
Sky 300
.sky-300 #7dd3fc
Sky 400
.sky-400 #38bdf8
Sky 500
.sky-500 #0ea5e9
Sky 600
.sky-600 #0284c7
Sky 700
.sky-700 #B45309
Sky 800
.sky-800 #075985
Sky 900
.sky-900 #0c4a6e
Violet 50
.violet-50 #f7fee7
Violet 100
.violet-100 #ede9fe
Violet 200
.violet-200 #ddd6fe
Violet 300
.violet-300 #c4b5fd
Violet 400
.violet-400 #a78bfa
Violet 500
.violet-500 #8b5cf6
Violet 600
.violet-600 #7c3aed
Violet 700
.violet-700 #6d28d9
Violet 800
.violet-800 #5b21b6
Violet 900
.violet-900 #4c1d95
Fuchsia 50
.fuchsia-50 #f7fee7
Fuchsia 100
.fuchsia-100 #fae8ff
Fuchsia 200
.fuchsia-200 #f5d0fe
Fuchsia 300
.fuchsia-300 #f0abfc
Fuchsia 400
.fuchsia-400 #e879f9
Fuchsia 500
.fuchsia-500 #d946ef
Fuchsia 600
.fuchsia-600 #c026d3
Fuchsia 700
.fuchsia-700 #a21caf
Fuchsia 800
.fuchsia-800 #86198f
Fuchsia 900
.fuchsia-900 #701a75
Pink 50
.pink-50 #fdf2f8
Pink 100
.pink-100 #fce7f3
Pink 200
.pink-200 #fbcfe8
Pink 300
.pink-300 #f9a8d4
Pink 400
.pink-400 #f472b6
Pink 500
.pink-500 #ec4899
Pink 600
.pink-600 #db2777
Pink 700
.pink-700 #be185d
Pink 800
.pink-800 #9d174d
Pink 900
.pink-900 #831843
Rose 50
.rose-50 #fff1f2
Rose 100
.rose-100 #ffe4e6
Rose 200
.rose-200 #fecdd3
Rose 300
.rose-300 #fda4af
Rose 400
.rose-400 #fb7185
Rose 500
.rose-500 #f43f5e
Rose 600
.rose-600 #e11d48
Rose 700
.rose-700 #be123c
Rose 800
.rose-800 #9f1239
Rose 900
.rose-900 #881337
Spacing System (4px Scale)
| Name | Size |
|---|---|
| Spacing 4 | 1rem |
| Spacing 8 | 2rem |
| Spacing 12 | 3rem |
| Spacing 16 | 4rem |
| Spacing 20 | 5rem |
| Spacing 24 | 6rem |
| Spacing 32 | 8rem |
| Spacing 40 | 10rem |
| Spacing 48 | 12rem |