Discover
Dub vs resolutai.com
Two design systems side by side, measured from the live sites — colour, type, shape, depth, components, states and responsive behaviour.
resolutai.com
resolutai.com· read 2026-10-14
Ground and ink
Each side painted in its own measured canvas, ink, muted and primary roles.
Dub
Heading on canvas
Body copy in the measured muted role.
Primary action21:1 ink on canvas
resolutai.com
Heading on canvas
Body copy in the measured muted role.
Primary action18.4:1 ink on canvas
Palette
Named roles first, then every colour measured without one.
Dub
- canvas
#FFFFFF - ink
#000000 - muted
#171717 - hairline
#E5E5E5 - primary
#171717 - on-primary
#FFFFFF
8 more, no measured role
resolutai.com
- canvas
#0E0F11 - surface
#1D1D20 - ink
#FAFAFA - hairline
#27272A - primary
#C5FF3D
5 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.
Dub
h1
48px · 500 · shown smaller
h2
48px · 500 · shown smaller
display
48px · 500 · shown smaller
display
40px · 500 · shown smaller
heading
36px · 400
heading
36px · 500
h2
36px · 500
resolutai.com
h1
60px · 500 · shown smaller
h2
48px · 500 · shown smaller
display
48px · 500 · shown smaller
h1
48px · 500 · shown smaller
display
48px · 500 · shown smaller
heading
36px · 500
heading
36px · 500
Corners
Drawn at the measured radii.
Dub
0px
8px
0px
pill
6px
12px
resolutai.com
16px
0px
12px
pill
pill
24px
Spacing
One shared scale across both sides, so the bars are directly comparable.
Dub
48121620243240resolutai.com
48121620243240Depth
Shadows cast on each side's own ground.
Dub
sm
md
lg
xl
resolutai.com
sm
md
lg
xl
Buttons
Rendered from the measured computed styles.
Dub
filledsecondaryfilled-lgsecondary-sm
resolutai.com
primarytextoutlineprimary-sm
The measured values behind the panels above.
Dubresolutai.com
At a glance
Ground — these differLightDark
CornersPillPill
Display size — these differ48px60px
Spacing base4px4px
Accent colours — these differ67
Type families — these differ43
Ink on canvas — these differ21.0:118.4:1
Components — these differ1012
Colour roles
primary — these differ
#171717#C5FF3Daccent — these differ
#3B82F6#1F2937link
#2563EB—canvas — these differ
#FFFFFF#0E0F11surface—
#1D1D20ink — these differ
#000000#FAFAFAbody — these differ
#0A0A0A#A1A1AAmuted
#171717—hairline — these differ
#E5E5E5#27272Aon-primary
#FFFFFF—Full palette
Every colour each extraction kept, including the ones with no measured role.
All colours — these differ#171717#3B82F6#2563EB#1F2937#581C87#EA580C#BFDBFE#111827#FFFFFF#000000#0A0A0A#262626#E5E5E5#525252#737373#404040#C5FF3D#1F2937#1E3A8A#14532D#7F1D1D#0F766E#0E0F11#1D1D20#FAFAFA#A1A1AA#27272A#000000#EAB308
Semantic — these differ—warning #EAB308
Typography
Families — these differIntersatoshiGeistMonoRowanPoppinssentientInter Invoice
h1 — these differ48px · 500 · 55.2px · 0px · satoshi48px · 500 · 50.4px · -1.2px · sentient
h2 — these differ48px · 500 · 48px · 0px · satoshi48px · 500 · 52.8px · -1.2px · sentient
display — these differ40px · 500 · 40px · 0px · satoshi48px · 500 · 60px · -1.2px · sentient
heading — these differ30px · 400 · 41.25px · 0px · Inter18px · 600 · 28px · 0px · Poppins
list-item — these differ16px · 400 · 24px · 0px · Inter12px · 400 · 16px · 0px · Poppins
h3 — these differ16px · 500 · 24px · 0px · Inter18px · 600 · 24.75px · 0px · Poppins
link — these differ16px · 400 · 24px · 0px · Inter14px · 500 · 20px · 0px · Poppins
quote—16px · 400 · 26px · 0px · Poppins
body — these differ14px · 400 · 20px · 0px · Inter14px · 500 · 20px · 0px · Poppins
nav-link14px · 500 · 20px · 0px · Inter—
button — these differ14px · 500 · 14px · 0px · Inter18px · 500 · 28px · 0px · Poppins
h414px · 600 · 20px · 0px · Inter—
table-header — these differ14px · 700 · 20px · 0px · Inter12px · 500 · 16px · 0.3px · uppercase · Poppins
label — these differ14px · 500 · 20px · -0.28px · Inter14px · 400 · 20px · 0px · Poppins
code14px · 400 · 20px · 0px · GeistMono—
caption — these differ12px · 500 · 16px · 0px · Inter12px · 400 · 16px · 0px · Poppins
Shape and rhythm
Radius — these differ0px0px 6px 6px 0px2px6px8px10px12px9999px0px8px12px16px24px9999px
Spacing — these differ4px8px12px16px20px24px32px40px44px48px64px164px4px8px12px16px20px24px32px40px48px64px80px176px
Border widths1px2px1px2px
Depth
Strategylayered-microlayered-micro
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.05) 0px 1px 2px 0pxrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 1px 2px -1px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0pxrgb(255, 255, 255) 0px 0px 0px 3px, rgb(0, 0, 0) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0pxrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 1px 3px 0pxrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.5) 0px 25px 50px -12pxrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.3) 0px 20px 25px -5px, oklab(0 0 0 / 0.3) 0px 8px 10px -6pxrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.4) 0px 25px 50px -12pxrgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(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 differsection: linear-gradient(rgb(82, 82, 82), rgb(38, 38, 38))section: linear-gradient(to top, rgb(229, 229, 229), rgba(229, 229, 229, 0))hero: linear-gradient(90deg, rgb(131, 222, 175), rgb(96, 135, 234), rgb(216, 237, 141))section: linear-gradient(to top, rgb(3, 171, 241), rgba(255, 255, 255, 0))section: linear-gradient(rgb(255, 255, 255), rgb(250, 250, 250))section: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0))section: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0))section: linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgb(0, 85, 255) 198px, rgb(0, 85, 255) 281px, rgb(0, 85, 255) 370px, rgba(0, 0, 0, 0) 562px)section: radial-gradient(140px at 818.4px -536px, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.06) 75%)section: radial-gradient(140px at 645.175px -537.3px, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.06) 75%)section: radial-gradient(140px at 476.175px -537.3px, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.06) 75%)section: radial-gradient(140px at 307.175px -537.3px, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.06) 75%)section: radial-gradient(140px at 138.175px -537.3px, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.06) 75%)hero: linear-gradient(90deg, rgb(123, 87, 190), rgb(234, 213, 55))hero: linear-gradient(rgb(255, 255, 255), rgba(0, 0, 0, 0))hero: linear-gradient(oklab(0.16817 -0.00042557 -0.0044522 / 0.2) 0%, oklab(0.16817 -0.00042557 -0.0044522 / 0.4) 50%, rgb(14, 15, 17) 100%)section: linear-gradient(in oklab, rgb(29, 29, 32) 0%, rgb(14, 15, 17) 100%)
Opacity — these differ0.500.300.150.600.200.700.600.300.50
Z-index — these differbase 1base 2base 3dropdown 10dropdown 11dropdown 14dropdown 17dropdown 20base 1base 2dropdown 30dropdown 50toast 1000002
Components
Sharedfooterlinkfooterlink
Only here — these differbutton-filledbutton-secondarybutton-filled-lgbutton-secondary-smbadge-textbadge-primarybadge-primary-2link-lgbutton-primarybutton-textbutton-outlinebutton-primary-smbutton-text-smbutton-outline-2cardcard-smnavigationlink-2
Signature——
Interaction states
Read from each site's own stylesheets. An empty side means they were cross-origin and unreadable.
Measured — these differinput:focusother:focusother:hoverlink:hoverother:hovercard:hoverother:focusother:focus-visibleother:disabledlink:hover
Responsive
Breakpoints — these differ375→375px · 5col768→768px · 5col1024→1024px · 5col1280→1280px · 5col1440→1440px · 5col375→259px · 2col768→612px · 3col1024→683px · 4col1280→853px · 4col1440→1280px · 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-11-032026-10-14
StylesheetsPartly blockedPartly blocked
Roles unassigned — these differ85
Measured by DesignMD from the live sites. Compare two others. Generate a DESIGN.md for your own site.