Skip to content
DesignMunkDesignMunk Submit a site

Midnight Labs

midnightlabs.ai
Enterprise brand protection powered by predictive AI—stopping piracy, impersonation, theft.
AI Technology Framer Homepage Geist
Share Visit site
midnightlabs.ai DESKTOP · 1440
Midnight Labs

AI Breakdown

Design export

---
version: alpha
name: Midnight Labs
description: Enterprise brand protection powered by predictive AI—stopping piracy, impersonation, theft.
colors:
  primary: "#ffffff"
  secondary: "#7c7c7c"
  tertiary: "#fac77d"
  neutral: "#060a18"
  border: "#000000"
  brand-silver-polish: "#c6c6c6"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Geist
    fontSize: 49px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Geist
    fontSize: 37px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -0.017em
  headline-sm:
    fontFamily: sans-serif
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.21
  headline-xs:
    fontFamily: Geist
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.02em
  body-md:
    fontFamily: Geist
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 24px
  md: 30px
spacing:
  xs: 4px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#0000ee"
    rounded: "{rounded.md}"
    padding: 16px 32px
    height: 60px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px 32px
    height: 60px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.border}"
    rounded: "{rounded.sm}"
    padding: 32px 24px
---

# Midnight Labs: Dark Theatrics With One Auric Accent

## Overview

Midnight Labs presents an enterprise-grade, dark-mode system suited to cybersecurity and compliance audiences. The tone is serious and confident, softened by a single warm accent that signals premium tools without gloss. Layouts are spacious rather than dense, with large headline sizes and generous vertical rhythm. Use this system when clarity, credibility, and analytical calm are required.

## Colors

