GNexus Design System

All pages in this project follow these rules. When redesigning or creating any page, strictly adhere to them.

Typography

Font: JetBrains Mono (Google Fonts), monospace
Import: @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
Base size: 16px (browser default); use rem for all font sizes
Letter-spacing: 0.04em on headings, 0.02em on labels

Color Palette (Tokyo Night)

Role	Hex
Background	`#1a1b26`
Background dark	`#16161e`
Background card	`#1f2335`
Border default	`#292e42`
Foreground	`#c0caf5`
Foreground dim	`#a9b1d6`
Comment / muted	`#565f89`
Accent blue	`#7aa2f7`
Accent cyan	`#7dcfff`
Accent purple	`#bb9af7`
Success / low usage	`#9ece6a`
Warning / mid usage	`#e0af68`
Error / high usage	`#f7768e`

Component Patterns

Cards / interactive tiles

background-color: #1f2335;
border: 1px solid #292e42;
border-radius: 8px;
transition: border-color 0.2s, box-shadow 0.2s;
/* on hover: */
border-color: #7aa2f7;
box-shadow: 0 0 16px #7aa2f733;

Primary text / headings

color: #7aa2f7;
letter-spacing: 0.04em;

Muted / secondary text

color: #565f89;
font-size: 0.875rem;

Destructive / warning text

color: #f7768e;

Glow on key visuals (logo, icons)

filter: drop-shadow(0 0 18px #7aa2f755);

Tables

border-collapse: collapse;
border-color: #292e42;
/* th: */ color: #7aa2f7; font-weight: 400;
/* td: */ color: #c0caf5;
/* cell padding: */ 6px 10px;

Buttons / floating controls

background-color: #1f2335;
border: 1px solid #292e42;
border-radius: 50%;
fill: #565f89;
/* hover: */
border-color: #7aa2f7;
fill: #7aa2f7;
box-shadow: 0 0 12px #7aa2f744;

Tone & Voice

Code/terminal aesthetic throughout — lowercase labels, // prefixes on section titles, minimal punctuation
Status values use color-coding: green < 60%, yellow 60–85%, red > 85%
No decorative imagery beyond logo and service icons