Diff

Ory vs Midjourney

82 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #06051d

Text

#0f1729 → #ffffff

Brand

#0f172a → #9061f9

Border

#e2e8f0 → #00000099

Display font

Inter → JetBrains Mono

Body size

16px → 14px

colors 70 changed

~ bg #ffffff → #06051d

~ surface #ffffff → #2d0e36

~ surface-soft #f8fafc → #314062

~ text #0f1729 → #ffffff

~ text-strong #020617 → #ffffff

~ text-body #1e293b → #ebf8ff

~ text-muted #475569 → #9ca0ad

~ text-soft #64748b → #ebf8ff

~ text-faint #94a3b8 → #5a5d6c

~ brand #0f172a → #9061f9

~ brand-deep #020617 → #5b21b6

~ brand-soft #1e293b → #3b2566

~ link #0066ff → #9061f9

~ link-hover #0052cc → #a78bfa

~ link-visited #5e2a8c → #7c3aed

~ accent-cyan #06b6d4 → #22d3ee

~ accent-emerald #10b981 → #16a394

~ border #e2e8f0 → #00000099

~ border-strong #cbd5e1 → #ffffff1f

~ success #059669 → #16a394

~ success-bg #ecfdf5 → #0e2a26

~ warning #d97706 → #f5a524

~ warning-bg #fffbeb → #2e2010

~ danger #dc2626 → #fc2c83

~ danger-bg #fef2f2 → #2c0a1a

~ info #0066ff → #63b3ed

+ bg-alt #0f1c36

+ accent-rose #fc2c83

+ accent-amber #f5a524

+ accent-sky #63b3ed

+ accent-magenta #d946ef

+ selected #3b2566

+ disabled #3a3d4a

+ neutral-50 #f8f8fb

+ neutral-100 #ebecf0

+ neutral-300 #9ca0ad

+ neutral-500 #5a5d6c

+ neutral-700 #2e3038

+ neutral-900 #161827

+ surface-deep #28172e

+ surface-raised #3a1c44

+ border-subtle #ffffff0a

+ shadow-ambient rgba(6,5,29,0.4)

+ shadow-violet rgba(144,97,249,0.25)

+ shadow-deep rgba(0,0,0,0.6)

+ success-text #5eead4

+ warning-text #fcd34d

+ danger-text #fda4af

+ info-bg #0f1f33

+ info-text #93c5fd

− bg-soft #f8fafc

− bg-section #f1f5f9

− bg-section-strong #e2e8f0

− bg-dark #0f172a

− bg-dark-deeper #020617

− surface-strong #f1f5f9

− surface-dark #1d283a

− surface-darker #0f172a

− text-on-dark #ffffff

− brand-light #1d283a

− accent-violet #6366f1

− on-dark #ffffff

− on-light #0f1729

− border-soft #f1f5f9

− border-input #cbd5e1

− border-dark rgba(255,255,255,0.10)

− scrim rgba(15,23,42,0.48)

− shadow-card rgba(15,23,42,0.04)

− shadow-elev rgba(15,23,42,0.08)

− shadow-modal rgba(15,23,42,0.16)

typography 5 changed

~ display {"family":"Inter","size":72} → {"family":"JetBrains Mono","size":48}

~ h1 {"family":"Inter","size":48} → {"family":"JetBrains Mono","size":30}

~ h2 {"family":"Inter","size":30} → {"family":"JetBrains Mono","size":24}

~ body {"family":"Inter","size":16} → {"family":"DM Sans","size":14}

~ label {"family":"JetBrains Mono","size":13} → {"family":"JetBrains Mono","size":11}

radius 2 changed

~ button 6px → 8px

~ pill 999px → 9999px

spacing 5 changed

~ xs 4px → 2px

~ sm 8px → 4px

~ md 16px → 8px

~ lg 32px → 20px

~ xl 48px → 32px

↻ Swap direction · Midjourney → Ory