DESIGN.md · Analysis

Midnight Network

midnight.network · 12 May 2026 · 47 colors · Outfit

Midnight Network

Midnight is a fourth-generation blockchain platform bringing rational privacy to Web3 through zero-knowledge proofs. The design system reflects cryptographic precision and technical sophistication through a high-contrast dark aesthetic with electric blue accents.

Colors

surface#0a0a0a

surface-dim#050505

surface-bright#1a1a1a

surface-container-lowest#000000

surface-container-low#0f0f0f

surface-container#151515

surface-container-high#242424

surface-container-highest#2d2d2d

on-surface#ffffff

on-surface-variant#e0e0e0

inverse-surface#f5f5f5

inverse-on-surface#101010

outline#666666

outline-variant#404040

surface-tint#0066ff

primary#0066ff

on-primary#ffffff

primary-container#0052cc

on-primary-container#ffffff

inverse-primary#0052cc

secondary#1a1a1a

on-secondary#ffffff

secondary-container#2d2d2d

on-secondary-container#ffffff

tertiary#404040

on-tertiary#ffffff

tertiary-container#555555

on-tertiary-container#ffffff

error#ff4444

on-error#ffffff

error-container#cc0000

on-error-container#ffffff

primary-fixed#0066ff

primary-fixed-dim#0052cc

on-primary-fixed#ffffff

on-primary-fixed-variant#e0e0ff

secondary-fixed#1a1a1a

secondary-fixed-dim#0f0f0f

on-secondary-fixed#ffffff

on-secondary-fixed-variant#e0e0e0

tertiary-fixed#404040

tertiary-fixed-dim#2d2d2d

on-tertiary-fixed#ffffff

on-tertiary-fixed-variant#d0d0d0

background#0a0a0a

on-background#ffffff

surface-variant#1a1a1a

Typography

display: fontFamily: Outfit · fontSize: 60px · fontWeight: 700 · lineHeight: 68px · letterSpacing: -0.03em
headline-lg: fontFamily: Outfit · fontSize: 40px · fontWeight: 600 · lineHeight: 48px · letterSpacing: -0.02em
headline-md: fontFamily: Outfit · fontSize: 28px · fontWeight: 600 · lineHeight: 36px · letterSpacing: -0.01em
title-lg: fontFamily: Outfit · fontSize: 20px · fontWeight: 600 · lineHeight: 28px · letterSpacing: 0em
body-lg: fontFamily: Outfit · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0.01em
body-md: fontFamily: Outfit · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0.01em
label-md: fontFamily: Outfit · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.05em
label-sm: fontFamily: Outfit · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.04em

Design guidance

Overview

Midnight Network is a fourth-generation blockchain platform designed for developers and enterprises requiring cryptographic privacy without compromise. The design system embodies 'Cryptographic Minimalism'—a movement that pairs austere, high-contrast dark interfaces with electric blue accents to convey technical precision, security, and rational transparency. The aesthetic evokes the feeling of accessing a secure vault: stark, purposeful, and unambiguous. Every visual element serves a function; decoration is eliminated in favor of clarity and trust.

The brand voice is direct, technical, and confident without being arrogant. Midnight speaks in the language of cryptography and blockchain infrastructure: 'zero-knowledge proofs,' 'rational privacy,' 'developer-friendly tools.' The tone is measured and authoritative, avoiding hype. Example sentence: 'Midnight brings rational privacy to blockchain by utilizing zero-knowledge proofs to protect sensitive data.'

Colors

