dope.security PlatformSolutionsUse CasesResources Schedule a Demo

Midnight terminal with violet

#b388ff

Phosphor Violet

#ff5b5b

Alert Red

#0a0a0f

Terminal Black

dope.security

Visit ↗

Midnight terminal with violet phosphor accents

A cybersecurity dashboard aesthetic: near-black background, tight monospace type, and a single violet phosphor accent that reads like an early CRT terminal. Everything grid-aligned to an 8-pixel baseline. No decorative curves — corners are 4px or sharp. The interface communicates 'quiet vigilance'.

https://dope.security

Color Palette

ACCENT

Phosphor Violet

#b388ff

--color-phosphor

Primary accent, active state, brand mark

Alert Red

#ff5b5b

--color-alert

Destructive action, error state

NEUTRALS

Terminal Black

#0a0a0f

--color-terminal

Page background

Chassis

#141420

--color-chassis

Card surface

Rail

#242438

--color-rail

Border, divider

Console Text

#e4e4f0

--color-console-text

Body text high emphasis

Muted Console

#8a8ab0

--color-muted-console

Body text secondary

Typography

Type Scale

Major Second (1.125) from 14px base

display

56px · 500 · 1.05

The quick brown fox jumps

heading-lg

32px · 500 · 1.15

The quick brown fox jumps

heading

22px · 500 · 1.25

The quick brown fox jumps

subheading

16px · 500 · 1.4

The quick brown fox jumps

body

14px · 400 · 1.55

The quick brown fox jumps

Spacing & Shape

Spacing

space-1

4px

Micro-gap between meta pieces

space-2

8px

Component internal padding

space-4

16px

Card padding

space-8

32px

Section gap

space-16

64px

Hero vertical rhythm

Radii

radius-none

0px

Data tables, code blocks

radius-sm

4px

Buttons, inputs, cards

Guidelines

Monospace is the identity — do not introduce proportional type anywhere.
Radius is either 0 or 4px, never larger. Sharp corners reinforce the terminal aesthetic.
Phosphor violet is the only positive-emphasis color. Reserve alert red strictly for destructive/error states.
Every layout snaps to an 8px baseline grid — including type.

More like this

AI for Business

Brutalist editorial showroom on warm gray

Reflect Notes

Starlit violet cosmos — a dark editorial notebook

Hungry Tiger

Turmeric-bright graffiti on a warm cream wall

Apple

White room with a single blue accent

Vercel

Typeset terminal on white paper

Notion

Warm paper notebook under morning light

# dope.security — Style Reference
> Midnight terminal with violet phosphor accents

**Theme:** dark

A cybersecurity dashboard aesthetic: near-black background, tight monospace type, and a single violet phosphor accent that reads like an early CRT terminal. Everything grid-aligned to an 8-pixel baseline. No decorative curves — corners are 4px or sharp. The interface communicates 'quiet vigilance'.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Phosphor Violet | `#b388ff` | `--color-phosphor` | Primary accent, active state, brand mark |
| Alert Red | `#ff5b5b` | `--color-alert` | Destructive action, error state |
| Terminal Black | `#0a0a0f` | `--color-terminal` | Page background |
| Chassis | `#141420` | `--color-chassis` | Card surface |
| Rail | `#242438` | `--color-rail` | Border, divider |
| Console Text | `#e4e4f0` | `--color-console-text` | Body text high emphasis |
| Muted Console | `#8a8ab0` | `--color-muted-console` | Body text secondary |

## Tokens — Typography

**Scale:** Major Second (1.125), base 14px

| Step | Size | Weight | Line-height |
|------|-----:|-------:|------------:|
| display | 56px | 500 | 1.05 |
| heading-lg | 32px | 500 | 1.15 |
| heading | 22px | 500 | 1.25 |
| subheading | 16px | 500 | 1.4 |
| body | 14px | 400 | 1.55 |
| meta | 12px | 400 | 1.4 |

### Fonts
- **DISPLAY — Berkeley Mono** · weights 500, 700 · sizes 22–56px · line-height 1.05–1.25 · letter-spacing -0.01em
  - Fallback: JetBrains Mono, IBM Plex Mono
  - Monospace display asserts the terminal identity at every scale.
- **BODY — Berkeley Mono** · weights 400, 500 · sizes 12–16px · line-height 1.4–1.55 · letter-spacing 0
  - Fallback: JetBrains Mono, ui-monospace
  - Unified monospace across the entire UI.

## Tokens — Spacing & Shape

| Name | Value | Role |
|------|-------|------|
| `space-1` | 4px | Micro-gap between meta pieces |
| `space-2` | 8px | Component internal padding |
| `space-4` | 16px | Card padding |
| `space-8` | 32px | Section gap |
| `space-16` | 64px | Hero vertical rhythm |
| `radius-none` | 0px | Data tables, code blocks |
| `radius-sm` | 4px | Buttons, inputs, cards |

## Guidelines

- Monospace is the identity — do not introduce proportional type anywhere.
- Radius is either 0 or 4px, never larger. Sharp corners reinforce the terminal aesthetic.
- Phosphor violet is the only positive-emphasis color. Reserve alert red strictly for destructive/error states.
- Every layout snaps to an 8px baseline grid — including type.