DesignMD
Remix
Discover

spectr.pm vs Spline

Two design systems side by side, measured from the live sites — colour, type, shape, depth, components, states and responsive behaviour.

spectr.pm: Spectr - AI Product Ops: Meetings to PRDs, Specs & Stories · Above the fold
spectr.pm
spectr.pm· read 2026-10-14
Spline: Spline - 3D Design tool in the browser with real-time collaboration · Above the fold
Spline
spline.design· read 2026-11-03

Ground and ink

Each side painted in its own measured canvas, ink, muted and primary roles.

spectr.pm

Heading on canvas

Body copy in the measured muted role.

Primary action
18.6:1 ink on canvas

Spline

Heading on canvas

Body copy in the measured muted role.

Primary action
21:1 ink on canvas

Palette

Named roles first, then every colour measured without one.

spectr.pm

  • canvas#0D0D0D
  • surface#171717
  • ink#FAFAFA
  • hairline#2E2E2E
  • primary#894DEF
  • on-primary#FAFAFA

10 more, no measured role

Spline

  • canvas#000000
  • surface#101010
  • ink#FFFFFF
  • muted#8A8A8A
  • hairline#1E1E1E
  • primary#EEEEEE
  • on-primary#000000

6 more, no measured role

Type scale

Set at the measured size, weight, tracking and leading. Brand typefaces are not loaded, so the metrics are real and the letterforms are not.

spectr.pm

hero-display

288px · 900 · shown smaller

display

280px · 900 · shown smaller

display

252px · 900 · shown smaller

display

200px · 900 · shown smaller

display

132px · 800 · shown smaller

display

99px · 600 · shown smaller

h2

92px · 800 · shown smaller

Spline

h1

64px · 450 · shown smaller

h2

56px · 450 · shown smaller

h1

48px · 450 · shown smaller

display

48px · 450 · shown smaller

display

48px · 400 · shown smaller

h1

48px · 450 · shown smaller

h2

28px · 450

Corners

Drawn at the measured radii.

spectr.pm

0px

Spline

0px

pill

16px

8px

10px

12px

Spacing

One shared scale across both sides, so the bars are directly comparable.

spectr.pm

4
8
12
16
24
28
32
40

Spline

4
8
12
16
20
24
28
32

Depth

Shadows cast on each side's own ground.

spectr.pm

sm

Spline

No shadows measured.

Buttons

Rendered from the measured computed styles.

spectr.pm

primaryfilledprimary-smtext

Spline

primaryprimary-lgsecondarysecondary-lg

The measured values behind the panels above.

spectr.pmSpline

At a glance

GroundDarkDark
Corners — these differSharpPill
Display size — these differ288px64px
Spacing base4px4px
Accent colours — these differ84
Type families — these differ23
Ink on canvas — these differ18.6:121.0:1
Components — these differ1112

Colour roles

primary — these differ#894DEF#EEEEEE
accent—#D97757
canvas — these differ#0D0D0D#000000
surface — these differ#171717#101010
ink — these differ#FAFAFA#FFFFFF
body — these differ#B8B8B8#EEEEEE
muted—#8A8A8A
hairline — these differ#2E2E2E#1E1E1E
on-primary — these differ#FAFAFA#000000

Full palette

Every colour each extraction kept, including the ones with no measured role.

All colours — these differ#894DEF#A273F2#14532D#78350F#166534#4ADE80#92400E#FBBF24#0D0D0D#171717#FAFAFA#B8B8B8#2E2E2E#6B6B6B#000000#262626#EEEEEE#D97757#8EB2F2#FFC478#3186FF#000000#101010#FFFFFF#8A8A8A#1E1E1E#BDBDBD#2E2E2E#3E3E3E
Semantic——

Typography

