Axiom · Observability Matrix Brand Style Guide
← Color Fonts

Axiom Observability Matrix

Sistema dark-first técnico/glass: casi-negro cálido, ámbar como acción, coral como énfasis y monospace para jerarquía. Densidad de información clara y ritmo de interfaz.

FUENTE: Axiom-Observability-Matrix-DESIGN.md

Typography

Martian Mono + Atkinson Hyperlegible
Heading system
Martian Mono
Specimen · 300 · 48px · ls −0.03em
Body system
Atkinson Hyperlegible
400 · 15.2px / 25px
This is how body text feels at 18px when applied to a real paragraph block.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
01 02 03 04 05 06 07 08 09 0%

Colors

Light accent system
Primary#FFB454
Secondary#FF6B5B
Tertiary#9C937F
Neutral#F2EDE2

Background #FFB454 · Surface #14110B · Text #9C937F / #F2EDE2 · Border #F2EDE2 · Accent #FFB454

Overview

Grid
LayoutGrid
Content widthFull Bleed
FramingGlassy
GridStrong

Buttons

3 styles
PRIMARY → SECONDARY Link ↗
Primary#FFB454 · text #161006 · 999px
Radius / pad999px · 14.72px

Components

Reconstruidos · glass
GET ACCESS → VER MÉTRICAS docs ↗
// signal · uptime
99.98%
window 30d · p95 latency 42ms

Spacing

4px base
Eyebrow
Title block
La copy de descripción refleja la medida de línea, el offset del icono y el espaciado del CTA.
CTA →
Scale
4px5.6px8.8px12.8px14.72px
Gaps · Card padding
8.8px12px16pxcard 15.6–18.2px

Elevation & Depth

Glass

La profundidad se comunica con glass, contraste de borde y recetas de sombra o blur. Mantén esas recetas consistentes en paneles, cards y controles para que la página lea como un solo material.

Técnica · Gradient border shell Borde de gradiente fino alrededor de la card. Shell exterior con 28px de padding y radio 18px, gradiente linear de rgba(20,17,11,0.85) a rgba(12,10,7,0.7), con la superficie real inset a radio menor para que el gradiente quede como hairline.
Surfacergba(20,17,11,.55)
Border1px rgba(242,237,226,.09)
Shadowrgba(255,180,84,.55) 0 6px 28px -8px
Blur8px · 14px

Shapes

Radius family

Sistema de radio ajustado anclado en 12px y escalado en cards, botones y superficies. La geometría de icono se mantiene compatible con esa silueta de suave a controlada.

12px18px999px
Primary radius12px
Icon treatmentLinear

Do's and Don'ts

Guardrails

Do

Usa la paleta primaria como acento principal para énfasis y estados de acción.
Mantén el espaciado alineado al ritmo de 4px.
Reutiliza el tratamiento glass de forma consistente en cards y controles.
Conserva los radios dentro de la familia 12 / 18 / 999px.

Don't

No introduzcas colores de acento fuera de los roles del core salvo un nuevo estado semántico.
No mezcles recetas de sombra o blur ajenas que rompan el sistema de profundidad.
No excedas la intensidad de motion moderada sin una razón deliberada.

Motion

Moderate

El movimiento se siente controlado y dirigido por la interfaz en texto, layout y transiciones de sección. El timing se agrupa en 300–350ms. Easing favorece ease y cubic-bezier(0.19, 1, 0.22, 1). La coreografía de scroll usa parallax.

