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

# Assurestor · Design System

> Dark infrastructure, illuminated by a sharp lime signal.

**Theme:** dark · **Industry:** saas · **Source:** https://www.assurestor.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._

Assurestor presents a channel-only backup and disaster recovery platform in a deep olive-black interface with vivid lime calls to action. Product UI mockups, comparison tables, and tightly organized feature blocks make a technically complex offer feel controlled and legible.

## North star

Keep the interface grounded in dark olive, and reserve vivid lime for the few actions and ideas that must stand out.

## Overview

The homepage uses a near-black olive canvas (#141d08) across nearly the entire page, with slightly lighter forest-olive panels (#1c280c) separating cards and product information. Pale warm text (#ecf2e0) carries headings and essential copy; muted sage (#95a67a) handles navigation, secondary descriptions, and fine print. Acid lime (#c6f24e) is a deliberate signal for emphasized headline phrases, links, badges, and primary actions rather than a broad background colour. Assurestor Display gives headings a compact, confident shape, while Assurestor Text keeps dense explanatory content readable. A centered, constrained content area alternates left-aligned section introductions with structured grids, comparison tables, and paired product panels. The hero balances a large text column with a detailed platform mockup; throughout the page, thin olive borders and restrained corner rounding define modules without adding shadow-heavy depth. Generous section separation offsets the otherwise information-rich layout.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Moss Hairline | `#33461a` | `--color-moss-hairline` | neutral | Fine card, badge, and footer outlines; the primary structural hairline against dark panels. |
| Deep Olive | `#141d08` | `--color-deep-olive` | brand | Main page canvas and dark button or badge interiors; anchors the dark interface. |
| Sage Signal | `#95a67a` | `--color-sage-signal` | semantic | Muted navigation, secondary copy, footer links, and subdued supporting text. |
| Electric Lime | `#c6f24e` | `--color-electric-lime` | accent | Primary CTA fill, emphasized headline words, links, outlined secondary actions, and small status highlights. |
| Olive Badge | `#8fb02e` | `--color-olive-badge` | semantic | Subtle badge outline accent, notably on compact technical capability labels. |
| Warm Chalk | `#ecf2e0` | `--color-warm-chalk` | neutral | High-contrast headline, body, card, and badge text on dark backgrounds. |
| Forest Panel | `#1c280c` | `--color-forest-panel` | surface | Raised-looking card and product information backgrounds, separated from the canvas by fine borders. |
| Moss Button Edge | `#7f9d32` | `--color-moss-button-edge` | semantic | Minor button accent detected in measured UI; keep peripheral rather than using as a dominant brand colour. |

### Semantic aliases

`--color-canvas` → `#141d08` (Deep Olive) · `--color-surface` → `#1c280c` (Forest Panel) · `--color-text` → `#ecf2e0` (Warm Chalk) · `--color-text-muted` → `#95a67a` (Sage Signal) · `--color-border` → `#33461a` (Moss Hairline) · `--color-accent` → `#95a67a` (Sage Signal) · `--color-accent-2` → `#c6f24e` (Electric Lime) · `--color-on-accent` → `#141d08` (Deep Olive)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ecf2e0` | `#141d08` | 15.17:1 | AAA |
| `#ecf2e0` | `#1c280c` | 13.51:1 | AAA |
| `#95a67a` | `#141d08` | 6.63:1 | AA |
| `#95a67a` | `#1c280c` | 5.9:1 | AA |
| `#95a67a` | `#141d08` | 6.63:1 | AA |
| `#95a67a` | `#1c280c` | 5.9:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Assurestor Text | `--font-body` | webfont | 400, 600, 500, 700 | Body copy, navigation, links, buttons, captions, and eyebrow labels. | Inter |
| Assurestor Display | `--font-display` | webfont | 600 | Display headlines and section headings. | Space Grotesk |
| JetBrains Mono Variable | `--font-mono` | webfont | 400 | Compact technical badges and code-like labels. | JetBrains Mono |

- **Assurestor Text:** Use regular body text and semibold actions; eyebrow labels are uppercase with modest tracking.
- **Assurestor Display:** Semibold, close-set headings; measured display and heading styles use slightly negative tracking.
- **JetBrains Mono Variable:** Small monospaced labels with expanded tracking; badges commonly appear uppercase.

### Type scale — Augmented Fourth (ratio ≈ 1.39, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 600 | 1.03 | -0.02em | — | Assurestor Display | Oversized hero statement and prominent headline moments. |
| h1 | 44px | 600 | 1.08 | -0.02em | — | Assurestor Display | Primary hero or page-level heading. |
| h2 | 22px | 600 | 1.2 | -0.02em | — | Assurestor Display | Section titles such as feature and comparison introductions. |
| h3 | 19px | 600 | 1.6 | -0.02em | — | Assurestor Display | Card titles and subordinate feature headings. |
| body | 15px | 400 | 1.6 | 0 | — | Assurestor Text | Paragraphs, feature descriptions, and explanatory copy. |
| caption | 14.5px | 400 | 1.6 | 0 | — | Assurestor Text | Supporting notes, fine print, and compact secondary descriptions. |
| button | 15px | 600 | 1.6 | 0 | — | Assurestor Text | Primary and outlined CTA labels. |
| nav | 15px | 400 | 1.6 | 0 | — | Assurestor Text | Header and footer navigation links. |
| link | 15px | 600 | 1.6 | 0 | — | Assurestor Text | Inline actions and highlighted text links. |
| eyebrow | 11px | 600 | 1.6 | 0.06em | uppercase | Assurestor Text | Uppercase section labels and compact contextual lead-ins. |
| code | 10.5px | 400 | 1.6 | 0.06em | — | JetBrains Mono Variable | Technical status badges and compact system labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 4, 6, 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1180px.

The page sits within a centered content frame measured at a maximum width of 1180px, with left-aligned headings and structured columns. The hero pairs its text and CTAs with a large product-interface mockup, then gives way to five compact capability points. Long-form sections alternate two-column introductions with card grids, comparison tables, and paired panels. A comfortable density and pronounced section gaps keep extensive content navigable; use the measured spacing rhythm rather than introducing arbitrary gaps.

## Shape & elevation

- Radius: button `8px` · card `14px` · badge `5px` · xs `2px` · sm `4px` · md `5px` · lg `7px` · xl `8px` · 2xl `10px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease` on interactive elements.

The design is mostly flat: no measured shadow system and no gradient treatment. Separate content with thin olive borders, dark panel fills, and restrained rounded corners. The larger cards use a 14px radius, buttons 8px, and badges 5px; avoid pronounced floating layers.

## Imagery

There is no prominent photography or full-bleed media. The hero’s main visual is a detailed product UI illustration: a bordered dashboard with small capability tiles, security status, and an assistant conversation. Reuse crisp interface mockups, simple icons, and diagrams as supporting visuals; keep them within the olive palette and frame them as product evidence, not decorative stock imagery.

## Components

### Primary CTA

Lime-filled button with Deep Olive text, semibold Assurestor Text, and an 8px radius; used for demo booking.

### Secondary CTA

Transparent dark button with a 1px Electric Lime outline, lime semibold label, and 8px radius.

### Feature card

Forest Panel card with a 1px Moss Hairline border, 14px radius, and warm light text; groups explanatory content.

### Technical badge

Compact monospaced uppercase label in Electric Lime with a subtle olive outline and a 5px radius.

### Comparison table

Dense, aligned rows and columns use dark olive surfaces, fine borders, and lime to identify the Assurestor column.

### Product UI panel

Dashboard-style illustration presented inside a dark bordered frame, with small status tiles and restrained lime indicators.

### Inline link

Semibold Electric Lime text on the dark canvas, visually distinct without a button fill.

### Measured component styles

- **Primary button** (“Book a demo”): background #c6f24e · text #141d08 · border 1px solid · radius 8px · padding 9px 14px · 600 14px Assurestor Text
- **Secondary button** (“Partner benefits”): transparent background · text #c6f24e · border 1px solid #c6f24e · radius 8px · padding 11px 18px · 600 15px Assurestor Text
- **Link** (“See Assurestor Control”): transparent background · text #c6f24e · radius 0px · padding 0px · 600 15px Assurestor Text
- **Card** (“Your existing licensing and vendor relat”): transparent background · text #ecf2e0 · border 1px solid #33461a · radius 0px · padding 0px · 400 17px Assurestor Text
- **Badge** (“SSO”): transparent background · text #c6f24e · border 1px solid #8fb02e · radius 5px · padding 3px 8px · 400 10.5px JetBrains Mono Variable · uppercase
- **Navigation item** (“Zerto licensing”): transparent background · text #95a67a · radius 0px · padding 0px · 400 15px Assurestor Text

## Do

- Use Deep Olive (#141d08) as the dominant canvas.
- Reserve Electric Lime (#c6f24e) for CTAs, links, and key emphasis.
- Set headings in a compact, semibold display sans.
- Use Forest Panel (#1c280c) to distinguish grouped content.
- Define cards and tables with fine Moss Hairline (#33461a) borders.
- Keep explanatory copy Warm Chalk or Sage Signal for clear hierarchy.

## Don't

- Do not turn the page into a bright, white interface.
- Do not use lime as a large section background except for a standout CTA band.
- Do not add decorative gradients or heavy shadows.
- Do not replace the product-focused interface mockups with stock photography.
- Do not make every piece of copy equally bright or prominent.
- Do not use oversized rounded cards where the design calls for flat bordered rows.

## Agent prompt

Build a new Assurestor-style page with a dark, technical SaaS visual system. Use Deep Olive (#141d08) for the canvas, Forest Panel (#1c280c) for grouped content, Warm Chalk (#ecf2e0) for primary text, and Sage Signal (#95a67a) for secondary copy and navigation. Treat Electric Lime (#c6f24e) as a scarce signal for primary actions, links, and selected headline phrases. Use a confident display sans for headings and a clean sans for readable body copy; reserve monospaced type for compact technical labels. Keep content centered in a constrained frame, use left-aligned introductions, and organize dense information into bordered cards, tables, and product UI panels. Favor thin Moss Hairline (#33461a) borders over shadows, comfortable section separation, and restrained radii. Avoid generic stock imagery and decorative gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Long single-page content begins with a two-column hero, followed by stacked feature, comparison, security, platform, FAQ, and CTA blocks. | Demo booking CTA, Partner benefits CTA, Product interface preview, Feature summaries | Dark olive canvas, Lime headline emphasis, Bordered feature grids, Comparison tables, Product UI illustration |
| 2 | footer | Four-column footer links sit above a compact legal and utility row. | Grouped navigation, Partner links, Legal and social links | Dark canvas, Muted text, Thin separating rules, Compact brand mark |

## Source CSS custom properties (selected)

```css
--gap: #3e5220;
--text: #ecf2e0;
--line-border: #141d0866;
--nav-bg: #141d08eb;
--shadow-lift: 0 18px 48px #00000073;
--font-display: "Assurestor Display", "Assurestor Display Fallback", "Segoe UI", system-ui, sans-serif;
--font-body: "Assurestor Text", "Assurestor Text Fallback", "Segoe UI", system-ui, sans-serif;
--font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, menlo, consolas, monospace;
--text-base: 17px;
--text-base-sm: 16px;
--radius-btn: 8px;
--radius-input: 7px;
--radius-inner: 10px;
--radius-card: 14px;
--radius-band: 18px;
```

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