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

# dope.security · Design System

> A dark security interface against cinematic skies

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

A near-black SaaS homepage balances restrained security-product typography with a vivid, cinematic hero. Outlined feature rows, fine borders, and expansive dark sections keep attention on the product and its direct-access message.

## North star

Keep the interface nearly black and typographic; reserve cinematic color for the hero artwork and use fine outlines to structure content.

## Overview

The page uses #090909 as a nearly continuous canvas, with little tonal separation between sections. The visual contrast comes from pale typography and the opening hero artwork: a saturated blue-violet sky with pink clouds and a translucent boarding-pass-style product panel. That scenic palette belongs to the hero image, not the interface’s core color system. Whyte Inktrap carries the large, compact headlines and lighter body copy; Whyte Inktrap Mono gives feature labels a technical, uppercase, widely tracked outline treatment. Navigation is small and uppercase. Content is mostly left-aligned and vertically spacious, with a single-column flow and thin outlined feature rows rather than filled cards. White and cool off-white mark headings, controls, and links; muted gray is reserved for secondary details and hairlines. Purple is a restrained accent, most visible in the play control and subtle glow. Rounded pill actions contrast with the otherwise precise, flat-edged layout.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Night Canvas | `#090909` | `--color-night-canvas` | brand | Dominant page canvas and navigation backdrop across the long-form sections. |
| Cool Porcelain | `#f7f9fa` | `--color-cool-porcelain` | neutral | Primary navigation and most bright text, including key headings. |
| Signal White | `#ffffff` | `--color-signal-white` | neutral | High-contrast headings, outlined controls, feature links, and button borders. |
| Quiet Graphite | `#6b6b6b` | `--color-quiet-graphite` | semantic | Muted text and subtle hairlines against the dark canvas. |
| Soft Chalk | `#f0f0f0` | `--color-soft-chalk` | neutral | Secondary heading tone; retain as a restrained text shade. |
| Violet Signal | `#6c4bd6` | `--color-violet-signal` | accent | Small accent details and glow; avoid turning it into a broad interface fill. |
| Deep Black | `#020202` | `--color-deep-black` | surface | Near-black gradient endpoint and dark image-overlay tone. |
| Iron Gray | `#3a3a3a` | `--color-iron-gray` | surface | Subtle dark detail and gradient tone, not a major section background. |
| Border Charcoal | `#2c2c2c` | `--color-border-charcoal` | surface | Fine border on the small latency callout control. |
| Coal Tint | `#222222` | `--color-coal-tint` | surface | Very small dark navigation-area background variation. |

### Semantic aliases

`--color-canvas` → `#090909` (Night Canvas) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#6b6b6b` (Quiet Graphite) · `--color-border` → `#6b6b6b` (Quiet Graphite) · `--color-accent` → `#6c4bd6` (Violet Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#090909` | 19.91:1 | AAA |
| `#6b6b6b` | `#090909` | 3.74:1 | AA-large |
| `#6c4bd6` | `#090909` | 3.43:1 | AA-large |

### Gradients

