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

# Visitors · Design System

> Quiet, clear analytics with a violet glow

**Theme:** light · **Industry:** saas · **Source:** https://visitors.now/ · **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._

Visitors pairs a bright, restrained canvas with rounded product UI and soft violet-blue accents. The page moves from a focused analytics hero into feature explanations, comparison, pricing, FAQs, and a direct trial CTA.

## North star

Keep the page airy and product-led: let readable analytics UI carry the story, with violet-blue accents used sparingly to guide action.

## Overview

The visual strategy is clean and product-led: white dominates, while near-black headings and muted gray copy keep the analytics message legible and calm. Violet is reserved for the primary trial action, selected controls, and soft transitions; pale blue joins it in gradients and announcement details. OpenRunde gives the page a friendly, rounded character, with compact supporting text and large, tightly tracked headlines. Content is centered within a restrained page width, with generous whitespace separating the hero, feature cards, comparison, pricing, FAQ, and final CTA. The dashboard is the main visual proof point: a crisp white interface sits over a vivid, atmospheric violet-blue landscape, contrasting with otherwise quiet sections. Cards rely more on subtle tinted surfaces and fine borders than on strong shadows. Rounded pills, light dividers, and small colored data marks maintain continuity without making the page feel dense.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas White | `#ffffff` | `--color-canvas-white` | neutral | Dominant page canvas, card interiors, and the white dashboard shell. |
| Midnight Ink | `#181925` | `--color-midnight-ink` | brand | Primary headings, dark interface text, and the dark navigation capsule. |
| Soft Graphite | `#666666` | `--color-soft-graphite` | neutral | Body copy, secondary navigation content, and supporting button labels. |
| Lavender Signal | `#918df6` | `--color-lavender-signal` | brand | Main trial CTA, selected dashboard outline, and violet end of the brand gradient. |
| Quiet Divider | `#e8e8e8` | `--color-quiet-divider` | neutral | Fine separators and understated borders between interface elements. |
| Silver Note | `#999999` | `--color-silver-note` | neutral | Muted navigation labels and tertiary footer or caption text. |
| Periwinkle Mist | `#bed5fe` | `--color-periwinkle-mist` | accent | Pale blue gradient stop and soft blue emphasis in announcement and footer details. |
| Cloud Blue | `#ebf2ff` | `--color-cloud-blue` | surface | Light gradient midpoint and faint blue tint behind selected footer and link details. |
| Amber Marker | `#ffa600` | `--color-amber-marker` | semantic | Small pricing discount badge and isolated warm emphasis, not a core interface color. |
| Violet Pop | `#9580ff` | `--color-violet-pop` | accent | Secondary Register button and limited purple action emphasis. |
| Mist Surface | `#f5f5f5` | `--color-mist-surface` | surface | Occasional pale neutral surface behind secondary content. |
| Pale Stroke | `#dedfe0` | `--color-pale-stroke` | neutral | Subtle outlines within interface and product UI details. |
| Link Blue | `#2c78fc` | `--color-link-blue` | semantic | Blue announcement-link text and a small amount of interface illustration detail. |
| Metric Green | `#33c758` | `--color-metric-green` | semantic | Positive metric indicators inside dashboard and analytics illustrations. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#f5f5f5` (Mist Surface) · `--color-text` → `#181925` (Midnight Ink) · `--color-text-muted` → `#666666` (Soft Graphite) · `--color-text-subtle` → `#999999` (Silver Note) · `--color-border` → `#e8e8e8` (Quiet Divider) · `--color-accent` → `#918df6` (Lavender Signal) · `--color-accent-2` → `#bed5fe` (Periwinkle Mist) · `--color-accent-3` → `#9580ff` (Violet Pop) · `--color-on-accent` → `#ffffff` (Canvas White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#181925` | `#ffffff` | 17.43:1 | AAA |
| `#181925` | `#f5f5f5` | 15.99:1 | AAA |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#666666` | `#f5f5f5` | 5.27:1 | AA |
| `#999999` | `#ffffff` | 2.85:1 | fail |
| `#999999` | `#f5f5f5` | 2.61:1 | fail |
| `#918df6` | `#ffffff` | 2.86:1 | fail |
| `#918df6` | `#f5f5f5` | 2.62:1 | fail |

### Gradients

