DesignMD
Remix
Discover

agentsure.us vs Letterboxd

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

agentsure.us: Agentsure — AI Incident Response & Recovery, retained. · Above the fold
agentsure.us
agentsure.us· read 2026-10-14
Letterboxd: Just a moment... · Above the fold
Letterboxd
letterboxd.com· read 2026-11-03

Ground and ink

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

agentsure.us

Heading on canvas

Body copy in the measured muted role.

Primary action
21:1 ink on canvas

Letterboxd

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.

agentsure.us

  • canvas#FFFFFF
  • ink#000000
  • muted#1A1A1A
  • hairline#E6E6E6
  • primary#005032
  • on-primary#FFFFFF

5 more, no measured role

Letterboxd

  • ink#313131
  • hairline#D9D9D9

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.

agentsure.us

h1

72px · 500 · shown smaller

display

72px · 400 · shown smaller

h2

48px · 500 · shown smaller

display

48px · 400 · shown smaller

h3

28px · 500

heading

24px · 500

heading

22px · 500

Letterboxd

h1

40px · 600 · shown smaller

h2

24px · 600

body

16px · 400

link

12px · 400

code

12px · 400

Corners

Drawn at the measured radii.

agentsure.us

6px

pill

0px

0px

8px

Letterboxd

0px

Spacing

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

agentsure.us

4
8
12
16
20
24
28
32

Letterboxd

8
16
32
128

Depth

Shadows cast on each side's own ground.

agentsure.us

No shadows measured.

Letterboxd

No shadows measured.

Buttons

Rendered from the measured computed styles.

agentsure.us

primaryprimary-lgoutlineoutline-sm

Letterboxd

No buttons measured.

The measured values behind the panels above.

agentsure.usLetterboxd

At a glance

GroundLight—
Corners — these differPillSharp
Display size — these differ72px40px
Spacing base — these differ4px8px
Accent colours — these differ41
Type families22
Ink on canvas21.0:1—
Components — these differ102

Colour roles

primary#005032—
link#0000EE#0000EE
canvas#FFFFFF—
ink — these differ#000000#313131
body#0D1016—
muted#1A1A1A—
hairline — these differ#E6E6E6#D9D9D9
on-primary#FFFFFF—

Full palette

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

All colours — these differ#005032#0000EE#E68846#C0392B#C9BBA3#FFFFFF#000000#0D1016#1A1A1A#68655E#E6E6E6#F2E9DA#888888#0000EE#313131#D9D9D9
Semantic——

Typography

Families — these differInter TightJetBrains Monosystem-uimonospace
h1 — these differ72px · 500 · 74.88px · -1.8px · Inter Tight40px · 600 · 50px · 0px · system-ui
h2 — these differ48px · 500 · 51.84px · -1.06px · Inter Tight24px · 600 · 30px · 0px · system-ui
display48px · 400 · 51.84px · -1.06px · Inter Tight—
h328px · 500 · 33.6px · -0.5px · Inter Tight—
heading22px · 500 · 26.84px · -0.26px · Inter Tight—
body — these differ15.5px · 400 · 24.8px · 0px · Inter Tight16px · 400 · 24px · 0px · system-ui
quote15.5px · 400 · 23.25px · 0px · Inter Tight—
input14.5px · 400 · 20.3px · 0px · Inter Tight—
button14px · 500 · 14px · 0px · Inter Tight—
list-item14px · 400 · 21px · 0px · Inter Tight—
nav-link13px · 400 · 20.15px · 0px · Inter Tight—
caption13px · 400 · 20.15px · 0px · JetBrains Mono—
code — these differ12.5px · 400 · 21.25px · 0px · JetBrains Mono12px · 400 · 18px · 0px · monospace
h411px · 500 · 18.7px · 1.54px · uppercase · JetBrains Mono—
link — these differ11px · 400 · 18.7px · 0.44px · JetBrains Mono12px · 400 · 18px · 0px · system-ui
label10.5px · 500 · 16.275px · 1.26px · uppercase · JetBrains Mono—

Shape and rhythm

Radius — these differ0px6px8px9999px0px
Spacing — these differ4px8px12px16px20px24px28px32px36px40px48px56px8px16px32px128px
Border widths1px1px

Depth

Strategycolor-blockingcolor-blocking
Shadows——
Gradients——
Opacity——
Z-index — these differdropdown 50dropdown 55dropdown 60—

Components

Sharedfooterlinkfooterlink
Only here — these differbutton-primarybutton-primary-lgbutton-outlinebutton-outline-smcardcard-lgnavigationlink-2—
Signature——

Interaction states

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

Measured — these differbutton:hovernav:hoverother:hoverinput:focusother:disabledlink:hoverlink:activeinput:activeother:hover

Responsive

Breakpoints — these differ375→335px · 1col768→704px · 1col1024→960px · 3col1280→1180px · 3col1440→1180px · 3col375→1920px768→1920px1024→1920px1280→1920px1440→1920px

Themes

Measured on the live site, not derived.

SupportSingle themeSingle theme

How this was measured

Differences here are ours, not the brands'.

Pages read——
Extracted — these differ2026-10-142026-11-03
Stylesheets — these differPartly blockedReadable
Roles unassigned — these differ50

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