Summit Glow — Style Guide

01 — Color Palette

The Color Story

Void

#080b1a

Abyss

#0d1130

Deep Blue

#131852

Electric

#1a3cff

Cyan

#00d4ff

Violet

#8b5cf6

Magenta

#c026d3

Hot Pink

#e040a0

Ice

#b8e4ff

Ghost

#94a3c8

02 — Gradients

Color Ramps

Hero

Subtle

Cyan → Violet

Violet → Pink

03 — Typography

Type System

Display Heading

Section Heading

Body text uses Outfit at light weight for a clean, modern feel. The muted ghost color keeps long-form content comfortable against deep backgrounds.

const monospace = "JetBrains Mono";

04 — Spacing & Radius

Space & Shape

--space-xs

0.5rem

--space-sm

1rem

--space-md

1.5rem

--space-lg

2.5rem

--space-xl

4rem

sm · 8px

md · 14px

lg · 22px

full

05 — Buttons

Interactive Controls

06 — Form Elements

Form Controls

07 — Cards

Content Cards

⚛

Infrastructure

Scalable distributed systems built on Kubernetes with automated orchestration and self-healing capabilities.

♦

Protocol

Model Context Protocol integration with standardized tool interfaces and seamless server communication.

✶

Intelligence

Neural network architectures with dynamic role specialization and multi-agent coordination layers.

08 — Badges & Tags

Status Indicators

Active Processing Warning Offline MCP v2.0 Production Beta Deprecated Rate Limited Tool Call

09 — CSS Variables

Quick Reference

/* Copy this :root block into your project */
:root {
  --void:        #080b1a;
  --abyss:       #0d1130;
  --deep-blue:   #131852;
  --electric:    #1a3cff;
  --cyan:        #00d4ff;
  --violet:      #8b5cf6;
  --magenta:     #c026d3;
  --hot-pink:    #e040a0;
  --ice:         #b8e4ff;
  --ghost:       #94a3c8;
  --white:       #eef2ff;

  --grad-hero:   linear-gradient(135deg, #1a3cff, #8b5cf6, #c026d3, #e040a0);
  --grad-subtle: linear-gradient(135deg, #131852, #1a2466, #1e1a5c);
}
    

10 — Avatars

User Avatars

SG

EC

MX

RP

TK

EC

SG

MX

RP

TK

+4

11 — Alerts & Toasts

Feedback Components

ℹ

MCP Server Connected

Tool interface established. 14 endpoints registered and ready to receive requests.

⚡

Model Context Limit

Approaching the 128k token window. Consider summarising earlier context to maintain performance.

⚠

Rate Limit Exceeded

API quota reached for this billing period. Requests will resume after the window resets in 47 minutes.

✕

Authentication Failed

The provided API key is invalid or has been revoked. Check your credentials and try again.

✓ Session saved successfully ✕

⚡ New model version available ✕

⚠ Tool call returned an error ✕

12 — Navigation

Nav Bar

13 — Data Tables

Data Display

Model	Context	Status	Latency
claude-opus-4-6	200k	Active	1.2s
claude-sonnet-4-6	200k	Active	0.8s
claude-haiku-4-5	200k	Beta	0.3s
claude-3-opus	200k	Legacy	2.1s