Motion levelModerate
Durations300ms · 350ms
Easingcubic-bezier(.19,1,.22,1)
ScrollParallax
Generado desde DESIGN.md · branding-design · Axiom Observability Matrix
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-primary: #FFB454;
  --color-secondary: #FF6B5B;
  --color-tertiary: #9C937F;
  --color-neutral: #F2EDE2;
  --color-background: #FFB454;
  --color-surface: #14110B;
  --color-text-primary: #9C937F;
  --color-text-secondary: #F2EDE2;
  --color-border: #F2EDE2;
  --color-accent: #FFB454;
  --font-display: "Martian Mono";
  --font-body: "Martian Mono";
  --radius-md: 0px;
  --radius-full: 999px;
  --space-base: 4px;
  --space-sm: 4px;
  --space-md: 5.6px;
  --space-lg: 8.8px;
  --space-xl: 12.8px;
  --space-gap: 8.8px;
  --space-card-padding: 15.6px;
  --space-section-padding: 27.2px;
}
@theme {
  --color-primary: #FFB454;
  --color-secondary: #FF6B5B;
  --color-tertiary: #9C937F;
  --color-neutral: #F2EDE2;
  --color-background: #FFB454;
  --color-surface: #14110B;
  --color-text-primary: #9C937F;
  --color-text-secondary: #F2EDE2;
  --color-border: #F2EDE2;
  --color-accent: #FFB454;
  --font-display: "Martian Mono";
  --font-body: "Martian Mono";
  --radius-md: 0px;
  --radius-full: 999px;
  --spacing-base: 4px;
  --spacing-sm: 4px;
  --spacing-md: 5.6px;
  --spacing-lg: 8.8px;
  --spacing-xl: 12.8px;
  --spacing-gap: 8.8px;
  --spacing-card-padding: 15.6px;
  --spacing-section-padding: 27.2px;
}
{
  "colors": {
    "primary": "#FFB454",
    "secondary": "#FF6B5B",
    "tertiary": "#9C937F",
    "neutral": "#F2EDE2",
    "background": "#FFB454",
    "surface": "#14110B",
    "text-primary": "#9C937F",
    "text-secondary": "#F2EDE2",
    "border": "#F2EDE2",
    "accent": "#FFB454"
  },
  "typography": {
    "display-lg": {
      "fontFamily": "Martian Mono",
      "fontSize": "40px",
      "fontWeight": "300",
      "lineHeight": "62px",
      "letterSpacing": "-0.03em"
    },
    "body-md": {
      "fontFamily": "Atkinson Hyperlegible",
      "fontSize": "15.2px",
      "fontWeight": "400",
      "lineHeight": "25.08px"
    },
    "label-md": {
      "fontFamily": "Martian Mono",
      "fontSize": "12.16px",
      "fontWeight": "500",
      "lineHeight": "18.848px",
      "letterSpacing": "1.216px"
    }
  },
  "rounded": {
    "md": "0px",
    "full": "999px"
  },
  "spacing": {
    "base": "4px",
    "sm": "4px",
    "md": "5.6px",
    "lg": "8.8px",
    "xl": "12.8px",
    "gap": "8.8px",
    "card-padding": "15.6px",
    "section-padding": "27.2px"
  }
}
---
version: "alpha"
name: "Axiom — Observability Matrix"
description: "Axiom Observability Dashboard Section is designed for demonstrating application workflows and interface hierarchy. Key features include clear information density, modular panels, and interface rhythm. It is suitable for product showcases, admin panels, and analytics experiences."
colors:
  primary: "#FFB454"
  secondary: "#FF6B5B"
  tertiary: "#9C937F"
  neutral: "#F2EDE2"
  background: "#FFB454"
  surface: "#14110B"
  text-primary: "#9C937F"
  text-secondary: "#F2EDE2"
  border: "#F2EDE2"
  accent: "#FFB454"
typography:
  display-lg:
    fontFamily: "Martian Mono"
    fontSize: "40px"
    fontWeight: 300
    lineHeight: "62px"
    letterSpacing: "-0.03em"
  body-md:
    fontFamily: "Atkinson Hyperlegible"
    fontSize: "15.2px"
    fontWeight: 400
    lineHeight: "25.08px"
  label-md:
    fontFamily: "Martian Mono"
    fontSize: "12.16px"
    fontWeight: 500
    lineHeight: "18.848px"
    letterSpacing: "1.216px"
rounded:
  md: "0px"
  full: "999px"
spacing:
  base: "4px"
  sm: "4px"
  md: "5.6px"
  lg: "8.8px"
  xl: "12.8px"
  gap: "8.8px"
  card-padding: "15.6px"
  section-padding: "27.2px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#161006"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "14.72px"
  button-secondary:
    textColor: "{colors.tertiary}"
    rounded: "{rounded.full}"
    padding: "8.8px"
  button-link:
    textColor: "{colors.tertiary}"
    rounded: "{rounded.md}"
    padding: "4px"
  card:
    rounded: "{rounded.md}"
    padding: "18.2px"
---

## Overview

- **Composition cues:**
  - Layout: Grid
  - Content Width: Full Bleed
  - Framing: Glassy
  - Grid: Strong

## Colors

The color system uses light mode with #FFB454 as the main accent and #F2EDE2 as the neutral foundation.

