taste-skill / Compare styles / Linear vs Dub

Linear vs Dub: design style comparison

Linear is Dark Precision SaaS & Industrial Craftsmanship; Dub is Modern Link Attribution & Crisp Satoshi/Geist Minimalist. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 17 of 18 tracked tokens differ.

Side-by-side preview

Linear style · dark

Ship the product, not the pixels.

Preview text rendered with the extracted Linear canvas, text, muted and accent tokens.

Card on extracted card recipe

Accent link: #5E6AD2 · border rgba(255, 255, 255, 0.08)

Dub style · light

Ship the product, not the pixels.

Preview text rendered with the extracted Dub canvas, text, muted and accent tokens.

Card on extracted card recipe

Accent link: #000000 · border #E5E5E5

Key differences

Linear is a dark design (canvas #08090A) while Dub is light (canvas #FAFAFA).
Accent: #5E6AD2 (Linear) vs #000000 (Dub).
Headings: Inter Variable vs Satoshi.
Display type: Linear H1 is 64px / -0.022em (w510); Dub H1 is 48px / 1.15 (w500) — Linear sets 16px larger headlines.
Primary button radius: 9999px vs 8px; height 32px vs 32px.
Depth: Linear uses rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset most; Dub uses rgba(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 0px most.
Motion: cubic-bezier(0.25, 0.46, 0.45, 0.94) vs cubic-bezier(0.4, 0, 0.2, 1).

Token table

Token	Linear	Dub
Canvas	`#08090A`	`#FAFAFA`
Surface	`#0F1011`	`#FFFFFF`
Text	`#F7F8F8`	`#171717`
Muted text	`#8A8F98`	`#737373`
Accent	`#5E6AD2`	`#000000`
Border	`rgba(255, 255, 255, 0.08)`	`#E5E5E5`
Heading font	`Inter Variable`	`Satoshi`
Body font	`Inter Variable`	`Inter / Satoshi`
Mono font	`Berkeley Mono`	`GeistMono`
H1	`64px / -0.022em (w510)`	`48px / 1.15 (w500)`
Button radius	`9999px`	`8px`
Button height same	`32px`	`32px`
Most-used radius	`8px`	`12px`
Most-used shadow	`rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset`	`rgba(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 0px`
Easing	`cubic-bezier(0.25, 0.46, 0.45, 0.94)`	`cubic-bezier(0.4, 0, 0.2, 1)`
Duration	`0.7s`	`0.15s`
Container max-width	`1436px`	`1080px`
Mode	`dark`	`light`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Sign up	32px	`0px 12px`	`9999px`	`#E5E5E6` `#08090A`	`1px solid #E5E5E6`	`13px / 510`
Get started	44px	`0px 20px`	`9999px`	`#E5E5E6` `#08090A`	`1px solid #E5E5E6`	`16px / 510`
Contact sales	44px	`0px 20px`	`9999px`	`rgba(255, 255, 255, 0.05)` `#F7F8F8`	`none`	`16px / 510`

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Sign up	32px	`0px 16px`	`8px`	`#000000` `#FFFFFF`	`1px solid #000000`	`14px / 400`
Start for free	38px	`8px 20px`	`8px`	`#000000` `#FFFFFF`	`1px solid #000000`	`14px / 500`
Start for free	40px	`0px 20px`	`8px`	`#FFFFFF` `#171717`	`1px solid #E5E5E5`	`14px / 500`

Which style should you pick?

Pick Linear if you want Ultra-dark #08090A carbon canvas + 1px rgba(255,255,255,0.08) translucent hairlines + Inter Variable 510 weight (-0.022em) + Berkeley Mono telemetry — signals: dark, precision, linear, hairline-borders, bento-grid, issue-tracker, micro-shadows, indigo, carbon-black, dashboard, ai-agents.

Pick Dub if you want Airy #FAFAFA canvas with #FFFFFF analytics cards, #E5E5E5 1px borders, geometric Satoshi 48px display headings, GeistMono shortlinks, and high-contrast #000000 8px-radius primary buttons — signals: light, analytics, marketing, dub, satoshi, geist-mono, clean, bento.

Shared traits: saas, minimalist.

Rules that differ

Linear never:

NEVER use pure #000000 for large card surfaces or pure #FFFFFF for body text—always use #08090A canvas, #0F1011/#141516 cards, and #F7F8F8 primary text.
NEVER use thick opaque gray borders (border-gray-700, border-zinc-600)—always use 1px translucent white hairlines (border-white/[0.08] or border-white/[0.05]).
NEVER use standard font-bold (700 or 800) on large headlines—Linear uses custom variable medium weight (font-[510]) with tight negative tracking (tracking-[-0.022em]) and leading-none (1.0).

Dub never:

NEVER substitute generic uncalibrated gray backgrounds for Dub’s exact #FAFAFA canvas and #FFFFFF surface pairing.
NEVER replace Satoshi display typography or ignore its signature scale (48px / 1.15 (w500)).
NEVER use thick opaque borders that clash with #E5E5E5 (1px solid #E5E5E5).

Go deeper

Linear style guide Dub style guide Linear token spec Dub token spec Linear vs Vercel Linear vs Stripe Linear vs Raycast Linear vs Loops Dub vs PostHog Cal.com vs Dub

Values extracted from https://linear.app and https://dub.co. Not affiliated with either company.

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →