# Nightwatch.laravel Design System

> A high-density, dark-canvas observability interface driven by strict monospace data tables and stark white typography.

**Source:** https://nightwatch.laravel.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Nightwatch operates on a high-contrast monochrome system built for technical density. The primary foundation relies on `#ffffff` text against deep backgrounds, structured by subtle `#232323` borders and low-opacity surfaces like `oklab(0.205 0 0 / 0.5)`. Typography pairs Instrument Sans for structural hierarchy with `ui-monospace` for dense data logs and captions. The aesthetic is highly technical, utilizing 1px borders and tight 4px-based spacing to organize complex telemetry data without relying on heavy shadows or saturated colors.

## Signature DNA
1. **Technical Monospace Density** (Widespread use of `ui-monospace` down to 10px and 12px for logs, timestamps, and data points, reinforcing the developer-tool nature; seen across all analyzed pages).
2. **Achromatic Contrast** (Heavy reliance on `#ffffff` for text and `#232323` for structural borders, avoiding saturated colors except for specific `#972c3e` accents; seen in global computed styles).
3. **Subtle Surface Layering** (Cards and surfaces use extremely low-opacity white borders like `oklab(0.999994 0.0000455678 0.0000200868 / 0.05)` to create depth without relying on heavy elevation; seen in primary surface components).

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-white` | `#ffffff` | Text, borders, button text | 114 | 1.0 | css_variable |
| `--color-black` | `#000000` | Declared base | 0 | N/A | css_variable |
| `color-border-dark` | `#232323` | Structural borders | 5 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-accent-red` | `#972c3e` | Surface backgrounds | 46 | 0.8 | computed_style |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Instrument Sans | 300, 400, 500, 600 | Heading, Body | Inter | OFL |
| Inter | 300, 400, 500, 600 | Heading, Body-sm | Inter | OFL |
| ui-monospace | 200, 300, 400, 500, 600 | Mono, Caption | JetBrains Mono | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-lg` | 96px | 96px | -2.4px | 500 | Hero headings | `h1.text-center.text-5xl` |
| `display-md` | 48px | 48px | -0.96px | 500 | Section headings | `h2.text-3xl.font-medium` |
| `heading-sm` | 24px | 32px | normal | 600 | Card titles | `div.text-white.text-2xl` |
| `heading-xs` | 20px | 28px | -1% | 500 | Sub-section titles | `h3.text-xl.font-medium` |
| `body-lg` | 18px | 28px | normal | 500 | Lead paragraphs | `div.justify-start.text-lg` |
| `body-base` | 16px | 24px | normal | 400 | Default body | `header.relative.w-full` |
| `body-sm` | 14px | 21px | -1% | 400 | Secondary text | `div.font-small-normal.relative` |
| `caption-mono` | 12px | 16px | -1% | 400 | Metadata, logs | `span.truncate.text-xs` |
| `micro-mono` | 10px | 10px | -1% | 200 | Timestamps | `div.flex.items-center` |

### Principles
- **Negative tracking on display.** Instrument Sans pulls tight at large sizes (-2.4px at 96px, -0.96px at 48px) to maintain structural density.
- **Monospace for metadata.** `ui-monospace` is strictly applied to technical data, logs, and timestamps at 10px to 14px sizes.
- **Weight restraint.** Headings rarely exceed weight 600, relying on size and contrast against the dark canvas for hierarchy rather than extreme boldness.

## Spacing
**Base unit:** 4px

| Token | Value | Occurrences |
|---|---|---|
| `space-2` | 2px | 21 |
| `space-4` | 4px | 34 |
| `space-6` | 6px | 34 |
| `space-8` | 8px | 69 |
| `space-10` | 10px | 61 |
| `space-12` | 12px | 19 |
| `space-16` | 16px | 158 |
| `space-20` | 20px | 28 |
| `space-24` | 24px | 80 |
| `space-32` | 32px | 26 |
| `space-40` | 40px | 7 |
| `space-48` | 48px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Sharp surfaces, structural panels | 650 occurrences |
| `radius-sm` | 4px | Small inputs | 8 occurrences |
| `radius-md` | 6px | Standard inputs, inner cards | 106 occurrences |
| `radius-lg` | 8px | Controls | 15 occurrences |
| `radius-xl` | 12px | Primary surfaces, buttons | 73 occurrences |
| `radius-2xl` | 16px | Large feature cards | 12 occurrences |
| `radius-pill` | 9999px | Badges, status indicators | 32 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `shadow-sm` | `rgba(0, 0, 0, 0) 0px 0px 0px 0px... rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` | Subtle interactive states | 5 occurrences |
| `shadow-lg` | `rgba(0, 0, 0, 0) 0px 0px 0px 0px... rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` | Elevated modals or dropdowns | 3 occurrences |

## Components

### Tier 1: Foundational

#### Transparent Surface
**Role:** Base container for content blocks requiring subtle separation.
**Pages observed:** https://nightwatch.laravel.com, https://nightwatch.laravel.com/pricing
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `oklch(0.922 0 0)` / Border `oklab(0.999994 0.0000455678 0.0000200868 / 0.05)` (1px) / Radius 12px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Disabled: not captured

#### Rounded Button
**Role:** Primary interactive trigger.
**Pages observed:** https://nightwatch.laravel.com, https://nightwatch.laravel.com/pricing
**Spec:** Background `oklab(0.205 0 0 / 0.5)` / Text `oklch(0.922 0 0)` / Border 0px / Radius 12px / Padding 24px / Typography 16px / Shadow none
**States observed:** Default | Disabled: not captured

#### Sharp Surface
**Role:** Flush structural panels and grid items.
**Pages observed:** https://nightwatch.laravel.com, https://nightwatch.laravel.com/pricing
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `oklch(0.922 0 0)` / Border `oklab(0.999994 0.0000455678 0.0000200868 / 0.05)` (1px) / Radius 0px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Disabled: not captured

*(Note: Only components observed on multiple pages are documented to ensure systemic validity.)*

## Layout
| Property | Value |
|---|---|
| Max-width | Not captured in source |
| Grid | Not captured in source |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | Not captured in source | Not captured in source |

## Imagery & decoration
The brand avoids lifestyle photography entirely. Visual interest is generated through high-fidelity data visualizations, code snippets, log tables, and telemetry graphs. Decoration is limited to subtle 1px borders and low-opacity surface fills to maintain a strict, developer-focused aesthetic.

## Do's
- Do use `ui-monospace` for all technical data, logs, and timestamps.
- Do apply negative tracking (-0.96px to -2.4px) to Instrument Sans at display sizes (48px+).
- Do use low-opacity white borders (`oklab(0.999994 0.0000455678 0.0000200868 / 0.05)`) to define card edges on dark backgrounds.
- Do maintain high contrast for primary text using `#ffffff`.
- Do use 0px radius for structural, full-bleed panels.

