DesignMD
Remix
Discover

spectr.pm vs Todoist

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
Todoist: Todoist | A To-Do List to Organize Your Work & Life · Above the fold
Todoist
todoist.com· 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

Todoist

No colour roles measured on this side, so there is no ground to paint. The palette below is still real; re-extracting the site fills this in.

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

Todoist

  • surface#F9F7F6
  • ink#25221E
  • primary#25221E
  • on-primary#FFFFFF

1 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

Todoist

h1

55px · 600 · shown smaller

h2

44px · 600 · shown smaller

h2

38px · 600

h1

38px · 600

h3

38px · 600

h3

31px · 600

h2

31px · 600

Corners

Drawn at the measured radii.

spectr.pm

0px

Todoist

0px

10px

8px

pill

9px

13px

Spacing

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

spectr.pm

4
8
12
16
24
28
32
40

Todoist

4
8
12
16
20
24
32
40

Depth

Shadows cast on each side's own ground.

spectr.pm

sm

Todoist

sm

md

lg

Buttons

Rendered from the measured computed styles.

spectr.pm

primaryfilledprimary-smtext

Todoist

outlinetexttext-sm

The measured values behind the panels above.

spectr.pmTodoist

At a glance

GroundDark—
Corners — these differSharpPill
Display size — these differ288px55px
Spacing base4px4px
Accent colours — these differ81
Type families — these differ24
Ink on canvas18.6:1—
Components — these differ1112

Colour roles

primary — these differ#894DEF#25221E
accent—#DE483A
canvas#0D0D0D—
surface — these differ#171717#F9F7F6
ink — these differ#FAFAFA#25221E
body#B8B8B8—
hairline#2E2E2E—
on-primary — these differ#FAFAFA#FFFFFF

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#25221E#DE483A#F9F7F6#FFFFFF#F2EFED
Semantic——

Typography

Families — these differInter-e4c28016845df4efJetBrains Mono-33799697913f1f09Inter-5486e50ce5a4efdfGraphik-1bbd4a4c7a2fb472Shantell Sans-5a9740f6b2ed8488Caecilia-8d8a7c9be503e3f3
hero-display288px · 900 · 288px · -11.52px · uppercase · Inter-e4c28016845df4ef—
display132px · 800 · 198px · -2.64px · Inter-e4c28016845df4ef—
h1 — these differ72px · 800 · 72px · -2.52px · Inter-e4c28016845df4ef55px · 600 · 63.25px · -0.55px · Graphik-1bbd4a4c7a2fb472
h2 — these differ44px · 800 · 46.2px · -1.32px · Inter-e4c28016845df4ef44px · 600 · 50.6px · -0.44px · Graphik-1bbd4a4c7a2fb472
h3 — these differ19px · 600 · 28.5px · 0px · Inter-e4c28016845df4ef15.5008px · 600 · 20.9261px · 0.16px · Inter-5486e50ce5a4efdf
input—18px · 400 · 31.5px · 0.09px · Inter-5486e50ce5a4efdf
h4—17px · 600 · 23.8px · 0.17px · Inter-5486e50ce5a4efdf
heading — these differ16px · 600 · 24px · 0px · Inter-e4c28016845df4ef17px · 600 · 23.8px · 0.17px · Inter-5486e50ce5a4efdf
list-item — these differ16px · 500 · 24px · 0px · Inter-e4c28016845df4ef16px · 400 · 16px · 0px · Graphik-1bbd4a4c7a2fb472
quote—16px · 500 · 25.6px · 0.16px · Inter-5486e50ce5a4efdf
table-header—16px · 700 · 16px · 0px · Graphik-1bbd4a4c7a2fb472
label—15.5008px · 600 · 20.9261px · 0.16px · Inter-5486e50ce5a4efdf
body — these differ15px · 500 · 23.25px · 0px · Inter-e4c28016845df4ef16px · 500 · 25.6px · 0.16px · Inter-5486e50ce5a4efdf
button — these differ15px · 600 · 22.5px · 0px · Inter-e4c28016845df4ef15.5px · 500 · 20.925px · 0.16px · Inter-5486e50ce5a4efdf
link — these differ14px · 500 · 20px · 0px · Inter-e4c28016845df4ef15.5008px · 500 · 20.9261px · 0.16px · Inter-5486e50ce5a4efdf
code13px · 600 · 19.5px · 1.82px · uppercase · JetBrains Mono-33799697913f1f09—
caption — these differ12px · 500 · 16.5px · 0px · Inter-e4c28016845df4ef12px · 500 · 18px · 0.3px · Inter-5486e50ce5a4efdf

Shape and rhythm

Radius — these differ0px0px6px8px9px 9px 0px 0px10px13px15px9999px
Spacing — these differ4px8px12px16px24px28px32px40px44px48px64px144px4px8px12px16px20px24px32px40px48px64px96px152px
Border widths1px1px

Depth

Strategy — these differsingle-tierprogressive
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 -4pxrgba(37, 34, 30, 0.04) 0px 1px 0px 0pxrgba(37, 34, 30, 0.07) 0px 14px 19px -9px, rgba(37, 34, 30, 0.18) 0px 10px 48px 0pxrgba(37, 34, 30, 0.04) 0px 0px 0px 1px
Gradients — these differ—hero: linear-gradient(oklch(0.9945 0.0017 67.8) 0px, oklch(0.978484 0.012562 56.2563) 58%)section: linear-gradient(0deg, oklch(0.983 0.0195 87.51) 58%, rgba(0, 0, 0, 0) 100%)
Opacity — these differ1.000.700.900.940.650.360.40
Z-index — these differdropdown 10dropdown 50base 1base 2base 3base 5dropdown 10sticky 100modal 5000modal 7000

Components

Sharedbutton-textcardcard-lgnavigationfooterlinkbutton-textcardcard-lgnavigationfooterlink
Only here — these differbutton-primarybutton-filledbutton-primary-smbutton-text-2link-smbutton-outlinebutton-text-smbadge-textbadge-text-lgfooter-lglink-2
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-visiblebutton:focus-visibleother:focus-visibleother:hoverlink:hoverlink:focus-visibleother:disabledlink:focusbutton:focusother:activebutton:hoverinput:focus-visibleinput:hoverinput:disablednav:hovernav:focus-visiblecard:hover

Responsive

Breakpoints — these differ375→343px · 6col768→704px · 3col1024→960px · 5col1280→1216px · 5col1440→1376px · 5col375→327px · 4col768→720px · 5col1024→976px · 5col1280→1232px · 5col1440→1360px · 5col

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 differ101

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