The color system is built on a near-black foundation (#0a0a0a surface, #000000 surface-container-lowest) paired with pure white text (#ffffff on-surface) and a signature electric blue primary (#0066ff). This extreme contrast—99% luminance difference—ensures accessibility and conveys the cryptographic rigor of the platform. Primary blue (#0066ff) is reserved exclusively for interactive elements: call-to-action buttons, active navigation states, and focus indicators. It appears on the 'NIGHT' button in the header and all primary CTAs, establishing it as the brand's signature accent. Secondary colors are derived from the dark palette: surface-container-high (#242424) for hover states, outline (#666666) for borders and dividers, and error red (#ff4444) for validation and alerts. The surface st

Typography

The type system uses Outfit, a geometric sans-serif optimized for technical and modern brands, paired with DM Mono for code and monospace contexts. The hierarchy spans from display (60px, 700 weight, -0.03em tracking) for hero statements down to label-sm (12px, 500 weight, 0.04em tracking) for metadata and UI labels. Headline-lg (40px, 600 weight) is used for section titles and major content blocks, while body-md (16px, 400 weight, 24px line-height) serves as the primary reading text. The letter-spacing increases slightly on smaller sizes (label-md: 0.05em, label-sm: 0.04em) to maintain legibility and reinforce the technical aesthetic. All interactive text (buttons, links) uses label-md (14px, 600 weight, 0.05em tracking) with uppercase or title-case treatment. Apply text-shadow: 0 2px 4px

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered on the viewport. Spacing uses an 8px base unit with semantic scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero spacing. The hero section uses full-viewport height with centered content, establishing visual dominance. Navigation is fixed at the top with 24px horizontal gutter and 16px vertical padding. Cards and containers use md (24px) padding with lg (40px) margin between sections. The dark background (#0a0a0a) creates a canvas for content; white space is minimal, with most empty space filled by the background color itself rather than lighter surfaces. Container-max-width of 1280px ens

Elevation & Depth

Depth is conveyed through a restrained shadow system and surface-container progression rather than traditional layering. Level 1 (Base): the background surface (#0a0a0a) with no shadow. Level 2 (Standard Cards/Containers): surface-container (#151515) with 1px border at outline-variant (#404040) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4). Level 3 (Elevated/Modals): surface-container-high (#242424) with 1px border at outline (#666666) and box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5). Hover states apply a 200ms transition to the shadow, lifting the element subtly. Focus states on interactive ele

Shapes

The shape philosophy is 'Technical Precision'—sharp corners for structural elements, full-radius for interactive elements. Buttons use rounded-full (9999px) to create pill-shaped CTAs that feel modern and approachable while maintaining technical credibility. Cards and containers use rounded-lg (1rem / 16px) for a subtle softness that prevents the interface from feeling harsh. Input fields use rounded-DEFAULT (0.5rem / 8px) for a balanced, neutral appearance. Navigation links and list items use rounded-md (0.75rem / 12px) for hover states. The progression from sharp (DEFAULT: 8px) to full-radiu

Components

Action Elements Buttons are the primary interactive element and use a consistent 48px height with 12px vertical and 32px horizontal padding. Primary buttons (#0066ff background, white text, label-md typography, rounded-full) are used for main CTAs like 'ACCEPT,' 'DENY NON-ESSENTIAL,' and 'MANAGE PREFERENCES' in the cookie consent modal. On hover, the background transitions to primary-container (#0052cc) over 200ms with ease-out timing. Secondary buttons use a transparent background with 1px outline (#666666) and on-surface text, transitioning to surface-container-high on hover. All buttons use font-weight: 600 and letter-spacing: 0.05em for emphasis.

Containers & Surfaces Cards use surface-container (#151515) with 1px border at outline-variant (#404040), rounded-lg (16px), and md

Do's and Don'ts

**Do**

Do use primary blue (#0066ff) exclusively for interactive elements—buttons, links, focus states, and active indicators—to create a consistent, scannable interface.
Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) to provide tactile feedback without feeling sluggish.
Do maintain the extreme contrast ratio (near-black #0a0a0a on white #ffffff text) to ensure accessibility and convey cryptographic precision.
Do use the surface-container progression (surface-container → surface-container-high on hover) to create depth without introducing new colors.
Do pair Outfit headlines with 600 weight and -0.02em tracking to create visual tension and sophistication.
Do use rounded-full (9999px) exclusively for buttons to signal interactivity and distinguish them from static containers.

**Don't**

Don't use colors outside the defined palette—no grays, purples, or greens—to maintain the cryptographic minimalism aesthetic.
Don't apply shadows or blur effects to the background; the dark surface (#0a0a0a) is the foundation and should remain flat.
Don't use rounded-full on cards or containers; reserve it for buttons and badges to maintain visual hierarchy.
Don't exceed 200ms transition timing on interactive elements; faster feels snappy, slower feels sluggish.
Don't use text-shadow on small labels (label-sm, label-md) over solid backgrounds; reserve it for body text over gradients.
Don't mix Outfit with system fonts or fallbacks; always specify the Outfit font-family explicitly to maintain brand consistency.

---
version: alpha
name: Midnight Network
description: >-
  Midnight is a fourth-generation blockchain platform bringing rational privacy to Web3 through zero-knowledge proofs.
  The design system reflects cryptographic precision and technical sophistication through a high-contrast dark aesthetic
  with electric blue accents.
logo:
  src: https://midnight.network/safari-pinned-tab.svg
colors:
  surface: '#0a0a0a'
  surface-dim: '#050505'
  surface-bright: '#1a1a1a'
  surface-container-lowest: '#000000'
  surface-container-low: '#0f0f0f'
  surface-container: '#151515'
  surface-container-high: '#242424'
  surface-container-highest: '#2d2d2d'
  on-surface: '#ffffff'
  on-surface-variant: '#e0e0e0'
  inverse-surface: '#f5f5f5'
  inverse-on-surface: '#101010'
  outline: '#666666'
  outline-variant: '#404040'
  surface-tint: '#0066ff'
  primary: '#0066ff'
  on-primary: '#ffffff'
  primary-container: '#0052cc'
  on-primary-container: '#ffffff'
  inverse-primary: '#0052cc'
  secondary: '#1a1a1a'
  on-secondary: '#ffffff'
  secondary-container: '#2d2d2d'
  on-secondary-container: '#ffffff'
  tertiary: '#404040'
  on-tertiary: '#ffffff'
  tertiary-container: '#555555'
  on-tertiary-container: '#ffffff'
  error: '#ff4444'
  on-error: '#ffffff'
  error-container: '#cc0000'
  on-error-container: '#ffffff'
  primary-fixed: '#0066ff'
  primary-fixed-dim: '#0052cc'
  on-primary-fixed: '#ffffff'
  on-primary-fixed-variant: '#e0e0ff'
  secondary-fixed: '#1a1a1a'
  secondary-fixed-dim: '#0f0f0f'
  on-secondary-fixed: '#ffffff'
  on-secondary-fixed-variant: '#e0e0e0'
  tertiary-fixed: '#404040'
  tertiary-fixed-dim: '#2d2d2d'
  on-tertiary-fixed: '#ffffff'
  on-tertiary-fixed-variant: '#d0d0d0'
  background: '#0a0a0a'
  on-background: '#ffffff'
  surface-variant: '#1a1a1a'
typography:
  display:
    fontFamily: Outfit
    fontSize: 60px
    fontWeight: '700'
    lineHeight: 68px
    letterSpacing: '-0.03em'
  headline-lg:
    fontFamily: Outfit
    fontSize: 40px
    fontWeight: '600'
    lineHeight: 48px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: Outfit
    fontSize: 28px
    fontWeight: '600'
    lineHeight: 36px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: Outfit
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
    letterSpacing: 0em
  body-lg:
    fontFamily: Outfit
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0.01em
  body-md:
    fontFamily: Outfit
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0.01em
  label-md:
    fontFamily: Outfit
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Outfit
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.04em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1280px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.3)
  md: 0 4px 12px rgba(0, 0, 0, 0.4)
  lg: 0 16px 40px rgba(0, 0, 0, 0.5)
layout:
  containerMaxWidth: 1280px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 12px 32px
    height: 48px
    border: none
    fontWeight: '600'
  button-primary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    transition: background-color 200ms ease-out
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 12px 32px
    height: 48px
    border: 1px solid {colors.outline}
    fontWeight: '600'
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
    borderColor: '{colors.on-surface-variant}'
    transition: all 200ms ease-out
  card:
    backgroundColor: '{colors.surface-container}'
    rounded: '{rounded.lg}'
    padding: '{spacing.md}'
    border: 1px solid {colors.outline-variant}
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
    boxShadow: '{elevation.md}'
    transition: all 200ms ease-out
  input-field:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
    border: 1px solid {colors.outline-variant}
  input-field-focus:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(0, 102, 255, 0.1)
    transition: all 150ms ease-out
  badge:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    fontWeight: '600'
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    textColor: '{colors.on-surface}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
    transition: all 150ms ease-out
  nav-link:
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    fontWeight: '500'
    padding: 8px 16px
  nav-link-active:
    textColor: '{colors.primary}'
    borderBottom: 2px solid {colors.primary}
    transition: color 200ms ease-out
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons are the primary interactive element and use a consistent 48px height with 12px vertical and 32px horizontal padding. Primary buttons (#0066ff background, white text, label-md typography, rounded-full) are used for main CTAs like 'ACCEPT,' 'DENY NON-ESSENTIAL,' and 'MANAGE PREFERENCES' in the cookie consent modal. On hover, the background transitions to primary-container (#0052cc) over 200ms with ease-out timing. Secondary buttons use a transparent background with 1px outline (#666666) and on-surface text, transitioning to surface-container-high on hover. All buttons use font-weight: 600 and letter-spacing: 0.05em for emphasis.

### Containers & Surfaces
Cards use surface-container (#151515) with 1px border at outline-variant (#404040), rounded-lg (16px), and md

## Do's and Don'ts

**Do**
- Do use primary blue (#0066ff) exclusively for interactive elements—buttons, links, focus states, and active indicators—to create a consistent, scannable interface.
- Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) to provide tactile feedback without feeling sluggish.
- Do maintain the extreme contrast ratio (near-black #0a0a0a on white #ffffff text) to ensure accessibility and convey cryptographic precision.
- Do use the surface-container progression (surface-container → surface-container-high on hover) to create depth without introducing new colors.
- Do pair Outfit headlines with 600 weight and -0.02em tracking to create visual tension and sophistication.
- Do use rounded-full (9999px) exclusively for buttons to signal interactivity and distinguish them from static containers.

**Don't**
- Don't use colors outside the defined palette—no grays, purples, or greens—to maintain the cryptographic minimalism aesthetic.
- Don't apply shadows or blur effects to the background; the dark surface (#0a0a0a) is the foundation and should remain flat.
- Don't use rounded-full on cards or containers; reserve it for buttons and badges to maintain visual hierarchy.
- Don't exceed 200ms transition timing on interactive elements; faster feels snappy, slower feels sluggish.
- Don't use text-shadow on small labels (label-sm, label-md) over solid backgrounds; reserve it for body text over gradients.
- Don't mix Outfit with system fonts or fallbacks; always specify the Outfit font-family explicitly to maintain brand consistency.

Edit, then copy or download.