Nightshift ConsoleDESIGN.md alpha

Nightshift Console is built for the people who keep production alive at 3 a.m.: deployment dashboards, log explorers, incident timelines, CI pipelines and service health boards. The mood is calm, dense and exact. Nothing glows unless it needs attention. The interface lives on near-black graphite. One acid-mint signal color marks what is running, healthy or clickable; amber and coral are reserved for trouble. Numbers, timestamps, commit hashes and log lines are always monospaced, so columns align and the eye can scan fast. Fonts were chosen with full Latin Extended coverage, so Polish, Czech and other Central European diacritics (ą, ę, ł, ż, ř, ů) render correctly in every weight.

primary#3DF5A7
secondary#7AA2FF
tertiary#FFB547
neutral#8A949E
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displaySpace Grotesk · 48 · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headline-lgSpace Grotesk · 32 · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headline-mdSpace Grotesk · 22 · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

titleInter · 16 · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body-lgInter · 16 · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body-mdInter · 14 · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body-smInter · 13 · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

label-mdJetBrains Mono · 12 · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

label-smJetBrains Mono · 11 · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

codeJetBrains Mono · 13 · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

metricJetBrains Mono · 28 · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Corner Radius

0px
4px
6px
10px
9999px

Spacing

Base: 4px
4px
4px
8px
12px
16px
16px
24px
32px
48px
240px

Nightshift Console is built for the people who keep production alive at 3 a.m.: deployment dashboards, log explorers, incident timelines, CI pipelines and service health boards. The mood is calm, dense and exact. Nothing glows unless it needs attention. The interface lives on near-black graphite. One acid-mint signal color marks what is running, healthy or clickable; amber and coral are reserved for trouble. Numbers, timestamps, commit hashes and log lines are always monospaced, so columns align and the eye can scan fast. Fonts were chosen with full Latin Extended coverage, so Polish, Czech and other Central European diacritics (ą, ę, ł, ż, ř, ů) render correctly in every weight.

Components

Buttons

Inputs

Cards

Card Title

Sample body text for the card component.

metric-tile

default

default

default

default

Chips

okwarnerror

Elevation & Depth

surface-raised
surface-overlay

Do's & Don'ts

Do

Keep acid mint for a single primary action and for healthy states only.
Set every number, ID and timestamp in JetBrains Mono.
Use tonal layers and 1px outlines for depth.

Don't

Use drop shadows, gradients or glassmorphism.
Use pure white text or pure black backgrounds.
Color large areas with the signal colors; they are for small, meaningful marks.
Download .md

License CC-BY
Uploaded yesterday
Version v1
File size 8.6 KB
Downloads 1
Copies 0

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/stormcube/nightshift-console and implement it in my code

Don't have the MCP? Install it here