VuNet Systems

---
version: alpha
name: VuNet Systems
description: Transforming data into actionable insights for unparalleled business success.
colors:
  primary: "#ffffff"
  secondary: "#b6207b"
  tertiary: "#fb532c"
  neutral: "#121212"
  border: "#374151"
  brand-consumed-by-fire: "#f37d1d"
  brand-pink-parakeet: "#b25270"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Brittisanstrial
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.2
  headline-md:
    fontFamily: Brittisanstrial
    fontSize: 39px
    fontWeight: 400
    lineHeight: 1.21
  headline-sm:
    fontFamily: Brittisanstrial
    fontSize: 29px
    fontWeight: 400
    lineHeight: 1.26
    letterSpacing: -0.015em
  headline-xs:
    fontFamily: Brittisanstrial
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.19
  body-md:
    fontFamily: Brittisanstrial
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.01em
rounded:
  sm: 8px
spacing:
  xs: 8px
  sm: 20px
  md: 36px
  lg: 46px
  xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: 0px
    padding: 16px 20px
    height: 75px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "#000000"
    rounded: 0px
    padding: 16px 20px
    height: 75px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# VuNet Systems: Dashboard-First Observability, Sold in Deep Indigo

:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #b6207b;
  --color-tertiary: #fb532c;
  --color-neutral: #121212;
  --color-border: #374151;
  --color-brand-consumed-by-fire: #f37d1d;
  --color-brand-pink-parakeet: #b25270;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 52px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.2;
  --text-headline-md-size: 39px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.21;
  --text-headline-sm-size: 29px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.26;
  --text-headline-sm-tracking: -0.015em;
  --text-headline-xs-size: 21px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --text-body-md-tracking: 0.01em;
  --font-brittisanstrial: "Brittisanstrial";

  /* Rounded */
  --radius-sm: 8px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 20px;
  --spacing-md: 36px;
  --spacing-lg: 46px;
  --spacing-xl: 64px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: 0px;
  --button-primary-padding: 16px 20px;
  --button-primary-height: 75px;
  --button-secondary-background-color: var(--color-primary);
  --button-secondary-text-color: #000000;
  --button-secondary-rounded: 0px;
  --button-secondary-padding: 16px 20px;
  --button-secondary-height: 75px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Transforming data into actionable insights for unparalleled business success.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.714,
          0.125,
          0.482
        ],
        "hex": "#b6207b"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.984,
          0.325,
          0.173
        ],
        "hex": "#fb532c"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.071,
          0.071,
          0.071
        ],
        "hex": "#121212"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.216,
          0.255,
          0.318
        ],
        "hex": "#374151"
      }
    },
    "brand-consumed-by-fire": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.953,
          0.49,
          0.114
        ],
        "hex": "#f37d1d"
      }
    },
    "brand-pink-parakeet": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.698,
          0.322,
          0.439
        ],
        "hex": "#b25270"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.071,
          0.071,
          0.071
        ],
        "hex": "#121212"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 36,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 46,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 64,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Brittisanstrial",
        "fontSize": {
          "value": 52,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Brittisanstrial",
        "fontSize": {
          "value": 39,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Brittisanstrial",
        "fontSize": {
          "value": 29,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.015,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Brittisanstrial",
        "fontSize": {
          "value": 21,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Brittisanstrial",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": 0.01,
          "unit": "em"
        }
      }
    }
  }
}