- **Primary (#FFB454):** Main accent and emphasis color.
- **Secondary (#FF6B5B):** Supporting accent for secondary emphasis.
- **Tertiary (#9C937F):** Reserved accent for supporting contrast moments.
- **Neutral (#F2EDE2):** Neutral foundation for backgrounds, surfaces, and supporting chrome.

- **Usage:** Background: #FFB454; Surface: #14110B; Text Primary: #9C937F; Text Secondary: #F2EDE2; Border: #F2EDE2; Accent: #FFB454

## Typography

Typography pairs Martian Mono for display hierarchy with Atkinson Hyperlegible for supporting content and interface copy.

- **Display (`display-lg`):** Martian Mono, 40px, weight 300, line-height 62px, letter-spacing -0.03em.
- **Body (`body-md`):** Atkinson Hyperlegible, 15.2px, weight 400, line-height 25.08px.
- **Labels (`label-md`):** Martian Mono, 12.16px, weight 500, line-height 18.848px, letter-spacing 1.216px.

## Layout

Layout follows a grid composition with reusable spacing tokens. Preserve the grid, full bleed structural frame before changing ornament or component styling. Use 4px as the base rhythm and let larger gaps step up from that cadence instead of introducing unrelated spacing values.

Treat the page as a grid / full bleed composition, and keep that framing stable when adding or remixing sections.

- **Layout type:** Grid
- **Content width:** Full Bleed
- **Base unit:** 4px
- **Scale:** 4px, 5.6px, 8.8px, 12.8px, 14.72px, 15.2px, 16px, 17.6px
- **Section padding:** 27.2px, 37.49px
- **Card padding:** 15.6px, 18.2px, 28px
- **Gaps:** 8.8px, 9.6px, 12px, 16px

## Elevation & Depth

Depth is communicated through glass, border contrast, and reusable shadow or blur treatments. Keep those recipes consistent across hero panels, cards, and controls so the page reads as one material system.

Surfaces should read as glass first, with borders, shadows, and blur only reinforcing that material choice.

- **Surface style:** Glass
- **Borders:** 1px #F2EDE2; 1px #FFB454
- **Shadows:** rgba(255, 180, 84, 0.043) 0px 0px 180px 0px inset; rgba(255, 180, 84, 0.8) 0px 0px 14px 0px; rgba(255, 180, 84, 0.55) 0px 6px 28px -8px
- **Blur:** 8px, 14px

### Techniques
- **Gradient border shell:** Use a thin gradient border shell around the main card. Wrap the surface in an outer shell with 28px padding and a 18px radius. Drive the shell with linear-gradient(rgba(20, 17, 11, 0.85), rgba(12, 10, 7, 0.7)) so the edge reads like premium depth instead of a flat stroke. Keep the actual stroke understated so the gradient shell remains the hero edge treatment. Inset the real content surface inside the wrapper with a slightly smaller radius so the gradient only appears as a hairline frame.

## Shapes

Shapes rely on a tight radius system anchored by 12px and scaled across cards, buttons, and supporting surfaces. Icon geometry should stay compatible with that soft-to-controlled silhouette.

Use the radius family intentionally: larger surfaces can open up, but controls and badges should stay within the same rounded DNA instead of inventing sharper or pill-only exceptions.

- **Corner radii:** 12px, 18px, 999px

## Components

Anchor interactions to the detected button styles. Reuse the existing card surface recipe for content blocks.

### Buttons
- **Primary:** background #FFB454, text #161006, radius 999px, padding 14.72px, border 0px none rgb(22, 16, 6).
- **Secondary:** text #9C937F, radius 999px, padding 8.8px, border 1px solid rgba(242, 237, 226, 0.09).
- **Links:** text #9C937F, radius 0px, padding 4px, border 0px none rgb(156, 147, 127).

### Cards and Surfaces
- **Card surface:** background rgba(20, 17, 11, 0.55), border 1px solid rgba(242, 237, 226, 0.09), radius 0px, padding 18.2px, shadow none, blur 8px.
- **Card surface:** border 1px solid rgba(242, 237, 226, 0.09), radius 12px, padding 15.6px, shadow none.

## Do's and Don'ts

Use these constraints to keep future generations aligned with the current system instead of drifting into adjacent styles.

### Do
- Do use the primary palette as the main accent for emphasis and action states.
- Do keep spacing aligned to the detected 4px rhythm.
- Do reuse the Glass surface treatment consistently across cards and controls.
- Do keep corner radii within the detected 12px, 18px, 999px family.

### Don't
- Don't introduce extra accent colors outside the core palette roles unless the page needs a new semantic state.
- Don't mix unrelated shadow or blur recipes that break the current depth system.
- Don't exceed the detected moderate motion intensity without a deliberate reason.

## Motion

Motion feels controlled and interface-led across text, layout, and section transitions. Timing clusters around 300ms and 350ms. Easing favors ease and cubic-bezier(0.19. Scroll choreography uses Parallax for section reveals and pacing.

**Motion Level:** moderate

**Durations:** 300ms, 350ms, 900ms, 3200ms, 1600ms, 9000ms

**Easings:** ease, cubic-bezier(0.19, 1, 0.22, 1), ease-in-out

**Scroll Patterns:** parallax