Rootly

About Rootly

An incident response and on-call platform for engineering teams. Fits devops SaaS, on-call tools, observability products, and SRE-platform landing page designs.

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

Design tokens

16 colors · 11 type styles

Near-black (#100f12) primary on a pure white (#ffffff) canvas, set in PP Mori throughout. The highlights below are read from the Rootly DESIGN.md in the Pass bundle, which carries all 16 color tokens, 11 type styles and the full component rules.

Colors

Primarynear-black#100f12
Secondaryindigo#8d6fde
Canvaspure white#ffffff
Surfacecool off-white#ebe5ff
Inknear-black#100f12

Type

PP MoriDisplayweights 400, 500, 600, 40 to 61px
PP MoriBodyweights 400, 500, 600, 14 to 20px

Radius

none 0px
xs 8.1px
sm 12.1px
md 16.2px
lg 20.2px
xl 24.2px
xxl 40.4px
full 9999px

Spacing

xxs 4px
xs 8.1px
sm 12.1px
md 16.2px
lg 20.2px
xl 24.2px
xxl 48px
section 96px

Components

Primary buttonbutton-primary
Primary buttons fill with near-black (#100f12) and carry pure white (#ffffff) text, set in PP Mori 16px at weight 500, with 16.2px corners and 8.1px 16.2px padding.
Cardfeature-card
Cards sit on pure white (#ffffff), with 20.2px corners and 24.2px padding.
Navigationnav-bar
The top navigation runs on pure white (#ffffff) with near-black (#100f12) links, set in PP Mori 14px at weight 500.

Three ways to ship a Rootly-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.