- `radial-gradient(circle closest-corner at 10% 50%, rgb(108, 75, 214), rgba(0, 0, 0, 0) 55%)`
- `linear-gradient(90deg, rgba(9, 9, 9, 0.75), rgba(0, 0, 0, 0) 51%), linear-gradient(0deg, rgb(9, 9, 9), rgba(0, 0, 0, 0) 21%)`
- `linear-gradient(rgba(0, 0, 0, 0) 83%, rgba(0, 0, 0, 0.78))`
- `linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Whyte Inktrap | `--font-body` | webfont | 300, 400, 700, 500 | Display and headline face, body copy, navigation, and links. | Inter |
| Whyte Inktrap Mono | `--font-mono` | webfont | 400 | Oversized feature labels and technical uppercase headings. | Space Mono |
| Karla | `--font-karla` | webfont | 400, 700 | Captions and the small latency callout. | Karla |
| GrandSlang | `--font-grandslang` | webfont | 400 | Rare decorative emphasis in display copy. | Cormorant Garamond |

- **Whyte Inktrap:** Use tight, heavy display headlines and lighter body text; navigation is uppercase and compact.
- **Whyte Inktrap Mono:** Use uppercase with exceptionally wide tracking and a technical, outlined-label appearance.
- **Karla:** Keep supporting UI copy small, readable, and neutral in weight.
- **GrandSlang:** Use sparingly for an expressive italic or high-contrast flourish, not general interface text.

### Type scale — Perfect Fourth (ratio ≈ 1.345, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 88px | 500 | 0.8 | -0.03em | capitalize | Whyte Inktrap | Oversized hero display copy with expressive capitalization. |
| h1 | 80px | 700 | 0.9 | -0.07em | — | Whyte Inktrap | Primary hero headline, set in bold, tightly tracked lines. |
| h2 | 73.5px | 400 | 0.9 | 0.2em | uppercase | Whyte Inktrap Mono | Large uppercase mono feature-section heading. |
| h3 | 48px | 400 | 1.2 | 0 | — | Whyte Inktrap | Prominent section headlines, including the SWG problem statement. |
| h4 | 40px | 500 | 1.2 | 0 | — | Whyte Inktrap | Secondary feature or product panel headings. |
| body | 20px | 300 | 1.6 | 0 | — | Whyte Inktrap | Light-weight explanatory copy and hero supporting text. |
| caption | 13px | 400 | 1.3 | 0 | — | Karla | Small annotations and product-interface details. |
| nav | 12px | 400 | 1 | 0 | uppercase | Whyte Inktrap | Compact uppercase site navigation. |
| eyebrow | 73.5px | 400 | 0.9 | 0.2em | uppercase | Whyte Inktrap Mono | Technical uppercase labels above or beside content. |
| code | 73.5px | 400 | 0.9 | 0.2em | uppercase | Whyte Inktrap Mono | Oversized mono-style technical feature labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 3, 6, 8, 9, 10, 12, 15, 16, 18, 20, 24, 26, 32, 40, 64 px.
- Section rhythm 72px · element gap 16px · card padding — · max content width 1294px.

The page follows a single-column section flow on a near-black canvas, with a measured page max width of 1294px. The opening viewport places large, left-aligned headline copy opposite a translucent product panel over full-bleed hero imagery. Subsequent features use horizontal outlined rows with generous separation, followed by a sparse problem statement and long dark intervals. The measured spacing system uses an 8px base unit, a 72px section gap, and comfortable density. Keep the composition open rather than filling every region with cards.

## Shape & elevation

- Radius: button `9999px` · nav `11px` · link `8px` · xs `4px` · sm `6px` · md `8px` · lg `11px` · pill `9999px`
- Shadow `hairline` (nav): `rgba(16, 24, 40, 0.05) 0px 1px 2px 0px`
- Shadow `md` (button): `rgba(0, 0, 0, 0.35) 0px 4px 18px 0px`
- Motion: standard transition `0.6s cubic-bezier(0.23, 1, 0.32, 1)` on interactive elements.

The interface is mostly flat, with no prominent card-shadow system. Thin gray and white borders define navigation, feature rows, and controls. The hero panel gains depth through translucency and layered image gradients rather than a raised card. A small latency callout uses a dark fill, charcoal border, and measured soft shadow.

## Imagery

The hero is defined by cinematic sky imagery: deep blue and violet tones, pink clouds, and a luminous horizon. A translucent boarding-pass-inspired product panel overlays the right side, while headline and play affordance sit left. Use dark gradients at image edges to blend into the black canvas. Later imagery is sparse; the page’s saturated colors are chiefly part of the hero artwork, not the interface palette.

## Components

### Top navigation

Compact horizontal menu on the dark canvas, with uppercase links, a fine divider, and outlined login action.

### Hero headline

Large left-aligned display statement, combining bold sans-serif lines with a more expressive treatment for selected words.

### Product panel

Translucent boarding-pass-style panel over the hero image, containing a short deployment message and pill-shaped sign-in actions.

### Feature list

Stacked, thinly outlined horizontal rows; oversized uppercase mono labels and a right-aligned arrow keep each item scannable.

### Video affordance

Small circular outlined play control paired with a short watch-time prompt and a restrained violet play symbol.

### Latency callout

Small black rounded callout with compact Karla copy, charcoal border, and subtle shadow.

### Measured component styles

- **Primary button** (“Try now with Google”): background #141212 · text #f7f9fa · border 1px solid #ffffff · radius 1584px · padding 20px 32px · 700 16px Whyte Inktrap
- **Secondary button** (“Direct is about 86ms. Through a cloud pr”): background #0a0b0e · text #ffffff · border 1px solid #2c2c2c · radius 999px · padding 10px 16px · 400 13px Karla · shadow rgba(0, 0, 0, 0.35) 0px 4px 18px 0px
- **Link** (“SSL INSPECTION SSL INSPECTION”): transparent background · text #ffffff · radius 8px · padding 16px · 400 16px Whyte Inktrap · uppercase
- **Navigation item** (“PRODUCTS PRICING RESOURCES MANAGE AIABOU”): transparent background · text #f7f9fa · radius 0px · padding 0px · 400 16px Whyte Inktrap

## Do

- Use #090909 as the dominant canvas.
- Keep headings bright and clearly separated from muted copy.
- Use the mono face for technical uppercase feature labels.
- Structure features with thin outlined rows instead of filled cards.
- Let hero imagery carry the saturated blue-violet and pink tones.
- Use rounded pill shapes for primary sign-in actions.

## Don't

- Do not spread vivid gradients across the whole interface.
- Do not introduce unmeasured colors or decorative surface fills.
- Do not crowd the page with dense card grids.
- Do not use the mono face for long body paragraphs.
- Do not give secondary text the same emphasis as the main headline.
- Do not add heavy shadows to otherwise flat content.

## Agent prompt

Build a new page in the dope.security visual style. Use Night Canvas (#090909) for the dominant background, Cool Porcelain (#f7f9fa) and Signal White (#ffffff) for key text and controls, and Quiet Graphite (#6b6b6b) for muted details and hairlines. Keep Violet Signal (#6c4bd6) as a small accent. Set large, tightly tracked headlines in a Whyte Inktrap-like sans; use a widely tracked uppercase mono for technical labels. Maintain a single-column section flow with generous dark breathing room and fine outlined feature rows. If using a hero image, keep its color cinematic and blend its edges into the canvas with dark overlays. Prefer flat surfaces, subtle borders, and pill-shaped primary actions over raised cards or busy grids.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed cinematic image with left-aligned headline and a translucent product panel on the right. | Primary product sign-in actions, Play-video affordance | Dark image overlays, Pill buttons, Compact top navigation |
| 2 | feature-grid | Single-column stack of wide outlined rows on the black canvas. | Clickable feature links, Arrow cues for exploration | Uppercase mono labels, Thin borders, Right-aligned arrows |
| 3 | other | Sparse, left-aligned headline in a tall dark section. | Editorial reading pause | Bright headline, Large negative space |
| 4 | other | Dark, spacious visual section with a small image and centered supporting statement. | Brand-story transition | Minimal copy, Large dark intervals |
| 5 | gallery | Full-bleed imagery emerging from the dark canvas. | Visual browsing | Edge-to-edge media, Dark surrounding canvas |

## Source CSS custom properties (selected)

```css
--nav-bg-color: #333248b3;
--nn--background: #090909;
--untitled-ui--primary600: #7f56d9;
--untitled-ui--primary700: #6941c6;
--untitled-ui--primary100: #f4ebff;
--spacing-layout--row-col-gap: 40px;
--spacing-layout--row-col-gap-sm: 32px;
--grid-gap-split: calc(40px/2);
```

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