# Highlight · Design system migration spec

> Source: https://www.highlight.io  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of modern, dark-themed SaaS design for developer tools, balancing technical clarity with visual appeal.

## 1. Identity DNA

Highlight is a developer dashboard made tangible—a system built on the principles of a clean, dark-mode IDE. Its identity is defined by focused observation, where every design choice serves the clarity of monitoring and debugging. This is observability rendered in pixels, not just described in documentation.

**One-liner:** An open-source full-stack monitoring platform for modern web applications.
**Keywords:** Open Source · Monitoring · Fullstack · Developer Tools · Observability
**Analogy:** A dark, clean IDE dashboard for full-stack monitoring.

## 2. Color

The color system is a study in focused contrast. A deep navy background provides a neutral canvas for high-legibility text, while a single, vibrant cyan accent directs the eye to primary actions and status highlights.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0D0225` | main background |
| `--bg-soft` | `#30294E` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#DFDFDF` | secondary text |
| `--muted` | `#9D97AA` | placeholder |
| `--accent` | `#72E4FC` | single accent |
| `--line` | `rgba(48, 41, 78, 1)` | divider |

**Color principle:** Dark mode first with high-contrast cyan accents and a subtle neon yellow highlight.

The principle is deliberate constraint: a single accent color prevents visual noise and establishes a clear hierarchy for interactive states.

## 3. Typography

Typography adopts a modern, humanist sans-serif (Poppins) for a voice that is technical yet accessible. The scale progresses from commanding hero headlines down to clear body text, establishing a rhythm for scanning dense information.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 58px | 1.0 | 600 | -0.5px | Hero Headline |
| heading | 44px | 1.0 | 600 | -0.5px | Section Headlines |
| body-lg | 18px | 1.44 | 400 | 0 | Subheadings and Intro Text |
| body | 16px | 1.5 | 400 | 0 | General Body Text |

## 4. Spacing

A consistent 4px grid base underpins the layout, creating a predictable rhythm of space that aids comprehension.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 44 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid base with generous whitespace for readability.

## 5. Surfaces

Depth is communicated through surface treatment rather than heavy gradients. Cards and containers are defined by subtle, high-contrast borders and occasional offset shadows, maintaining the dark, flat aesthetic.

- **Radius:** sm 4px · md 8px · lg 16px · pill 44px
- **Shadows:**
  - rgb(108, 55, 244) 8px 8px 0px -2px
- **Borders:** 1px solid rgba(48, 41, 78, 1)

## 6. Layout

The layout skeleton is a centered column of content flanked by wide margins, focusing attention on the core value proposition. Within this structure, feature tabs and cards are arranged using flexible containers to create organized, scannable sections.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content with wide margins, utilizing flexbox for feature tabs.

## 7. Motion & Interaction

Motion is functional and restrained, with transitions serving to confirm interaction and guide focus. The philosophy is one of immediate feedback—color shifts on hover and smooth, quick transitions between interface states.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle color transitions on hover for interactive elements.
  - Smooth transitions between feature tabs.

- **Hover:** Subtle color shifts and opacity changes on buttons and links.
- **Click:** Immediate feedback with color transitions.
- **Transition:** 0.2s cubic-bezier(0.4, 0, 0.2, 1) for standard interactions.
- **Keyboard:** Standard tab navigation for interactive elements.

## 8. Voice & Don'ts

The editorial voice is professional and direct, speaking to developers with clarity and avoiding superfluous jargon. The tone matches the interface: informative, efficient, and focused on utility.

- **Tone:** Technical yet accessible, professional, and developer-focused.
- **Headline style:** Direct, value-driven, and highlighting open-source nature.
- **CTA style:** Action-oriented (Get started, Live demo) with clear visual hierarchy.
- **Avoid:** Avoid overly casual or 'startup-bro' jargon. / Avoid complex architectural diagrams in the hero. / Avoid cluttered layouts that obscure the core value prop.

### Don'ts
- ❌ Don't use a light theme — screenshot shows a dark mode interface with a deep navy background (#0D0225).
- ❌ Don't use a secondary accent color — screenshot shows a single dominant high-chroma cyan accent (#72E4FC) for buttons and highlights.
- ❌ Don't use decorative serif fonts — screenshot shows a clean, modern humanist sans-serif (Poppins) for all text.
- ❌ Don't use sharp corners everywhere — screenshot shows a mix of subtle 8px/16px rounded corners and 44px pill shapes.
- ❌ Don't use low-contrast text — screenshot shows high-contrast white (#FFFFFF) and light gray (#DFDFDF) on the dark background.
- ❌ Don't clutter the header — screenshot shows a clean, top-aligned navigation with clear primary/secondary action buttons.

The system deliberately excludes decorative elements, light themes, and secondary accents that would dilute the focused, tool-like clarity of the interface.

## System Prompt (paste into AI tool)

```
This is a developer-focused SaaS landing page for an open-source monitoring platform. The design DNA features a dark mode interface with a deep navy background (#0D0225), high-contrast white text (#FFFFFF), and a single dominant cyan accent color (#72E4FC). Typography uses a modern humanist sans-serif (Poppins) for a clean, technical feel. Key elements include large, bold headlines, pill-shaped buttons (solid cyan and outlined variants), and feature navigation tabs. The layout is centered and spacious, emphasizing readability and clear calls to action. Critical donts: never use a light theme, never introduce secondary accent colors, and never use decorative serif fonts. The design is clean, professional, and optimized for a developer audience.
```