---
title: "Rootly design system"
variant: extended
source: https://rootly.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/rootly-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Rootly · Design System

> Calm product clarity against expressive skies

**Theme:** light · **Industry:** saas · **Source:** https://rootly.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Rootly pairs a clean, spacious SaaS layout with vivid violet-and-peach sky imagery to make incident management feel approachable. Quiet typography and generous white space keep product interfaces and conversion paths easy to scan.

## North star

Keep the page calm and product-led, using expressive violet-and-peach imagery as a frame rather than a substitute for clear UI.

## Overview

The homepage balances a white editorial canvas with a highly distinctive violet-and-peach visual world. The opening viewport places white hero copy and dark navigation over a full-bleed sky image; the imagery then reappears as a frame behind product UI, giving otherwise restrained feature sections a consistent brand signature. PP Mori supplies rounded, human sans-serif forms: medium-weight headlines are compact and confident, while regular body copy stays readable and understated. Content alternates between concise feature introductions and broad product demonstrations, with generous vertical pauses between sections. Soft lavender surfaces distinguish selected cards and the customer-proof band without fragmenting the mostly white page. Pill-shaped CTAs and rounded media containers soften the interface; the black footer provides a clear visual stop. Keep product screenshots legible and let imagery support, rather than compete with, the interface.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, navigation and light media/card areas; preserves the airy section rhythm. |
| Root Ink | `#100f12` | `--color-root-ink` | neutral | Primary headings and body text, navigation labels, dark primary buttons, and the footer surface. |
| Deep Iris | `#4a3e8a` | `--color-deep-iris` | brand | Strong violet end of the nav gradient; reinforce brand identity sparingly. |
| Quiet Graphite | `#65646e` | `--color-quiet-graphite` | neutral | Muted supporting copy and secondary text on light backgrounds. |
| Root Violet | `#6d55bd` | `--color-root-violet` | accent | Accent text and buttons; also the vivid violet stop in brand gradients. |
| Slate Panel | `#3e4361` | `--color-slate-panel` | surface | Dark blue-gray panel color, most notably in navigation-related surfaces and UI imagery. |
| Sky Hairline | `#91cdfb` | `--color-sky-hairline` | semantic | Measured border hue; use only for subtle outlines or focus-like details, not large surfaces. |
| Peach Cloud | `#f8bfa9` | `--color-peach-cloud` | semantic | Border color captured in navigation-area details; peach is more prominent in the decorative sky artwork. |
| Mint Signal | `#8ce5d0` | `--color-mint-signal` | semantic | Measured border detail and occasional status-like interface accent, not a dominant brand surface. |
| Soft Divider | `#eaeaea` | `--color-soft-divider` | neutral | Quiet separator or secondary text detail, especially against dark UI surfaces. |
| Lavender Mist | `#f7f5ff` | `--color-lavender-mist` | surface | Pale lavender section and button surface that gently distinguishes selected content. |
| Lilac Card | `#ebe5ff` | `--color-lilac-card` | surface | Lavender card and link background, visible in comparison and customer-story treatments. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#100f12` (Root Ink) · `--color-surface-2` → `#3e4361` (Slate Panel) · `--color-surface-3` → `#f7f5ff` (Lavender Mist) · `--color-surface-4` → `#ebe5ff` (Lilac Card) · `--color-text` → `#100f12` (Root Ink) · `--color-text-muted` → `#65646e` (Quiet Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#91cdfb` (Sky Hairline) · `--color-accent` → `#4a3e8a` (Deep Iris) · `--color-accent-2` → `#6d55bd` (Root Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#100f12` | `#ffffff` | 19.11:1 | AAA |
| `#100f12` | `#3e4361` | 1.98:1 | fail |
| `#100f12` | `#f7f5ff` | 17.71:1 | AAA |
| `#65646e` | `#ffffff` | 5.83:1 | AA |
| `#65646e` | `#100f12` | 3.28:1 | AA-large |
| `#65646e` | `#3e4361` | 1.65:1 | fail |
| `#65646e` | `#f7f5ff` | 5.4:1 | AA |
| `#ffffff` | `#100f12` | 19.11:1 | AAA |
| `#ffffff` | `#3e4361` | 9.63:1 | AAA |
| `#ffffff` | `#f7f5ff` | 1.08:1 | fail |

### Gradients