## Don't
- **Wrong:** Using `#972c3e` for primary typography. **Right:** Using `#ffffff` for primary typography. **Reason:** Red is reserved strictly for accent surfaces and alerts, not reading text.
- **Wrong:** Mixing Inter and Instrument Sans within the same heading hierarchy. **Right:** Using Instrument Sans for all major display headings. **Reason:** Instrument Sans provides the structural signature; Inter is a fallback or small-body utility.
- **Wrong:** Applying heavy drop shadows to standard cards. **Right:** Using 1px subtle borders for definition. **Reason:** The system relies on flat, border-driven hierarchy rather than deep elevation.

## Similar brands
- Vercel
- Linear
- Raycast

## Quick start

```css
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-border-dark: #232323;
  --color-accent-red: #972c3e;
  
  --font-heading: 'Instrument Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
```

## Agent prompt examples
- "Create a data log table using `ui-monospace` at 12px for the content, with a 1px border of `oklab(0.999994 0.0000455678 0.0000200868 / 0.05)` and a 12px border radius."
- "Build a hero section with an Instrument Sans `h1` at 96px (-2.4px letter spacing) and a primary rounded button with `oklab(0.205 0 0 / 0.5)` background."
- "Design a structural panel using 0px border radius, `#232323` borders, and `#ffffff` text."

## Known gaps
Layout max-widths, grid columns, and specific responsive breakpoints were not captured in the source evidence. Hover and focus states for interactive components were also not recorded in the computed styles.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://nightwatch.laravel.com | Desktop | 2026-06-06T05:01:46.765Z |
| Pricing | https://nightwatch.laravel.com/pricing | Desktop | 2026-06-06T05:01:46.765Z |