Families — these differInter-e4c28016845df4efJetBrains Mono-33799697913f1f09GeistGeist MonoSpline Sans
hero-display288px · 900 · 288px · -11.52px · uppercase · Inter-e4c28016845df4ef—
display — these differ132px · 800 · 198px · -2.64px · Inter-e4c28016845df4ef48px · 450 · 48px · -2.88px · Geist
h1 — these differ72px · 800 · 72px · -2.52px · Inter-e4c28016845df4ef64px · 450 · 72px · -3.84px · Geist
h2 — these differ44px · 800 · 46.2px · -1.32px · Inter-e4c28016845df4ef56px · 450 · 64px · -3.36px · Geist
quote—24px · 450 · 32px · -0.96px · Geist
h3 — these differ19px · 600 · 28.5px · 0px · Inter-e4c28016845df4ef24px · 450 · 30px · -1.2px · Geist
heading — these differ16px · 600 · 24px · 0px · Inter-e4c28016845df4ef18px · 450 · 24px · -0.54px · Geist
list-item — these differ16px · 500 · 24px · 0px · Inter-e4c28016845df4ef14px · 400 · 21.7px · 0px · Geist
input—16px · 400 · 24px · 0px · Geist
nav-link—16px · 500 · 24.8px · 0px · Geist
label—16px · 400 · 24.8px · 0px · Geist
body — these differ15px · 500 · 23.25px · 0px · Inter-e4c28016845df4ef14px · 400 · 20px · 0px · Geist
button — these differ15px · 600 · 22.5px · 0px · Inter-e4c28016845df4ef14px · 500 · 14px · 0px · Geist
link — these differ14px · 500 · 20px · 0px · Inter-e4c28016845df4ef14px · 400 · 20px · 0px · Geist
code — these differ13px · 600 · 19.5px · 1.82px · uppercase · JetBrains Mono-33799697913f1f0912px · 400 · 16px · 0.72px · uppercase · Geist Mono
caption — these differ12px · 500 · 16.5px · 0px · Inter-e4c28016845df4ef16px · 400 · 24.8px · 0px · Geist
h4—11px · 400 · 17.05px · 0.88px · uppercase · Geist Mono

Shape and rhythm

Radius — these differ0px0px4px6px8px10px12px16px9999px
Spacing — these differ4px8px12px16px24px28px32px40px44px48px64px144px4px8px12px16px20px24px28px32px40px48px64px80px
Border widths1px1px

Depth

Strategy — these differsingle-tiercolor-blocking
Shadows — these differrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px—
Gradients — these differ—section: linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, rgb(138, 138, 138) 50%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 50%, rgb(138, 138, 138) 50%)
Opacity — these differ1.000.700.900.940.650.360.620.600.250.700.400.50
Z-index — these differdropdown 10dropdown 50base 1base 2base 3base 4base 5dropdown 20

Components

Sharedbutton-primarycardcard-lgnavigationfooterlinklink-smbutton-primarycardcard-lgnavigationfooterlinklink-sm
Only here — these differbutton-filledbutton-primary-smbutton-textbutton-text-2button-primary-lgbutton-secondarybutton-secondary-lgbadge-textbadge-icon
Signature——

Interaction states

Read from each site's own stylesheets. An empty side means they were cross-origin and unreadable.

Measured — these differother:focus-visibleinput:hoverother:hovercard:hoverother:focusother:disablednav:hovernav:focus-visiblelink:hoverinput:focusnav:hoverother:hoverother:focusother:focus-visiblebutton:hoverother:disabled

Responsive

Breakpoints — these differ375→343px · 6col768→704px · 3col1024→960px · 5col1280→1216px · 5col1440→1376px · 5col375→335px · 2col768→707px · 4col1024→942px · 4col1280→1184px · 4col1440→1416px · 4col

Themes

Measured on the live site, not derived.

SupportSingle themeSingle theme

How this was measured

Differences here are ours, not the brands'.

Pages read66
Extracted — these differ2026-10-142026-11-03
StylesheetsReadableReadable
Roles unassigned — these differ106

Measured by DesignMD from the live sites. Compare two others. Generate a DESIGN.md for your own site.