- **primary (#ffffff):** Default text on dark surfaces; use for headings, body copy, and key UI labels.
- **secondary (#7c7c7c):** Muted supporting text, captions, and non-critical metadata.
- **tertiary (#fac77d):** The accent—use sparingly for CTA fills, keyword highlights, and subtle glows.
- **neutral (#060a18):** Core background across the site; establishes the midnight canvas.
- **border (#000000):** Hairline dividers on dark surfaces; keep at 1px for restraint.
- **brand-silver-polish (#c6c6c6):** Polished metallic for icons, separators, or subdued chart lines.
- **surface ({colors.neutral}):** Alias of neutral for containers and cards.
- **on-surface ({colors.primary}):** Text color to sit on all dark surfaces.

## Typography

- Geist is the primary family across headings and body (headline-lg, -md, -xs; body-md). It is freely available via Google; load specified weights (400–500 here) for performance and consistency.
- headline-lg (Geist 49px/1.2, 500, -0.02em) is the hero level—short, confident lines.
- headline-md (Geist 37px/1.02, 500, -0.017em) drives section leads and metric callouts.
- headline-sm (sans-serif 28px/1.21, 500) is a generic system sans for card titles and in-product labels. As this is a generic stack, suitable open substitutes include Inter, Manrope, or IBM Plex Sans.
- headline-xs (Geist 21px/1.3, 400, -0.02em) works for overlines and compact headings.
- body-md (Geist 16px/1.5, 400) is standard paragraph and UI copy; keep contrast high on the dark background.

## Layout

Spacing follows a coarse-to-fine scale: 80px for section paddings (xl), 40px for major gaps (lg), 24px for card padding and grid gutters (md), 16px for element padding (sm), and 4px for micro-adjustments (xs). Cards use 32px top/bottom and 24px left/right padding by token. Centered hero; subsequent sections align left within a wide content column. Keep vertical rhythm in multiples of 16/24 to preserve the calm, analytical feel.

## Elevation & Depth

There are no drop shadows (sm–xl are none). Depth relies on tonal stacking, hairline #000000 borders, and a warm inset glow defined in the inner shadow token for hero/dash containers. Contrast steps (primary on neutral, secondary on neutral) and whitespace establish hierarchy.

## Shapes

Two radii communicate function: 30px (md) for interactive pills such as primary and secondary buttons; 24px (sm) for structural containers and cards. Links are square (0px) to read as textual actions rather than buttons.

## Components

- Button — Primary: #FAC77D background with #0000EE text, 60px height, 16px × 32px padding, 30px radius. Use for main CTAs only.
- Button — Secondary: Text-only on dark surfaces using #FFFFFF, 60px height, 16px × 32px padding, 30px radius; no fill by default.
- Button — Link: Inline action with #FFFFFF text, no radius; pair with underline on hover.
- Card: #060A18 background, #000000 text by token, 24px radius, 32px × 24px padding. Apply the warm inner inset glow when showcasing product UI.

Distinctive components on this page:

### Top Navigation
- Compact horizontal nav with logo at left and simple links. Text in #FFFFFF; active or hover states can use #7C7C7C. Keep height comfortable and unobtrusive.

### Hero With Highlighted Headline
- headline-lg at 49px/1.2, weight 500 in #FFFFFF; a single keyword can take the #FAC77D accent. Subcopy in body-md. Primary button uses the button-primary spec.

### Product Dashboard Mockup Frame
- Large card (24px radius) containing charts and filters. Apply the inner inset glow: rgba(253, 219, 170, 0.4) 0 0 32px 0 inset, rgb(250, 199, 125) 0 0 8px 0 inset. Use #C6C6C6 for rule lines and tick labels.

### Services Index
- Multi-column list of offerings (e.g., Copyright Enforcement, Brand Protection). Titles in headline-sm (28px) with 24px grid gaps. Keep text in #FFFFFF on #060A18.

### Nova Feature Trio
- Three-up features (Predictive Insights, Actionable Analytics, Seamless Integration). Titles in headline-xs (21px), descriptions in body-md. Use #FAC77D for small markers or dividers only.

### Threat Detection Section
- Section header in headline-md (37px). Three bullets in body-md; space with 24px gaps. Use subtle #000000 borders to delineate columns if needed.

### Testimonial Block
- Quote in body-md with a compact avatar and attribution. Keep container 24px radius with generous 24px padding.

### Metrics Counter
- Prominent numeral (e.g., 213,593) in headline-md with supporting label in secondary. Center within a 24px-radius band.

## Do's and Don'ts

- Do reserve #FAC77D for one or two high-value actions or word highlights per view.
- Do keep headlines at specified tracking (-0.02em / -0.017em) to match the intended tone.
- Do use the 24px radius for structural cards and 30px for interactive pills; don't mix them.
- Don't introduce drop shadows; use the provided inner glow for feature frames.
- Don't shrink buttons below 60px height or alter 16px × 32px padding; consistency signals trust.
- Don't add new accent colors; primary (#FFFFFF), secondary (#7C7C7C), and #FAC77D are the full palette for UI work.

## Agent Prompt Guide

Quick color reference — Text: #FFFFFF. Background: #060A18. Border: #000000. Accent: #FAC77D.

1) Build a centered hero on #060A18 with a 1200px max-width column. Heading: Geist 49px, weight 500, line-height 1.2, letter-spacing -0.02em, color #FFFFFF; highlight one keyword with #FAC77D. Subcopy: Geist 16px/1.5 #FFFFFF at 80% opacity if needed. Primary button: 60px height, 16px 32px padding, 30px radius, background #FAC77D, text #0000EE.

2) Create a three-card feature row. Each card: background #060A18, radius 24px, padding 32px 24px, 1px border #000000. Title: Geist 21px/1.3 weight 400 color #FFFFFF. Body: Geist 16px/1.5 color #7C7C7C. Add a small #FAC77D accent rule at the top of each card.

3) Compose a product dashboard frame. Container: radius 24px, padding 32px 24px, background #060A18. Apply inset shadow: rgba(253,219,170,0.4) 0 0 32px 0 inset, rgb(250,199,125) 0 0 8px 0 inset. Inside, use #C6C6C6 for axes and gridlines, #FFFFFF for labels.

4) Build a metrics band. Center a value in Geist 37px, weight 500, line-height 1.02, letter-spacing -0.017em, color #FFFFFF. Add a secondary label in #7C7C7C below. Container radius 24px with 24px vertical padding; background #060A18; border #000000.

5) Lay out a services index. Use two columns with 24px column gap and 16px row gap. Each item title: sans-serif 28px/1.21 weight 500 in #FFFFFF; section header in Geist 37px, 500. Keep section paddings 80px top/bottom.

## Similar Brands

- Vercel — similarly austere dark UI with Geist; Vercel skews monochrome where Midnight Labs introduces a single gold accent and glow.
- Darktrace — cybersecurity with dark palettes and glows; Darktrace leans blue-purple versus Midnight's warm accent.
- Palantir — enterprise seriousness and restrained typography on dark; less theatrical lighting than Midnight Labs.
- OpenAI — dark surfaces with large, centered type; OpenAI's accenting is cooler and less metallic.
- CrowdStrike — high-contrast dark with a single accent (red); more aggressive than Midnight's calm, analytical tone.

More like this

Browse AI →
lev8.com
Lev8 AI
Lev8
Turn the live web into people and business intelligence.
Homepage · 5 hours ago
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 6 hours ago
humblytics.com
Humblytics AI
Humblytics
Revenue-based analytics and A/B testing with Stripe-verified results.
Homepage · 21 hours ago
adapt.com
Adapt AI
Adapt
One agent. Full control on the full-stack AI platform.
Homepage · 23 hours ago