CURATED · OPEN · FREE

Highlight

An open-source full-stack monitoring platform for modern web applications.

devobservability

↓ Download design system (5 MB)Open in OpenDesign

Visit: https://www.highlight.io

📦 Browse pack contents →

Identity DNA

Open SourceMonitoringFullstackDeveloper ToolsObservability

A dark, clean IDE dashboard for full-stack monitoring.

Color

#72E4FCAccent

#FFFFFFInk

#DFDFDFInk soft

#0D0225BG

#30294EBG soft

#9D97AAMuted

rgba(48, 41, 78, 1)Line

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

Typography

humanist-sans · monospace

display58px · 600
heading44px · 600
body-lg18px · 400
body16px · 400

Spacing

4px

8px

12px

16px

24px

32px

44px

48px

64px

96px

Consistent 4px grid base with generous whitespace for readability.

Surfaces

sm · 4px

md · 8px

lg · 16px

pill · 44px

1px solid rgba(48, 41, 78, 1)

rgb(108, 55, 244) 8px 8px 0px -2px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

150msmicro

200mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Subtle color transitions on hover for interactive elements. · Smooth transitions between feature tabs.

Subtle color shifts and opacity changes on buttons and links. · Immediate feedback with color transitions.

Components

button Pill-shaped buttons with solid cyan primary and outlined secondary variants.
card Dark cards with subtle borders, often containing integration icons.
chip Tab-like chips for feature navigation (Session Replay, Error Monitoring, etc.).
input Minimalist dark inputs, though not prominently featured in the hero.
hero Large centered headline with accent color, stacked CTAs, and feature overview tabs.

Voice & Don'ts

Tone Technical yet accessible, professional, and developer-focused.
Headlines Direct, value-driven, and highlighting open-source nature.
CTAs Action-oriented (Get started, Live demo) with clear visual hierarchy.

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.
Avoid: Avoid overly casual or 'startup-bro' jargon.
Avoid: Avoid complex architectural diagrams in the hero.
Avoid: Avoid cluttered layouts that obscure the core value prop.

Inside the pack — real screenshots

Highlight — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko