Nocturne DESIGN.md Example

What this file renders to

Computed from the file below when this page is built. Open it in the viewer for the full guideline with navigation and diagnostics.

Lint summary

The same checks as the DESIGN.md linter, run on this file at build time. Design system defines 7 colors, 4 typography scales, 4 rounding levels, 4 spacing tokens, 4 components.

• 0 errors
• 3 warnings
• 1 info

• warningorphaned-tokens colors.muted
  'muted' is defined but never referenced by any component.
• warningorphaned-tokens colors.surface-overlay
  'surface-overlay' is defined but never referenced by any component.
• warningorphaned-tokens colors.loss
  'loss' is defined but never referenced by any component.

Copy it, edit it, and use it as a starting point for your own file. Nothing is uploaded.

---
version: alpha
name: Nocturne
description: A dark, high-density trading interface where depth and a single signal color carry the hierarchy.
colors:
  primary: "#7DF9AA"
  ink: "#E6EDF3"
  muted: "#8B98A9"
  surface: "#0B0F17"
  surface-raised: "#141B27"
  surface-overlay: "#1E2836"
  loss: "#FF6B6B"
typography:
  display-lg:
    fontFamily: Sora
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: "-0.02em"
  numeric-xl:
    fontFamily: IBM Plex Mono
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.1
  body-md:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
  label-caps:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: "0.1em"
rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 14px
spacing:
  xs: 4px
  sm: 8px
  base: 16px
  lg: 24px
components:
  panel:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 20px
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.md}"
    height: 40px
    padding: 0 18px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
  ticker-value:
    textColor: "{colors.primary}"
    typography: "{typography.numeric-xl}"
---

## Overview

Nocturne is a trading and analytics interface built for long sessions in low
light. The canvas is near-black so that data, not chrome, emits the light.
One signal green marks gains and the single primary action per view; a muted
red is reserved strictly for losses and destructive intent.

## Colors

- **primary (#7DF9AA):** signal green, used for gains and the one primary action.
- **ink (#E6EDF3):** near-white body and headline text on dark surfaces.
- **surface (#0B0F17):** the deepest canvas, behind every panel.
- **loss (#FF6B6B):** losses and destructive actions only, never decorative.

## Typography

Sora sets display headings, IBM Plex Mono carries every number so that digits
align in dense tables, and Inter handles body copy and uppercase labels.

## Layout

A strict 8px grid governs spacing. Panels sit in a dense grid with 16px gaps.
Numeric columns are right-aligned and set in the monospace face so magnitudes
compare at a glance.

## Elevation & Depth

Depth is built from three surface tones rather than shadows. The base canvas
sits lowest, raised panels lift content one step, and overlays such as menus and
popovers sit highest. A single hairline separates adjacent panels when tone
alone is not enough.

## Do's and Don'ts

- Do reserve signal green for gains and the single primary action per view.
- Do right-align and monospace every numeric value.
- Don't use red for anything except losses and destructive actions.
- Don't add drop shadows; let surface tone carry elevation.

More files: all DESIGN.md examples and templates.