- `linear-gradient(to right in oklab, rgb(190, 213, 254) 0%, rgb(235, 242, 255) 50%, rgb(145, 141, 246) 100%)`
- `linear-gradient(to right in oklab, rgb(190, 213, 254) 0%, rgb(190, 213, 254) 50%, rgb(0, 196, 255) 100%)`
- `radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0) 32px, rgb(255, 255, 255) 32.5px)`
- `radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0) 32px, rgb(255, 255, 255) 32.5px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| OpenRunde | `--font-body` | webfont | 500, 400, 600 | All page typography, including display headings, body copy, navigation, labels, and buttons. | Nunito Sans |

- **OpenRunde:** Friendly rounded sans; headings use medium-to-semibold weights and tight tracking; body and navigation stay compact and mostly sentence case.

### Type scale — Perfect Fourth (ratio ≈ 1.338, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 600 | 1.13 | -0.05em | — | OpenRunde | Large, tightly tracked hero display headline. |
| h1 | 48px | 500 | 1 | -0.007em | — | OpenRunde | Primary page headline and major feature-section titles. |
| h2 | 36px | 500 | 1.22 | -0.017em | — | OpenRunde | Section headings for feature, comparison, pricing, and FAQ blocks. |
| h3 | 24px | 500 | 1.17 | -0.013em | — | OpenRunde | Feature-card titles and prominent subsection headings. |
| h4 | 20px | 500 | 1.4 | -0.016em | — | OpenRunde | Smaller card headings and compact content titles. |
| body | 14px | 500 | 1.43 | -0.023em | — | OpenRunde | Feature descriptions, explanatory copy, and pricing details. |
| caption | 12px | 400 | 1.33 | -0.027em | — | OpenRunde | Badges, chart labels, footnotes, and small helper text. |
| button | 16px | 500 | 1.5 | -0.02em | — | OpenRunde | Trial, registration, and secondary action labels. |
| nav | 14px | 500 | 1.43 | -0.023em | — | OpenRunde | Header navigation labels and compact menu items. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 3, 4, 6, 8, 10, 12, 16, 20, 24, 32, 48, 64 px.
- Section rhythm 64px · element gap 8px · card padding 48px · max content width 984px.

Use a centered content column with a measured maximum width of 984px and generous white space between sections. The hero is vertically centered, followed by a wide dashboard presentation; later sections shift between centered single-column introductions, two-column feature cards, a comparison table, and a pricing panel. The measured spacing system uses an 8px base, a 64px section gap, and comfortable density. Keep headings centered where shown, while card and table content aligns to its own grid.

## Shape & elevation

- Radius: button `50%` · card `24px` · media `50%` · badge `6px` · nav `24px` · link `9999px` · xs `6px` · sm `8px` · md `12px` · lg `16px` · xl `24px` · pill `9999px`
- Shadow `hairline` (button): `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) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 1px 1px 1px, rgba(0, 0, 0, 0.06) 0px 0px`
- Shadow `hairline-2` (button, nav): `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) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px`
- Shadow `md` (other): `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) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 8px`
- Shadow `sm` (media): `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) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Favor flat white surfaces, subtle gray borders, and pale neutral card backgrounds. Use restrained hairline shadows only where a control or media preview needs separation; avoid deep, dramatic elevation. Layer the dashboard as a clean white panel over the colorful hero backdrop, with rounded corners and simple interface framing.

## Imagery

Use product UI as the primary imagery: white analytics dashboards with charts, metrics, maps, and small status colors. The hero dashboard is framed against a soft, vivid violet-to-blue landscape that supplies the strongest visual color. Feature and pricing panels show cropped interface previews rather than lifestyle photography. Keep screenshots crisp, lightly rounded, and clearly subordinate to the headline and CTA.

## Components

### Pill navigation

Compact dark rounded capsule centered above the hero; muted links sit beside a violet Register action.

### Announcement link

Small pale-blue pill with a blue NEW badge, short milestone copy, and a trailing chevron.

### Primary trial CTA

White-text Start 14 day free trial action on Lavender Signal (#918df6), shaped as a full pill.

### Dashboard showcase

Large white analytics panel layered over a violet-blue landscape, with tabs above and charts, metrics, and map-like data inside.

### Feature cards

Pale neutral rounded cards arranged in a two-column grid, combining colored labels, concise copy, and product UI previews.

### Comparison table

Centered tool comparison with a highlighted Visitors column and lightweight rows of feature labels and status symbols.

### Pricing panel

Soft neutral two-part card pairing event-based pricing and included features with a live map-style product preview.

### FAQ accordion

Narrow centered list of questions with compact row separators and small trailing chevrons.

### Measured component styles

- **Primary button** (“Start 14 day free trial”): background #918df6 · text #ffffff · radius 3.35544e+07px · padding 0px 20px · 500 16px OpenRunde
- **Secondary button** (“Register”): background #9580ff · text #ffffff · radius 3.35544e+07px · padding 0px 10px · 500 14px OpenRunde
- **Link** (“Start 14 day free trial”): transparent background · text #666666 · radius 0px · padding 0px · 400 16px OpenRunde
- **Card** (“See what's driving your revenue Start tr”): background #fafafa · text #666666 · radius 24px · padding 64px 32px · 400 16px OpenRunde
- **Badge** (“Features”): transparent background · text #000000 · border 1px solid · radius 6px · padding 0px 8px · 500 14px OpenRunde
- **Navigation item** (“Home”): transparent background · text #999999 · radius 0px · padding 0px · 500 14px OpenRunde

## Do

- Keep white as the dominant canvas.
- Use Midnight Ink for high-priority headings.
- Reserve Lavender Signal for the main conversion action.
- Let product dashboards provide the primary visual detail.
- Use generous whitespace between major sections.
- Keep cards rounded, quiet, and lightly separated.

## Don't

- Do not introduce dark full-width section bands.
- Do not use saturated accents as large background fills.
- Do not add heavy shadows to ordinary cards.
- Do not crowd the hero with competing content.
- Do not use photography where product UI is the proof point.
- Do not let illustration-only colors redefine the brand palette.

## Agent prompt

Build a new SaaS page in the Visitors visual style. Use Canvas White (#ffffff) as the dominant background, Midnight Ink (#181925) for headings, and Soft Graphite (#666666) for explanatory copy. Set rounded OpenRunde-like sans typography with compact body text and large, tightly tracked headlines. Center the main message and primary Lavender Signal (#918df6) pill CTA; use Periwinkle Mist (#bed5fe) and Cloud Blue (#ebf2ff) only for restrained gradients or subtle emphasis. Present product analytics through crisp white dashboard panels, small charts, and pale neutral feature cards. Maintain a measured 984px content maximum, generous section gaps, clear centered introductions, and varied but orderly grids. Use fine gray borders and minimal shadows; avoid dark section fills, loud decoration, and dense layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-showcase | Wide dashboard interface beneath a shallow tab strip, layered over a full-width violet-blue visual backdrop. | Dashboard tab selection, Real-time analytics preview | White dashboard panel, Chart and metric widgets, Soft gradient backdrop |
| 2 | how-it-works | Centered section introduction followed by three sequential setup steps in a multi-column row. | Numbered steps, Setup guidance | Centered heading, Step cards, Small product illustrations |
| 3 | comparison | Centered introduction above a feature checklist table with a visually emphasized Visitors column. | Feature-by-feature comparison, Competitor scan | Table rows, Tool columns, Check and cross indicators |
| 4 | pricing | Centered section heading above a broad two-column pricing panel with plan information and live map preview. | Monthly and yearly choice, Event-based price display, Trial CTA | Pale neutral panel, Pricing controls, Map visualization |
| 5 | faq | Centered heading and intro above a narrow, vertically stacked question list. | Expandable questions, Quick answer discovery | Accordion rows, Trailing chevrons, Light separators |
| 6 | cta | Centered conversion message and paired actions inside a soft neutral two-column-width panel. | Trial conversion, Secondary demo action | Rounded CTA panel, Violet primary pill, Quiet secondary action |
| 7 | footer | Multi-column footer with brand description at left and grouped product, feature, comparison, and company links. | Grouped site navigation, Brand and status information | Compact link columns, Small muted text, Decorative brand mark |

## Source CSS custom properties (selected)

```css
--background: #fff;
--background-subtle: #fafafa;
--bg-1: #fff;
--bg-2: #f5f5f5;
--bg-3: #f0f0f0;
--bg-4: #e8e8e8;
--fg-1: #b3b3b3;
--fg-2: #999;
--fg-3: #666;
--fg-4: #181925;
--bg-a1: #00000008;
--bg-a2: #0000000d;
--bg-a3: #00000014;
--bg-a4: #0000001f;
--fg-a1: #0000004d;
--fg-a2: #0006;
--fg-a3: #0009;
--fg-a4: #181925e0;
--radius-1: .125rem;
--radius-2: .25rem;
--radius-3: .375rem;
--radius-4: .5rem;
--radius-5: .75rem;
--radius-6: 1rem;
```

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