Axiom DESIGN.md

Observability and log analytics platform with a dark engineering aesthetic — deep navy, cyan data accents, and query-driven UI.

1. Visual Theme & Atmosphere

Axiom is built for engineers who live in logs. The design is dark and data-dense, prioritizing visibility of streams, queries, and time-series visualizations. A deep navy/charcoal palette frames bright cyan accents that highlight active queries, metrics, and data points. The UI is information-rich without feeling cluttered — whitespace is strategic, not generous.

2. Color Palette & Roles

3. Typography Rules

css--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-base: 13px;
--font-size-md: 15px;
--font-size-lg: 18px;
--font-size-xl: 24px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--line-height-tight: 1.25;
--line-height-base: 1.5;
--line-height-code: 1.7;

4. Component Stylings

css/* Primary Button */
.button-primary {
  background: #00D4FF;
  color: #0D1117;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}
.button-primary:hover { background: #00AACF; }

/* Query Input */
.query-input {
  background: #0D1117;
  border: 1px solid #30363D;
  border-radius: 6px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: #E6EDF3;
  width: 100%;
  transition: border-color 0.12s;
}
.query-input:focus {
  outline: none;
  border-color: #00D4FF;
  box-shadow: 0 0 0 3px rgba(0,212,255,0.1);
}

/* Log Row */
.log-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 3px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  border-bottom: 1px solid #21262D;
  cursor: pointer;
}
.log-row:hover { background: #161B22; }
.log-row__timestamp { color: #484F58; flex-shrink: 0; }
.log-row__level--error { color: #F85149; }
.log-row__level--warn { color: #D29922; }
.log-row__level--info { color: #00D4FF; }
.log-row__message { color: #E6EDF3; }

/* Metric Card */
.metric-card {
  background: #161B22;
  border: 1px solid #30363D;
  border-radius: 8px;
  padding: 16px 20px;
}
.metric-card__value {
  font-size: 28px;
  font-weight: 600;
  color: #00D4FF;
  font-family: var(--font-mono);
}
.metric-card__label {
  font-size: 12px;
  color: #8B949E;
  margin-top: 4px;
}

/* Dataset Badge */
.dataset-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  background: rgba(0,212,255,0.12);
  color: #00D4FF;
  border: 1px solid rgba(0,212,255,0.25);
}

5. Layout Principles

6. Depth & Elevation

css.shadow-card { box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.shadow-dropdown { box-shadow: 0 8px 24px rgba(0,0,0,0.6); }
.shadow-tooltip { box-shadow: 0 4px 12px rgba(0,0,0,0.7); }

7. Do's and Don'ts

Do:

• Use monospace font for ALL log output, timestamps, and query fields
• Color-code log levels consistently: cyan=info, green=debug, yellow=warn, red=error
• Surface key metrics in large monospace numbers with cyan color
• Show query syntax highlighting in the query editor

Don't:

• Don't use light backgrounds — they break focus on data
• Don't overload chart colors — stick to the defined 3-color data palette
• Don't truncate log lines by default — let them wrap or scroll
• Don't use the cyan accent for non-interactive decorative purposes

8. Responsive Behavior

9. Agent Prompt Guide

You are designing for Axiom — an observability and log analytics platform.
Use a deep dark background (#0D1117 page, #161B22 cards) inspired by GitHub's dark theme.
Primary accent is bright cyan (#00D4FF) — use for CTAs, active states, and key metrics.
Log lines use monospace 12px with color-coded level indicators (cyan info, yellow warn, red error).
Metric cards display large cyan monospace numbers with small muted labels below.
Charts use a 3-color data palette: cyan, green, coral.
Tone is engineering-dense, data-first, and terminal-adjacent.