- `linear-gradient(45deg, rgb(74, 62, 138), rgba(0, 0, 0, 0))`
- `linear-gradient(112deg, rgb(109, 85, 189), rgb(173, 63, 104) 80%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PP Mori | `--font-body` | webfont | 400, 500, 200, 600 | Site-wide typography for hero and section headings, body copy, navigation, captions, and buttons. | Inter |

- **PP Mori:** Use clean sans-serif shapes; headings are medium weight with slightly tight tracking, body is regular, and buttons are medium without uppercase styling.

### Type scale — Perfect Fifth (ratio ≈ 1.472, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 51px | 500 | 1.03 | -0.01em | — | PP Mori | Centered hero headline; large, medium-weight, tightly tracked. |
| h2 | 32px | 500 | 1.1 | -0.01em | — | PP Mori | Feature and CTA headlines; medium weight with compact line height. |
| h3 | 20px | 500 | 1.2 | 0 | — | PP Mori | Card and sub-feature headings; concise, medium-weight labels. |
| body | 16px | 400 | 1.47 | 0 | — | PP Mori | Product descriptions, testimonials, and explanatory copy. |
| caption | 13px | 400 | 1.47 | 0 | — | PP Mori | Small feature labels, customer attribution, and UI supporting text. |
| button | 16px | 500 | 1 | 0.03em | — | PP Mori | CTA labels in medium weight, with slight positive tracking. |
| nav | 16px | 200 | 1 | 0 | — | PP Mori | Light-weight primary navigation labels. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 8, 12, 16, 20, 22, 24, 32, 48, 64, 115 px.
- Section rhythm 115px · element gap 8px · card padding 41px · max content width 1171px.

Use a spacious, centered content system capped at the measured 1171px page width. The hero is centered over full-bleed artwork; most feature sections use two-column text-and-product layouts, while selected showcases span broadly. Leave substantial vertical breathing room between sections and keep card groupings tidy. Align feature introductions to the left and reserve centered alignment for the hero, customer-switch band, and closing CTA. The overall density is low, with the footer as a compact multi-column directory.

## Shape & elevation

- Radius: button `9999px` · card `20px` · media `16px` · nav `12px` · link `20px` · xs `8px` · sm `12px` · md `16px` · lg `20px` · xl `24px` · 2xl `32px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.33, 1, 0.68, 1)` on interactive elements.

The page is largely flat: white canvas, pale lavender card surfaces, and subtle separation through spacing rather than heavy shadows. Use rounded cards and media frames for soft layering. Product imagery can overlap sky backgrounds, and the dark footer supplies the strongest contrast; avoid adding conspicuous shadow systems or dense borders.

## Imagery

Use painterly, soft-focus violet skies with peach cloud forms as the recurring visual signature, especially in the hero and behind product demonstrations. Frame crisp screenshots of calendars, incident threads, analysis, retrospectives, and status pages in rounded media containers. Customer logos and portraits provide proof and scale. Keep screenshot content readable; decorative art should sit behind or around the interface rather than obscure it.

## Components

### Hero and announcement

Centered hero content and slim announcement pill over a full-bleed violet-and-peach sky; place primary actions below the supporting copy.

### Pill CTA

Rounded action buttons with medium PP Mori labels; pair dark ink buttons with lavender or muted secondary treatments.

### Feature split

Left-aligned feature heading and description paired with a large product demonstration; use two-column composition and generous whitespace.

### Sky-framed product media

Present crisp product UI over or within the recurring painterly sky artwork, using rounded media framing.

### Switching cards

Lavender promotional band with a centered switching message and four light cards summarizing price, contract buyout, migration, and reliability.

### Customer proof

Pale lavender section combining review or recognition marks with customer-story cards and restrained attribution.

### Footer directory

Near-black footer with grouped link columns, small utility text, and a prominent Rootly wordmark.

### Measured component styles

- **Primary button** (“Investigate”): background #f7f5ff · text #100f12 · radius 1440px · padding 0px · 400 16px PP Mori
- **Secondary button** (“Get started for free”): background #939394 · text #ffffff · border 1px solid · radius 20px · padding 17px 32px 15px 32px · 500 16px PP Mori
- **Link** (“How Canary built incident management fro”): background #ffffff · text #100f12 · border 1px solid · radius 20px · padding 64px 32px 64px 64px · 400 16px PP Mori
- **Card** (“1/2 the price And quadruple the capabili”): background #ebe5ff · text #100f12 · radius 24px · padding 36px 46px · 400 16px PP Mori
- **Navigation item** (“Product Solutions Customers Resources Pr”): transparent background · text #100f12 · radius 0px · padding 0px · 400 16px PP Mori

## Do

- Use white as the default content canvas.
- Keep headings concise, medium-weight, and easy to scan.
- Reserve violet-and-peach sky art for hero and media framing.
- Give product screenshots visual priority over decoration.
- Use lavender surfaces to mark selected cards and proof sections.
- Keep CTAs rounded and clearly separated from body copy.
- Preserve generous vertical space between feature blocks.

## Don't

- Do not spread saturated violet across every section.
- Do not place decorative artwork over important product details.
- Do not crowd feature copy and screenshots into dense layouts.
- Do not introduce heavy shadows or a thick border system.
- Do not make headings all-caps or overly bold.
- Do not turn every card into a colored panel.
- Do not let the footer's dark palette leak into the main canvas.

## Agent prompt

Build a new Rootly-style SaaS page with a bright, spacious canvas and a clear product-first hierarchy. Use Gallery White (#ffffff) as the main surface, Root Ink (#100f12) for primary text and dark actions, Quiet Graphite (#65646e) for supporting copy, and Root Violet (#6d55bd) with Deep Iris (#4a3e8a) as restrained accents. Use Lavender Mist (#f7f5ff) and Lilac Card (#ebe5ff) for selective cards or proof bands. Set typography in PP Mori or a close sans-serif substitute, using medium, compact headlines and regular body text. Favor a centered hero, two-column feature sections, broad rounded product demonstrations, and generous whitespace. Use painterly violet-and-peach skies as occasional framing behind crisp UI. Keep elevation subtle; finish with a distinct ink-dark footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed illustrated hero; centered headline, supporting copy, actions, logos, and layered product UI. | Announcement link, Primary and secondary CTA, Customer logo proof | Sky gradient artwork, Centered white headline, Rounded dark CTA |
| 2 | comparison | Wide centered promotional band above a row of four comparison cards. | Switching guidance link, Benefit scan | Lavender band, Four rounded cards, Compact feature icons |
| 3 | feature-split | Two-column feature introduction followed by a wide product demonstration. | Explore feature link, Product proof | Small category label, Rounded screenshot frame, Customer attribution |
| 4 | feature-split | Two-column introduction with a broad on-call workflow demonstration below. | Feature exploration, Workflow preview | Category label, Large media frame, Testimonial attribution |
| 5 | feature-split | Two-column feature copy paired with a wide incident interface demonstration. | Explore incident response, In-context product proof | Rounded UI media, Sky artwork backdrop, Customer logo |
| 6 | feature-split | Two-column introduction above a broad retrospective product preview. | Feature exploration, Workflow explanation | Category label, Rounded screenshot, Customer quote attribution |
| 7 | product-showcase | Single-column introduction followed by a full-width desktop status-page mockup. | Explore status page, Product preview | Large device frame, Sky backdrop, Operational status panel |
| 8 | feature-grid | Introductory content followed by four philosophy cards and a broad integrations row. | Explore integrations, Feature scan | Compact icon cards, Integration logo strip, Open white layout |
| 9 | testimonials | Pale lavender band with recognition marks and customer-story cards. | Customer proof, Case-study links | Lavender background, Review marks, Rounded quote card |
| 10 | cta | Centered closing headline with paired action buttons on a white canvas. | Free-start action, Demo action | Centered headline, Pill-shaped buttons, Minimal surroundings |
| 11 | footer | Dark footer with four link groups, a product-awareness prompt, and a large brand mark. | Grouped navigation, Newsletter or search inputs, Legal links | Ink-dark surface, Muted link columns, Large white wordmark |

## Source CSS custom properties (selected)

```css
--color-accent: #6d55bd;
--color-accent-strong: #4a3e8a;
--color-customer-clay-overlay: #783c82;
--color-surface-purple-dark: #302650;
--color-brand: #8d6fde;
--color-accent-contrast: #fff;
--color-accent-muted: #d9cffa;
--color-accent-soft: #ebe5ff;
--color-accent-subtle: #f7f5ff;
--color-border-focus: #a28ae5;
--color-secondary: #f0883e;
--color-secondary-soft: #ffc387;
--color-ink: #100f12;
--color-muted: #65646e;
--color-muted-strong: #535862;
--color-muted-on-dark: #eaeaea;
--color-surface: #fff;
--color-surface-alt: #fafafa;
--color-surface-card: #fbfaff;
--color-surface-warm: #fce7da;
--color-border: #d2d2d5;
--color-border-subtle: #f0f0f0;
--color-panel: #3e4361;
--color-danger: #c62424;
--color-competitor: #2684ff;
--color-pricing-glass: #fff9;
--color-pricing-comparison-glass: #fff3;
--color-pricing-glass-dark: #100f121a;
--color-offer-glass: #100f1273;
--color-brand-swatch-orange: #ffa857;
--color-brand-swatch-charcoal: #44434e;
--color-brand-swatch-gray: #aaa9ae;
--color-brand-book-desk: #e7e3f2;
--color-brand-book-desk-deep: #d3cce6;
--color-brand-book-paper: #fcfbff;
--color-brand-book-paper-alt: #f4f1fb;
--color-brand-book-edge: #e6e1f3;
--color-glass: #e9e2ff80;
--color-glass-white: #ffffffe6;
--color-glass-ink: #1e1a331a;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/rootly-com