Linearity

About Linearity

A design and animation tool for marketing creatives. Fits design SaaS, animation utilities, marketing-asset tools, and creative-suite landing page designs.

Request a DESIGN.md analysisCustom, made for Linearity Website Starter KitBuild your site from a starter template

Design tokens

13 colors · 12 type styles

Vivid orange (#fd7c0f) primary on a pure white (#ffffff) canvas, set in Acid Grotesk throughout. The highlights below are read from the Linearity DESIGN.md in the Pass bundle, which carries all 13 color tokens, 12 type styles and the full component rules.

Colors

Primaryvivid orange#fd7c0f
Canvaspure white#ffffff
Inkcool near-black#111717

Type

Acid GroteskDisplayweights 500, 700, 52 to 88px
Acid GroteskBodyweights 500, 700, 16 to 20px

Radius

none 0px
sm 10px
md 16px
lg 20px
xl 24px
xxl 30px
pill 9999px

Spacing

xxs 4px
xs 8px
sm 12px
md 16px
lg 24px
xl 32px
xxl 48px
section 64px

Components

Primary buttonbutton-primary
Primary buttons fill with vivid orange (#fd7c0f) and carry cool near-black (#111717) text, set in Acid Grotesk 14px at weight 700, with pill corners and 9px 32px padding.
Cardfeature-card
Cards sit on pure white (#ffffff), with 20px corners and 24px padding.
Navigationnav-bar
The top navigation runs on cool near-black (#111717) with pure white (#ffffff) links, set in Acid Grotesk 14px at weight 700, in a 64px bar.

Three ways to ship a Linearity-style UI.

Use in your AI builder, no-code tool, or CMS

Lovablev0BoltFramerWebflowWordPressWixSquarespace CanvaGoDaddy

Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.